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
INV001PaidCredit Card$244.53
INV002PendingBank Transfer$399.80
INV003PaidPayPal$711.70
INV004PaidCredit Card$819.79
INV005PaidBank Transfer$730.88
INV006PaidCredit Card$378.95
INV007PendingPayPal$952.67
Total$4,238.32

Simple

Users

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

NameTitleEmailRoleActions
Clay RippinDirect Integration Managerclay_rippin@yahoo.comAdmin
Imelda DachPrincipal Creative Administratorimelda.dach@gmail.comMember
Liam KuhlmanFuture Interactions Designerliam.kuhlman@hotmail.comAdmin
Jaren YundtInternal Division Assistantjaren.yundt@hotmail.comMember
Eden RathLegacy Response Associateeden.rath82@hotmail.comMember
Dwight StiedemannDirect Creative Facilitatordwight.stiedemann35@hotmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Daphnee Vandervort

Investor Security Manager

daphnee.vandervort63@hotmail.com

Viewer

Jerry Pouros

International Intranet Engineer

jerry.pouros@hotmail.com

Admin

Maurice O'Kon

Global Response Administrator

maurice_okon@gmail.com

Admin

Donny Weimann

National Branding Strategist

donny.weimann@yahoo.com

Viewer

Christiana Hirthe

International Quality Liaison

christiana.hirthe10@yahoo.com

Admin

Magnus Wintheiser

Product Optimization Technician

magnus.wintheiser87@gmail.com

Viewer

Sticky header

Users

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

NameRoleActions

Keanu Mayert

Lead Directives Planner

keanu_mayert50@gmail.com

Viewer

Thea Hirthe

National Optimization Coordinator

thea.hirthe@gmail.com

Viewer

Abigail Barrows

Dynamic Group Producer

abigail.barrows@hotmail.com

Admin

Eloisa Steuber

Future Accounts Liaison

eloisa_steuber39@gmail.com

Viewer

Princess Jacobi

Corporate Identity Architect

princess_jacobi@hotmail.com

Viewer

Mike Corkery

Senior Accountability Engineer

mike.corkery49@gmail.com

Admin

Dulce Franecki

Principal Applications Officer

dulce.franecki@gmail.com

Viewer

Heber Price

Forward Paradigm Representative

heber.price@gmail.com

Member

Corbin White

Internal Marketing Supervisor

corbin.white4@yahoo.com

Viewer

Montana Bartoletti

Forward Factors Administrator

montana.bartoletti66@gmail.com

Viewer

Juliet Huels

Regional Research Producer

juliet.huels1@gmail.com

Admin

Justine Altenwerth

Internal Markets Officer

justine_altenwerth91@gmail.com

Member

Itzel Treutel

Global Brand Producer

itzel_treutel75@yahoo.com

Viewer

Cody McKenzie

Chief Data Officer

cody.mckenzie@yahoo.com

Viewer

Katrine Ondricka

Corporate Accountability Specialist

katrine_ondricka@yahoo.com

Viewer

Aurelia Leuschke

Forward Response Developer

aurelia_leuschke31@gmail.com

Admin

Keyon Robel

Forward Paradigm Specialist

keyon.robel89@hotmail.com

Admin

Luella Wyman

Lead Solutions Assistant

luella.wyman@hotmail.com

Admin

Ellsworth Wisozk

Dynamic Program Developer

ellsworth.wisozk@gmail.com

Viewer

Damion Hayes

Regional Mobility Manager

damion_hayes@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
Verna Rice-Larkinahmad.torp99@hotmail.comNew NayeliActive$173.59
Samantha Trompjewel.franey53@gmail.comDockchesterInactive$317.97
Ismael Spinkaryan82@hotmail.comHassievilleInactive$527.95
Aubrey Feestfidel_koepp51@hotmail.comSouth JakeInactive$190.18
Sherman Romaguerapiper.bogisich42@hotmail.comFlatleytownInactive$941.74
Total$2,151.43

Basic table

Table with Images

NameEmailLocationStatusBalance
Byron Walter
@kiana.sanford22
delia_stark36@yahoo.comSchneiderstadActive$286.66
Audrey Grant
@frederic_greenholt5
otto_wiegand84@yahoo.comFort JanActive$1,188.64
Merle Schaefer
@joshuah.collier4
camylle.abernathy@yahoo.comLouisville/Jefferson CountyActive$1,003.08
Richard Becker
@delphia_gutmann-bogan
antonetta.weissnat@gmail.comModestoInactive$1,193.45
Dr. Christina Daugherty
@emmie.kassulke
dane.auer@hotmail.comFairfieldInactive$551.06

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Van Marquardtkian.fadel@yahoo.comChapel HillActive$257.69
Meredith Christiansenclaire2@yahoo.comWest RamiroActive$815.04
Elisa McGlynnmelany99@gmail.comSouth MacieActive$899.69
Betsy Bauchamari_hessel@yahoo.comWest AmyaInactive$1,147.66
Ms. Sally Mrazsimone.balistreri52@hotmail.comThousand OaksInactive$1,114.15
Total$4,234.23

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Alexis Hagenesisadore_hettinger@yahoo.comNew BlairvilleInactive$881.72
Heather Durganlew_crona19@yahoo.comBurbankInactive$969.54
Sylvester Rowelavern.feil10@hotmail.comKayleeviewInactive$1,074.13
Mark Kerlukeangie_boyle@gmail.comColecesterActive$345.92
Melanie Hammesmathilde_mccullough6@yahoo.comHillarysideInactive$745.04
Total$4,016.35

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Jeanette Zemlakthad_kuvalis@yahoo.comDietrichcesterActive$668.85
Rodney Stokesayden.hayes@yahoo.comNorth VictorInactive$135.16
Bonnie Rutherforddestany.dare21@hotmail.comNew RussellInactive$477.01
Tabitha Bradtkelori.kuvalis52@yahoo.comFrederikviewActive$115.73
Jimmy Langlaurianne81@yahoo.comFort EvangelinesteadInactive$293.10
Total$1,689.85

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
Jeremy Wiegandakeem_harber92@gmail.comGoodwintonActive$475.23
Mona Greenfelderwinona.keeling@hotmail.comLake EliaslandActive$835.98
Veronica Balistrerichase.kihn@gmail.comNew BrandynworthInactive$216.10
Jennie Gradyjaylen39@hotmail.comBlockburghInactive$841.19
Kelvin Predovickelsie.johns93@gmail.comSouth WaylonInactive$100.93
Total$2,469.43

Table with row selection

Card Table

NameEmailLocationStatusBalance
Luis Huelsbrionna80@hotmail.comAlishaviewInactive$13.46
Ken Steuberanthony71@hotmail.comGoodwinfortInactive$523.73
Courtney Goodwincheyenne69@gmail.comLake DeeviewActive$1,098.26
Kristine Haleysarina_mayert@yahoo.comSouth NevasideInactive$784.19
Ira Prosaccoaiyana34@yahoo.comLake PatricksteadInactive$125.71
Total$2,545.35

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
Brendan Howefloy77@yahoo.comKuhnbergActive$346.36
Benny Jerde IVjovanny_franecki@yahoo.comTorphytownActive$99.96
Marshall Collinskaleigh.cassin59@gmail.comPort JazmyneportActive$473.68
Mr. Ivan Waelchi DDSkip.tromp@gmail.comAmesActive$274.00
Vincent Christiansenjarrod.kautzer83@hotmail.comEast TheaInactive$467.51
Silvia Framijaylen_hegmann10@hotmail.comNew CordellInactive$75.76
Jerome Murazikfelicity_ledner82@yahoo.comAllentownInactive$844.99
Rudolph DuBuquerachelle54@yahoo.comPort TryciaActive$677.23
Marta Vonursula_harber82@yahoo.comNelsburyActive$353.51
Edgar Lockmanalaina_terry34@hotmail.comAnnettelandInactive$309.30
Sherry Wittingnils1@gmail.comNorth SophieburyInactive$679.82
Marc Mullerelna71@yahoo.comNew NelleburyInactive$416.36
Roman Monahanminerva.abshire71@hotmail.comNew DemarcoInactive$527.81
Felix Klingalf_ankunding@yahoo.comMafaldasideActive$190.74
Pat Welchmarilou_sporer@yahoo.comNorth WilburnInactive$249.28
Total$5,986.31

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.