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
INV001PendingBank Transfer$556.64
INV002PendingBank Transfer$916.79
INV003UnpaidCredit Card$146.53
INV004UnpaidBank Transfer$890.10
INV005PendingCredit Card$728.64
INV006UnpaidCredit Card$548.96
INV007PaidPayPal$238.73
Total$4,026.39

Simple

Users

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

NameTitleEmailRoleActions
Cayla GrimesCorporate Usability Directorcayla.grimes17@yahoo.comAdmin
Kristie KrajcikNational Applications Consultantkristie.krajcik93@gmail.comMember
Moises SchroederInternational Accounts Assistantmoises_schroeder@gmail.comMember
Fermin WymanDynamic Web Administratorfermin.wyman64@gmail.comViewer
Ted BaumbachProduct Mobility Plannerted.baumbach16@hotmail.comAdmin
Sara KuhicForward Marketing Liaisonsara.kuhic@gmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Darlene Mertz

Legacy Communications Producer

darlene_mertz@hotmail.com

Admin

Ernestine Ernser

Internal Implementation Analyst

ernestine_ernser64@gmail.com

Viewer

Bianka Schmidt-Lang

National Identity Representative

bianka.schmidt-lang@gmail.com

Member

Ian Abbott

Chief Integration Engineer

ian_abbott@yahoo.com

Viewer

Filiberto Reinger

District Paradigm Producer

filiberto_reinger@hotmail.com

Member

Terence Greenholt

Central Tactics Producer

terence_greenholt@hotmail.com

Admin

Sticky header

Users

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

NameRoleActions

Ernesto Huel

Central Quality Designer

ernesto.huel@hotmail.com

Admin

Ted Schuster

Customer Implementation Agent

ted.schuster@hotmail.com

Admin

Denise Lehner

Forward Accounts Representative

denise_lehner@gmail.com

Member

Rochelle Walsh

Central Assurance Liaison

rochelle.walsh88@yahoo.com

Member

Barry Shanahan

Senior Identity Agent

barry_shanahan37@yahoo.com

Viewer

Rufus Schulist

Product Markets Administrator

rufus_schulist59@gmail.com

Member

Emery Emmerich

Legacy Accounts Coordinator

emery.emmerich76@hotmail.com

Member

Lilliana Turner

Product Data Planner

lilliana_turner44@hotmail.com

Admin

Dan Kris

Dynamic Division Executive

dan.kris19@gmail.com

Admin

Mae Keeling

National Applications Representative

mae_keeling@hotmail.com

Admin

Jesus Toy

Forward Optimization Coordinator

jesus_toy@gmail.com

Member

Ella Schneider

Customer Directives Facilitator

ella_schneider41@gmail.com

Member

Jermaine Moen

Central Configuration Specialist

jermaine_moen26@yahoo.com

Admin

Eloisa Quitzon

Human Response Representative

eloisa_quitzon84@gmail.com

Member

Faith Aufderhar

Principal Marketing Manager

faith_aufderhar92@hotmail.com

Viewer

Deanna Pouros

Senior Infrastructure Planner

deanna_pouros@hotmail.com

Admin

Kendra West

Future Accounts Designer

kendra_west70@yahoo.com

Viewer

Scott Tremblay

Future Communications Supervisor

scott.tremblay@gmail.com

Admin

Brandi Heathcote

Global Applications Assistant

brandi_heathcote@hotmail.com

Member

Katherine Lynch

Product Communications Specialist

katherine_lynch@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
Bernardo Kovacekebba_thompson52@yahoo.comGorczanyboroActive$301.54
Sherwood Walterpearl_brekke@yahoo.comBethanyfurtActive$245.41
Issac Hicklestella.carter@hotmail.comPhoenixInactive$703.43
Danial Gusikowskiisai.runolfsson26@yahoo.comWest AngelineInactive$543.49
Teri Grimeschauncey_padberg92@hotmail.comEmilieshireInactive$356.72
Total$2,150.59

Basic table

Table with Images

NameEmailLocationStatusBalance
Estelle Cormier
@anna12
anita.paucek87@hotmail.comNew MargaritaInactive$895.72
Jose McGlynn
@kaleb69
andrew18@yahoo.comMorissetteburghActive$909.88
Alexanne Lueilwitz
@brooke.goodwin
tiffany.herman@gmail.comSouth EdnaInactive$684.08
Rollin Mueller-Fay
@ryann12
maryjane.hagenes@gmail.comEverettportInactive$309.84
Kevin Murray
@cristian_haag17
domenick24@gmail.comDanvilleActive$257.27

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Juan Dickenswallace.sauer@yahoo.comMalvinaworthActive$179.10
Sebastian Jastgabriel_schulist83@hotmail.comAllenInactive$791.11
Chelsie Kreigermarquise52@hotmail.comPascoActive$600.76
Elias Prosaccowarren.goldner@hotmail.comFort LylavilleActive$630.09
Kiley Howebrenden.herman@yahoo.comLake LuisActive$817.87
Total$3,018.93

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Glenda Lynch Jr.bessie77@hotmail.comLefflerstadActive$302.96
Betty Gorczanycarmine36@yahoo.comFort UlisesInactive$1,064.73
Jake Heidenreichkenneth.yost76@yahoo.comHillsboroActive$698.44
Miss Esther McDermott DVMlarry.lemke60@hotmail.comSouth EvalynviewInactive$373.36
Natalie Leannonalanis49@yahoo.comFort MosesbergActive$903.78
Total$3,343.27

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Easton Reichelbrielle_schiller@hotmail.comPort GlentownInactive$539.47
Jovany Beckercary39@hotmail.comConradworthInactive$337.24
Jasmine Legrosbarbara_vandervort45@gmail.comPort OrangeInactive$387.48
Anabel Kosseverett.thiel18@gmail.comHicksvilleInactive$772.26
Chandler Hackett PhDjesse_marks62@hotmail.comSouth KeshaunstadInactive$372.33
Total$2,408.78

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
Novella Howell-Doylephil.rau@hotmail.comRomantownInactive$479.78
Mr. Alf Morissetteneil48@gmail.comPort MaximilianInactive$658.29
Mallory Stehr-Tillmanmelinda_barrows55@yahoo.comCamillaburyInactive$1,121.88
Reginald Gleasonbaby.hammes@yahoo.comWylieInactive$1,184.15
Erwin Crist Iluke65@yahoo.comNorth RoslynInactive$281.81
Total$3,725.91

Table with row selection

Card Table

NameEmailLocationStatusBalance
Arnold Funkchester21@gmail.comShaunhavenActive$364.29
Erick Langjoshua.cremin67@gmail.comHamillbergInactive$762.24
Miss Erma Champlin IIpatsy.ledner15@gmail.comHeidenreichmouthActive$932.30
Franco Moorekaren8@hotmail.comTressiesteadActive$1,110.59
Reymundo D'Amoreblair18@gmail.comSouth GarlandfortActive$828.42
Total$3,997.84

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
Devon Spencerlorenzo.tillman@yahoo.comGardenaActive$310.42
Gino Hegmanncesar.kessler@yahoo.comRodriguez-HagenessteadActive$1,144.75
Mr. Amparo Casperrey10@yahoo.comHermistonboroInactive$254.55
Wilson Bernhardmarty_fisher@yahoo.comJeffreytonActive$817.27
Macey Lakinlyric.jakubowski15@gmail.comFort RaymondActive$946.99
Bella Romagueralupe35@hotmail.comHobokenActive$1,016.67
Elaine Kirlinemilio.kozey@hotmail.comNew EdmundfieldActive$1,132.72
Micaela Marvinshari.blick66@hotmail.comNorth CliftonsideInactive$574.67
Buddy Corwinelsa.torp88@yahoo.comRowland HeightsActive$942.49
Mrs. Ezra Kihnandre2@hotmail.comLakewoodInactive$107.44
Alma MacGyvergiovanni.tremblay@yahoo.comPort NelsshireActive$1,186.82
Mr. Krystina Armstrongsasha_reichert@hotmail.comNew MadysontonActive$1,121.70
Sonya Kuhncamille16@yahoo.comReddingInactive$1,192.60
Dwight Rueckerdavid.gutkowski21@gmail.comFall RiverActive$743.24
Crystal Nolan DDSjaime.schultz@hotmail.comAuersteadInactive$731.25
Total$12,223.58

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.