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$523.62
INV002UnpaidPayPal$892.32
INV003PendingPayPal$734.62
INV004PaidBank Transfer$230.14
INV005UnpaidCredit Card$923.56
INV006PendingCredit Card$818.28
INV007PaidCredit Card$344.51
Total$4,467.05

Simple

Users

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

NameTitleEmailRoleActions
Ilene ReillyCentral Identity Coordinatorilene_reilly@yahoo.comAdmin
Ralph WatersForward Response Plannerralph_waters@hotmail.comAdmin
Spencer CorkeryInternal Creative Consultantspencer_corkery@hotmail.comAdmin
Spencer HintzForward Mobility Coordinatorspencer.hintz93@yahoo.comAdmin
Clementine VonInternational Applications Representativeclementine.von@gmail.comViewer
Valentin SauerFuture Implementation Engineervalentin.sauer78@gmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Dock Nikolaus

Legacy Markets Producer

dock_nikolaus82@gmail.com

Admin

Betsy Veum

Customer Configuration Administrator

betsy_veum@yahoo.com

Viewer

Libbie Nader

Chief Accounts Representative

libbie_nader@gmail.com

Member

Ezra Kuphal

Regional Accounts Assistant

ezra_kuphal27@yahoo.com

Admin

Cody Erdman

Regional Markets Technician

cody.erdman@yahoo.com

Viewer

Cordell Jast-Greenfelder

International Operations Architect

cordell_jast-greenfelder@yahoo.com

Member

Sticky header

Users

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

NameRoleActions

Glenda Tremblay

Lead Web Architect

glenda.tremblay17@yahoo.com

Admin

Florida Mante

Central Functionality Liaison

florida_mante64@gmail.com

Viewer

Jamar Wiegand

Principal Directives Analyst

jamar_wiegand74@yahoo.com

Viewer

Erna Macejkovic

Internal Functionality Facilitator

erna.macejkovic@yahoo.com

Admin

Emmet Hills

District Integration Associate

emmet.hills69@yahoo.com

Viewer

Estel Baumbach

Product Branding Officer

estel_baumbach5@hotmail.com

Admin

Hilbert Wisoky

Principal Program Engineer

hilbert_wisoky@yahoo.com

Admin

Dorothea Runolfsson

Dynamic Operations Assistant

dorothea.runolfsson89@hotmail.com

Member

Fae Kuvalis

Dynamic Configuration Representative

fae_kuvalis0@hotmail.com

Member

Frances Crooks

Direct Assurance Executive

frances_crooks@hotmail.com

Admin

Amy Kub

Human Intranet Director

amy_kub@yahoo.com

Viewer

Nia Russel

Global Optimization Orchestrator

nia.russel25@yahoo.com

Viewer

Alysa Huels

Product Solutions Planner

alysa_huels65@gmail.com

Viewer

Enrique Harris

District Accountability Consultant

enrique_harris@gmail.com

Admin

Rosetta O'Reilly

National Optimization Liaison

rosetta.oreilly15@yahoo.com

Admin

Janiya Parisian

Global Brand Developer

janiya_parisian@hotmail.com

Member

Gonzalo Blanda

Dynamic Response Director

gonzalo_blanda@hotmail.com

Member

Hiram Raynor-Parisian

Internal Security Representative

hiram_raynor-parisian47@yahoo.com

Viewer

Denis Schultz

District Implementation Administrator

denis.schultz@hotmail.com

Admin

Lew Mertz

District Intranet Facilitator

lew.mertz@hotmail.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
Dean Lubowitz Vcharles_windler@gmail.comOakland ParkInactive$826.05
Willard Gorczanyeverardo19@hotmail.comWest HuldashireActive$917.12
Sandra Durgannova33@gmail.comNew AntoinetteInactive$1,122.88
Veronica Gerholdmonique65@hotmail.comAftonstadInactive$1,067.28
Mr. Jack Goodwinbobbie.kub36@yahoo.comParmaActive$1,129.53
Total$5,062.86

Basic table

Table with Images

NameEmailLocationStatusBalance
Corey Kirlin I
@lennie67
archibald_bogisich@hotmail.comNorth Miami BeachActive$368.87
Mrs. Marta Romaguera
@paxton.oconner86
moses32@hotmail.comWest Palm BeachInactive$31.77
Ramon Considine
@nola_weimann76
mohammed_skiles@yahoo.comJaidaboroActive$787.52
Willis Romaguera
@mortimer_stoltenberg-hyatt85
vito_bergnaum6@hotmail.comLaguna NiguelInactive$294.96
Raul Hansen
@rasheed_kuvalis41
alek94@yahoo.comSouth JordanActive$80.04

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Ms. Annie Lang-Reillyjackson18@gmail.comWest CarlottaActive$385.23
Violet Walsh MDtad.ernser44@gmail.comKlingchesterActive$348.39
Jodi Weissnatblanca_gleichner@hotmail.comTaniafieldInactive$188.98
Archie Predovicrollin.blanda57@gmail.comFort AliviaActive$1,114.69
Timmy Fisheralexa.hoeger0@gmail.comBeahancesterActive$448.79
Total$2,486.08

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Edith Denesikthelma76@hotmail.comBoyerboroughInactive$215.67
Glen Purdycarmen.mcclure@gmail.comNorth KobehavenInactive$1,143.62
Glenn Boyle Jr.ayana29@yahoo.comJonathansideInactive$535.34
Noah Collinsjay.funk@yahoo.comTrantowmouthInactive$297.94
Danielle Schowalterotis.waelchi70@yahoo.comSouth WoodrowstadInactive$240.91
Total$2,433.48

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Mr. Nathan Kunzeterence.beatty@gmail.comLake CarolanneInactive$335.83
Janis Huelisobel.kirlin@gmail.comLibbyburyActive$872.79
Terence Stoltenbergathena.huel29@gmail.comSanta ClaritaActive$202.49
Ernest Daremason.corwin@yahoo.comAshlyfieldInactive$1,163.99
Clint Konopelskileanna.thiel37@hotmail.comEldoncesterActive$322.72
Total$2,897.82

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
Dr. Rodney Stammmose70@gmail.comCamdenboroughActive$581.34
Ada Murraygenesis_rau@yahoo.comHeaneycesterInactive$141.24
Dixie Marquardtstanton.keeling9@yahoo.comSouth KeshawnsteadInactive$1,161.62
Fred Gottliebnoemy_maggio@hotmail.comShanahantonActive$301.98
Ms. Paula Hilllclinton_roberts@gmail.comNoblesvilleInactive$843.38
Total$3,029.56

Table with row selection

Card Table

NameEmailLocationStatusBalance
Sylvia Muellerdominic.bayer91@gmail.comLake ProvidenciInactive$35.86
Trevor Rutherfordvada_abshire47@hotmail.comNorth TessfortActive$258.70
Penny Bruenzoila.roob@gmail.comNorth JulietboroInactive$336.11
Ross Wisozkharmony.emmerich@hotmail.comSmithcesterInactive$816.98
Marvin Schadenrebeka_oberbrunner@hotmail.comMaxiecesterActive$636.55
Total$2,084.20

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
Jessie Cristgertrude49@hotmail.comSouth YasmeenviewActive$184.91
Elsie Connelly MDanita.lind@hotmail.comHamillsteadActive$118.11
Pat Satterfieldfritz.prohaska34@hotmail.comBristolActive$979.22
Shelly Kuhlman-Shieldstimmothy.dooley75@hotmail.comMilpitasInactive$634.37
Bob Walkergertrude39@hotmail.comNorth KayleyboroInactive$509.46
Stacey Gorczanyjoseph97@yahoo.comRippinburghActive$636.76
Bertha Watsicahester.langosh40@hotmail.comAnkundingburyInactive$688.67
Kelly Runolfsson-Nicolas Sr.reta23@hotmail.comPalm CoastActive$192.08
Nancy Huelssilas31@gmail.comSouth TimmyfurtActive$749.97
Jessie Jaskolskimario.kautzer86@hotmail.comAtlantaInactive$961.82
Duane Hudsonroy28@hotmail.comGeraldbergActive$887.16
Carl Metzmelany.stroman@hotmail.comPort CorbinInactive$132.23
Lance Parkercristina_trantow9@hotmail.comCollinsteadActive$1,116.67
Paula Blick IIkellie18@yahoo.comBergnaumvilleInactive$338.11
Boyd Cassinmagnolia88@hotmail.comFayettevilleInactive$1,014.11
Total$9,143.65

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.