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
INV001PaidPayPal$124.92
INV002PendingPayPal$194.40
INV003PaidCredit Card$603.12
INV004UnpaidCredit Card$640.52
INV005UnpaidBank Transfer$204.62
INV006PendingPayPal$419.37
INV007PendingBank Transfer$193.16
Total$2,380.11

Simple

Users

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

NameTitleEmailRoleActions
Cassandra BoehmRegional Optimization Specialistcassandra.boehm@hotmail.comAdmin
Delia KochSenior Infrastructure Representativedelia.koch46@yahoo.comAdmin
Melissa HettingerInternational Directives Analystmelissa.hettinger@yahoo.comViewer
Jonas BrownCustomer Research Engineerjonas_brown@yahoo.comMember
Neil MacejkovicCustomer Division Specialistneil_macejkovic@gmail.comMember
Omer LubowitzInternational Brand Engineeromer.lubowitz63@yahoo.comMember

Stacked on mobile

Users

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

NameRoleActions

Lexie Sporer

International Security Executive

lexie_sporer32@hotmail.com

Admin

Abe Moore

Forward Interactions Executive

abe.moore31@yahoo.com

Admin

Angie O'Reilly

Corporate Directives Administrator

angie_oreilly53@hotmail.com

Admin

Alexis Nolan

Future Optimization Technician

alexis_nolan@yahoo.com

Member

Josephine Prohaska

Human Creative Developer

josephine_prohaska@gmail.com

Admin

Valerie Walsh

Customer Program Coordinator

valerie_walsh88@hotmail.com

Admin

Sticky header

Users

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

NameRoleActions

Geovanny Volkman

Dynamic Data Developer

geovanny_volkman@yahoo.com

Admin

Kyler Kirlin

International Assurance Developer

kyler.kirlin50@gmail.com

Admin

Trisha Mueller

Human Configuration Developer

trisha.mueller27@hotmail.com

Admin

Walter Jenkins

Product Optimization Designer

walter.jenkins@gmail.com

Viewer

Terrance Koepp

Senior Infrastructure Liaison

terrance_koepp@gmail.com

Admin

Roland Rempel

Corporate Factors Planner

roland.rempel66@yahoo.com

Admin

Anya Paucek

Legacy Optimization Director

anya_paucek82@yahoo.com

Member

Evelyn Hirthe

Senior Communications Engineer

evelyn_hirthe@yahoo.com

Admin

Lynette Kovacek

Principal Implementation Orchestrator

lynette_kovacek40@hotmail.com

Viewer

Nathanial Hammes

Investor Infrastructure Manager

nathanial_hammes@hotmail.com

Viewer

Bridget Ryan

Corporate Metrics Planner

bridget.ryan@gmail.com

Viewer

Laverne Walter

National Intranet Executive

laverne_walter@hotmail.com

Admin

Jeffrey Bashirian

Principal Metrics Director

jeffrey.bashirian83@gmail.com

Viewer

Marley Kertzmann

Human Metrics Supervisor

marley_kertzmann48@hotmail.com

Member

Angelo Kovacek

Principal Infrastructure Engineer

angelo_kovacek@yahoo.com

Member

Jennie Jones

Lead Interactions Technician

jennie.jones54@gmail.com

Member

Sherri Carroll

Senior Applications Manager

sherri_carroll28@hotmail.com

Member

Justin Kozey

Central Branding Agent

justin_kozey@hotmail.com

Viewer

Roberta Lubowitz

Principal Data Manager

roberta_lubowitz88@gmail.com

Admin

Austin Deckow

Legacy Brand Supervisor

austin_deckow@yahoo.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
Caleb Boyerjudy.hills92@hotmail.comLake AllyfurtInactive$517.98
Toni Quigley IIfrancisco21@gmail.comTownevilleActive$552.83
Mr. Felton Hahn Vedwin.schinner@gmail.comSouth JaedenburghActive$283.89
Michelle DuBuquegertrude.keeling@hotmail.comHooverActive$88.41
Buford Schneiderrafael.pacocha-littel92@gmail.comMargateInactive$834.00
Total$2,277.11

Basic table

Table with Images

NameEmailLocationStatusBalance
Jessie Christiansen DVM
@adaline.johnston
tyler_ondricka12@hotmail.comPort ShaunviewInactive$369.92
May Douglas III
@lillian.leffler
donna69@hotmail.comSouth IssacboroughInactive$1,150.13
Princess Roberts
@danny_beer5
palma.mann@yahoo.comWaterburyActive$1,020.48
Nellie Veum
@arturo29
reece67@hotmail.comNew MarcusInactive$973.26
Cora Runolfsdottir
@rogelio81
gregory.ondricka32@yahoo.comFort ReneeboroughInactive$155.58

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Lonnie Nienow IIIward.stehr39@yahoo.comCorwinviewActive$253.63
Miracle Bayerjames_jacobs46@gmail.comPeabodyInactive$1,188.05
Damon Schmelerfreddie2@hotmail.comPacochaworthActive$748.79
Deangelo Mayertsalvador_gibson18@yahoo.comSouth HannaActive$303.02
Dr. Erick Waters IIkenton96@gmail.comMooreActive$211.96
Total$2,705.45

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Sanford Dickisilvia_purdy98@gmail.comEast ElwyntownInactive$203.41
Dr. Elizabeth Schowaltertommy43@gmail.comShaunvilleInactive$552.93
Marlee Wolffebba_bahringer@gmail.comLake AdelinefieldActive$621.93
Guadalupe Kunzemario.heaney-lang10@hotmail.comSouth AndreActive$49.99
Lynn Jakubowskispencer80@gmail.comPort MariannaActive$222.48
Total$1,650.74

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Sonya Bartolettiona93@yahoo.comFort HoraceviewActive$859.49
Donnie Parkerjuan.kling@yahoo.comPort AllanActive$718.85
Waldo Larkinricardo78@hotmail.comAshastadInactive$713.08
Ms. Cydney Cole Icora22@gmail.comDickitonActive$1,195.99
Mr. Otto Schusterkasandra_dooley@yahoo.comLargoActive$817.85
Total$4,305.26

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. Bruce Lueilwitzelbert.brown@gmail.comNorth ElroysideInactive$270.92
Declan Cartwrightbennie85@gmail.comFort BrianActive$278.30
Jodi O'Keefemilan88@hotmail.comQuigleyworthActive$1,187.95
Damon Grahamedith_weber21@hotmail.comLake TaureanbergInactive$961.25
Mrs. Salma Reynoldsjadyn56@hotmail.comPort VedaworthActive$669.31
Total$3,367.73

Table with row selection

Card Table

NameEmailLocationStatusBalance
Morris Swaniawskiellen87@gmail.comJonesburghActive$427.16
Connie Feeneynina_quigley46@yahoo.comLake JeanettevilleInactive$872.01
Austen Bode IVkristie_monahan72@gmail.comBeavertonActive$695.40
Kristin Braunsherri59@yahoo.comKassandrafurtActive$551.27
Heaven Trantow DVMbernadette62@hotmail.comFlorissantActive$247.75
Total$2,793.59

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
Lauren Mayertlorraine_kihn@yahoo.comPerrisActive$913.65
Brad Fadelemanuel_kulas@yahoo.comNew DillanbergActive$587.74
Pauline O'Reilly-Botsfordludie.leffler61@yahoo.comOrinbergInactive$634.52
Wilhelm O'Connerdarby.lebsack@hotmail.comWest JaysonvilleActive$798.59
Dr. Kellie Terrymack.tillman@yahoo.comSouth MicheleActive$127.36
Tina Bernierjustine_weissnat@gmail.comGreenworthActive$1,170.06
Bryant Murazik IVamina.hoppe-christiansen@gmail.comWest DerekActive$778.77
Johnny Hintzalbert.hilll@yahoo.comZiemannworthInactive$884.38
Kenton Jastleo33@hotmail.comWest PenelopeActive$396.32
Darron Douglascecilia_kozey14@gmail.comAmarilloInactive$251.16
Leroy Bartoncolin29@hotmail.comEast HayleeInactive$1,197.94
Miss Alyssa Morissettepamela.rath@gmail.comKochchesterActive$122.39
Reginald Wieganddelphine.hermiston80@gmail.comSouth JasenfortActive$1,006.83
Blair Beckerfelix.kling@yahoo.comEast DarientonActive$1,189.09
Elody Breitenbergangeline.homenick-leffler@yahoo.comRafaelshireActive$797.64
Total$10,856.44

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.