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
INV001PendingPayPal$962.29
INV002UnpaidPayPal$687.57
INV003PaidBank Transfer$739.66
INV004UnpaidBank Transfer$357.44
INV005UnpaidCredit Card$484.54
INV006UnpaidBank Transfer$808.25
INV007PendingBank Transfer$351.97
Total$4,391.72

Simple

Users

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

NameTitleEmailRoleActions
Melisa ThompsonChief Assurance Producermelisa.thompson@hotmail.comViewer
Sid MedhurstHuman Operations Engineersid.medhurst18@gmail.comViewer
Santiago HeaneyProduct Optimization Specialistsantiago_heaney@hotmail.comMember
Felix CassinInternal Security Liaisonfelix.cassin@hotmail.comAdmin
Reva RathLead Accounts Directorreva_rath55@yahoo.comMember
Marisa Schmidt-CronaGlobal Branding Specialistmarisa.schmidt-crona11@hotmail.comMember

Stacked on mobile

Users

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

NameRoleActions

Annabell Rohan-Wolf

Internal Communications Liaison

annabell.rohan-wolf@gmail.com

Viewer

Kathleen Mills

Customer Tactics Planner

kathleen_mills@gmail.com

Member

Virginia Lindgren

Lead Applications Assistant

virginia_lindgren@gmail.com

Member

Kyla Prohaska

Principal Interactions Technician

kyla_prohaska@hotmail.com

Admin

Elian Buckridge

Regional Data Executive

elian.buckridge@yahoo.com

Viewer

Major Cummerata

Internal Branding Producer

major.cummerata@yahoo.com

Admin

Sticky header

Users

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

NameRoleActions

Luciano Murazik

International Identity Strategist

luciano.murazik68@hotmail.com

Admin

Burnice Quitzon

Investor Directives Representative

burnice_quitzon81@hotmail.com

Member

Maci McCullough

Principal Brand Developer

maci.mccullough@hotmail.com

Admin

Elza Wyman

Legacy Marketing Strategist

elza_wyman@yahoo.com

Viewer

Krista Swift

Chief Security Orchestrator

krista.swift68@gmail.com

Member

Gianni Daugherty

Human Markets Designer

gianni.daugherty@hotmail.com

Viewer

Gregg Corkery

Forward Metrics Developer

gregg.corkery2@gmail.com

Member

Camille Weimann

District Functionality Supervisor

camille_weimann73@hotmail.com

Admin

Alfonzo Watsica

Global Markets Specialist

alfonzo.watsica38@yahoo.com

Admin

Melyna Cummerata

Lead Brand Strategist

melyna_cummerata43@yahoo.com

Admin

Bridgette Mayert

Dynamic Group Developer

bridgette.mayert66@yahoo.com

Member

Zaria Hammes

Global Tactics Consultant

zaria_hammes@hotmail.com

Viewer

Beulah Dickinson

Legacy Accounts Analyst

beulah.dickinson5@hotmail.com

Admin

Noble Beer

Regional Accountability Facilitator

noble_beer@hotmail.com

Admin

Vaughn Berge-Torp

Internal Directives Executive

vaughn_berge-torp15@hotmail.com

Member

Ashtyn Brekke

Human Operations Agent

ashtyn.brekke@yahoo.com

Viewer

Vaughn Huel

Investor Data Planner

vaughn_huel64@gmail.com

Viewer

Marcella Torphy

Customer Mobility Facilitator

marcella_torphy@hotmail.com

Admin

Kathlyn Swaniawski

Regional Integration Engineer

kathlyn_swaniawski25@yahoo.com

Viewer

Juanita Johns

Principal Communications Liaison

juanita_johns28@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
Jo Hintzbernard_okuneva@hotmail.comPort RossieInactive$329.35
Claire Gislasonlou.stark17@gmail.comTerryboroughActive$453.51
Adrienne Kubtillman.reichert@gmail.comNaderstadInactive$572.70
Jacob Starkmaximus_macejkovic@gmail.comNew PerryInactive$1,086.82
Ernesto Blockearline_koch@yahoo.comWiegandcesterInactive$812.36
Total$3,254.74

Basic table

Table with Images

NameEmailLocationStatusBalance
Candace Farrell
@liam0
lavonne38@yahoo.comLake KareemworthInactive$270.40
Mack Stanton
@cristobal72
claudine53@hotmail.comLake VernerInactive$1,029.72
Israel Volkman
@edgardo.tromp
kelsie_mitchell37@gmail.comBashirianchesterActive$1,005.99
Lowell Koepp
@bertha.hagenes-king
esperanza17@yahoo.comNorth CarmellaInactive$219.23
Antonio Bashirian-Predovic
@merl_pfeffer
monroe.schiller61@hotmail.comJosefinatonActive$932.48

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Marc Mann Iamaya.rath-stehr@yahoo.comVonsideInactive$807.33
Mandy Wisozkmarcia46@yahoo.comFort FletchervilleActive$428.47
Janice Simonisclementine_stoltenberg@yahoo.comPriceportInactive$679.78
Miss Beverly Wittingchesley_mueller54@hotmail.comWelchboroInactive$820.62
Dr. Rickey Botsfordjameson_prosacco55@gmail.comNorth OthaActive$757.11
Total$3,493.31

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Rose Yostjaren93@yahoo.comNorth DarenActive$634.35
Dr. Jeannette Kuhlmanemmanuelle_prohaska36@yahoo.comKileychesterInactive$321.14
Terry Wilkinsonclaudia_treutel@yahoo.comSouth NorvalvilleInactive$477.09
Rolando Medhurstkarolann40@yahoo.comFort ClementcesterActive$774.82
Micheal Dietrich Sr.bailee_ruecker91@yahoo.comSchaeferfortInactive$330.33
Total$2,537.73

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Denise Braunflavio_nienow@yahoo.comTiaworthInactive$718.35
Don Cristtitus93@yahoo.comWestonActive$1,053.21
Jonathon Murazikelsa.kozey@gmail.comJacobistadActive$1,172.26
Jake Kihnmaxime_mccullough@yahoo.comMallorycesterActive$829.76
Tyrone Balistreriora2@yahoo.comSkilesviewActive$818.88
Total$4,592.46

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
Edwin Bergnaum-Croninapril.gleason@yahoo.comWest AlbinalandInactive$785.52
Ralph Schmelerelroy36@hotmail.comBillingsActive$1,000.43
Margarita Hilll DVMansel_predovic@yahoo.comShorelineActive$333.65
Doug Boylejacey.yundt91@hotmail.comLake TraceyActive$766.15
Paul Schimmeltyler.kozey@gmail.comLittelburyInactive$500.24
Total$3,385.99

Table with row selection

Card Table

NameEmailLocationStatusBalance
Marta Vandervortcelia.rath63@yahoo.comFredrickburyActive$1,130.63
Vicki Satterfieldpinkie_gerhold@yahoo.comLake MaribelInactive$91.19
Dwayne Thielbernie_bogisich@yahoo.comReysteadInactive$822.76
Gayle Marvinjalyn.bogan93@gmail.comOthosteadActive$1,016.54
Courtney Gleasonalverta_steuber@yahoo.comWellingtonInactive$416.66
Total$3,477.78

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
Philip Framijasper_borer@hotmail.comKendallActive$895.67
Willie Mitchellcaden_morissette@yahoo.comSouth OttobergInactive$543.51
Frederick O'Harasabina.beahan@gmail.comFort WebsterActive$829.61
Joanna Dachestell.baumbach-stehr@yahoo.comSouth OrphaActive$1,053.78
Florence Wildermancallie_schumm@hotmail.comRosevilleInactive$362.37
Rudolph Bergejany.cronin@yahoo.comDannieportInactive$505.78
Jamie Berge-Rodriguezgranville49@gmail.comLake JilliantonActive$1,137.85
Mr. Blake Labadieabdul_herzog@gmail.comTracyInactive$368.82
Bernice Lindgrenearline51@hotmail.comWest EstelleActive$1,057.34
Dustin Brakusmaynard.hills@yahoo.comSouth CarmeloInactive$979.00
Lila Manteashlynn97@hotmail.comFort JaylenshireInactive$886.98
Dolores Kreigerfiona.spencer@hotmail.comSouth JuliusActive$154.57
Cheryl Monahan Sr.cheyanne_rath@gmail.comMoorefortInactive$882.24
Santiago Torphy-Gislasonterrence.emmerich@gmail.comLynnstadActive$546.67
Chris Townemarco_connelly@yahoo.comCummingstonActive$1,157.18
Total$11,361.37

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.