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
INV001UnpaidBank Transfer$161.88
INV002PendingBank Transfer$322.32
INV003UnpaidPayPal$438.84
INV004PaidCredit Card$726.22
INV005UnpaidBank Transfer$119.67
INV006UnpaidBank Transfer$941.99
INV007PaidBank Transfer$257.98
Total$2,968.90

Simple

Users

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

NameTitleEmailRoleActions
Leta JohnsonGlobal Division Facilitatorleta_johnson42@yahoo.comAdmin
Stewart BernierCustomer Accountability Administratorstewart.bernier13@gmail.comViewer
Braxton NienowLegacy Metrics Analystbraxton.nienow@yahoo.comViewer
Kaitlyn YundtNational Creative Coordinatorkaitlyn.yundt38@gmail.comAdmin
Tianna DickiFuture Identity Plannertianna.dicki67@yahoo.comViewer
Mertie KrisCentral Quality Associatemertie.kris96@hotmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Bettye O'Hara

Forward Intranet Strategist

bettye.ohara@yahoo.com

Viewer

Kevon Quigley

Future Paradigm Administrator

kevon_quigley52@hotmail.com

Viewer

Jeff Tromp-Prohaska

Corporate Functionality Director

jeff_tromp-prohaska@gmail.com

Viewer

Evie Stiedemann

Customer Accounts Officer

evie_stiedemann43@yahoo.com

Viewer

Robert Daniel-Becker

Senior Research Coordinator

robert_daniel-becker@hotmail.com

Admin

Jillian Gleason

National Factors Administrator

jillian.gleason59@yahoo.com

Admin

Sticky header

Users

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

NameRoleActions

Toby Morar

District Communications Designer

toby.morar87@yahoo.com

Member

Lloyd Leuschke

Corporate Tactics Officer

lloyd_leuschke26@yahoo.com

Viewer

Mike Schuppe

Global Program Strategist

mike_schuppe59@hotmail.com

Member

Nakia Ullrich

Corporate Division Manager

nakia_ullrich@yahoo.com

Viewer

Harold Koepp

Forward Creative Administrator

harold.koepp28@gmail.com

Admin

Rita Mills-Dietrich

International Assurance Technician

rita_mills-dietrich96@yahoo.com

Viewer

Nella Kovacek

District Operations Technician

nella_kovacek83@hotmail.com

Member

Lionel Ferry

Corporate Usability Officer

lionel.ferry@hotmail.com

Member

Jaren Schowalter

Lead Integration Coordinator

jaren.schowalter36@hotmail.com

Member

Maximo Kerluke

Customer Brand Analyst

maximo_kerluke74@yahoo.com

Viewer

Henry Crist

Central Interactions Liaison

henry.crist65@hotmail.com

Member

Edward Runolfsson

Chief Implementation Officer

edward_runolfsson22@yahoo.com

Member

Lorna Legros

Senior Interactions Engineer

lorna.legros@yahoo.com

Member

Rocky Mueller-Raynor

Internal Infrastructure Facilitator

rocky_mueller-raynor28@yahoo.com

Admin

Flavie Schultz

District Optimization Specialist

flavie_schultz50@hotmail.com

Admin

Jade West

Global Accountability Officer

jade.west@gmail.com

Admin

Reese Schinner-Gerlach

Global Applications Analyst

reese_schinner-gerlach90@yahoo.com

Member

Layne Waelchi

Corporate Communications Executive

layne_waelchi@yahoo.com

Admin

Sanford Runolfsson

Product Applications Representative

sanford.runolfsson97@yahoo.com

Viewer

Berenice Reynolds-Lueilwitz

Forward Infrastructure Planner

berenice_reynolds-lueilwitz23@hotmail.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
Jenna Wehner IIIverda10@gmail.comHumbertobergInactive$273.64
Shari Barrows DVMfred81@gmail.comTurnerviewActive$953.32
Devin McGlynnrudy.wuckert@gmail.comAnabelchesterInactive$1,002.15
Julius Murraymaximus.kemmer@hotmail.comFort AntonetonInactive$13.41
Alexander Kling-Torphy IVbell_hermiston@gmail.comMalachifurtInactive$620.46
Total$2,862.98

Basic table

Table with Images

NameEmailLocationStatusBalance
Randolph Borer-Rempel
@maybelle.harvey
alphonso79@gmail.comSidneystadInactive$1,000.49
Roland Carroll
@delbert23
jadyn41@gmail.comEast YeseniaActive$334.70
Virginia Jenkins
@damon_wisozk50
velda28@hotmail.comWest ElbertInactive$472.31
Tracy Baumbach-Kling
@orlo_morar31
filiberto_sipes15@hotmail.comMcLaughlinstadActive$326.28
Dana Lesch
@kavon.dach14
sage30@gmail.comSouth JedediahActive$878.17

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Elijah Brakuswoodrow58@hotmail.comNew ElissastadActive$300.96
Ms. Janice Hillsthalia_kirlin39@hotmail.comKeonstadActive$495.79
Kristopher Prosacco DVMclaire.zieme1@gmail.comFort SamaraActive$237.53
Jeannie Hilperttroy55@gmail.comHaleychesterActive$724.45
Angela Denesikleonor_glover4@yahoo.comGrimessteadActive$141.65
Total$1,900.38

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Nathaniel Langoshstephon.moen98@hotmail.comEl Dorado HillsInactive$978.59
Rebecca Mannfernando_mann@yahoo.comMaudieportInactive$588.17
Cary Dooley MDfreddy92@yahoo.comThielsteadInactive$368.05
Cody Faheyhadley66@hotmail.comNew TyriqueActive$12.85
Alison Wiza Jr.adolfo.bogisich@gmail.comFort PatfortActive$740.32
Total$2,687.98

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Johnathan Mitchelldominique27@yahoo.comGrantburyActive$1,144.20
Jamie Cormierzoey.schumm@gmail.comRathfurtInactive$160.50
Angela Carrollshanel_fisher31@hotmail.comCatalina FoothillsActive$400.75
Ramon Powlowskianastasia.welch72@hotmail.comNew LaurineInactive$1,089.98
Ann Towne DVMgillian.jones@hotmail.comTrantowtonInactive$907.50
Total$3,702.93

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
Roland Davisalexandrea.wolf87@yahoo.comFidelsideInactive$966.30
Claude Sauerpaolo91@gmail.comLawrenceInactive$253.58
Meredith Wuckertshayne_goyette7@hotmail.comDavisfurtInactive$957.01
Mona Manteelvie.hane@yahoo.comNewarkInactive$339.69
Mario Vandervortfern99@hotmail.comRohnert ParkInactive$635.70
Total$3,152.28

Table with row selection

Card Table

NameEmailLocationStatusBalance
Chad Ebertaddison_langosh@hotmail.comSan Buenaventura (Ventura)Inactive$68.96
Johnny Luettgen-Wolffbraxton_smitham@gmail.comAllisonsideActive$246.94
Dustin Wizalucious_brekke67@gmail.comStreichworthInactive$899.93
Carolyn Vandervortaxel.fay19@yahoo.comLake ElizabethshireActive$612.95
Brad Walkerreina72@hotmail.comNorth MadiestadInactive$893.86
Total$2,722.64

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
Marsha Wisozknorwood_nienow@yahoo.comNewarkActive$250.98
Kirk Pourosbrody.macgyver@hotmail.comEmmerichburyInactive$1,077.14
Dr. Rickey Wisoky-Baumbachbrooks.ohara-kling@hotmail.comLucienneboroActive$343.59
Annette Ondrickajeanie_wehner@gmail.comMitchellhavenInactive$927.83
Dora Purdygerhard.hirthe22@hotmail.comHagenesboroughActive$702.36
Judith Davismarilyne.turner-murphy@gmail.comHempsteadActive$204.99
Claire Rennerjammie76@gmail.comCeresInactive$990.20
Eduardo Spencer MDelisa_rolfson@gmail.comFort SidInactive$564.26
Sophie Lueilwitzkenyatta44@gmail.comFort KathlynsteadInactive$962.89
Dr. Robin O'Connellquinn_rau42@gmail.comErnsertownActive$910.36
Joan Buckridgepaolo.yundt@yahoo.comSouth EvangelineActive$552.23
Mrs. Freda Kirlin Sr.vince_wolff@gmail.comFontanaActive$344.39
Donald Langworth Sr.irving57@hotmail.comSouth JudyworthActive$856.57
Ruth Metzpriscilla_collier@hotmail.comVernerboroInactive$568.52
Mr. Hugo Dooleyhudson.kunde18@yahoo.comBostadInactive$1,080.88
Total$10,337.19

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.