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
INV001PaidBank Transfer$247.47
INV002UnpaidCredit Card$802.03
INV003PaidPayPal$785.48
INV004PendingPayPal$828.56
INV005PaidCredit Card$901.39
INV006PendingCredit Card$864.54
INV007PendingCredit Card$940.86
Total$5,370.33

Simple

Users

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

NameTitleEmailRoleActions
Zoila ParkerSenior Research Executivezoila_parker@yahoo.comAdmin
Tyrese PowlowskiPrincipal Security Executivetyrese_powlowski@gmail.comViewer
Nickolas DareInternational Configuration Assistantnickolas_dare81@gmail.comAdmin
Erika RodriguezInternational Tactics Consultanterika_rodriguez@gmail.comAdmin
Agustin FaheyLegacy Operations Executiveagustin_fahey90@hotmail.comAdmin
Marta CarterDistrict Implementation Officermarta.carter55@yahoo.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Eileen Labadie

Senior Implementation Director

eileen.labadie@gmail.com

Member

Rhea O'Connell

District Integration Liaison

rhea_oconnell@yahoo.com

Admin

Carroll Schiller

Lead Optimization Coordinator

carroll.schiller76@hotmail.com

Viewer

Sheridan Wilderman

Product Infrastructure Liaison

sheridan_wilderman@yahoo.com

Viewer

Constance Bosco

Chief Response Director

constance.bosco@hotmail.com

Member

Hardy Kemmer

National Intranet Technician

hardy.kemmer45@yahoo.com

Viewer

Users

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

NameRoleActions

Loy Christiansen

Customer Infrastructure Representative

loy.christiansen18@gmail.com

Admin

Shania Zboncak

Human Web Technician

shania_zboncak@yahoo.com

Admin

Abdul Smith

International Data Engineer

abdul.smith@hotmail.com

Admin

Mortimer Frami

International Usability Manager

mortimer_frami@yahoo.com

Member

Maybell Marquardt

District Solutions Consultant

maybell.marquardt4@gmail.com

Member

Gillian Ebert

National Group Analyst

gillian_ebert85@hotmail.com

Admin

Nigel Price

Principal Metrics Liaison

nigel_price12@gmail.com

Admin

Cathryn Spencer

Regional Optimization Developer

cathryn.spencer40@gmail.com

Viewer

Cade Funk

Customer Security Officer

cade.funk@yahoo.com

Member

Uriel Prosacco

District Integration Executive

uriel_prosacco67@gmail.com

Admin

Camila Schaden

Legacy Implementation Designer

camila_schaden67@yahoo.com

Admin

Aidan Vandervort

Internal Assurance Orchestrator

aidan.vandervort17@gmail.com

Admin

Pinkie Veum

Regional Marketing Architect

pinkie.veum@gmail.com

Admin

Cicero Lesch

Regional Brand Strategist

cicero_lesch79@hotmail.com

Viewer

Christelle Pfeffer

Internal Optimization Analyst

christelle_pfeffer@yahoo.com

Admin

Melissa Simonis

Product Mobility Agent

melissa_simonis43@gmail.com

Admin

Tre Rogahn

Chief Mobility Manager

tre.rogahn6@yahoo.com

Admin

Pierce Howell

Direct Branding Manager

pierce.howell70@hotmail.com

Viewer

Lance Kohler-Ortiz

International Assurance Officer

lance_kohler-ortiz77@gmail.com

Member

Enrique Daniel

Future Creative Assistant

enrique_daniel@yahoo.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
Don Schmittisrael_russel@gmail.comLake ZechariahActive$24.82
Wendy Macejkovicduncan_bode51@hotmail.comAllenInactive$163.72
Sylvia Yostfletcher67@gmail.comHermistontownInactive$202.34
Fred Beerilene.strosin@yahoo.comWheatonActive$532.70
Ross Bahringerbennett65@gmail.comNorth CordeliaInactive$429.48
Total$1,353.06

Basic table

Table with Images

NameEmailLocationStatusBalance
Leo Balistreri MD
@helene86
albin.williamson89@yahoo.comFort BettetonActive$603.55
Louis Stokes
@alexanne69
daphney.strosin@gmail.comNorth OpheliaInactive$204.95
Ricky Schumm
@rosalind.reichel34
katharina.stiedemann@hotmail.comFort HertaInactive$815.36
Miss Jessie Adams
@leann65
kale.zemlak@hotmail.comOverland ParkActive$592.18
Dr. Lowell Bruen
@gennaro59
augustine23@hotmail.comSan BrunoInactive$1,145.89

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Marta Kemmergerald.boyle@yahoo.comRancho Santa MargaritaActive$233.43
Guy Watsicaviviane.goodwin18@yahoo.comJaylonviewActive$317.39
Miss Lillian Flatley IVmargot11@hotmail.comLake LewhavenActive$804.36
Jan Kiehncarmine13@hotmail.comFort AndreannefieldInactive$1,073.80
Sonya Bergnaummonroe74@yahoo.comBlockhavenActive$488.48
Total$2,917.46

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Dianne Croninreginald_herman@gmail.comEddlandInactive$123.24
Diane Hermistonshaylee_kohler@yahoo.comWest ElainaInactive$1,008.79
Jeanette Uptonguadalupe_beier@gmail.comApple ValleyActive$396.29
Lucille Abernathyellsworth_schmitt@hotmail.comLake LucindabergInactive$218.16
Jeffery Priceewell_jakubowski81@hotmail.comNewellfortInactive$808.72
Total$2,555.20

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Miss Laurie Boyertiana.kuvalis86@gmail.comGregorioshireInactive$834.81
Roosevelt Cartwright Sr.shawn.kuhn85@hotmail.comNorth AltheabergActive$231.30
Minnie Schadenarnaldo.pouros@hotmail.comEast AlvaActive$961.37
Danielle Millerlura_wiza7@gmail.comNorth ChristyActive$572.61
Ida Wuckertkatlyn_halvorson@gmail.comFerryhavenInactive$321.09
Total$2,921.18

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
Silvia Hahn DDSroxane_haley@yahoo.comWest IsaiahInactive$440.18
Nina Moorebartholome41@yahoo.comSan ClementeInactive$188.07
Ms. Vicky Haleyfreeman63@yahoo.comCarsonActive$363.37
Cesar Heller Iderek_hodkiewicz@gmail.comKosstonInactive$1,148.03
Mr. Milton Thompsonsarah95@yahoo.comMazieboroInactive$996.97
Total$3,136.62

Table with row selection

Card Table

NameEmailLocationStatusBalance
Lee Johnsclarabelle.boehm@hotmail.comEast CorinecesterActive$63.12
Lynn West Sr.keanu.treutel@gmail.comLake CeciliachesterActive$485.39
Lonnie Jacobseli.hagenes@gmail.comAnnabellburghInactive$386.64
Miss Flora Wisozkeldridge.hackett@hotmail.comNorth IzabellatonActive$142.29
Trevor Blanda DVMlexie_huel@hotmail.comRunolfssonboroInactive$140.72
Total$1,218.16

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
Leticia Kuhlmantabitha_kihn59@hotmail.comAndresteadInactive$1,033.69
Joe Hilpert DVMgisselle_smith@hotmail.comAdriannabergInactive$842.26
Celia Kihnsigrid_koss5@hotmail.comPort WeldonInactive$556.91
Lela Altenwerthboyd_stanton@yahoo.comWest OmertonActive$851.10
Muriel Stantonjordane51@gmail.comCoreneviewActive$980.65
Gretchen Pouroscolt.erdman@hotmail.comLake MetaInactive$446.18
Jennifer Pfefferlois79@yahoo.comBriafortInactive$61.19
Jenny Smithamnova_abshire@gmail.comParisiansteadActive$1,002.09
Bethany Hahnshaylee.medhurst@hotmail.comTownehavenActive$952.99
Dr. Ray Haleymargarete.schuppe@yahoo.comNorth DemetrisvilleActive$913.01
Erica Collinstrever0@gmail.comParadiseActive$687.31
May Marksmeagan.collins35@hotmail.comPort ZeldatonActive$995.06
Victor McGlynncarlo33@yahoo.comJerryboroInactive$495.09
Kendra Wolfftherese.williamson@yahoo.comTavaresmouthInactive$484.18
Maxine Ryanernest8@gmail.comNew CotylandInactive$21.31
Total$10,323.02

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