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$939.18
INV002PaidCredit Card$540.86
INV003PendingPayPal$320.16
INV004PendingCredit Card$105.76
INV005UnpaidCredit Card$813.97
INV006PendingPayPal$324.53
INV007PendingCredit Card$896.52
Total$3,940.98

Simple

Users

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

NameTitleEmailRoleActions
Jackie KuphalSenior Program Executivejackie_kuphal50@hotmail.comViewer
Chelsie SimonisLead Web Officerchelsie.simonis@gmail.comMember
Dexter HandInternational Quality Techniciandexter.hand@hotmail.comMember
Robert LynchSenior Usability Executiverobert.lynch@gmail.comMember
Luther ErnserForward Group Plannerluther.ernser45@hotmail.comMember
Audra SchmelerNational Factors Agentaudra.schmeler@hotmail.comMember

Stacked on mobile

Users

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

NameRoleActions

Ricky Haley

International Security Analyst

ricky_haley32@gmail.com

Viewer

Leah Cormier

Future Usability Consultant

leah.cormier14@hotmail.com

Viewer

Lela Schinner

Principal Communications Representative

lela.schinner@hotmail.com

Member

Hannah Heaney

Central Markets Analyst

hannah.heaney@yahoo.com

Viewer

Woodrow Lebsack

National Division Officer

woodrow_lebsack22@gmail.com

Admin

Johan Stoltenberg

Principal Factors Administrator

johan_stoltenberg70@gmail.com

Member

Sticky header

Users

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

NameRoleActions

Bessie Abbott

Forward Factors Analyst

bessie.abbott@hotmail.com

Admin

Santiago Larson

National Communications Analyst

santiago_larson@hotmail.com

Viewer

Lori Carroll

Human Group Liaison

lori.carroll@yahoo.com

Member

Bobbie Auer

Principal Assurance Supervisor

bobbie_auer@gmail.com

Member

Bill Davis

Regional Security Manager

bill.davis11@hotmail.com

Viewer

Madalyn Rohan

Investor Research Engineer

madalyn_rohan@yahoo.com

Member

Betty Kirlin

Regional Integration Representative

betty_kirlin35@hotmail.com

Viewer

Garry Zboncak

Corporate Metrics Executive

garry.zboncak54@yahoo.com

Viewer

Jaylon Weimann

Lead Infrastructure Orchestrator

jaylon.weimann21@hotmail.com

Member

Benny Champlin

Direct Usability Supervisor

benny_champlin71@gmail.com

Viewer

Rolando Kovacek

Principal Security Associate

rolando.kovacek@yahoo.com

Viewer

Bret Jones

Investor Marketing Executive

bret_jones@yahoo.com

Viewer

Kendrick Hayes

Forward Response Director

kendrick_hayes24@yahoo.com

Viewer

Hazel Parker

International Implementation Officer

hazel.parker14@hotmail.com

Member

Jody Yundt

District Program Coordinator

jody_yundt66@hotmail.com

Viewer

Benedict Satterfield

District Data Coordinator

benedict.satterfield34@hotmail.com

Member

Ramona Wiza

Dynamic Operations Associate

ramona.wiza@yahoo.com

Viewer

Francis Weber

Senior Identity Developer

francis_weber16@gmail.com

Admin

Adrienne Mayer

Direct Accounts Administrator

adrienne.mayer12@gmail.com

Admin

Kaylin Cormier

Corporate Metrics Representative

kaylin.cormier@gmail.com

Admin

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
Mr. Meaghan Greenkelley46@hotmail.comMarksportActive$1,122.74
Lynette Hamilljackeline.pollich@gmail.comFort SheilaInactive$590.13
Cecilia Hegmannfaith68@yahoo.comFort PierceInactive$79.77
Delbert Simonis-O'Connerdesiree.klocko@yahoo.comNorth HillardworthInactive$730.45
Horace Kleinearl_kilback96@gmail.comLeannonviewActive$397.73
Total$2,920.82

Basic table

Table with Images

NameEmailLocationStatusBalance
Miriam Greenfelder
@vincent.braun
brenna.brown84@gmail.comAltadenaActive$650.69
Kyleigh McLaughlin
@salvatore76
ashly_labadie@gmail.comWhiteportActive$787.27
Laura Nikolaus
@hester.smith25
shaun66@gmail.comArvidburghActive$562.83
Lonnie Wintheiser
@carol_gorczany11
julian.tremblay57@gmail.comEast FrederiqueworthActive$143.67
Shelia Abbott
@jackie.nitzsche-brekke
madelynn_kub@hotmail.comLemkemouthInactive$467.94

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Kadin Farrellcreola_collins64@yahoo.comWallacemouthInactive$1,034.25
Dr. Lorene Oberbrunnerkelley.sporer3@gmail.comNew MathildesteadInactive$1,060.61
Rico Marvinken1@gmail.comBartonworthInactive$275.53
Shawn Rogahnestevan_cremin68@hotmail.comWest Des MoinesInactive$680.73
Rodrick Hettingerguillermo_mayer@yahoo.comPort EstebanInactive$575.74
Total$3,626.86

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Kristen Gleichnerkendra_zboncak@hotmail.comJustinaboroughInactive$227.77
Holly Reichertwade69@yahoo.comSouth BellbergActive$490.57
Peyton Fay-Swiftmaureen.parker28@yahoo.comColliervilleInactive$1,029.62
Rudolph Bechtelaresther.bailey-white55@gmail.comFort WilfordInactive$391.85
Winona Handada68@gmail.comEast MilesboroActive$848.55
Total$2,988.36

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Lela Schadenbartholome_murazik@yahoo.comKendale LakesActive$1,118.95
Mr. Donnie Bradtkepat_collins26@hotmail.comEffertzsteadInactive$223.73
Ms. Laverne Hintz DVMivah51@gmail.comNorth BradenActive$593.07
Mrs. Lila Andersonzack_strosin61@gmail.comSanta MariaInactive$1,082.41
Mr. Eldred Cruickshankvictor.graham4@yahoo.comAniyaportActive$1,149.72
Total$4,167.88

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
Ellis Runolfsdottirdonnie39@hotmail.comDorissteadInactive$1,172.46
Krista Haagchristy.wintheiser-koss89@gmail.comCollinscesterActive$122.92
Cody Von IIjenna66@yahoo.comWest SolonsteadActive$94.83
Daisy Turcotteveda_altenwerth87@yahoo.comKellerInactive$436.81
Rodney Larsonbyron39@yahoo.comBoyerboroInactive$351.25
Total$2,178.27

Table with row selection

Card Table

NameEmailLocationStatusBalance
Elmer Hauck IIlaverna49@gmail.comOro ValleyInactive$498.54
Eddie Lakinsebastian20@hotmail.comMertzcesterInactive$269.49
Oren Bartellneoma56@hotmail.comSouth HillardtownActive$35.13
Raymond Klockotricia_lind64@gmail.comDaughertyportInactive$202.29
Debbie Halvorsonshaina_koepp@hotmail.comKrissteadInactive$258.17
Total$1,263.62

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
Abraham Emard MDbella.marvin97@yahoo.comJaceyburghInactive$790.94
Jaquan Schmitt IIrobb.stanton@hotmail.comEast MilanActive$65.84
Mr. Aliza Murphylewis_vonrueden28@hotmail.comFort AliyaburghActive$808.30
Drew Ondrickairving.nader@yahoo.comWest TrishasideActive$1,045.90
Derrick Spencerlester90@hotmail.comFort GiovannaboroActive$755.43
Orlando McDermottcaitlyn20@hotmail.comWest LillyActive$1,132.57
Karla Effertzgrace.marquardt@gmail.comErdmanboroughInactive$557.46
Pete Terrysylvester_okeefe21@hotmail.comKlockosteadActive$1,036.76
Willie Rutherford-Farrell DVMluther_osinski94@gmail.comEast JudytownActive$333.61
Harvey Bergnaumdawn.daniel84@gmail.comAufderharvilleActive$328.19
Ms. Susan Bogisichmitchell.pacocha37@yahoo.comRosieportInactive$373.56
Annie Bernierdenis64@hotmail.comBergnaumburyActive$813.80
Dr. Elvie Handjasmin_effertz@gmail.comPort SophiaInactive$929.03
Dr. Melody Goyettenathanial3@yahoo.comFort CourtneyboroughInactive$901.72
Dr. Carlos Goldner IIIdonnie.rempel50@gmail.comFort JanetInactive$992.33
Total$10,865.44

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.