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
INV001PendingCredit Card$422.48
INV002UnpaidPayPal$188.39
INV003UnpaidBank Transfer$648.13
INV004PaidCredit Card$661.62
INV005PendingBank Transfer$761.08
INV006PendingBank Transfer$305.04
INV007PendingBank Transfer$995.19
Total$3,981.93

Simple

Users

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

NameTitleEmailRoleActions
Sandy CrooksInvestor Intranet Agentsandy_crooks@hotmail.comViewer
Adah LoweInternal Branding Produceradah.lowe@yahoo.comAdmin
Sister ProsaccoInternational Creative Developersister_prosacco88@yahoo.comMember
Dewitt LindInvestor Markets Developerdewitt_lind1@hotmail.comAdmin
Connor KshlerinForward Interactions Analystconnor.kshlerin9@gmail.comMember
Asia WittingCorporate Factors Facilitatorasia.witting@gmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Federico Deckow

Principal Paradigm Orchestrator

federico.deckow45@hotmail.com

Admin

Jacklyn Ritchie

International Data Producer

jacklyn_ritchie@gmail.com

Viewer

Broderick Daugherty

Legacy Accounts Associate

broderick_daugherty@gmail.com

Admin

Jacinthe Wiegand

Future Group Developer

jacinthe_wiegand36@gmail.com

Member

Jaqueline Little

Future Interactions Planner

jaqueline_little65@yahoo.com

Admin

Danyka Fahey

Product Usability Representative

danyka_fahey@yahoo.com

Viewer

Users

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

NameRoleActions

Betty Bruen

International Research Assistant

betty.bruen@yahoo.com

Admin

Omer Ortiz

Senior Web Specialist

omer_ortiz78@hotmail.com

Member

Joan Sipes

Future Infrastructure Engineer

joan_sipes28@gmail.com

Admin

Bailee Will

Forward Group Facilitator

bailee.will80@gmail.com

Admin

Lenora Predovic

Central Security Designer

lenora_predovic44@hotmail.com

Admin

Annabelle Kuphal

Global Applications Associate

annabelle_kuphal@hotmail.com

Admin

Bart Ernser

Chief Directives Agent

bart.ernser@hotmail.com

Member

Dedric Bailey

International Response Assistant

dedric.bailey@gmail.com

Viewer

Conner Donnelly

District Response Designer

conner.donnelly33@hotmail.com

Admin

Jamir Lebsack

Internal Mobility Coordinator

jamir_lebsack@gmail.com

Admin

Rudy Emmerich-Turner

Human Mobility Administrator

rudy.emmerich-turner@yahoo.com

Viewer

Antonio Willms

Legacy Branding Representative

antonio_willms17@yahoo.com

Member

Myrna McKenzie

National Infrastructure Facilitator

myrna.mckenzie@hotmail.com

Member

Millie Bailey

Principal Communications Representative

millie_bailey70@yahoo.com

Member

Gladyce Ratke

Legacy Infrastructure Designer

gladyce_ratke59@gmail.com

Admin

Jannie Doyle

National Brand Supervisor

jannie_doyle64@hotmail.com

Viewer

Giovanna Brakus

Legacy Factors Engineer

giovanna.brakus85@hotmail.com

Admin

Tyrel Torp

Investor Applications Engineer

tyrel.torp@hotmail.com

Member

Margaretta Kling

International Functionality Facilitator

margaretta_kling74@gmail.com

Admin

Annalise Kemmer

Forward Mobility Facilitator

annalise.kemmer@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
Nichole Gibsonneal_stokes10@gmail.comCovinaActive$938.95
Thomas Stark-Faheypat85@gmail.comBrownsvilleActive$295.03
Evelyn Hamilltatum_balistreri94@gmail.comNorth OdellActive$294.44
Dean Bashirian MDvirgie_weber36@yahoo.comVonbergInactive$460.25
Kristen Brakusjustyn57@gmail.comTreverstadActive$765.60
Total$2,754.27

Basic table

Table with Images

NameEmailLocationStatusBalance
Kim Prohaska MD
@mona.satterfield
augusta.leffler@gmail.comPascalelandInactive$1,163.10
Dr. Joel Ondricka
@clifford_hirthe40
millie.kirlin76@hotmail.comRaquelfortInactive$843.52
Bradley Stiedemann
@marta.walsh64
trinity_rodriguez9@gmail.comBatzstadInactive$704.01
Dan Heidenreich
@tamia_roob9
telly_langosh74@hotmail.comNorth CedrickviewActive$114.54
Joey Blanda
@colby.windler
kristin43@gmail.comNicolassteadInactive$548.10

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Javier Denesik-Mantepatricia.monahan61@gmail.comNapaInactive$838.64
Preston Kassulkeemerald.stokes78@yahoo.comFort AlanInactive$1,178.62
Clark Beckerpaige.schaefer@hotmail.comWittingportInactive$1,168.21
Dr. Mack Schmidtforest.renner25@yahoo.comStrongsvilleInactive$19.45
Angelina Abernathymaxie.littel-macgyver84@yahoo.comSouth WilbertsteadActive$1,113.24
Total$4,318.16

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Dexter Smithamarvilla77@hotmail.comSpring HillInactive$798.02
Doris Wymanadell.mosciski91@yahoo.comWilmerstadActive$23.34
Arnold Shanahanvalentina65@gmail.comSouth DelphaInactive$345.84
Naomi Kuphaldeondre_kemmer@gmail.comSporertonActive$92.36
Francis Monahanveda.langworth@yahoo.comFindlayInactive$1,188.75
Total$2,448.31

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Raquel Hellershanny.daugherty23@yahoo.comBinsfieldInactive$816.77
Hubert Bosco PhDgrayson.bailey86@yahoo.comScrantonInactive$889.65
Spencer Tromprafael.muller82@gmail.comAngelastadInactive$976.15
Francis Runolfsdottirmartina.ferry-kunze51@gmail.comSouth TessInactive$809.30
Alice Barrowsalvina.frami@gmail.comSouth DemarcoviewInactive$509.04
Total$4,000.91

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
Blanca Kleinbetty20@hotmail.comWestfieldInactive$819.82
Doyle Jacobiclark.stoltenberg62@yahoo.comMcClureportInactive$544.73
Marcia Rolfsonirwin.bergnaum81@yahoo.comPetalumaInactive$807.07
Angela Barrows IIImelyssa_shanahan@gmail.comWest ThomascesterActive$1,109.31
Clarence Lindgrenwebster.cassin33@hotmail.comNoviInactive$521.45
Total$3,802.38

Table with row selection

Card Table

NameEmailLocationStatusBalance
Ed Tillmanjovanny.barrows-hagenes@gmail.comFort ClaudeActive$809.57
Albert Gulgowskishana_rippin@gmail.comKittybergInactive$962.54
Angelo Wildermanlillian55@hotmail.comWest AriannatownInactive$553.32
May Wuckertantone.okuneva@gmail.comJaniceshireInactive$737.93
Rhonda Hintz-Zboncakangel88@hotmail.comLake TheresiaburghActive$941.82
Total$4,005.18

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
Loretta Balistrerieryn_lakin21@gmail.comDes PlainesInactive$894.22
Edmond Greenholtjolie.mosciski48@yahoo.comRochester HillsActive$498.91
Cody Romagueraorville5@hotmail.comBergnaumfortInactive$963.81
Richard Wardmarcelle.kiehn22@yahoo.comMertzmouthActive$223.67
Gwen Olson-Breitenbergdoris72@yahoo.comCourtneyfurtInactive$616.81
Lionel Schmittroosevelt.bins83@gmail.comEast DarrinActive$1,025.44
Rickey Ziemereagan6@hotmail.comUniversityActive$423.17
Ms. Jodi Ricewilhelm_russel22@hotmail.comNew ElmerInactive$900.99
Darla Hansengerry.hills48@gmail.comAbshireboroActive$621.69
Marguerite Pacochabrigitte_labadie1@hotmail.comReichelfieldActive$884.74
Jan Pollich-Haagjose.mohr@yahoo.comHumbertoshireActive$926.50
April Stantondaniella.hilll@gmail.comBoscofurtInactive$1,026.25
Marvin Glover MDarvel_hermiston12@hotmail.comBentonvilleActive$458.53
Lillie Treuteldavonte.romaguera11@gmail.comEast ElsievilleActive$311.35
Hannah Pacocha-VonRueden Sr.kellen16@yahoo.comCuyahoga FallsInactive$145.70
Total$9,921.78

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