UI Thing
Components
Table

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
INV001UnpaidBank Transfer$877.13
INV002PaidCredit Card$713.99
INV003PaidPayPal$950.01
INV004PendingPayPal$388.11
INV005PendingBank Transfer$662.14
INV006PaidPayPal$206.56
INV007PendingPayPal$666.13
Total$4,464.07

Simple

Users

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

NameTitleEmailRoleActions
Ally SchmelerNational Quality Managerally.schmeler26@gmail.comMember
Josianne CrooksChief Functionality Producerjosianne_crooks@yahoo.comMember
Zane KutchLead Creative Developerzane_kutch15@gmail.comAdmin
Shanelle ParkerInternal Creative Supervisorshanelle_parker@hotmail.comViewer
Jaime BergeRegional Configuration Representativejaime_berge@hotmail.comAdmin
Cayla WehnerDirect Branding Supervisorcayla.wehner8@hotmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Lue Tromp-Padberg

Forward Response Orchestrator

lue.tromp-padberg68@yahoo.com

Viewer

Christop Hammes

Product Research Administrator

christop.hammes@gmail.com

Viewer

Issac Bayer

Human Paradigm Architect

issac.bayer73@yahoo.com

Admin

Jany King

Senior Identity Representative

jany_king@yahoo.com

Member

Felix Hodkiewicz

International Accountability Facilitator

felix_hodkiewicz@yahoo.com

Viewer

Judy Labadie

District Program Director

judy_labadie16@hotmail.com

Viewer

Users

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

NameRoleActions

Desmond Kulas

National Markets Strategist

desmond_kulas@gmail.com

Viewer

Litzy Wuckert

Internal Data Coordinator

litzy.wuckert95@hotmail.com

Member

Edna Kutch

District Tactics Administrator

edna.kutch20@yahoo.com

Viewer

Karina Ledner

Direct Tactics Executive

karina_ledner79@hotmail.com

Admin

Rickey Treutel-Johnson

Legacy Infrastructure Producer

rickey.treutel-johnson58@gmail.com

Member

Jaron Green

Legacy Program Producer

jaron.green24@gmail.com

Member

Coty Hagenes-Powlowski

Principal Operations Manager

coty.hagenes-powlowski@hotmail.com

Viewer

Marielle Rice

Investor Web Assistant

marielle_rice@gmail.com

Admin

Johnpaul Renner

Chief Branding Facilitator

johnpaul_renner@yahoo.com

Member

Macy Barton-Parker

Chief Marketing Officer

macy.barton-parker23@yahoo.com

Admin

Giles Bailey

Forward Infrastructure Executive

giles_bailey@gmail.com

Member

Brenda King

Corporate Web Planner

brenda.king68@hotmail.com

Member

Rahul Kozey

Customer Accountability Analyst

rahul_kozey14@yahoo.com

Viewer

Audreanne Klocko

Legacy Factors Supervisor

audreanne_klocko44@hotmail.com

Member

Dejon Bode

Product Identity Strategist

dejon.bode5@yahoo.com

Viewer

Ericka Jakubowski

Corporate Communications Coordinator

ericka.jakubowski@hotmail.com

Admin

Naomi Reichel

National Tactics Representative

naomi.reichel@hotmail.com

Member

Viola Bernier

Human Interactions Planner

viola.bernier@gmail.com

Member

Jakayla Greenholt

Global Operations Orchestrator

jakayla.greenholt@hotmail.com

Member

Elsie Padberg

Global Brand Associate

elsie.padberg@yahoo.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
Loren Bauchheber.pfannerstill@hotmail.comPort DestinviewActive$252.52
Tracey Kemmerlavina_blanda-ohara@gmail.comCedrickbergActive$1,191.98
Belinda Kiehn DVMphilip_paucek@gmail.comNorth JeffryActive$82.27
Traci Bogisich-Kreigerleonardo81@yahoo.comFort MabellesideActive$192.88
Betty Dietrichettie70@hotmail.comNew GeovanyInactive$551.49
Total$2,271.14

Basic table

Table with Images

NameEmailLocationStatusBalance
Hugo Kulas
@ross.hansen49
anya26@hotmail.comWunschlandInactive$911.91
Hope Gibson
@afton.homenick-oreilly62
joanie_kunde99@hotmail.comKeeblersideActive$991.44
Reginald Hettinger
@keegan.kutch
jerome_metz@gmail.comNew ReyesInactive$1,085.81
Phyllis Pollich
@stewart_mcclure41
kelton84@yahoo.comPort BrittanyInactive$932.89
Bobbie Hartmann
@porter_welch
modesto_miller@hotmail.comLake JovannymouthActive$961.65

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Mamie Kemmerapril23@gmail.comFishertonActive$348.32
Gwendolyn Nolanyoshiko.schowalter@hotmail.comBrooklineInactive$1,050.82
Courtney Robertskennedi70@yahoo.comJaylonburyInactive$849.46
Mary Kochsyble_bednar@gmail.comSpringdaleInactive$19.12
Andres Hoppecraig.medhurst@hotmail.comNickboroInactive$327.06
Total$2,594.78

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Miss Marilyn Nitzschenoe_gislason@yahoo.comEast DelaneyActive$784.13
Jana Romagueracecilia31@hotmail.comAbernathyfortActive$696.27
Mr. Gerard Nitzscheelisha_bergstrom70@hotmail.comAltoonaActive$1,076.55
Mae Kessler MDlorenzo76@gmail.comNew DemondInactive$298.62
Bobbie Nitzschesabryna.raynor33@gmail.comChino HillsInactive$77.03
Total$2,932.60

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Rosalie Wilkinson Vmarietta79@hotmail.comStreichsideInactive$331.70
Dr. Kelvin Thompsonedwina_heaney46@hotmail.comWest KristophertownInactive$922.05
Erika Schultzmadalyn86@hotmail.comAugustusburghActive$375.82
Dominic Morarmable.wehner@gmail.comLake LetitiaInactive$74.63
Mr. Derek Jerdekeshawn.boyer13@yahoo.comEast JasonActive$659.45
Total$2,363.65

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
Jordan Lubowitzgisselle24@yahoo.comZelmaworthActive$260.84
Erick Beertremayne.stoltenberg27@yahoo.comJohnstonburyActive$861.12
Flora Kautzer DVMvito.stoltenberg-hegmann@hotmail.comWest JakobInactive$498.92
Tonya Millercaleigh_kub@yahoo.comLake HoracioActive$694.80
Stewart Colejaeden33@gmail.comSouth JarrelltownActive$531.11
Total$2,846.79

Table with row selection

Card Table

NameEmailLocationStatusBalance
Jacquelyn O'Reillyquinton_keebler@gmail.comMyrnatownActive$597.61
Felicia Hanekris88@yahoo.comFort GwendolyntonActive$1,188.00
Alejandro Connhaleigh74@yahoo.comNew LuciushavenActive$610.50
Hope Lueilwitzpietro_stark@hotmail.comIdaho FallsActive$522.72
Fredrick Turcotteoliver.russel@hotmail.comNicolaboroActive$546.08
Total$3,464.91

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
Rachel Lefflermilo42@gmail.comWest DavidboroughInactive$434.67
Edmond Williamsonmitchel60@hotmail.comAndersonportActive$691.42
Kathy Schoen DVMkenny51@gmail.comKearnyInactive$252.23
Gayle Jaskolskizora.ruecker@gmail.comFeliciachesterActive$1,031.81
Thelma Thielsantiago.dicki17@gmail.comNew AlejandraviewActive$413.49
Felix Bergeandre.wiza17@gmail.comNew BritainActive$645.31
Doyle Johnsandy_ankunding25@hotmail.comLake UnaInactive$302.29
Bryant Lemke PhDkyler_kuhic@hotmail.comPuebloInactive$1,019.71
Ginger Nolanlukas_krajcik@gmail.comWaukeshaActive$211.67
Casey Wintheiseridell31@gmail.comOremActive$58.67
Mr. Travis Ernser Idereck_bins-goldner@gmail.comHemetActive$130.06
Guadalupe Murazik PhDdominic.bahringer63@hotmail.comEverardotownInactive$1,171.98
Faye Klingmacie85@hotmail.comWest WinfieldInactive$1,132.78
Jonathon Moenola.leuschke@hotmail.comGislasonfieldInactive$789.83
Danny Lynchmisael_blick@hotmail.comWest TheodoretownActive$870.57
Total$9,156.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

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.