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$860.76
INV002PendingPayPal$716.91
INV003PendingCredit Card$359.85
INV004PendingCredit Card$623.99
INV005PaidBank Transfer$799.34
INV006PaidCredit Card$556.38
INV007PendingBank Transfer$177.75
Total$4,094.98

Simple

Users

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

NameTitleEmailRoleActions
Peter Jast-HermistonCentral Usability Orchestratorpeter_jast-hermiston@hotmail.comMember
Lucy LarsonLead Integration Supervisorlucy.larson@gmail.comMember
Christopher KundeHuman Usability Managerchristopher.kunde@hotmail.comAdmin
Robyn DeckowInternal Creative Assistantrobyn.deckow6@hotmail.comViewer
Gerardo WintheiserDynamic Program Techniciangerardo_wintheiser@hotmail.comMember
Lily SatterfieldLegacy Interactions Architectlily.satterfield58@yahoo.comViewer

Stacked on mobile

Users

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

NameRoleActions

Steven Schoen

Legacy Marketing Executive

steven.schoen44@hotmail.com

Member

Gilberto Olson

Regional Creative Consultant

gilberto_olson95@gmail.com

Admin

Barney Bartell

International Security Engineer

barney.bartell24@hotmail.com

Viewer

Darnell DuBuque

Central Identity Coordinator

darnell.dubuque66@gmail.com

Viewer

Victoria Rath

Chief Marketing Consultant

victoria.rath@hotmail.com

Member

Rickey Herzog

Investor Tactics Specialist

rickey_herzog@hotmail.com

Member

Sticky header

Users

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

NameRoleActions

Emilia Hilll

Direct Communications Director

emilia_hilll11@yahoo.com

Member

Hettie Roob

Product Applications Representative

hettie.roob29@gmail.com

Admin

Marcos Barton

Principal Response Architect

marcos_barton@hotmail.com

Admin

Margarette Bechtelar

Senior Group Agent

margarette_bechtelar46@yahoo.com

Member

Rosemarie Casper

Forward Data Coordinator

rosemarie_casper@hotmail.com

Viewer

Johnny Dietrich-Lockman

Lead Operations Liaison

johnny.dietrich-lockman@gmail.com

Viewer

Zella Lockman

Corporate Creative Liaison

zella.lockman@hotmail.com

Viewer

Otis MacGyver

Forward Group Analyst

otis_macgyver@yahoo.com

Member

Alex Hodkiewicz

Global Functionality Orchestrator

alex_hodkiewicz@yahoo.com

Member

May Johnson-Volkman

Senior Infrastructure Representative

may_johnson-volkman43@yahoo.com

Member

Colten Corkery

Legacy Tactics Developer

colten.corkery@yahoo.com

Admin

Emilio Schimmel

Corporate Division Orchestrator

emilio_schimmel@gmail.com

Viewer

Marcelino Douglas

Dynamic Operations Liaison

marcelino_douglas@gmail.com

Member

Magnolia O'Hara

Lead Functionality Engineer

magnolia_ohara@yahoo.com

Member

Shanon Gulgowski-Erdman

Dynamic Data Planner

shanon.gulgowski-erdman@hotmail.com

Admin

Judge Hayes

Principal Accounts Executive

judge_hayes10@gmail.com

Member

Miguel Hilll

Legacy Data Technician

miguel_hilll91@yahoo.com

Admin

Walter Pacocha

Human Branding Coordinator

walter.pacocha39@hotmail.com

Admin

Louisa Parisian

Legacy Data Representative

louisa.parisian@gmail.com

Member

Lynne Collins

Forward Brand Officer

lynne.collins19@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
Lavina Ernserfred.erdman19@hotmail.comNikolaustownActive$327.91
Mrs. Gladyce Hansensibyl65@hotmail.comNew HayleyburghInactive$485.81
Yvette Cummeratabethany.littel@gmail.comLake AmandacesterInactive$652.28
Cary Gusikowskibeaulah.schmeler88@hotmail.comPort MaudievilleActive$331.15
Cedrick Hammesnora.becker-walter@gmail.comLake MindyInactive$936.81
Total$2,733.96

Basic table

Table with Images

NameEmailLocationStatusBalance
Alexandrea Metz
@christopher83
celia97@yahoo.comWest JimmyActive$1,154.67
Graham Swaniawski V
@delores5
shelly.hettinger5@gmail.comSouth RhondaActive$773.91
Kolby Sporer
@elmer33
shania_batz@hotmail.comNew HelenstadActive$763.29
Eva Satterfield
@helena_franey
kara91@hotmail.comEmardtownActive$1,183.32
Maryam Franecki
@teresa_senger
anita_rath79@gmail.comOwensboroActive$265.20

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Mrs. Tammy Schoenjared28@yahoo.comRiverviewActive$701.18
Roberto Lowe Sr.josefina61@gmail.comSouth RubyActive$1,084.64
Daisy Heathcote-Leffler IIIalexandria_smitham44@yahoo.comLake TerilandInactive$240.13
Yasmine Reynolds-Lefflerjarred_parker9@hotmail.comNorth PetersideActive$648.34
Don Koelpinallan_lehner@yahoo.comTravistonActive$742.33
Total$3,416.62

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Claude Metzsarah32@hotmail.comNew CharlenefieldActive$1,034.96
Dr. Kathleen Rempelmikayla0@hotmail.comEast ArnoldviewInactive$515.37
Charlie O'Keefezane32@hotmail.comNew DiannebergActive$90.19
Theodora Wisozk MDjohanna_nolan@gmail.comSouth CamylleInactive$1,051.51
Bernhard Wolffbryan_monahan4@gmail.comNapervilleActive$604.34
Total$3,296.37

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Gregg Lebsacktaylor.kulas1@gmail.comLake UnacesterActive$93.46
Mary Volkmanciara50@gmail.comDangelovilleActive$136.34
Morris Reynoldselaine_herzog@gmail.comHillsportActive$895.38
Chester Powlowskiira_wilderman@gmail.comNorth OtisboroughInactive$358.30
Krista Willms IIItristin_cormier78@hotmail.comFlorence-GrahamInactive$1,099.02
Total$2,582.50

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
Miss Maria Mayertelizabeth.walsh@gmail.comWilderman-SauersteadInactive$626.02
Adam Mitchell Vemmie_greenfelder51@yahoo.comLangosh-MarvinchesterInactive$447.57
Gertrude Schuppe Jr.ida_ledner@gmail.comLake PatsylandInactive$645.11
Hans Hodkiewicz IVkenya.jones9@gmail.comPort YasmineburghInactive$633.23
Mr. Hector Reynoldsrodger.renner94@hotmail.comRuthtonActive$337.92
Total$2,689.85

Table with row selection

Card Table

NameEmailLocationStatusBalance
Lavinia Stehr-Konopelskiamber_lubowitz94@gmail.comGloversideActive$272.40
Dejon Rodriguezdorothy.emard@hotmail.comChapel HillInactive$622.69
Dr. Harry Joneshomer35@gmail.comElijahlandInactive$582.90
Dr. Aron Prohaska-Mosciskikaylee.gleason@hotmail.comFort KaylahshireActive$788.43
Darlene Ondrickamelba84@yahoo.comJohannavilleInactive$1,129.92
Total$3,396.34

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
Kris Conroyanthony.murphy@hotmail.comKautzersideActive$942.64
Candida Kovaceklyle11@yahoo.comEileenburyInactive$518.83
Eveline Gibsonlaurie.ruecker@gmail.comFlorissantInactive$884.84
Jayce Wolffalexis_jones82@yahoo.comSouth GarettActive$437.63
Barry Boehmdennis90@hotmail.comSouth LolahavenInactive$222.96
Forrest Whiteginger_rath93@hotmail.comOcalaActive$561.58
Zula Wolfbillie_hagenes@gmail.comWest DrewInactive$117.60
Blanca Brakusvalentin76@yahoo.comEast ManuelaInactive$521.11
Andy Klockohal.simonis@gmail.comCoon RapidsInactive$400.77
Julie Wintheisertiara.dickens@hotmail.comDonatosideInactive$333.99
Ms. Sophie Boyerryder_casper-mayert@gmail.comBrisahavenInactive$1,130.69
Brian Feestbrandon35@yahoo.comMissoulaInactive$172.10
Ray Rogahnnash.bartell72@gmail.comSanta AnaActive$17.38
Jeffry Grahamdarryl.leuschke68@gmail.comMurraybergInactive$1,081.00
Giovanna Stantoncharles.hyatt20@hotmail.comOak LawnInactive$731.16
Total$8,074.28

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.