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
INV001UnpaidCredit Card$831.29
INV002PaidPayPal$521.90
INV003PendingCredit Card$382.47
INV004PendingCredit Card$623.40
INV005UnpaidPayPal$313.03
INV006UnpaidPayPal$594.91
INV007PendingCredit Card$448.19
Total$3,715.19

Simple

Users

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

NameTitleEmailRoleActions
Hal LuettgenChief Group Executivehal_luettgen@yahoo.comMember
Wayne HodkiewiczPrincipal Assurance Facilitatorwayne_hodkiewicz6@gmail.comViewer
Leopold O'HaraCentral Accountability Coordinatorleopold_ohara3@yahoo.comAdmin
Oda KshlerinFuture Branding Consultantoda_kshlerin@hotmail.comViewer
Kris KlingDynamic Creative Consultantkris_kling54@hotmail.comMember
Roberta JohnsonInvestor Functionality Consultantroberta_johnson@yahoo.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Arlo Gutmann

Global Integration Designer

arlo_gutmann6@yahoo.com

Admin

Margie Sipes

Global Markets Representative

margie.sipes@gmail.com

Admin

Danielle Bosco

Senior Optimization Facilitator

danielle.bosco@hotmail.com

Viewer

Lambert Mills

Chief Applications Analyst

lambert_mills@gmail.com

Member

Verner Ledner

National Solutions Developer

verner.ledner27@yahoo.com

Viewer

Kian Gutkowski

Central Group Liaison

kian.gutkowski@yahoo.com

Admin

Sticky header

Users

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

NameRoleActions

Boris Upton

Product Marketing Technician

boris.upton99@yahoo.com

Viewer

Sabryna Heller

Investor Paradigm Executive

sabryna_heller84@hotmail.com

Member

Ally Block

Direct Metrics Architect

ally.block93@gmail.com

Member

Madelyn Kautzer

Dynamic Usability Liaison

madelyn_kautzer@hotmail.com

Admin

Laverna Spinka

Legacy Branding Director

laverna_spinka@hotmail.com

Viewer

Anibal Hand

Dynamic Configuration Officer

anibal_hand@yahoo.com

Admin

Janelle Runolfsson

Lead Marketing Engineer

janelle.runolfsson94@gmail.com

Admin

Ova Bernier

Investor Accounts Associate

ova_bernier65@hotmail.com

Viewer

Abigale Romaguera

International Implementation Administrator

abigale.romaguera@yahoo.com

Member

Travon Auer

Regional Applications Analyst

travon_auer@yahoo.com

Viewer

Cindy Bechtelar

Principal Optimization Supervisor

cindy_bechtelar@gmail.com

Viewer

Ashlee Prohaska

Dynamic Accounts Supervisor

ashlee.prohaska@hotmail.com

Admin

Veda Schiller

Regional Optimization Associate

veda_schiller12@hotmail.com

Admin

Emory Smitham

Central Applications Director

emory.smitham@yahoo.com

Admin

Arch Bins-Mante

Future Data Producer

arch.bins-mante49@gmail.com

Admin

Mae Schiller

Senior Quality Architect

mae_schiller@gmail.com

Admin

Myles Schneider

National Markets Analyst

myles_schneider@yahoo.com

Member

Tamara Harvey

Regional Markets Developer

tamara.harvey@yahoo.com

Member

Leanne Bailey

Senior Research Officer

leanne_bailey@hotmail.com

Admin

Samantha Nader

Human Implementation Strategist

samantha_nader@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
Brittany Gislasonbennett94@gmail.comEast RosamondmouthActive$1,050.81
Tricia Rutherfordmaud_quigley@yahoo.comCorafieldActive$20.39
Mr. Travis Tremblaytyson53@yahoo.comWest DorthyfieldInactive$885.78
Jorge Roob DVMelroy.wisoky@gmail.comZoieshireInactive$50.80
Ted Abshirerigoberto.purdy@yahoo.comPort CassandreburghActive$932.51
Total$2,940.29

Basic table

Table with Images

NameEmailLocationStatusBalance
Earnest Stokes
@delia81
ed_pfeffer@gmail.comWest IlaInactive$1,112.27
Eileen Lockman
@molly30
renee.watsica19@gmail.comNew HavenInactive$619.58
Marion Swift
@gia.lueilwitz
ryley77@hotmail.comNorth LeilanisteadInactive$153.62
Patricia Pouros
@johathan_davis
jena_crona59@yahoo.comMakenzieworthInactive$770.01
Leo Yundt
@breanne56
hector_herman82@yahoo.comFort ElmoActive$1,124.91

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Bonnie Gutmannnicolas12@hotmail.comSouth RafaelamouthInactive$1,005.43
Julian Labadieelsie.erdman67@gmail.comGenovevaportActive$632.13
Mr. Jon Schroederkay_hammes95@hotmail.comGagesideActive$1,106.07
Sophie Litteleloy_rowe@yahoo.comMetzmouthInactive$215.35
Alexandra Schulistnick.halvorson37@yahoo.comSamfurtInactive$980.07
Total$3,939.05

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Brandi Rutherfordbrisa.corwin91@gmail.comKihnworthActive$122.41
Mrs. Iris Gleason Velisha10@hotmail.comNorth KorbinInactive$436.97
Dr. Samantha O'Connelleda_schneider@gmail.comEast EloiseInactive$110.78
Robert Douglasoliver_metz61@gmail.comTaureanfortInactive$854.25
Omar Rippinhans_little85@yahoo.comRandyburyInactive$519.44
Total$2,043.85

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Jessie Goyettemerlin.leffler@yahoo.comFort OttisvilleInactive$575.43
Lillian Breitenbergkennedi50@yahoo.comMurrayviewActive$637.28
Frank Thieldaren_lakin@hotmail.comNorth LucianoboroActive$203.58
Carol Adamslaury_bechtelar@hotmail.comNitzschehavenActive$859.40
Nelson Thompsonadrienne_auer42@hotmail.comLakelandActive$85.97
Total$2,361.66

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
Gerard Runolfsdottirhudson.kertzmann44@yahoo.comMarleeboroughActive$1,020.10
Nancy Cormieroliver.stamm69@yahoo.comMontebelloInactive$1,168.07
Gayle Quigley IVletitia.moen@gmail.comNitzschestadActive$202.33
Muriel Harberabbey_macejkovic@gmail.comHerzogcesterActive$552.32
Johnathan Greenkirk_roob69@hotmail.comWelchbergInactive$141.80
Total$3,084.62

Table with row selection

Card Table

NameEmailLocationStatusBalance
Ms. Jill Corwinremington95@gmail.comFaheysideInactive$1,035.12
Laverne Mosciskieverette.gerlach99@yahoo.comPort ElianeActive$363.55
Cecil Roobavis21@gmail.comEmiliefurtActive$1,044.77
Guillermo Kuhic Jr.dexter.graham94@hotmail.comLake EthanInactive$211.83
Russell Feil MDhassie.dooley66@gmail.comRyleeboroughInactive$855.37
Total$3,510.64

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
Miss Mable Goldnerkeaton.walker87@hotmail.comWest HymanfieldActive$999.15
Gloria Hirthe DVMgerman15@gmail.comLake LilyActive$1,198.20
Domingo Reingershad29@gmail.comLake SusantownActive$1,082.80
Marcos Keelingjada19@hotmail.comEast OrloburghInactive$942.42
Crystal Coleamira91@hotmail.comLake EricInactive$446.11
Amelia Hodkiewiczmarlen_konopelski21@gmail.comSengerhavenInactive$28.43
Johnathan Marquardthyman.maggio@hotmail.comNorth EmmaInactive$68.39
Dr. Blanche Torpsonia36@hotmail.comFort VickyActive$365.74
Aubrey Boehmrahsaan_smith@yahoo.comRodolfofurtActive$586.70
Frances Walker Ialice41@hotmail.comPort AdelinevilleActive$98.51
Dr. Nathan Stromanmiracle14@yahoo.comMathiassideInactive$780.70
Andrew Ernsertaurean59@gmail.comWest CourtneyInactive$1,047.02
Courtney Ullrichflorida.rohan32@hotmail.comOshkoshActive$15.77
Dewey Schaefergertrude_larson-klein@gmail.comEast DariusInactive$464.56
Andrew Bechtelarvance37@gmail.comSistervilleInactive$813.82
Total$8,938.32

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.