UI Thing

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$512.95
INV002PendingPayPal$413.79
INV003UnpaidBank Transfer$321.79
INV004PendingPayPal$330.88
INV005PaidCredit Card$525.81
INV006PendingBank Transfer$849.99
INV007PaidCredit Card$343.42
Total$3,298.63

Simple

Users

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

NameTitleEmailRoleActions
Arlie TurcotteChief Quality Producerarlie.turcotte@hotmail.comAdmin
Earlene LueilwitzHuman Infrastructure Consultantearlene.lueilwitz@hotmail.comAdmin
Adelbert TrompLegacy Accounts Specialistadelbert_tromp26@hotmail.comMember
Adelle KeeblerInternational Applications Representativeadelle_keebler@yahoo.comMember
Bart BernhardLead Marketing Technicianbart.bernhard15@hotmail.comViewer
Tabitha RusselChief Usability Administratortabitha_russel@hotmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Breanna Lowe-Barrows

Chief Data Designer

breanna_lowe-barrows@yahoo.com

Admin

Miguel Boehm

Direct Creative Facilitator

miguel_boehm15@gmail.com

Admin

Xander Bednar

Corporate Configuration Producer

xander.bednar46@yahoo.com

Admin

Elinor Upton

District Implementation Officer

elinor.upton85@gmail.com

Member

Gino Schaden

Customer Configuration Officer

gino.schaden@gmail.com

Admin

Leo Nader

Human Functionality Representative

leo.nader@hotmail.com

Admin

Sticky header

Users

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

NameRoleActions

Gladyce Kautzer

District Operations Engineer

gladyce.kautzer@yahoo.com

Member

Abdul Frami

Customer Program Developer

abdul_frami@hotmail.com

Viewer

Sydni Bashirian

Dynamic Implementation Officer

sydni_bashirian@yahoo.com

Viewer

Jennie MacGyver

Chief Quality Agent

jennie.macgyver@gmail.com

Member

Austyn Jones-Maggio

Chief Factors Planner

austyn_jones-maggio@gmail.com

Member

Vada Swift

International Directives Liaison

vada_swift39@hotmail.com

Member

Tate Hane

Regional Optimization Manager

tate_hane@yahoo.com

Admin

Noelia Hintz

Human Directives Designer

noelia_hintz33@gmail.com

Member

Cassidy Bins

Regional Metrics Supervisor

cassidy.bins21@gmail.com

Viewer

Winona Powlowski

Senior Research Developer

winona.powlowski@hotmail.com

Admin

Brett Howell

Dynamic Integration Consultant

brett.howell33@yahoo.com

Viewer

Hollie Kuhlman

Central Applications Engineer

hollie.kuhlman15@hotmail.com

Member

Christina Schaefer

Chief Configuration Engineer

christina.schaefer85@yahoo.com

Admin

Devin Bailey

Chief Communications Architect

devin.bailey59@yahoo.com

Member

Ned Wolf

Forward Brand Designer

ned.wolf@gmail.com

Viewer

Cristina Leffler

Internal Brand Facilitator

cristina_leffler@yahoo.com

Admin

Kiel Wunsch

Investor Assurance Liaison

kiel.wunsch@yahoo.com

Member

Romaine Wisozk

Human Solutions Architect

romaine_wisozk@hotmail.com

Viewer

Remington O'Conner

Customer Operations Designer

remington.oconner20@hotmail.com

Viewer

Verlie Jacobs

Human Usability Assistant

verlie.jacobs57@gmail.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
Mr. Tommy Stoltenbergeleanora20@gmail.comCarletontonInactive$230.25
Marshall Schuppemadyson_hahn1@hotmail.comOrland ParkActive$371.95
Terrell Cruickshankken.blanda@hotmail.comWest AlecInactive$900.71
Katherine Shieldsmadisen.cole80@yahoo.comMariettaInactive$754.83
Beverly Lueilwitzcoby_beahan59@yahoo.comNew AprilActive$178.60
Total$2,436.34

Basic table

Table with Images

NameEmailLocationStatusBalance
Amelia Schroeder
@kailee89
zoe.pollich@yahoo.comNew ZacheryfieldActive$188.93
Jenna Feil
@torey33
rebeca66@yahoo.comCortneyboroughActive$677.37
Matthew Labadie
@ivy.oconnell
kenneth_gleason66@yahoo.comBenjaminshireActive$495.31
Guillermo Nienow
@floy_schultz-leuschke87
jody_dickens@gmail.comFort StacyviewInactive$755.31
Frank Johnston
@paxton.goldner
eudora.luettgen27@yahoo.comSouth QuentinlandActive$1,038.45

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Curtis Westcaleigh.mills25@gmail.comJacobsonportInactive$144.13
Mrs. Melinda Boyledawson13@gmail.comRunolfsdottirtownInactive$666.93
Lori Gerhold-Carterdovie98@gmail.comSouth JabariInactive$1,059.25
Lloyd Bednarlevi.beer@gmail.comWheatonActive$596.29
Seth Doyle-Deckowmaximilian.barton@yahoo.comUplandActive$107.45
Total$2,574.05

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Bridget Nienowarlene93@yahoo.comMackfortInactive$190.74
Mattie Gulgowskimadalyn_graham42@yahoo.comAnastasiavilleInactive$272.22
Dr. Rose Runolfsdottirdena_koelpin@gmail.comWest BerneiceportInactive$238.02
Edward Bradtkeorval14@hotmail.comSeanvilleActive$81.62
William Grantadonis_frami-bechtelar@hotmail.comNewport NewsActive$430.49
Total$1,213.09

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Tyler Jonesliza_grant1@gmail.comComptonInactive$981.17
Ms. Jaime O'Reillyhilda18@gmail.comFlatleyhavenInactive$756.74
Richard Yostvalentina0@yahoo.comVivienboroInactive$740.99
Douglas Greenfelderfreddy82@hotmail.comWest Des MoinesActive$780.57
Cory Hermanike85@gmail.comBoulderActive$510.99
Total$3,770.46

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
Victoria Herzogrosa.oberbrunner7@gmail.comArvadaActive$310.30
Bob Mills-Kunze DDSjoanny_skiles75@hotmail.comRosevilleInactive$59.16
Irvin Satterfieldalexandre47@yahoo.comFolsomInactive$204.38
Glenda Hilllkara.kreiger@yahoo.comPalatineActive$329.67
Ashley Millsamir.hane15@hotmail.comGibsonburghActive$656.18
Total$1,559.69

Table with row selection

Card Table

NameEmailLocationStatusBalance
Sean Parkerkellen88@hotmail.comBayersideActive$244.68
Vincent Ryandaron_shanahan97@gmail.comWest AaliyahtonActive$1,028.96
Ana Connjoelle55@yahoo.comFort BrianboroActive$893.45
Dr. Brian Erdmanernestina71@hotmail.comKlingfieldInactive$912.63
Donald Abshire IIImarvin_waelchi92@gmail.comKuphallandInactive$899.59
Total$3,979.31

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
Eric Ortizcristopher0@yahoo.comWest CarmenInactive$357.88
Marie Handfaustino.conn@yahoo.comFeilshireInactive$967.79
Carrie Satterfieldloraine.gerhold@hotmail.comWacoInactive$1,186.79
Caroline Schoenlionel.dach@yahoo.comHartmannhavenActive$815.38
Tanya Wiza Vmaryam41@yahoo.comHendersonvilleActive$459.57
Sandra Bartellkayli49@gmail.comGreenstadActive$1,106.70
Wendy Baileyonie.connelly95@yahoo.comNorth EloisaboroughActive$607.36
Walter Nicolaskeith42@hotmail.comNew GreenburyInactive$850.70
Manuel Swiftoliver_murray44@gmail.comPort AlexandrinetownInactive$120.21
Gloria Bahringer PhDmadalyn.dare@yahoo.comWest MosheworthInactive$745.84
Peter Emmerichcolin_tremblay@yahoo.comHahnmouthActive$153.04
Fredrick Dachdevante_macgyver@yahoo.comUrbandaleActive$730.76
Max Gleasonsamara19@gmail.comPort ChristvilleInactive$862.63
Elizabeth Smitham-Hyattgladyce_erdman93@gmail.comFort NyafortActive$1,017.80
Luz Gerlach MDarvid.flatley@gmail.comEast EllsworthhavenActive$1,065.71
Total$11,048.16

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

Switch

A control that allows the user to toggle between checked and not checked.

Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.