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
INV001PaidPayPal$897.20
INV002PaidBank Transfer$765.49
INV003PaidPayPal$169.69
INV004PaidCredit Card$778.74
INV005PaidPayPal$311.07
INV006UnpaidPayPal$483.85
INV007PendingCredit Card$538.89
Total$3,944.93

Simple

Users

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

NameTitleEmailRoleActions
Luigi RosenbaumRegional Directives Executiveluigi.rosenbaum@yahoo.comViewer
Johann SchulistForward Marketing Directorjohann.schulist@hotmail.comMember
Cooper MorarCustomer Research Analystcooper.morar@hotmail.comAdmin
Earline HaleyCustomer Marketing Managerearline.haley13@yahoo.comMember
Myrna CollinsLegacy Research Consultantmyrna_collins@hotmail.comMember
Eduardo ProhaskaInternal Research Developereduardo_prohaska97@gmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Ned Schmidt

Product Quality Director

ned_schmidt27@gmail.com

Member

Makayla Denesik

Human Markets Producer

makayla.denesik75@yahoo.com

Member

Russell Robel

Legacy Division Engineer

russell_robel@hotmail.com

Viewer

Aracely Block

Forward Paradigm Orchestrator

aracely.block38@yahoo.com

Member

Marta Nolan

Product Paradigm Specialist

marta_nolan@yahoo.com

Member

Rosendo Luettgen

Internal Division Strategist

rosendo_luettgen@hotmail.com

Admin

Sticky header

Users

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

NameRoleActions

Christina Schuppe

Global Accounts Planner

christina_schuppe90@hotmail.com

Admin

Dan Friesen

Future Interactions Consultant

dan.friesen53@gmail.com

Admin

Percival Walter

Principal Operations Liaison

percival.walter@gmail.com

Admin

Violet Hane-Steuber

Lead Mobility Administrator

violet.hane-steuber@gmail.com

Admin

Hosea Waters-Doyle

Customer Response Assistant

hosea_waters-doyle@hotmail.com

Admin

Dusty Mueller

Forward Solutions Facilitator

dusty_mueller@hotmail.com

Viewer

Orval Kemmer

Future Markets Specialist

orval.kemmer@hotmail.com

Member

Allene Ullrich

Lead Mobility Consultant

allene.ullrich0@yahoo.com

Viewer

Jordyn Nitzsche

Legacy Markets Producer

jordyn.nitzsche@yahoo.com

Member

Aurelia Bayer

Senior Functionality Specialist

aurelia.bayer12@gmail.com

Admin

Efren Mills-Greenfelder

Direct Infrastructure Producer

efren.mills-greenfelder94@hotmail.com

Member

Dorcas Kovacek

District Intranet Specialist

dorcas.kovacek@yahoo.com

Viewer

Maximilian Bailey

Internal Tactics Manager

maximilian_bailey72@gmail.com

Member

Oran Hahn

National Integration Officer

oran_hahn@gmail.com

Viewer

Matt Moore

Human Program Officer

matt_moore58@gmail.com

Admin

Maybell Hodkiewicz

Chief Assurance Architect

maybell_hodkiewicz@hotmail.com

Member

Leland Kulas

National Accountability Producer

leland.kulas@gmail.com

Admin

Otis Pagac

District Communications Officer

otis_pagac@gmail.com

Viewer

Krista Franey

Chief Intranet Engineer

krista.franey48@hotmail.com

Admin

Ally Leannon

Central Solutions Architect

ally_leannon10@yahoo.com

Member

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
Charlie Heidenreichnathan60@gmail.comDelray BeachActive$277.63
Samantha Bartellfrancesco.feeney73@gmail.comLaguna NiguelInactive$262.67
Viola O'Harawinnifred.schumm16@hotmail.comSanta AnaInactive$614.82
Andrew Rohanellie_watsica47@hotmail.comEast AthenaburghInactive$1,018.60
Billy Bruenrashad.gibson@gmail.comPort EffiebergActive$1,068.61
Total$3,242.33

Basic table

Table with Images

NameEmailLocationStatusBalance
Ruth Tillman
@devante_mraz81
antwan_schowalter@hotmail.comFort ZacharytonInactive$581.02
Herman Hudson
@lisandro.schuster
kellie_parker29@yahoo.comNew KileyburghInactive$1,178.75
Agnes Metz
@garrick55
arielle.renner@hotmail.comPearlandInactive$364.99
Boyd Hoeger IV
@jenifer59
edythe_crona@gmail.comBellevueInactive$782.91
Sherman Casper
@mattie.bergstrom-shields43
rossie_hilpert@hotmail.comFond du LacActive$193.52

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Doug Halvorsondarrin_hansen@gmail.comPort LexicesterActive$848.93
Fernando Medhurstgenevieve_herman1@hotmail.comChesterboroActive$529.01
Elsie Lueilwitznellie.volkman@gmail.comWest JoshuahActive$369.24
Arturo Corwin IImckenzie_zboncak42@hotmail.comShanahanfieldInactive$1,186.96
Mike Connelly Jr.ivy.greenfelder58@hotmail.comMajorfurtInactive$865.85
Total$3,799.99

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Edmund Creminedmond.haley20@yahoo.comNorth TaylorActive$734.21
Lloyd Armstrongfrancis_lowe80@hotmail.comLoncesterInactive$281.58
Ted Krajcikmae_borer@gmail.comJabarifurtActive$839.24
Hubert Parkerdarion_bode18@yahoo.comLake BetsyInactive$816.80
Dr. Lisa Lefflermurphy14@hotmail.comKrisfieldActive$373.89
Total$3,045.72

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Dr. Johnathan Schroederfrieda26@yahoo.comGusikowskifieldActive$655.66
Jason Marquardtbryce.lemke@hotmail.comPort EffieInactive$27.48
Dianne Schultzshany84@yahoo.comWest CaleActive$304.11
Keith Bartoneldora68@gmail.comHutchinsonInactive$45.24
David Jacobsonshayne.bins85@gmail.comSouth ReynoldportInactive$1,020.42
Total$2,052.91

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
Shawn Johnserich34@gmail.comPort ArjunstadInactive$821.83
Andy Stehrtyree77@hotmail.comPort KennaburghActive$89.17
Jesus Deckowtatyana23@yahoo.comNew AureliechesterActive$589.70
Debra Carrollmallie.huels@gmail.comWest GeraldmouthInactive$96.98
Holly Wehnerjordi64@gmail.comEast DeangeloActive$428.24
Total$2,025.92

Table with row selection

Card Table

NameEmailLocationStatusBalance
Myron Kshlerinlila.hackett@hotmail.comNorth ReillyActive$674.92
Dr. Tracy Rutherfordjerrell22@yahoo.comWest EmmettboroActive$346.59
Blanca Grimesjoshuah0@yahoo.comTadtonActive$1,020.72
Herbert Nitzsche IIgiovanna.rice@yahoo.comAspen HillInactive$207.33
Marie Streichpreston.mayer@yahoo.comWildermantonActive$536.96
Total$2,786.52

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
June Baumbachayden_rau@hotmail.comMayraburghInactive$290.95
Phillip Gutmannhope_stiedemann86@yahoo.comLafayetteburghInactive$722.66
Jan Pollichena.cruickshank39@gmail.comShanaviewInactive$194.76
Geoffrey Weissnatjordon.okuneva73@gmail.comChristysteadInactive$1,120.33
Kristen Wyman MDrudolph_krajcik@yahoo.comNew GloriaburyActive$1,031.59
Miriam Lakin IVnola49@hotmail.comSouth BrittanyboroActive$140.93
John Nitzschepeggie.collier@hotmail.comGoldnershireInactive$484.19
Delbert Heidenreichduncan_lynch91@hotmail.comNew OdieActive$164.99
Tommie Millerhipolito.grady@yahoo.comLake AshleighActive$1,004.11
Dr. Jacquelyn Cassinirma.kiehn95@gmail.comLawtonActive$867.99
Marlon Nolanfern_mueller0@gmail.comWuckerthavenActive$889.71
Dr. Rene Rodriguezharmony70@hotmail.comEast NoemieActive$799.85
Laverne Keeblerjoesph_hudson24@hotmail.comNew VernaInactive$114.29
Mr. Gilberto Braungraham.bahringer@yahoo.comRunolfsdottirvilleInactive$1,096.84
Bennie Wolffgreg.littel3@gmail.comSchmelerlandInactive$43.12
Total$8,966.31

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.