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
INV001PaidPayPal$471.66
INV002UnpaidCredit Card$850.71
INV003PendingCredit Card$235.15
INV004PendingBank Transfer$174.30
INV005UnpaidPayPal$492.97
INV006PendingCredit Card$580.61
INV007PendingBank Transfer$520.45
Total$3,325.85

Simple

Users

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

NameTitleEmailRoleActions
Brendan Jerde-ReillyInternational Optimization Engineerbrendan.jerde-reilly@hotmail.comMember
Linwood BoganLegacy Accountability Agentlinwood.bogan@yahoo.comMember
Rita GradyDirect Mobility Producerrita_grady@gmail.comMember
Wade NolanHuman Research Representativewade_nolan36@yahoo.comAdmin
Gregoria HyattProduct Communications Supervisorgregoria_hyatt66@hotmail.comMember
Valentine RusselProduct Research Coordinatorvalentine_russel@yahoo.comMember

Stacked on mobile

Users

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

NameRoleActions

Mossie Mueller

Regional Identity Consultant

mossie.mueller@yahoo.com

Admin

Rebeca Hilpert

International Security Assistant

rebeca.hilpert@yahoo.com

Member

Kelly McLaughlin

Chief Infrastructure Assistant

kelly.mclaughlin@hotmail.com

Member

London Rowe

District Infrastructure Engineer

london.rowe@yahoo.com

Admin

Arvid Dickinson

Legacy Data Executive

arvid.dickinson@yahoo.com

Admin

Timmy Farrell

Senior Identity Coordinator

timmy_farrell@hotmail.com

Admin

Users

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

NameRoleActions

Lorenzo Heller-Walter

Global Infrastructure Developer

lorenzo_heller-walter51@gmail.com

Admin

Sophie Reilly

Chief Quality Designer

sophie.reilly88@hotmail.com

Member

Karianne Orn

Principal Accountability Agent

karianne.orn@yahoo.com

Member

Sebastian Hickle

Human Identity Orchestrator

sebastian.hickle78@hotmail.com

Member

Alisha Harvey

Legacy Directives Strategist

alisha.harvey28@yahoo.com

Admin

Brian Harris

Lead Usability Officer

brian_harris35@yahoo.com

Viewer

Kristin Kirlin

National Directives Engineer

kristin_kirlin20@hotmail.com

Member

Emmanuel Fahey

Lead Program Executive

emmanuel_fahey87@yahoo.com

Viewer

Glenna Hegmann

Legacy Response Analyst

glenna.hegmann@yahoo.com

Member

Enoch Dietrich

Customer Accounts Coordinator

enoch_dietrich16@hotmail.com

Admin

Florence Weissnat

Corporate Solutions Consultant

florence.weissnat@hotmail.com

Member

Sammy Veum

Direct Tactics Liaison

sammy.veum@yahoo.com

Admin

Chanelle Bogisich

Internal Interactions Assistant

chanelle_bogisich98@hotmail.com

Viewer

Quentin Simonis

Principal Brand Administrator

quentin_simonis@gmail.com

Member

Elian Okuneva

Internal Communications Planner

elian_okuneva27@hotmail.com

Viewer

Maya Bechtelar

Direct Accounts Facilitator

maya.bechtelar93@hotmail.com

Viewer

Vesta Mayer-Haley

Principal Security Engineer

vesta_mayer-haley23@gmail.com

Member

Anahi Smith

Lead Factors Administrator

anahi_smith12@gmail.com

Viewer

Dane Dooley

Investor Accounts Officer

dane.dooley@hotmail.com

Member

Reagan O'Hara

Chief Metrics Coordinator

reagan.ohara@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
Patricia Gleichnermaya_hamill70@hotmail.comEast DavionActive$402.33
Flora Schimmel-Rempelroberta_hills@hotmail.comPort ErnestinaInactive$795.16
Harold Terry DDScarolyn17@hotmail.comLaguna NiguelInactive$841.67
Mona Feeneydamien_hahn@hotmail.comLake BerniceActive$42.33
Dwayne O'Keefe Vroselyn_hahn@gmail.comLake ScarlettfurtActive$1,029.63
Total$3,111.12

Basic table

Table with Images

NameEmailLocationStatusBalance
Lamar Runolfsson
@alisa_torp33
devante_doyle36@gmail.comNorth DarienActive$179.58
Eunice Altenwerth
@kara_anderson86
dora.kuhlman87@hotmail.comRogersboroughActive$129.94
Richard Torphy-Metz Sr.
@oliver.marquardt
sadie_rolfson71@yahoo.comBeerstadActive$1,144.51
Lowell Hudson
@garfield_strosin
meta12@yahoo.comClaudcesterInactive$657.71
Ramiro Lubowitz
@aurelie8
jalen.pfeffer68@hotmail.comCuyahoga FallsInactive$327.25

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Miss Sadie Quitzon-Gutkowskiwanda.schultz30@yahoo.comJefferson CityInactive$694.99
Joseph Rutherfordautumn.weissnat2@gmail.comLake DeclanviewInactive$275.29
Terry Millsjune39@yahoo.comSouth MadalinetonInactive$999.76
Jay Lowedominique.hagenes@yahoo.comTroyInactive$934.70
Laurence Pagacdevin85@yahoo.comLaronstadInactive$126.34
Total$3,031.08

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Ryan Shanahancora31@hotmail.comLubowitzviewInactive$613.50
Elvira Johnsonaurore2@yahoo.comKittyworthInactive$521.21
Joe Prohaskaflossie.stamm@gmail.comKshlerinfortInactive$522.99
Harriet Fisherjabari.osinski99@hotmail.comWilliamsonstadInactive$924.16
Courtney Reicheljaiden68@gmail.comKeeblervilleInactive$266.48
Total$2,848.34

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Dewey Krajcikgina_kemmer@yahoo.comFort BethsteadActive$845.57
Mr. Terrence Mannlizzie_ziemann@gmail.comFisherburyInactive$1,033.87
Eleanor Prohaskamarcella.wolff13@hotmail.comPort RoscoelandActive$436.32
Pamela Schambergergeoffrey.carter90@gmail.comKaitlyntownInactive$108.76
James Boehmpauline_watsica-ortiz95@gmail.comMorgan HillActive$1,085.30
Total$3,509.82

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
Ann Breitenbergjudge_heaney13@hotmail.comNorth RolandohavenActive$29.29
Alicia Hermannrocky37@gmail.comEast ModestaInactive$480.04
Patty Jonesllewellyn_herzog@hotmail.comEast HonoluluInactive$831.93
Erik Schmidtjace_satterfield82@yahoo.comNew AricfurtInactive$472.04
Mr. Marco Dickensbeulah14@gmail.comJaysonshireActive$1,159.67
Total$2,972.97

Table with row selection

Card Table

NameEmailLocationStatusBalance
Marc Thompsonadolphus_kling@gmail.comNorth ElveratonInactive$616.67
Stuart Simonis-Langworthmakenna58@gmail.comNew MarisoltonActive$18.06
Maxine Pourosrashad.frami69@hotmail.comNew TerrenceActive$551.13
Lee Grimeszena_mclaughlin@hotmail.comNew JamelActive$682.18
Colleen Bernhardsigurd.erdman77@gmail.comNational CityInactive$267.43
Total$2,135.47

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
Danielle Olsonbrice_white@hotmail.comAbechesterInactive$967.94
Ernesto Boehmhoward.ziemann67@yahoo.comEffertzfortActive$697.07
Ignacio Deckowsigrid.donnelly90@hotmail.comCourtneystadActive$859.46
Lela Kuhiclinnea_brakus@yahoo.comArdithburyActive$3.01
Mamie Cronaarianna.stoltenberg@yahoo.comHaleyburyInactive$610.18
Ronnie Rennerflorencio50@gmail.comClovisActive$459.24
Evelyn Purdy Vclara.braun-lynch@gmail.comLake OrphaActive$480.18
Bridget Leschmyrtis_dickens@yahoo.comPensacolaActive$230.71
Paul Kuhn IVeleazar23@gmail.comReddingActive$308.85
Margaret Gibsonrosella_gusikowski39@gmail.comNorth TrentportInactive$1,118.17
Doris Paucekgerson_ortiz@yahoo.comHuntersvilleInactive$951.69
Kathy Walterprovidenci.kling@yahoo.comWest BentonInactive$593.81
Kristen Bruen IVclementina_harris85@hotmail.comLake GunnerviewInactive$1,002.73
Molly Wisokybryon36@hotmail.comMillerboroInactive$801.73
Blake Harveystephen.ernser7@yahoo.comCrystelhavenActive$903.68
Total$9,988.45

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