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$720.41
INV002PaidCredit Card$853.07
INV003PaidCredit Card$261.02
INV004PendingPayPal$366.28
INV005PendingPayPal$130.49
INV006PaidBank Transfer$219.41
INV007UnpaidBank Transfer$715.54
Total$3,266.22

Simple

Users

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

NameTitleEmailRoleActions
Travon RippinCustomer Implementation Officertravon.rippin@hotmail.comMember
Marina HarberGlobal Mobility Representativemarina.harber92@hotmail.comViewer
Annabel StammDynamic Brand Supervisorannabel.stamm28@yahoo.comAdmin
Esta ThompsonInternational Accountability Supervisoresta_thompson@hotmail.comViewer
Elisabeth McKenzieForward Marketing Associateelisabeth_mckenzie@hotmail.comViewer
Jordane PollichNational Interactions Designerjordane.pollich@yahoo.comMember

Stacked on mobile

Users

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

NameRoleActions

Stefanie Gleason

Corporate Interactions Developer

stefanie_gleason48@gmail.com

Member

Romaine Roberts

Internal Data Liaison

romaine.roberts@hotmail.com

Viewer

Estelle Bartell

Senior Data Manager

estelle.bartell74@gmail.com

Viewer

August Funk

Dynamic Intranet Engineer

august_funk81@yahoo.com

Member

Lavina Klocko

National Paradigm Planner

lavina_klocko33@hotmail.com

Member

Maggie Lebsack

Direct Interactions Planner

maggie_lebsack@gmail.com

Member

Sticky header

Users

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

NameRoleActions

Lilly Lemke

Chief Configuration Developer

lilly_lemke40@gmail.com

Member

Mariana Corkery

Human Data Technician

mariana.corkery@yahoo.com

Admin

Milan Kirlin

Investor Implementation Liaison

milan_kirlin@yahoo.com

Viewer

Nova Ondricka

Direct Intranet Associate

nova_ondricka@gmail.com

Viewer

Litzy Mohr

International Data Strategist

litzy_mohr56@hotmail.com

Member

Deion Wolf

Dynamic Intranet Engineer

deion_wolf@yahoo.com

Viewer

Emmie Pagac

Dynamic Group Architect

emmie_pagac@hotmail.com

Member

Thomas D'Amore

Legacy Mobility Designer

thomas.damore4@hotmail.com

Viewer

Fae Runte

Regional Tactics Executive

fae_runte25@yahoo.com

Member

King Armstrong

Regional Group Producer

king.armstrong34@gmail.com

Member

Reva Kerluke

International Optimization Liaison

reva_kerluke@yahoo.com

Member

Delia Flatley

Customer Branding Architect

delia_flatley83@gmail.com

Viewer

Augustus Pagac

Product Directives Administrator

augustus_pagac@gmail.com

Admin

Arturo Lindgren

Corporate Metrics Officer

arturo_lindgren62@gmail.com

Member

Tina Johnston

Customer Marketing Architect

tina.johnston99@gmail.com

Admin

Wade Mertz

Central Markets Representative

wade.mertz91@gmail.com

Admin

Isabelle Bins

Investor Group Coordinator

isabelle_bins97@yahoo.com

Admin

Eve Olson

Human Integration Specialist

eve_olson44@yahoo.com

Member

Nya Langosh

Dynamic Interactions Orchestrator

nya.langosh@gmail.com

Member

Alba McClure

Forward Response Officer

alba_mcclure@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
Ellis Schaefermaynard.weimann-dooley@gmail.comNewarkActive$281.22
Clayton Breitenbergaurelio23@yahoo.comFort MichealInactive$334.89
Arthur Leuschkeansel_cummings@hotmail.comFort AshleighviewInactive$631.65
Wesley Colebernhard_armstrong@hotmail.comLake BrielleActive$621.39
Delia Franeykayleigh93@yahoo.comNorth AricActive$683.71
Total$2,552.86

Basic table

Table with Images

NameEmailLocationStatusBalance
Nicholas Beier
@dejon82
olga_olson57@hotmail.comVonRuedentownActive$371.30
Rufus Monahan
@alexandrea.bogan
deron_greenfelder76@yahoo.comNew ClaudlandActive$1,014.68
Shelia McDermott
@annamarie_sawayn
alden10@hotmail.comLake AprilInactive$330.19
Marvin Kovacek
@josiane_stanton91
rowena.haley57@gmail.comEast JermainInactive$744.94
Monica Jakubowski
@kelli24
kallie_wilderman@gmail.comFountain ValleyActive$113.52

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Angelina Weissnatalverta.ferry@gmail.comWest HoustonbergActive$325.35
Arlene Ondrickakadin32@gmail.comNorth MeaghanburghActive$722.57
Levi Reillydarby_mcclure@yahoo.comLake HilarioActive$737.39
Elsie Schillertoby.ziemann@gmail.comSouth ChaimmouthActive$300.29
Ignacio McCulloughvidal_kub-tremblay@yahoo.comLake NettiesideActive$565.74
Total$2,651.34

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Juana Schillernya.haley@yahoo.comEden PrairieInactive$583.61
Darlene Croninmaggie_heaney58@gmail.comHemetInactive$57.54
Roger Zieme-Langosh DDSlavina15@gmail.comImogenefieldInactive$1,167.31
Rhonda Mosciskidanny_hickle28@hotmail.comCornellchesterActive$539.77
Lance Loweola.pollich@gmail.comLangoshsteadActive$915.85
Total$3,264.08

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Jana Barrowsroxanne63@hotmail.comNorth RobertaboroActive$1,135.56
Adrian Wilkinsonhector.dibbert7@gmail.comKrismouthInactive$967.36
Ms. Gladys Kemmereloisa_feeney@yahoo.comNorth ElliottonInactive$306.06
Dixie Hessel Jr.isabell51@gmail.comColemanshireInactive$1,133.36
Misty Wisokymittie_kautzer@hotmail.comVonRuedenbergInactive$837.74
Total$4,380.08

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
Tomas Runtetito.armstrong@hotmail.comJonesshireInactive$972.04
Ms. Kerry Gislasonlaura.larson@hotmail.comBaytownInactive$1,194.03
Patty Reingerlaverne.collier59@yahoo.comKathrynlandInactive$214.18
Ricky Rogahnalexander95@hotmail.comLake EdwardoboroughInactive$477.48
Kelly Nikolaus-Boyleelecta_ferry@gmail.comDarefurtInactive$756.41
Total$3,614.14

Table with row selection

Card Table

NameEmailLocationStatusBalance
Dr. Julian D'Amoresabryna97@gmail.comFort DomingovilleActive$366.92
Martin Kingurban.ortiz@hotmail.comPort LeilaInactive$447.73
Kevin Westoswaldo.ondricka20@gmail.comLulastadInactive$281.46
Kevin Stantoneldred98@gmail.comKarleyfortActive$426.32
Janie O'Connerdurward_flatley@hotmail.comNew YorkActive$492.51
Total$2,014.94

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
Lola Langoshmarlene54@gmail.comEmmyviewActive$183.18
Ted Williamsonisaias_ohara95@hotmail.comNorth SaulInactive$193.49
Dana Bergekaia_kuhn@hotmail.comVaughnfortActive$455.09
Janis Hudson MDjay57@hotmail.comLindenActive$402.34
Erik Bosco DDScorrine20@hotmail.comLargoInactive$1,173.11
Colin Jakubowskistephan.kub45@hotmail.comCorpus ChristiInactive$745.60
Mr. Austin Cummingsharold.mayer48@hotmail.comWymanworthActive$1,114.84
Mandy Tremblayagustin.leffler10@gmail.comSouth RebeccaInactive$791.77
Jennifer Millerclementine30@hotmail.comEbertlandActive$516.30
Leona Manteettie_jacobs7@gmail.comSouth AleneActive$103.20
Rodolfo Marvinowen.breitenberg2@gmail.comSouth NovaInactive$1,062.79
Olivia Williamsonmarty_kunze3@yahoo.comEast AustinfortActive$122.16
Charlotte Cartwright DVMowen23@gmail.comNew CaesarInactive$807.13
Francis Okunevavinnie.koss@yahoo.comPotomacInactive$313.79
Violet Leschwilfred74@hotmail.comEast NorrisvilleActive$1,167.01
Total$9,151.80

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.