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$526.97
INV002UnpaidBank Transfer$703.16
INV003PendingCredit Card$124.74
INV004PendingCredit Card$542.22
INV005UnpaidCredit Card$207.70
INV006PendingCredit Card$983.79
INV007PaidPayPal$716.44
Total$3,805.02

Simple

Users

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

NameTitleEmailRoleActions
Hilda KunzeCentral Assurance Strategisthilda.kunze@hotmail.comMember
Melany LarsonCustomer Marketing Associatemelany.larson@hotmail.comMember
Candida HuelsFuture Configuration Administratorcandida.huels32@hotmail.comAdmin
Camille GoldnerInvestor Integration Representativecamille.goldner55@yahoo.comViewer
Rashawn CarterFuture Applications Directorrashawn_carter21@hotmail.comViewer
Ransom BauchDynamic Usability Supervisorransom.bauch36@gmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Billy Berge

Principal Implementation Representative

billy_berge43@hotmail.com

Viewer

Favian Hilpert

Product Security Director

favian.hilpert@gmail.com

Member

Frederique Ondricka

Senior Applications Associate

frederique.ondricka16@gmail.com

Admin

River Rohan

Customer Data Officer

river_rohan@hotmail.com

Viewer

Georgette Ziemann

Investor Directives Director

georgette_ziemann81@yahoo.com

Admin

Vanessa Lockman

International Markets Coordinator

vanessa_lockman45@gmail.com

Member

Sticky header

Users

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

NameRoleActions

Abdul Grimes

Dynamic Interactions Executive

abdul.grimes@hotmail.com

Member

Colten King

Future Markets Officer

colten.king15@hotmail.com

Member

Xavier McGlynn

Customer Response Representative

xavier.mcglynn45@hotmail.com

Member

Mallie Waelchi

National Usability Administrator

mallie.waelchi18@yahoo.com

Viewer

Hellen Raynor

Lead Branding Engineer

hellen.raynor@yahoo.com

Admin

Spencer O'Kon

Product Group Strategist

spencer_okon71@gmail.com

Admin

Orland Green

Corporate Configuration Producer

orland_green9@gmail.com

Member

Judah Hodkiewicz

Human Markets Developer

judah_hodkiewicz@yahoo.com

Viewer

Odie Williamson

Legacy Quality Coordinator

odie_williamson@gmail.com

Member

Josiah Barton

Customer Web Developer

josiah_barton27@gmail.com

Member

Barry Greenholt

Product Directives Planner

barry_greenholt94@gmail.com

Member

Aron Bayer

Corporate Identity Liaison

aron.bayer14@hotmail.com

Member

Gisselle Carroll

Legacy Assurance Specialist

gisselle.carroll24@gmail.com

Admin

Melany McDermott

Senior Interactions Developer

melany.mcdermott@yahoo.com

Admin

Kathlyn Cole

Lead Marketing Representative

kathlyn_cole@gmail.com

Viewer

Pete Botsford

Chief Markets Engineer

pete_botsford@hotmail.com

Member

Tracy Lemke

Product Applications Engineer

tracy.lemke65@gmail.com

Member

Darian Morar

Global Creative Facilitator

darian_morar92@yahoo.com

Member

Carey Frami

Human Optimization Coordinator

carey.frami@yahoo.com

Member

Berneice Runolfsson

Dynamic Interactions Analyst

berneice_runolfsson@hotmail.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
Traci Emmerichfelicita_stracke@gmail.comJadacesterInactive$159.61
Rodney Champlin Iedgar26@yahoo.comFaheyburyActive$996.06
Jared Johnston Icruz82@gmail.comOndrickafurtActive$841.42
Candace Schaeferart13@hotmail.comLake QuintonActive$1,085.08
Drew Powlowskimarilou17@hotmail.comMayfortInactive$338.82
Total$3,420.99

Basic table

Table with Images

NameEmailLocationStatusBalance
Lamar Gerhold
@america_jacobs
carlie52@yahoo.comAustinInactive$689.86
Charles Reynolds
@elwin11
trevion42@yahoo.comLake BonitavilleInactive$603.35
Billie Bergnaum
@jeremy_kshlerin
terence_kiehn@yahoo.comBradtkevilleInactive$384.73
Angelica Dicki
@kiera1
breanne49@hotmail.comLake HeathActive$98.64
Stuart Gerlach
@elian90
ebba51@gmail.comHuldaboroInactive$123.49

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Dr. Thelma Watsicamervin80@yahoo.comRobertsshireInactive$1,159.51
Darnell Rodrigueznapoleon91@yahoo.comLinnietownInactive$788.40
Violet Starkrobert_beatty57@hotmail.comKshlerinshireActive$994.75
Kristy Wisozkschuyler31@yahoo.comWeissnatsteadActive$515.83
Christie Cartertrace.reynolds82@yahoo.comMontebelloActive$136.54
Total$3,595.03

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Mack Feestnicholas_crooks@hotmail.comEast AngelicafortActive$838.33
Leigh Nitzsche Iconor36@yahoo.comSouth HopechesterActive$1,005.83
Mrs. Christine Bartonkitty.pagac53@gmail.comJosianefieldInactive$271.40
Randolph Lynchida.kunze@hotmail.comDeliaburyInactive$271.99
Mr. Raul O'Connerelias_hayes56@hotmail.comNorth ImanitownInactive$328.16
Total$2,715.71

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Mr. Charlie Romaguera-Kirlinkaia_dicki@hotmail.comAliso ViejoActive$501.36
Harold Becker-Reichertezekiel.dubuque@gmail.comLevittownActive$251.13
Lindsay Rueckerwilfrid39@gmail.comWest FosterInactive$295.47
Roland Townewilma.wolf56@hotmail.comWernerportInactive$413.51
Dennis Caspergreg_rau23@gmail.comSouth AmayaInactive$1,080.78
Total$2,542.25

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
Daisy Runolfsson-O'Connelljoseph0@gmail.comBogisichtonInactive$1,071.10
Bobby Hackett DVMcristian.upton@hotmail.comOphelialandInactive$590.55
Marion Hammesbrock83@yahoo.comKuhnfurtActive$1,021.07
Calvin Okunevaestevan42@hotmail.comEast HoytInactive$99.86
Jerome Kesslerlincoln62@yahoo.comWest Palm BeachInactive$414.56
Total$3,197.14

Table with row selection

Card Table

NameEmailLocationStatusBalance
Dianne Turnersamir88@yahoo.comRicardofieldInactive$832.65
Stella Heidenreichlucious.goyette80@hotmail.comLake CorneliusActive$963.53
Heather Greensylvester16@yahoo.comGardenaActive$562.66
Marion Cormierdina23@hotmail.comQuitzonfortActive$1,150.62
Derrick Schultzkieran_witting0@yahoo.comPort UnaActive$685.90
Total$4,195.36

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
Dr. Alex Watersnaomi.pfannerstill64@hotmail.comNorth CharlestonInactive$1,085.00
Dexter Brakustaryn86@yahoo.comHarveyworthInactive$556.09
Hugo Hettinger Sr.libbie_simonis66@yahoo.comWest FloInactive$836.91
Tracy Stromangarret_erdman24@yahoo.comSouth LeoniechesterInactive$2.92
Ms. Connie Koelpinashtyn51@yahoo.comEnidInactive$204.96
Gregory Vonhellen_welch60@hotmail.comLavernshireInactive$1,097.52
Bobbie Zulauflavada.hermiston@yahoo.comPine BluffActive$755.74
Austin Kihngordon_purdy@yahoo.comNorth AddisonlandInactive$166.56
Nadine Runolfssonjordi.haley@hotmail.comNorth AngelinachesterActive$7.18
Theodore Willjailyn_mohr@yahoo.comJacobibergInactive$1,090.44
Pablo Nienowdejon47@hotmail.comMooreInactive$356.15
Elbert Balistreri Valisha27@hotmail.comSpring ValleyActive$5.83
Jeremiah Thompson Jr.katrina65@gmail.comWest KeiraInactive$1,186.12
Brett Reichertayla.koss@hotmail.comFort ColthavenInactive$849.57
Yvonne Swift-Effertz Sr.joel_oconner@yahoo.comWest HaileeActive$845.51
Total$9,046.50

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.