Table

A responsive table component.

Source code

Click here to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

Installation

npx ui-thing@latest add table

Usage

Basic example

A list of your recent invoices.
InvoiceStatusMethodAmount
INV001UnpaidCredit Card$953.63
INV002PendingCredit Card$680.37
INV003PendingBank Transfer$689.87
INV004UnpaidPayPal$887.94
INV005PaidPayPal$203.31
INV006PendingCredit Card$948.98
INV007UnpaidPayPal$447.94
Total$4,812.04

Simple

Users

A list of all the users in your account including their name, title, email and role.

NameTitleEmailRoleActions
Odessa ParkerSenior Infrastructure Managerodessa.parker3@yahoo.comAdmin
Antoinette JohnstonLead Marketing Executiveantoinette_johnston@hotmail.comViewer
Darrin HegmannCustomer Integration Strategistdarrin_hegmann64@yahoo.comMember
Melody EmmerichDirect Optimization Liaisonmelody.emmerich@hotmail.comAdmin
Aliya DickinsonInvestor Data Liaisonaliya.dickinson6@yahoo.comViewer
Andrew AnkundingRegional Mobility Developerandrew_ankunding55@hotmail.comMember

Stacked on mobile

Users

A list of all the users in your account including their name, title, email and role.

NameRoleActions

Selina Grady

Direct Usability Associate

selina_grady@gmail.com

Member

Rahsaan Jakubowski

Chief Implementation Director

rahsaan.jakubowski39@gmail.com

Viewer

Marcella Jacobson

Dynamic Program Technician

marcella.jacobson42@hotmail.com

Viewer

Jefferey Wiza

Customer Configuration Designer

jefferey_wiza47@gmail.com

Viewer

Jennifer Grimes

Customer Response Manager

jennifer.grimes@gmail.com

Viewer

Carlee Heathcote-Rodriguez

Internal Factors Coordinator

carlee.heathcote-rodriguez@gmail.com

Member

Users

A list of all the users in your account including their name, title, email and role.

NameRoleActions

Uriel Hilll

Corporate Identity Officer

uriel.hilll@hotmail.com

Member

Annabell Kohler

Dynamic Functionality Analyst

annabell_kohler27@yahoo.com

Member

Catalina Block

Internal Research Producer

catalina_block@yahoo.com

Member

Giovanni Bode

Central Paradigm Technician

giovanni.bode3@yahoo.com

Admin

Tyler O'Hara

Product Mobility Designer

tyler_ohara@yahoo.com

Admin

Damon Stehr

Direct Optimization Supervisor

damon_stehr95@yahoo.com

Viewer

Zack Weber

International Identity Representative

zack.weber@yahoo.com

Member

Riley Mosciski

Lead Factors Analyst

riley_mosciski@gmail.com

Viewer

Aracely Larson

Future Research Analyst

aracely.larson68@yahoo.com

Admin

Eleanore Streich

Central Division Engineer

eleanore.streich55@gmail.com

Admin

Maegan Maggio

District Usability Assistant

maegan_maggio54@yahoo.com

Member

Kelsie Jones

Principal Usability Associate

kelsie.jones82@gmail.com

Member

Domingo Ruecker

Product Research Analyst

domingo_ruecker@gmail.com

Member

Kayden Kassulke

Regional Intranet Analyst

kayden.kassulke0@hotmail.com

Admin

Lela Marvin

Forward Security Director

lela.marvin@gmail.com

Member

Justen Vandervort

Human Integration Facilitator

justen.vandervort@yahoo.com

Viewer

Augustus Mitchell

Investor Marketing Officer

augustus_mitchell45@hotmail.com

Admin

Amani Howell

Regional Applications Consultant

amani_howell@gmail.com

Member

Berniece Halvorson-Lesch

Product Program Developer

berniece_halvorson-lesch@yahoo.com

Viewer

Troy Zulauf-Crona

International Solutions Orchestrator

troy_zulauf-crona93@hotmail.com

Viewer

Origin UI Examples

These are some examples that I found today over here Origin UI ❤️. I think they are cool.

To use these examples you will have to copy the code and adjust it for your own use.

Basic Table

NameEmailLocationStatusBalance
Ada Konopelski MDjacquelyn97@yahoo.comCletastadInactive$49.59
Latoya Blockorpha_ritchie@gmail.comNorth RebecaActive$180.89
Hugo Ziemanntrent_cormier@yahoo.comFort AkeemboroughInactive$1,142.46
Spencer Koelpin IVselina.harris1@yahoo.comMaggioboroInactive$873.54
Wilma Rutherford Vnels53@gmail.comComptonActive$534.37
Total$2,780.85

Basic table

Table with Images

NameEmailLocationStatusBalance
Dr. Devin Anderson-Hirthe
@margaretta.emard9
euna_kuvalis@hotmail.comSouth KaitlinchesterInactive$431.37
Dr. Melba Satterfield
@virgie_thiel97
dejuan.mann@hotmail.comHamiltonActive$484.69
Carla Towne
@astrid63
soledad_cassin@gmail.comEast KatharinaInactive$1,167.98
Kate Bayer
@harrison.rosenbaum
vidal.stroman81@gmail.comLebsackboroughActive$386.02
Doyle Schneider
@nannie_schumm76
joshuah_dickens69@yahoo.comNorth HighlandsInactive$899.23

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Jon Nienowbuford25@yahoo.comFort TerranceInactive$729.73
Randy Sanfordbrown.howe70@yahoo.comSan MarcosActive$727.57
Tomas Tillmansonya.kuvalis@hotmail.comMilpitasActive$497.57
Miss Ana Crooksclara_beier66@hotmail.comNorth BrennanActive$880.30
Hattie Fadel-Stantongwen84@hotmail.comDaytonActive$550.79
Total$3,385.96

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Raquel Reynoldshaleigh_jast8@yahoo.comAllenActive$1,174.54
Curtis Rohankylee.schamberger@yahoo.comNorth LaceyburghInactive$9.71
Danielle Ankundinganna_zieme@hotmail.comDearbornInactive$219.76
Annie Cartwrightsammie.shanahan63@yahoo.comWest CotyInactive$567.49
Sandy Breitenbergprovidenci_langosh@gmail.comCincinnatiInactive$1,114.81
Total$3,086.31

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Shannon Smithamheber30@hotmail.comSouth HillInactive$866.43
Dr. Ernestine Botsfordnoe32@hotmail.comPort ZionstadActive$451.64
Travis Schaden DVMdomenico.parisian@yahoo.comKlockochesterInactive$682.79
Philip Bahringerjohann5@hotmail.comWichita FallsInactive$213.29
Kristy Hettingerbrennan36@hotmail.comEl CentroInactive$157.66
Total$2,371.81

Table with vertical lines

Dense Table

NameRelease YearDeveloperTypingParadigmExtensionLatest VersionPopularity
JavaScript1995Brendan EichDynamicMulti-paradigm.jsES2021High
Python1991Guido van RossumDynamicMulti-paradigm.py3.10High
Java1995James GoslingStaticObject-oriented.java17High
C++1985Bjarne StroustrupStaticMulti-paradigm.cppC++20High
Ruby1995Yukihiro MatsumotoDynamicMulti-paradigm.rb3.0Low

Dense table

Row Selection

NameEmailLocationStatusBalance
Rudy Simonis DDSconstantin_wuckert64@gmail.comWehnermouthActive$6.89
Dr. Jessie Goyettebernard_wintheiser@hotmail.comMesquiteInactive$405.24
Willie Westamos31@yahoo.comBustervilleActive$1,014.01
Maryann Marvinedwin_franey48@yahoo.comFort MateoActive$8.29
Gilbert Donnellymustafa.ernser@hotmail.comCrooksportInactive$4.02
Total$1,438.45

Table with row selection

Card Table

NameEmailLocationStatusBalance
Bridget Wiegandernie_dickens50@yahoo.comLafayetteActive$871.54
Ida Hillsisac3@yahoo.comNashville-DavidsonActive$903.36
Adrian Townedavon_brekke@gmail.comMurphyfurtActive$790.61
Freda Collinslottie29@yahoo.comBountifulActive$641.89
Patrick Keeblerorrin.murray77@gmail.comNew RubieInactive$991.35
Total$4,198.75

Table with row selection

Vertical Table

NameDavid Kim
Emaild.kim@company.com
LocationSeoul, KR
StatusActive
Balance$1,000.00

Vertical table

Sticky Header 2

NameEmailLocationStatusBalance
Brendan Yostmason.hyatt@hotmail.comHarbershireInactive$369.59
Marvin Schultzjayme.dicki@gmail.comEast AustynActive$1,132.72
Elizabeth Andersonwillis50@hotmail.comLake CandidovilleInactive$486.31
Israel Welchbenny.mitchell67@yahoo.comNorth KorbinActive$636.59
Richard Stammvivien25@hotmail.comPort ArthurActive$130.84
Karen Mayertholden.luettgen@hotmail.comKihnsideInactive$915.32
Gerard Beckerquincy.ebert@gmail.comLangworthtonActive$357.82
Nadine Farrell-Lehnerjovanny_damore@gmail.comLoniefieldInactive$917.12
Margarita Schumm-Huelslauren10@gmail.comFort SonyavilleActive$825.58
Gene Mitchellmonserrate.ryan49@yahoo.comSengershireActive$669.00
Sergio Homenick Sr.emmanuel_bode79@yahoo.comHermansideInactive$1,088.65
Ed Parisianrosella_torphy@gmail.comTroyActive$765.72
Jana Cummeratataryn.stracke@hotmail.comCoconut CreekInactive$386.69
Kristen Mayerfaustino_rice@hotmail.comBaumbachtownInactive$646.85
Leonard McCulloughkathryn75@yahoo.comSouth MillieActive$997.47
Total$10,326.27

Table with sticky header

Browser Support

Desktop browsersMobile browsers
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox AndroidOpera AndroidSafari iOSSamsung Internet
scroll-timelineSupported
115
Supported
115
Not supported
111
Supported
101
Not supported
No
Supported
115
Not supported
No
Supported
77
Not supported
No
Supported
23
view-timelineSupported
115
Supported
115
Not supported
114
Supported
101
Not supported
No
Supported
115
Not supported
No
Supported
77
Not supported
No
Supported
23
font-size-adjustSupported
127
Supported
127
Not supported
3
Supported
113
Supported
16.4
Supported
127
Supported
4
Supported
84
Supported
16.4
Not supported
No