Table

A responsive table component.

Source code

Click 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$496.92
INV002UnpaidBank Transfer$185.60
INV003UnpaidBank Transfer$403.09
INV004UnpaidBank Transfer$749.01
INV005UnpaidCredit Card$220.74
INV006PaidPayPal$481.07
INV007PendingBank Transfer$422.73
Total$2,959.16

Simple

Users

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

NameTitleEmailRoleActions
Tianna JohnsonInternal Operations Associatetianna.johnson@yahoo.comAdmin
Hyman KuhlmanSenior Functionality Managerhyman.kuhlman@hotmail.comMember
Graham Fadel-WindlerDirect Security Representativegraham_fadel-windler3@gmail.comMember
Daisha CormierCentral Operations Designerdaisha_cormier@hotmail.comMember
Michael WittingDistrict Solutions Managermichael.witting18@gmail.comMember
Abbie WilkinsonDistrict Quality Supervisorabbie.wilkinson@yahoo.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Eleanore Stehr

Customer Usability Director

eleanore.stehr@yahoo.com

Member

Carolanne Lowe

Human Accountability Architect

carolanne_lowe@gmail.com

Admin

Juliana Wisoky

Corporate Intranet Manager

juliana.wisoky51@yahoo.com

Admin

Wilber Renner

Human Implementation Supervisor

wilber_renner29@yahoo.com

Admin

Anita Howell

Chief Data Technician

anita_howell@hotmail.com

Admin

Brent Donnelly

Direct Intranet Architect

brent.donnelly4@hotmail.com

Admin

Users

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

NameRoleActions

Carlo Howe-Schimmel

Internal Infrastructure Manager

carlo_howe-schimmel@gmail.com

Admin

Maximillian Lehner

Forward Operations Executive

maximillian.lehner@yahoo.com

Admin

Jarret McDermott

District Accounts Executive

jarret_mcdermott66@hotmail.com

Member

Florence O'Reilly

Human Data Administrator

florence.oreilly57@hotmail.com

Member

Dion Koelpin

Direct Accounts Consultant

dion.koelpin@gmail.com

Member

Mireille Gutkowski

District Markets Strategist

mireille_gutkowski@gmail.com

Viewer

Blanche Franecki

National Division Designer

blanche_franecki@gmail.com

Viewer

Houston Willms

Future Research Executive

houston.willms@gmail.com

Admin

Tamia Williamson

Senior Marketing Coordinator

tamia.williamson@gmail.com

Viewer

Meredith Cole

Forward Research Producer

meredith_cole55@yahoo.com

Member

Haylie Krajcik

Dynamic Factors Supervisor

haylie.krajcik@yahoo.com

Admin

Easter Rice

Forward Group Engineer

easter.rice@yahoo.com

Member

Evalyn Herzog

Direct Data Director

evalyn_herzog46@yahoo.com

Member

Nicklaus Stracke

Forward Implementation Technician

nicklaus.stracke@gmail.com

Admin

Adan Yundt

Senior Web Supervisor

adan.yundt93@gmail.com

Admin

Maeve Welch

Senior Branding Specialist

maeve.welch84@yahoo.com

Member

Marilie Kuphal

Customer Infrastructure Assistant

marilie_kuphal@hotmail.com

Viewer

Emmet Kreiger

Central Web Administrator

emmet_kreiger3@gmail.com

Viewer

Chaz Olson-Bode

Senior Interactions Specialist

chaz_olson-bode@gmail.com

Admin

Larry Kemmer

Central Communications Orchestrator

larry_kemmer85@gmail.com

Admin

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
George Bechtelarshaun99@hotmail.comFayboroughActive$30.25
Everett Konopelskirobyn6@gmail.comFort KrystelportActive$525.83
Duane Wehnerjanelle3@gmail.comRialtoInactive$118.64
Domingo Baileyevelyn_bradtke@yahoo.comLake ErickviewInactive$733.05
Ben Hayesdeangelo53@hotmail.comLake LulaInactive$928.26
Total$2,336.03

Basic table

Table with Images

NameEmailLocationStatusBalance
Janie Mraz
@dee.medhurst97
freda_konopelski82@gmail.comKalamazooInactive$713.49
Mercedes Dibbert Jr.
@antone.feeney25
foster_stamm-mosciski@gmail.comNorth Richland HillsInactive$461.48
Arlene Wintheiser
@kevin64
shany11@gmail.comHuntsvilleInactive$460.39
Bryan Smitham
@katelyn25
carmine.hackett@hotmail.comConsidinecesterActive$1,179.30
Katrina Mayer
@kirk_kassulke38
cathryn_reynolds49@yahoo.comNorwoodsteadInactive$808.32

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Justin Fisherwaylon.conn@gmail.comSouth VernerActive$188.67
Lance Pacocharandall45@hotmail.comYasmeenlandActive$1,058.86
Kim Shanahandallin.hamill88@yahoo.comGottliebworthInactive$53.49
Natalie Willwinston.luettgen17@hotmail.comNorth TabithaviewActive$390.43
Cody Cassinshayna.hermann83@hotmail.comEast AudraInactive$775.93
Total$2,467.38

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Mr. Bert Jaskolskilaurel39@gmail.comFort KaelaboroInactive$215.65
Melba Huels-Torpaiyana.johns88@gmail.comSouth FredaActive$496.78
Jodi O'Connerorville_koch@gmail.comAugustusmouthActive$595.38
Roosevelt Hilllannabelle88@hotmail.comBrettstadInactive$936.12
Claude Bednardemetris41@hotmail.comYazminchesterInactive$735.41
Total$2,979.34

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Debra Rueckersylvan.nienow84@hotmail.comWest ZulacesterActive$31.20
Robin Sauer-Ernsermegane.schinner@yahoo.comFort ElfriedaInactive$350.80
Clyde Berniertrevion.williamson@yahoo.comMarinaworthActive$168.52
Myron Morarvictor35@yahoo.comWest MattieActive$427.61
Cary Labadienicole_pacocha@hotmail.comKerlukesideInactive$824.54
Total$1,802.67

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
Tyler Spencerwilbert_kautzer@yahoo.comFort BridgetcesterActive$141.80
Donna Rosenbaumasia_bechtelar77@yahoo.comLake GiuseppeActive$293.64
Dr. Katrina Gleichnerkatlyn.heathcote@hotmail.comWest MaudetonInactive$687.96
Tami Waterslemuel_altenwerth67@yahoo.comSouth BradleyInactive$1,169.24
Dixie Russelgerald_zboncak38@yahoo.comDanielsideInactive$1,081.91
Total$3,374.55

Table with row selection

Card Table

NameEmailLocationStatusBalance
Charlie Nicolasdawn.connelly@gmail.comHartmannstadInactive$981.50
Alexandra Lehnervinnie93@hotmail.comLake MaryportInactive$235.08
Terence O'Conner Sr.elvera.hilll@yahoo.comArmanivilleInactive$962.66
Abel Waelchifabiola_cummings@yahoo.comSouth TinacesterInactive$574.52
Mr. Stanley Powlowski IIjacinthe_boyer16@gmail.comBothellActive$778.76
Total$3,532.52

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
Lawrence Ritchieannette_yost44@hotmail.comNew KhalidboroActive$212.27
Derrick Kilbackfrida_jacobs@hotmail.comNorfolkInactive$302.27
Ms. Rosa Tremblayconnor.orn50@hotmail.comNew HailiehavenInactive$61.44
Eduardo Dach IIflorine_balistreri-reichert46@yahoo.comHegmannboroInactive$194.89
Katie Trantowkeanu6@yahoo.comBettyburghInactive$47.64
Jim Mayertcandace.hartmann-wilkinson@gmail.comOsinskivilleActive$390.22
Annie Klinganderson.gislason@yahoo.comCamillesteadActive$991.73
Laura Botsford-Predovicaida.harris@gmail.comNorth LeopoldoActive$553.12
Leslie Hudsonjohan_lindgren17@hotmail.comNewtonInactive$1,008.07
James Altenwerthjune.emard-sawayn@hotmail.comParadiseInactive$96.06
Janie Rueckeramaya_johns@yahoo.comPourosworthActive$870.09
Wilson Vonoliver_mosciski35@yahoo.comSalt Lake CityActive$107.88
Mr. Maurice Effertzaustin69@gmail.comMiamiActive$863.16
Dr. Sheri Hammesalexandre85@yahoo.comFadelburyActive$128.29
Carl Rempelclaud_kozey@hotmail.comApexActive$958.96
Total$6,786.09

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