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
INV001UnpaidCredit Card$638.30
INV002UnpaidBank Transfer$574.41
INV003PendingCredit Card$274.68
INV004UnpaidBank Transfer$503.08
INV005PendingCredit Card$872.58
INV006UnpaidPayPal$335.61
INV007PendingBank Transfer$787.67
Total$3,986.33

Simple

Users

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

NameTitleEmailRoleActions
Katherine StantonInternal Integration Facilitatorkatherine.stanton86@hotmail.comMember
Evan MorarLead Usability Liaisonevan.morar25@gmail.comAdmin
Essie GorczanyCustomer Communications Assistantessie_gorczany@yahoo.comViewer
Bonnie NicolasFuture Markets Agentbonnie_nicolas@yahoo.comViewer
Bessie CorwinNational Creative Associatebessie_corwin96@hotmail.comViewer
Maxwell CartwrightNational Research Assistantmaxwell.cartwright@gmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Dominic Yundt

Lead Accounts Officer

dominic.yundt@hotmail.com

Viewer

Victor Streich-Huels

Direct Program Coordinator

victor.streich-huels@gmail.com

Admin

Jose Gerlach

National Communications Administrator

jose.gerlach69@yahoo.com

Viewer

Allison Ryan

Regional Web Agent

allison.ryan@hotmail.com

Admin

Annetta Mayert

Chief Research Developer

annetta.mayert@hotmail.com

Admin

Eleanor Lockman

Forward Intranet Agent

eleanor_lockman@hotmail.com

Member

Sticky header

Users

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

NameRoleActions

Flora Buckridge

Future Brand Manager

flora_buckridge@gmail.com

Viewer

Lee Mante

Principal Response Agent

lee_mante@hotmail.com

Viewer

Loren Welch

Regional Infrastructure Coordinator

loren.welch@gmail.com

Member

Howell Labadie

Human Branding Designer

howell.labadie@gmail.com

Viewer

Laney Padberg

Dynamic Response Strategist

laney_padberg26@yahoo.com

Viewer

Estella Conn-Schuppe

Central Accountability Producer

estella.conn-schuppe@hotmail.com

Member

Elias Hansen

Forward Creative Liaison

elias_hansen@gmail.com

Member

Vicky Herzog

Forward Branding Supervisor

vicky_herzog76@gmail.com

Admin

Colin Bechtelar-Anderson

Forward Quality Supervisor

colin_bechtelar-anderson38@yahoo.com

Viewer

Molly Veum

Legacy Usability Liaison

molly_veum@hotmail.com

Admin

Chris Schroeder

Direct Operations Assistant

chris.schroeder84@yahoo.com

Member

Joan Mitchell

Senior Directives Liaison

joan.mitchell@gmail.com

Member

Flora Waters-Breitenberg

District Factors Officer

flora_waters-breitenberg@hotmail.com

Viewer

Alexandra Hettinger

Senior Security Specialist

alexandra_hettinger@yahoo.com

Admin

Price Daugherty

Dynamic Implementation Consultant

price_daugherty95@yahoo.com

Member

Heloise Gerhold

Future Quality Engineer

heloise.gerhold83@hotmail.com

Member

Tre Langworth

Direct Metrics Agent

tre.langworth@hotmail.com

Viewer

Daisy Rath

Human Creative Planner

daisy.rath@hotmail.com

Member

Bradford Heller

Senior Identity Officer

bradford_heller40@yahoo.com

Viewer

Carolyn Anderson

International Response Designer

carolyn_anderson48@hotmail.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
Dr. Viva Schoenlelia60@gmail.comPort SaraitownInactive$768.28
Sonia Schamberger PhDmaria_dare4@gmail.comFort ShayleeActive$411.54
Rhiannon Volkman DVMbrady.dooley80@gmail.comMillscesterInactive$15.86
Dr. Joanne Smithcamila.hartmann@gmail.comBauchburghActive$372.88
Everett Rueckerhector_weber75@yahoo.comNorth JosecesterInactive$121.89
Total$1,690.45

Basic table

Table with Images

NameEmailLocationStatusBalance
Elbert Glover
@wm_berge10
marcelino9@gmail.comHarrisonburgInactive$1,031.87
Clarence Cassin
@aurelio49
rosina21@hotmail.comNorth CaseyfurtActive$72.98
Beverly Emmerich
@royce62
toni73@yahoo.comGlendashireInactive$1,072.25
Dexter Hackett
@lempi_bailey82
van_legros59@gmail.comTurnerchesterInactive$591.65
Parker Ledner
@jorge92
luther_herman@gmail.comJonatanboroughActive$1,175.28

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Kristy Gottliebvickie57@hotmail.comBeahantonInactive$1,113.95
Daniel Cremingreyson.kutch@yahoo.comNew PamelaActive$984.75
Dalton Ziemannvan54@gmail.comSouth TaureanInactive$678.28
Arnoldo Beckeremerald40@gmail.comEast DarrickActive$207.07
Mr. Benny Gloversalvador65@gmail.comNew JessikaboroActive$183.98
Total$3,168.03

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Tami Vandervortvirginia_heller14@hotmail.comSouth ThurmanInactive$455.51
Lorine Schultzmacy_treutel62@hotmail.comLake ToyActive$31.71
Ruth Sengerfelix.kshlerin@hotmail.comStocktonActive$1,042.73
Larry Hyattmilan_reichert57@yahoo.comOrlandsideActive$1,179.53
Emily Breitenbergelda.cremin78@gmail.comMissouri CityInactive$419.85
Total$3,129.33

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Jacquelyn Ryanmarshall.schaefer83@hotmail.comOwensteadActive$825.22
Miss Felton Crona MDinez20@hotmail.comBellevilleInactive$656.59
Destinee Turcottekenneth_boyle@hotmail.comWiegandchesterInactive$667.22
Mr. Calvin Reynoldsbill10@gmail.comAbshirestadInactive$180.28
Herbert Wehnersuzanne.gleichner43@hotmail.comRunolfsdottirsideActive$938.74
Total$3,268.05

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. Harriet O'Reillylydia.runolfsdottir39@yahoo.comBobbieburghActive$522.61
Emmy Kertzmannsimone.zboncak25@hotmail.comWest SenecaInactive$807.95
Russ Huels Vvance.lueilwitz73@gmail.comMarceloboroActive$1,027.90
Hope Watsicamadelynn_johnston@gmail.comLake MargarettaActive$170.42
Ike Danielelsa.schoen@yahoo.comLake RudolphActive$1,150.92
Total$3,679.80

Table with row selection

Card Table

NameEmailLocationStatusBalance
Dr. Ilene Bahringereric.hodkiewicz@gmail.comMaximusmouthActive$265.44
Holly Brekke DVMrichard36@gmail.comWesley ChapelActive$655.04
Dr. Gerald Dachlauretta_zieme@hotmail.comWest OrenshireInactive$416.51
Rudy Bednar-Deckowclaude_boehm@hotmail.comWaltonvilleActive$581.92
Alvis Considinedolores_mckenzie45@hotmail.comLake EugeniaInactive$1,063.13
Total$2,982.04

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
Schuyler Purdycecelia43@hotmail.comPort FermintownActive$646.52
Stanford Hanecoy.dare@gmail.comHarriscesterInactive$488.33
Julien Shanahantomas_romaguera18@hotmail.comEast RickeyActive$1,044.31
Miss Mark Raynorhattie_wisozk-jerde@hotmail.comWest PedroActive$804.00
Mrs. Frances Bednarannabel2@yahoo.comWilliamsonlandInactive$9.47
Marcus McClureneal_muller55@yahoo.comLake LindseyInactive$757.90
Marlene Welchestelle.walter12@gmail.comNorth TheasteadInactive$635.55
Albert Lang-Lefflerodie98@hotmail.comSusiesideActive$581.43
Dayana Jenkinslorenzo_denesik@hotmail.comSouth DanykaInactive$809.17
Sarina Bayerpiper.heller79@gmail.comLorainInactive$190.04
Ellis Braunromaine18@yahoo.comPort BonitatownInactive$158.30
Sarah Konopelski PhDrobert.gerhold78@gmail.comFort KathleenlandInactive$213.02
Dr. Cindy Zboncakdamon.kunze@hotmail.comBethtonActive$859.33
Felix Walshollie33@gmail.comNew AddieburghActive$800.11
Karli Schuster Sr.luke_ullrich@gmail.comHesterburghInactive$172.36
Total$8,169.84

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.