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
INV001UnpaidPayPal$187.76
INV002PendingBank Transfer$536.31
INV003PendingBank Transfer$743.39
INV004PaidPayPal$618.02
INV005PaidBank Transfer$527.84
INV006PaidPayPal$916.01
INV007UnpaidPayPal$458.27
Total$3,987.60

Simple

Users

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

NameTitleEmailRoleActions
Henri BartonInternational Quality Technicianhenri.barton@gmail.comViewer
Rodolfo WaelchiInvestor Quality Facilitatorrodolfo.waelchi53@yahoo.comAdmin
Isaiah PowlowskiCustomer Markets Coordinatorisaiah.powlowski@hotmail.comAdmin
Graciela JerdeCentral Integration Strategistgraciela.jerde75@gmail.comMember
Brigitte BeattyChief Response Strategistbrigitte_beatty23@hotmail.comAdmin
Deontae WehnerChief Branding Facilitatordeontae.wehner@gmail.comMember

Stacked on mobile

Users

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

NameRoleActions

Ahmed Beahan

Internal Branding Executive

ahmed.beahan@gmail.com

Admin

Ebba Franecki

Legacy Tactics Associate

ebba.franecki67@yahoo.com

Admin

Cecil Cartwright

Direct Functionality Executive

cecil.cartwright@gmail.com

Viewer

Jany Altenwerth

Global Creative Strategist

jany_altenwerth@hotmail.com

Viewer

Ally Bauch

Regional Identity Technician

ally_bauch@yahoo.com

Viewer

Dawn Quitzon

International Factors Designer

dawn_quitzon91@gmail.com

Member

Users

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

NameRoleActions

Waldo Huels-Strosin

Customer Data Administrator

waldo.huels-strosin@yahoo.com

Member

Herminio Walker-Luettgen

Legacy Operations Engineer

herminio.walker-luettgen@yahoo.com

Viewer

Wilfrid Jast

Internal Quality Associate

wilfrid_jast81@gmail.com

Admin

Annette Sauer

Corporate Identity Supervisor

annette_sauer8@gmail.com

Viewer

Wilfred Cole

Lead Paradigm Analyst

wilfred.cole53@gmail.com

Member

Dustin Kilback

Forward Tactics Manager

dustin_kilback51@hotmail.com

Viewer

Camylle Ruecker

Direct Markets Director

camylle_ruecker@gmail.com

Admin

Guiseppe Gislason

District Directives Associate

guiseppe_gislason52@yahoo.com

Admin

Hyman Mayer

Product Program Officer

hyman_mayer71@gmail.com

Member

Melyna DuBuque

Central Program Engineer

melyna.dubuque@gmail.com

Admin

Nathaniel Will

Human Branding Representative

nathaniel_will@yahoo.com

Viewer

Rebeca Thiel

International Security Manager

rebeca_thiel22@hotmail.com

Member

Annette Gleason

District Implementation Producer

annette.gleason@hotmail.com

Viewer

Landen Kuhn

Chief Interactions Supervisor

landen_kuhn76@gmail.com

Admin

May Schowalter

Direct Identity Agent

may.schowalter@gmail.com

Admin

Gonzalo Armstrong

Corporate Marketing Assistant

gonzalo_armstrong63@hotmail.com

Viewer

Xzavier Steuber

District Infrastructure Assistant

xzavier_steuber@yahoo.com

Viewer

Shany Schinner

National Group Coordinator

shany.schinner90@gmail.com

Member

Darren Stracke

Customer Directives Consultant

darren.stracke@yahoo.com

Member

Billie Hartmann

Global Directives Representative

billie.hartmann24@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
Glenn Pouros IIjillian16@hotmail.comYorkActive$278.39
Sidney Steubergerson.dibbert@gmail.comPedrosideActive$11.20
Sylvester Huelslitzy.miller98@gmail.comNew GretatonInactive$1,006.80
Mr. Courtney Kuhlmanvicenta.bode@hotmail.comLake RebekaActive$595.05
Dr. Emilio Daviskathryn21@gmail.comJoanviewInactive$529.78
Total$2,421.22

Basic table

Table with Images

NameEmailLocationStatusBalance
Sabrina Hettinger
@marianna.parker
corine30@yahoo.comAimeesteadInactive$192.44
Mamie Reichel-Stoltenberg
@emilio.goodwin
jon_gerlach21@gmail.comCarrolltonInactive$946.66
Terry Stroman
@eudora.schmeler
karley95@gmail.comNiagara FallsActive$839.26
Renee Schumm
@larissa.hudson
carlie.zemlak@hotmail.comNewtonActive$174.49
Debra Keeling
@ava_stracke
winston_rutherford@hotmail.comRuthchesterActive$714.21

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Lamar Boreradah_vonrueden1@yahoo.comIanworthActive$911.38
Devin Lindgrenismael_conn40@hotmail.comCastro ValleyActive$447.65
Diana Bergstromtia68@gmail.comNorth CarletonInactive$1,115.78
Jim Raynordexter.tremblay@yahoo.comNorth BartonInactive$984.86
Dr. Craig Schowalterberyl88@yahoo.comBethesdaActive$145.20
Total$3,604.87

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Lila Lindpayton_heidenreich33@gmail.comElizabethActive$1,029.54
Hugo Hilllvilma_cruickshank78@yahoo.comManhattanInactive$427.19
Alyssa Kozeynestor_witting92@hotmail.comWest EloyboroughInactive$318.15
Wesley Connlennie3@hotmail.comHanfordInactive$1,044.05
Minnie Flatleyjudson_borer93@gmail.comNew KellieActive$805.74
Total$3,624.67

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Nichole Nolanalessia_dicki12@yahoo.comNorth LethachesterInactive$19.77
Gwen Streichkendall_durgan@yahoo.comLorenboroActive$805.13
Robin Nienow Jr.mikayla41@gmail.comNorth MauricioInactive$722.31
John Prohaskamargie.little@yahoo.comDes PlainesInactive$184.41
Bethany Windlereryn.ebert@yahoo.comEast ReubenlandInactive$335.32
Total$2,066.94

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
Dr. Erin Ortizkris.fisher21@gmail.comPort HeleneInactive$982.76
Jessie Jacobsleta.kutch86@hotmail.comNorth AbbieInactive$782.39
Miss Lori Wittingricky_effertz@hotmail.comWest NicolaburyInactive$1,150.08
Jessica Cormier Vbrandt.kulas56@yahoo.comKittyboroActive$297.98
Wayne Priceelena.schulist@hotmail.comNew DanykaInactive$670.40
Total$3,883.61

Table with row selection

Card Table

NameEmailLocationStatusBalance
Denise Prohaskakendra_kilback13@yahoo.comPort HilbertInactive$31.81
Clayton Runolfssondixie_wiegand@hotmail.comLukasfieldInactive$921.95
Bobbie Connlavonne81@gmail.comRockfordInactive$742.50
Dr. Duane Johnstoncoby_muller@gmail.comValeriefurtInactive$538.42
Marcus Schaefer Jr.emely_konopelski@hotmail.comSouth CandicetownInactive$899.70
Total$3,134.38

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
Luis McLaughlinedgardo54@gmail.comLake KobyActive$844.23
Marie McDermottlillian76@hotmail.comEastvaleInactive$966.13
Richard Boyle-Batz Vemilio_lemke26@gmail.comSouth MadysonvilleActive$782.93
Janie O'Connerethel56@yahoo.comZiemecesterActive$454.08
Andres Schulistalvis_lind@gmail.comNew VirgieActive$1,183.10
Reginald Homenickjaron_casper79@hotmail.comSouth AmbroseburyInactive$982.54
Dave Torpewell60@gmail.comLompocActive$306.35
Allan Abernathytomas2@yahoo.comLeilabergActive$77.77
Alicia Stammnedra.hintz-monahan7@gmail.comWymancesterInactive$556.82
Frances Effertzclyde_frami@hotmail.comWest MerleInactive$1,060.62
Latoya Terrynewton84@hotmail.comNorth AminaActive$1,159.95
Mona Kling IInadia_oreilly@hotmail.comNew MarinaActive$258.65
Dominic Paucekjacky61@hotmail.comLucindahavenInactive$884.10
Johnny Krajcik Itwila_barrows50@hotmail.comMohrsteadActive$426.20
Mr. Gerard Feeney PhDtom_schroeder@gmail.comLake ZoilaInactive$610.64
Total$10,554.11

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.