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$336.31
INV002PaidBank Transfer$141.34
INV003PaidPayPal$221.05
INV004PaidPayPal$137.45
INV005UnpaidBank Transfer$812.19
INV006PendingCredit Card$787.70
INV007UnpaidBank Transfer$245.59
Total$2,681.63

Simple

Users

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

NameTitleEmailRoleActions
Gregorio RoobHuman Infrastructure Liaisongregorio_roob@yahoo.comAdmin
Karine MarksInvestor Optimization Administratorkarine_marks2@gmail.comViewer
Shakira PourosGlobal Marketing Engineershakira_pouros@hotmail.comAdmin
Gretchen LarkinNational Optimization Developergretchen_larkin97@hotmail.comAdmin
Bailey WeimannDynamic Web Associatebailey_weimann@yahoo.comAdmin
Guillermo SchowalterNational Accountability Technicianguillermo.schowalter8@gmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Emmitt Ebert

Principal Communications Planner

emmitt.ebert61@hotmail.com

Admin

Grover Farrell

Product Security Specialist

grover_farrell@gmail.com

Member

Brayan Hilpert

Corporate Optimization Manager

brayan.hilpert5@hotmail.com

Admin

Ian Hansen

Central Paradigm Director

ian.hansen64@hotmail.com

Viewer

Icie Turcotte

Principal Operations Associate

icie_turcotte@yahoo.com

Viewer

Macey Lehner

Customer Metrics Executive

macey_lehner@gmail.com

Viewer

Sticky header

Users

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

NameRoleActions

Leora Cruickshank

Corporate Directives Officer

leora.cruickshank50@gmail.com

Admin

Spencer Bruen

District Mobility Technician

spencer_bruen94@hotmail.com

Member

Sheila Jacobson

Forward Configuration Architect

sheila.jacobson@yahoo.com

Viewer

Fernando Metz

Product Accounts Planner

fernando.metz@gmail.com

Member

Abagail Kreiger

Global Creative Agent

abagail.kreiger@hotmail.com

Member

Elta Goldner

Corporate Creative Consultant

elta.goldner@gmail.com

Member

Lawrence Steuber

District Brand Producer

lawrence_steuber@yahoo.com

Member

Nellie Bayer

Lead Marketing Designer

nellie.bayer70@gmail.com

Admin

Eli Deckow

Direct Group Facilitator

eli_deckow98@hotmail.com

Viewer

Margaret Schoen

Legacy Functionality Agent

margaret_schoen31@yahoo.com

Member

Lew Little

National Operations Facilitator

lew.little@yahoo.com

Admin

Matilda Jacobs

Regional Functionality Agent

matilda_jacobs96@hotmail.com

Admin

Landen Hegmann

International Creative Strategist

landen.hegmann46@hotmail.com

Member

Eulah MacGyver

Lead Brand Engineer

eulah.macgyver@yahoo.com

Viewer

Lisandro Leffler

Principal Marketing Director

lisandro.leffler78@yahoo.com

Viewer

Johnathan Hane

District Configuration Executive

johnathan_hane@hotmail.com

Member

Charity Schowalter

Internal Interactions Planner

charity_schowalter45@hotmail.com

Member

Earl Legros

Regional Paradigm Officer

earl_legros@yahoo.com

Member

Octavia Altenwerth

Regional Infrastructure Director

octavia_altenwerth@gmail.com

Member

Rahul Sawayn

Senior Optimization Specialist

rahul.sawayn@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
Mattie Feestarne_turner64@gmail.comPort MagnoliaInactive$850.05
Marvin Ritchiejordan_stoltenberg@yahoo.comAnn ArborActive$1,014.32
Miss Lula Brauncamila84@gmail.comSouth DallasInactive$113.70
Irvin Thielrory.schmitt10@gmail.comHintztonActive$905.83
Elena Nienowdayne.hammes38@yahoo.comFort CierramouthInactive$888.51
Total$3,772.41

Basic table

Table with Images

NameEmailLocationStatusBalance
Rachael Tillman IV
@eloisa.spinka
brooklyn_schmeler-herzog74@hotmail.comNorth MabelInactive$211.54
Marilyn Schuppe
@xzavier_graham73
neil_macgyver@yahoo.comSouth ArchibaldActive$769.65
Johnny Nicolas
@mable_dickens46
palma_goodwin@hotmail.comPort ImanifortActive$529.21
Shaun Hyatt
@victoria91
josue.shields2@gmail.comSan RamonInactive$690.93
Brendan Cummings
@mackenzie72
michaela.altenwerth@yahoo.comGrimesfieldInactive$907.94

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Marie Robel-Smiththeresia_kilback@hotmail.comFort ZachariahActive$622.99
Elsa Wuckertarely_glover@gmail.comCosta MesaInactive$463.15
Dustin Cronin DDSkathleen78@yahoo.comWest DelmervilleActive$560.88
Yvonne Prosaccosimeon.thompson39@gmail.comHowellshireActive$219.52
Lamar Lockmanwilfred27@hotmail.comEast MyrnaInactive$348.94
Total$2,215.48

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
George Prohaskamaeve89@hotmail.comLake AlberthaActive$1,101.38
Cameron Bergnaumlamont19@hotmail.comPort PearlietownActive$1,067.69
Jay Mayertmaybelle_weimann91@hotmail.comFort MitchelInactive$627.08
Kelly Waltermiguel.mann@yahoo.comCamarilloInactive$437.47
Kristen Considineweldon.schiller74@hotmail.comWest CristalInactive$1,065.12
Total$4,298.74

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Edmond Murazikalejandra.waters15@gmail.comHarrisonburgInactive$410.49
Dr. Elmer Yost IIlesley_brakus97@gmail.comMertzcesterActive$82.54
Shelia Lednereloy98@hotmail.comAubreylandInactive$671.82
Dr. Alfredo Kuhnmichaela68@yahoo.comNew YorkInactive$1,142.79
Jon Wizaadella80@yahoo.comAnselstadActive$214.30
Total$2,521.94

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
Sophia Lefflervicente_zemlak@gmail.comOwensboroInactive$831.32
Perry Millerwilton.fritsch@yahoo.comLaruechesterInactive$570.17
Jeff Waters IVmaya_schuppe67@gmail.comSpring HillActive$931.97
Florence Cummerataariane.stark58@gmail.comSouth EdaboroughActive$2.05
Wallace Croninneal.jacobson@yahoo.comMrazchesterInactive$228.70
Total$2,564.21

Table with row selection

Card Table

NameEmailLocationStatusBalance
Jim Schimmelsamanta78@gmail.comLangviewActive$350.82
Brett Hackettkaylie.spinka@hotmail.comClearwaterInactive$680.98
Beatrice Lehnerroman_greenfelder@yahoo.comHomesteadActive$292.72
Angelica Manterodger34@hotmail.comSouth WhittierActive$446.05
Maryann Langemelia.osinski@yahoo.comMemphisActive$43.96
Total$1,814.53

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
Jody Fayalejandrin_hoppe-lindgren@yahoo.comEdinburgInactive$897.23
Tyrone Botsford DDSjimmie_fahey32@gmail.comElyriaInactive$342.15
Steven Huelbrandy_huels80@yahoo.comDaynahavenInactive$649.90
Ruben Trantowcamille_schoen45@gmail.comWest ShanalandInactive$719.78
Jason Sawayntitus.schultz@yahoo.comSchimmelfieldActive$974.41
Judith Welcholin.rogahn@yahoo.comPort SidInactive$314.02
Ms. Lori Rathadriel_dooley92@gmail.comPort SuzanneInactive$955.03
Denise Breitenberg DVMaaliyah.macejkovic@hotmail.comEast CarletonstadActive$559.18
Alberta Davis PhDjakob21@hotmail.comEuclidInactive$801.52
Miss Marjorie Schroederroselyn.bauch@yahoo.comLake PaulasteadInactive$839.32
Myrtle Wisokyenrique_jones49@gmail.comHendersonInactive$108.03
Johnathan Carrolllloyd.ratke83@gmail.comNew MoisesbergInactive$306.47
Lila Fisherjoannie3@yahoo.comNew CindyActive$472.63
Gregory Schmitt DVMshanna_ebert@gmail.comNew ZellaActive$583.24
Kayla Corwinsamanta.corkery17@gmail.comWest KathrynesteadActive$1,085.08
Total$9,607.99

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.