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
INV001PendingBank Transfer$170.21
INV002UnpaidCredit Card$825.71
INV003PaidPayPal$590.92
INV004PaidBank Transfer$202.01
INV005PendingCredit Card$842.58
INV006PaidBank Transfer$813.13
INV007PendingCredit Card$710.88
Total$4,155.44

Simple

Users

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

NameTitleEmailRoleActions
Brenna JastRegional Usability Facilitatorbrenna_jast63@gmail.comMember
Karine NicolasInternational Assurance Executivekarine_nicolas@hotmail.comMember
Amos HomenickInternational Mobility Liaisonamos_homenick@gmail.comMember
Joanie BinsDynamic Optimization Developerjoanie.bins@hotmail.comAdmin
Woodrow ThielCorporate Accounts Analystwoodrow.thiel81@yahoo.comMember
Erik LarsonCentral Paradigm Associateerik.larson@hotmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Emie King

Forward Infrastructure Specialist

emie.king75@yahoo.com

Admin

Ressie Walter

Investor Directives Supervisor

ressie_walter@hotmail.com

Member

Nathen Leffler

Central Brand Engineer

nathen_leffler28@gmail.com

Admin

Sister Hilpert

Direct Functionality Administrator

sister_hilpert51@gmail.com

Member

Vern McCullough

Human Optimization Architect

vern.mccullough71@yahoo.com

Member

Gregorio Casper

Investor Operations Administrator

gregorio_casper@gmail.com

Member

Users

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

NameRoleActions

Yolanda Lehner

Regional Identity Agent

yolanda.lehner61@hotmail.com

Member

Myrtis Baumbach

Lead Assurance Agent

myrtis_baumbach59@gmail.com

Viewer

Ona O'Conner

Direct Program Officer

ona_oconner51@yahoo.com

Admin

Rudy Frami

Global Integration Supervisor

rudy.frami@gmail.com

Member

Scottie Bernhard-Torphy

Human Solutions Specialist

scottie.bernhard-torphy@hotmail.com

Member

Rigoberto Toy

Human Configuration Officer

rigoberto_toy82@gmail.com

Viewer

Reece Collins

Future Security Manager

reece_collins@hotmail.com

Member

Ottilie Willms

Chief Mobility Manager

ottilie_willms57@hotmail.com

Member

Noemi Runolfsson

District Factors Engineer

noemi.runolfsson2@gmail.com

Member

Wendell Graham

Direct Infrastructure Director

wendell.graham@yahoo.com

Viewer

Austin Muller

Future Usability Assistant

austin.muller@yahoo.com

Member

Hal Russel

Lead Operations Associate

hal_russel80@gmail.com

Admin

Brice Larkin

Dynamic Data Developer

brice_larkin13@hotmail.com

Viewer

Sierra Paucek

Internal Solutions Supervisor

sierra_paucek72@gmail.com

Viewer

Isobel Mohr

Global Paradigm Manager

isobel_mohr@yahoo.com

Viewer

Joanny McClure

National Research Administrator

joanny_mcclure10@yahoo.com

Admin

Caden Schaefer

Lead Infrastructure Associate

caden_schaefer50@gmail.com

Admin

Sonny Leffler

Forward Identity Manager

sonny_leffler41@gmail.com

Viewer

Golden Mann

Corporate Marketing Director

golden.mann7@gmail.com

Member

Kassandra Schultz

Product Security Producer

kassandra_schultz@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
Lynn Trantowjayce_jerde@hotmail.comWest GlenInactive$661.76
Malcolm Dareluis.barrows@gmail.comSouth EnolaInactive$711.10
Rhonda Considinedagmar.murray17@yahoo.comNew HoracioActive$759.50
Veronica Kautzerdeshaun_west40@hotmail.comSouth GateInactive$363.99
Ms. Melody Whitemarilie.larkin82@gmail.comEladiosteadActive$672.59
Total$3,168.94

Basic table

Table with Images

NameEmailLocationStatusBalance
Freddie Bahringer
@modesta.williamson86
shawn12@yahoo.comLa HabraActive$1,098.92
Bob O'Kon
@adell.crona
zoie7@yahoo.comWest CaleighworthActive$987.66
Don Orn
@dejuan.rowe
urban_shields@hotmail.comRochester HillsInactive$13.32
Maureen Schumm
@cynthia.balistreri
shayne_wuckert52@hotmail.comJerrellvilleInactive$827.39
Silvia Borer
@cleta_weissnat-pfeffer21
hassan_zulauf30@yahoo.comJayceetonInactive$526.92

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Judith Friesenjusten.labadie38@hotmail.comPort CharlotteInactive$328.89
Van Heaneybeatrice.crooks@hotmail.comIdellsteadActive$349.79
Lana Wildermanethyl.harris96@hotmail.comClemmieviewInactive$341.51
Ernesto Ebertrhea_mueller@gmail.comRoyal OakActive$1,103.64
Jesus Reingerbrandi65@gmail.comParkerworthInactive$646.25
Total$2,770.08

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Ms. Sylvia Goldnercierra13@yahoo.comJaidenfurtActive$110.30
Dr. Lana Hoegerted.ohara@yahoo.comNickolasshireInactive$910.73
Jack Monahanroscoe_spinka16@hotmail.comVitasideInactive$1,140.63
Billie Kunzebridget85@gmail.comPort MichaelavilleActive$10.31
Veronica Bauchmittie64@hotmail.comEast ClementInactive$687.63
Total$2,859.60

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Barry Fadelkenya_lindgren@yahoo.comJasonvilleInactive$528.45
Terry Wehnerdavon.torphy@gmail.comPort RicardoworthInactive$706.19
Wallace Hoppejohnpaul_kunde@hotmail.comEast BlairbergActive$1,039.14
Samuel Runolfssonfredy30@yahoo.comMaximotonActive$244.92
Nettie D'Amoreedgardo.willms@hotmail.comSandrinehavenInactive$357.71
Total$2,876.41

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
Julie Feeneyvalentin.kuphal@yahoo.comNew HughburyActive$362.95
Mark Monahanchristina.bernhard@hotmail.comEast JedediahInactive$526.15
Clark Hermanbryon_labadie@gmail.comWilkinsonworthInactive$761.61
Vincent Aufderharnicolette_hackett@gmail.comFort MoisesActive$946.52
Shari Nolanotis.vandervort27@gmail.comLaceyActive$196.63
Total$2,793.86

Table with row selection

Card Table

NameEmailLocationStatusBalance
Victoria Schulistweldon_reilly@yahoo.comWest SacramentoActive$271.76
Marcos Kuvalisrosa77@yahoo.comSaulfortInactive$696.97
Johnnie Lynchhelmer50@yahoo.comNorth FabiolafurtActive$10.97
Ben Marvincarlo.farrell@gmail.comWest AleenActive$752.54
Catherine Faheymichael.connelly@yahoo.comOtiliahavenInactive$1,147.95
Total$2,880.19

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
Reginald Collinslillian_schmitt42@hotmail.comLake CheyenneInactive$995.60
Alma Balistreriyasmeen.rolfson18@hotmail.comWest RansomInactive$1,177.33
Emilio Stoltenberghettie_deckow-rutherford17@gmail.comNew VerliefurtInactive$257.36
Tim Leuschke DDSloraine.damore@hotmail.comSouth EunaInactive$871.75
Miss Gwen Buckridgethaddeus.huels75@yahoo.comGarfieldsteadInactive$783.64
Darren Beattyoda.kertzmann-little@hotmail.comBednarfieldInactive$129.25
Cornelius Abbotthudson91@yahoo.comNorth TamarafurtActive$317.02
Brenda Wizaannamarie34@hotmail.comKentonboroughActive$11.89
Wendell Satterfieldtremayne.pagac1@hotmail.comMaximilianburghActive$727.48
Faye Waelchiglenna54@gmail.comEast ReidburghInactive$438.66
Helen Kuphalrichmond.schultz@yahoo.comPort EladioActive$446.83
Marc Doyleedna_lebsack@yahoo.comNew CarminesideInactive$811.11
Nellie Hirthehilma_bauch@hotmail.comEast ShermanshireInactive$949.20
Anthony Stromantherese73@hotmail.comNew GretaInactive$817.14
Eugene Heaney DVMoral21@hotmail.comKennaboroActive$1,003.99
Total$9,738.25

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.