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

Usage

Basic example

A list of your recent invoices.
InvoiceStatusMethodAmount
INV001PendingPayPal$294.42
INV002UnpaidPayPal$670.45
INV003UnpaidPayPal$139.58
INV004PaidPayPal$759.23
INV005UnpaidPayPal$975.62
INV006UnpaidCredit Card$469.14
INV007PendingPayPal$864.92
Total$4,173.36

Simple

Users

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

NameTitleEmailRoleActions
Jed AdamsHuman Mobility Orchestratorjed_adams72@gmail.comViewer
Tom StrosinProduct Communications Techniciantom_strosin73@gmail.comAdmin
Ryley JakubowskiGlobal Identity Assistantryley.jakubowski34@yahoo.comViewer
Arnold SwaniawskiForward Program Facilitatorarnold_swaniawski21@yahoo.comViewer
Bennie HesselDirect Tactics Liaisonbennie.hessel4@yahoo.comViewer
Antoinette MannCentral Assurance Coordinatorantoinette.mann82@hotmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Lisette Krajcik

National Implementation Liaison

lisette.krajcik50@hotmail.com

Member

Marsha Ullrich

Investor Interactions Planner

marsha_ullrich@gmail.com

Admin

Drew Langosh

International Group Representative

drew.langosh39@yahoo.com

Admin

Eunice Connelly

Internal Creative Consultant

eunice.connelly@gmail.com

Member

Alfredo Kerluke

Forward Infrastructure Assistant

alfredo.kerluke16@gmail.com

Viewer

Morgan Ferry

Legacy Intranet Coordinator

morgan_ferry@yahoo.com

Viewer

Sticky header

Users

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

NameRoleActions

Ken Walsh

Direct Security Liaison

ken.walsh@yahoo.com

Member

Patsy Funk

Product Security Engineer

patsy_funk86@hotmail.com

Admin

Precious Langosh

Senior Intranet Liaison

precious.langosh88@yahoo.com

Admin

Casper Mraz

Legacy Mobility Consultant

casper.mraz60@hotmail.com

Member

Jim Volkman

Future Response Orchestrator

jim_volkman31@gmail.com

Viewer

Janet Okuneva

Customer Mobility Representative

janet.okuneva4@hotmail.com

Admin

Seamus Marks

Chief Security Associate

seamus_marks21@yahoo.com

Member

Ariel Pouros

Dynamic Assurance Consultant

ariel_pouros37@hotmail.com

Viewer

Olivia Gerhold

District Assurance Executive

olivia.gerhold@hotmail.com

Member

Helmer Block

National Applications Specialist

helmer_block2@yahoo.com

Viewer

Dominique Stroman

Customer Security Coordinator

dominique_stroman@gmail.com

Admin

Earl Wintheiser

Global Marketing Administrator

earl.wintheiser93@hotmail.com

Admin

Jenny O'Keefe

Central Accountability Architect

jenny_okeefe68@gmail.com

Member

Philip Harber

Product Research Liaison

philip_harber85@hotmail.com

Member

Leigh Gerlach

National Paradigm Assistant

leigh_gerlach24@hotmail.com

Member

Montana Berge

Corporate Optimization Facilitator

montana_berge5@gmail.com

Admin

Manuel Rogahn

Lead Optimization Representative

manuel_rogahn2@yahoo.com

Member

Darryl Bins

International Metrics Facilitator

darryl_bins29@gmail.com

Member

Verona Hyatt

District Research Orchestrator

verona_hyatt@gmail.com

Viewer

Stanton Stark

Regional Data Developer

stanton_stark@hotmail.com

Member

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
Donny Murphy IVewald_klocko@gmail.comJeromecesterActive$710.96
Keely Daughertyadalberto95@hotmail.comSouth ChelseatownInactive$105.08
Denise Stokesorlando_abshire98@yahoo.comHowellchesterInactive$1,030.25
Jacquelyn Schummgerald_lesch@yahoo.comFort EllsworthboroActive$997.84
Nicklaus Rohanthaddeus.renner@gmail.comDavonsideInactive$583.35
Total$3,427.48

Basic table

Table with Images

NameEmailLocationStatusBalance
Frederick Beer
@sara_ohara
alexandra.lindgren@yahoo.comWalshsteadInactive$35.02
Mrs. Vanessa Kuhn
@shanie64
lyle_larson@gmail.comRussellburghInactive$671.55
Mr. Bryan Schultz
@arianna.bergstrom72
marlen.jacobi81@yahoo.comOrtizsideActive$943.60
Irma Fisher
@freddie_schmidt
jon_pollich93@hotmail.comNorth MyrticeInactive$990.94
Ernestine Rolfson
@lou_ledner79
rebeka_hirthe94@hotmail.comFort ShaniaInactive$1,081.40

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Margarete Padbergbeth43@hotmail.comPort CharlenestadActive$431.67
Dayton Connellyclifton.bergnaum34@yahoo.comFort ScottyActive$619.49
Darion Sengererika89@hotmail.comSpringfieldActive$870.65
Cary Mitchelldale_cole@gmail.comReganmouthInactive$26.67
Shelia Kuhic PhDelroy.schuppe9@hotmail.comWest MarshaInactive$48.21
Total$1,996.69

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Jerry Mayernoah47@hotmail.comFort RobertInactive$1,025.31
Antoinette Ziememckenna87@hotmail.comSouth SarachesterInactive$166.21
Rosa Toyjoanie_watsica@gmail.comDickensboroughInactive$1,089.55
Susie Klingsheryl31@yahoo.comHyattboroughActive$926.05
Jodi Ullricheliane.hane21@yahoo.comWest BrennonvilleInactive$114.40
Total$3,321.52

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Cierra Jasteric25@hotmail.comDuBuqueboroInactive$203.78
Myrtle Goyettelucy.beahan54@hotmail.comSouth CindyActive$773.67
Rachel Vandervortxzavier.zemlak12@gmail.comNorth JoannaburghInactive$1,052.98
Henrietta Baileylola.ohara@gmail.comFishersActive$93.87
Clyde Mante DVMneha.pfeffer14@gmail.comSan ClementeInactive$29.22
Total$2,153.52

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
Lance Hettingerlaila_veum@yahoo.comEast MargarettInactive$851.35
Hugh Whitekristen_mueller@yahoo.comHeathcoteshireInactive$602.03
Efrain Osinskikeara44@yahoo.comWest CaryActive$11.82
Maureen Wisozk Sr.eleanor33@hotmail.comGeraldineportActive$200.96
Gregg Shieldsbernadette.goodwin@yahoo.comMuellerbergInactive$672.69
Total$2,338.85

Table with row selection

Card Table

NameEmailLocationStatusBalance
Brandi Friesenann82@hotmail.comFort EriksteadInactive$563.29
Suzanne Williamson Iwillard_kerluke@hotmail.comChristopherboroActive$730.99
Wilfrid Vandervortvictoria29@yahoo.comSouth KingInactive$402.65
Marquise Effertztrent.kirlin7@hotmail.comSouth FlorencioActive$75.93
Jarod Pfefferann34@hotmail.comFort TravisActive$402.51
Total$2,175.37

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
Quinton Connluella_wyman@hotmail.comEvaviewInactive$965.84
Ali Lebsacktracey26@yahoo.comElvirasteadInactive$776.62
Fred Baumbachkassandra.terry78@hotmail.comLake PercyInactive$862.97
Sherry Smithammelanie7@yahoo.comLynneburghInactive$131.55
Jo Sporererica.kirlin@hotmail.comPort LilyantonActive$943.00
Claud Marksrosa23@hotmail.comFort JuniusActive$14.79
Hilma Bauchrogelio.bruen79@yahoo.comEast LillyInactive$807.16
Gabriel Manninez99@gmail.comStehrfurtInactive$587.51
Marcelle Rutherford-Ondrickaginger.robel@hotmail.comKeyshawntonActive$308.35
Demarcus Mayerlyla.streich75@gmail.comPauceksteadInactive$221.65
Claude Abernathydarrick_bartell61@gmail.comKoeppchesterActive$1,192.65
Hillard Wisokyavis_reilly68@yahoo.comPort JenningsInactive$1,058.67
Miguel Lebsackvidal_treutel87@hotmail.comRempelviewActive$271.13
Thurman Homenickelmer_goldner@hotmail.comNew BobbietownInactive$203.41
Deja DuBuquepatience72@yahoo.comPharrInactive$908.77
Total$9,254.07

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.