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
INV001UnpaidPayPal$119.12
INV002UnpaidBank Transfer$469.27
INV003PaidBank Transfer$687.97
INV004UnpaidCredit Card$139.07
INV005UnpaidCredit Card$325.79
INV006PendingBank Transfer$643.45
INV007PaidBank Transfer$338.14
Total$2,722.81

Simple

Users

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

NameTitleEmailRoleActions
Brielle PfannerstillChief Interactions Developerbrielle_pfannerstill@yahoo.comViewer
Roselyn JonesFuture Web Administratorroselyn_jones@hotmail.comViewer
Roscoe RutherfordDirect Applications Consultantroscoe.rutherford52@yahoo.comViewer
Ophelia GoldnerDistrict Communications Designerophelia.goldner@gmail.comViewer
Maggie FlatleyCustomer Intranet Managermaggie.flatley@hotmail.comMember
Oren CummingsCorporate Accountability Supervisororen_cummings@hotmail.comMember

Stacked on mobile

Users

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

NameRoleActions

Hailie Bruen

Regional Identity Specialist

hailie_bruen@gmail.com

Viewer

Tatyana Glover

Legacy Tactics Associate

tatyana.glover@hotmail.com

Member

Rosalind Cremin

Human Metrics Assistant

rosalind.cremin68@gmail.com

Member

Marcos Simonis

International Brand Designer

marcos.simonis94@yahoo.com

Viewer

Gia Rosenbaum-Pacocha

Direct Creative Officer

gia_rosenbaum-pacocha73@gmail.com

Member

Theron Towne

International Security Specialist

theron_towne47@gmail.com

Viewer

Users

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

NameRoleActions

Talia McCullough

District Web Designer

talia.mccullough69@yahoo.com

Admin

Rita Bednar

Central Integration Consultant

rita_bednar52@gmail.com

Viewer

Violet Quigley

Senior Operations Strategist

violet.quigley99@yahoo.com

Admin

Brendon Lindgren

Regional Communications Agent

brendon_lindgren@yahoo.com

Admin

Kiana Bednar-Haley

Regional Implementation Executive

kiana.bednar-haley93@gmail.com

Admin

Kaitlin Bednar

Investor Program Facilitator

kaitlin.bednar57@gmail.com

Member

Barney Beatty

Investor Metrics Administrator

barney.beatty@gmail.com

Member

Joanny Hoeger

Product Metrics Orchestrator

joanny.hoeger15@yahoo.com

Member

Herminio Armstrong

Investor Directives Engineer

herminio.armstrong3@hotmail.com

Member

Arch Homenick

District Assurance Strategist

arch.homenick17@gmail.com

Viewer

Nichole Leffler

Dynamic Research Agent

nichole_leffler89@hotmail.com

Admin

Hilario Wisozk

Investor Markets Analyst

hilario_wisozk@hotmail.com

Admin

Larue Morissette

Direct Solutions Consultant

larue_morissette@gmail.com

Member

Jake Harris

Dynamic Accounts Orchestrator

jake.harris23@gmail.com

Viewer

Isaias Price

Lead Group Liaison

isaias.price16@yahoo.com

Admin

Katrine Kuphal

District Optimization Officer

katrine_kuphal@yahoo.com

Member

Ryann Torphy

Senior Solutions Specialist

ryann_torphy@hotmail.com

Admin

Garth Miller

Senior Security Engineer

garth.miller91@hotmail.com

Member

Annabel Orn

District Paradigm Executive

annabel_orn64@gmail.com

Admin

Kara Waelchi

Senior Group Analyst

kara_waelchi6@gmail.com

Member

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
Myrtle Blockjamison_brown@yahoo.comFort BaronfortActive$732.17
Melvin Pagac MDmina34@yahoo.comHodkiewiczchesterActive$167.76
Darnell Boehmevert_aufderhar36@yahoo.comPort RobbInactive$663.60
Dr. Grant Feeney DDSottis.hammes-bartoletti24@gmail.comBlickburghInactive$566.15
Dr. Edwin Mayertjuanita.luettgen14@yahoo.comNew JacquelynActive$581.22
Total$2,710.90

Basic table

Table with Images

NameEmailLocationStatusBalance
Mr. Levi Feest PhD
@shanie_brown
juston.nicolas82@yahoo.comFlorencetonInactive$1,136.12
Miss Pauline Bogan
@domenick_kessler15
marvin64@yahoo.comNorth AlexaneActive$58.05
Joey Farrell
@felicity57
monique_mills@yahoo.comRenetownActive$1,191.46
Martha Raynor
@micah42
lauren_brakus52@gmail.comOceansideActive$533.13
Delia Kunde-Will
@benton.stehr-sauer70
golda81@gmail.comTitusfieldInactive$947.76

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Guillermo Yundtvince99@gmail.comEast DaytontonActive$500.75
Irene Danielhilma.koch-wilderman@hotmail.comHoweburghInactive$1,104.22
Damon Robelcaden76@yahoo.comKurtisvilleInactive$803.30
Mr. Mario Schneiderubaldo.buckridge48@yahoo.comOrinlandActive$545.73
Carl Wolffjules_spinka@gmail.comPalm Beach GardensActive$1,172.76
Total$4,126.76

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Horace Wildermanqueen_bechtelar62@hotmail.comShawnafurtActive$403.54
Leland Leschmalcolm_smitham-kub87@hotmail.comNew LucieActive$413.84
Mattie Schmidtannetta_harris60@hotmail.comNorth KathleenInactive$701.27
Sheldon Lindvincenza.swift97@yahoo.comFranzportInactive$581.78
Mr. Clinton Krajcikulices5@yahoo.comGloverhavenActive$344.91
Total$2,445.34

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Lonnie Pollichhal_watsica@yahoo.comOsinskishireInactive$170.07
Dr. Eloise Cormierkurtis_wolff9@yahoo.comWhite PlainsActive$31.41
Jo Lindgren-Toy IVmarina_klocko82@yahoo.comKubsteadActive$656.33
Garrett Rowewatson77@hotmail.comOrinportInactive$378.39
Arturo Cronaniko_braun3@hotmail.comMarielavilleInactive$466.14
Total$1,702.34

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
Angelica Jacobson DVMbert_effertz@hotmail.comWest EmoryActive$1,105.59
Kathy Nicolas Jr.gene89@gmail.comNew LylastadActive$66.80
Katrina Bechtelarchristopher.spencer61@hotmail.comWest BernhardsteadActive$950.29
Mrs. Faye Wolfdomenic.reinger@hotmail.comWelchsteadInactive$546.00
James Yostdallin_lemke-osinski94@yahoo.comWest NashActive$567.91
Total$3,236.59

Table with row selection

Card Table

NameEmailLocationStatusBalance
Mr. Raymond Morissettegustave.davis@gmail.comIssacsideActive$1,192.97
Melanie Torphyhollis.kirlin@yahoo.comLake KelleyActive$205.07
Jay Streich Isharon88@hotmail.comFort TellymouthInactive$520.15
Donna Boylejarod.greenholt41@gmail.comBuckridgetownInactive$44.75
Laverne Nicolaseulah18@gmail.comRoswellActive$681.15
Total$2,644.09

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
Esther Kuhicrahul_gorczany@gmail.comEast KoreyActive$1,110.34
Dr. Lowell Rutherfordarianna45@yahoo.comLawtonActive$941.44
Aubrey Feilomer.thompson@gmail.comFort EmmiefortInactive$527.24
Josephine Satterfield-Jacobidarius44@gmail.comDovieportActive$259.15
Marcos Koelpincheyenne.gibson@gmail.comPort AbbigailtownInactive$865.73
Keith Marksallen49@gmail.comStephaniebergInactive$964.92
Jeanne Harberweston_swift@yahoo.comFletcherburyActive$192.17
Ramona Reichel IIIava18@hotmail.comWest ChetlandInactive$283.02
Mitchell Hellerkaycee_feil46@gmail.comWest JosephinesteadActive$298.81
Delores Kuvalis DDScarmine2@yahoo.comUniversityInactive$1,180.15
Bridget Kovacekaida.mayer73@yahoo.comPinellas ParkActive$1,172.57
Bobbie Welchbrisa.franecki3@hotmail.comKamronburghActive$123.05
Jodi Grantharmon8@yahoo.comFredyburyActive$444.15
Iris Abernathykale.schmitt@yahoo.comFort LeannelandActive$1,152.91
Joann Muellerkorey.farrell65@yahoo.comAntoniasideActive$435.84
Total$9,951.49

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