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$292.99
INV002UnpaidBank Transfer$420.46
INV003PendingPayPal$530.17
INV004UnpaidCredit Card$268.03
INV005PendingBank Transfer$321.38
INV006UnpaidPayPal$732.68
INV007PaidBank Transfer$648.49
Total$3,214.20

Simple

Users

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

NameTitleEmailRoleActions
Andreane RatkeInternal Identity Consultantandreane.ratke@hotmail.comViewer
Joannie BraunSenior Intranet Facilitatorjoannie.braun67@yahoo.comViewer
Chasity LemkeCorporate Metrics Facilitatorchasity.lemke@gmail.comViewer
Johan McDermottLead Solutions Orchestratorjohan.mcdermott@yahoo.comMember
Syble Gutkowski-ProsaccoForward Directives Specialistsyble.gutkowski-prosacco@yahoo.comAdmin
Riley CummerataHuman Metrics Administratorriley_cummerata23@yahoo.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Idell Watsica

Forward Creative Designer

idell.watsica@hotmail.com

Viewer

Trace Waelchi

Global Assurance Supervisor

trace_waelchi36@hotmail.com

Admin

Dave Paucek

Product Data Engineer

dave_paucek75@yahoo.com

Viewer

Timothy Cassin

Principal Mobility Representative

timothy.cassin@hotmail.com

Viewer

Hannah Maggio

Regional Solutions Strategist

hannah_maggio@gmail.com

Viewer

Marcelino Buckridge

Lead Interactions Consultant

marcelino_buckridge50@hotmail.com

Member

Users

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

NameRoleActions

Mafalda Emard

Lead Brand Executive

mafalda.emard59@hotmail.com

Admin

Norwood Franecki

Internal Solutions Designer

norwood_franecki@yahoo.com

Viewer

Adolphus Schmitt

Principal Response Manager

adolphus_schmitt51@hotmail.com

Viewer

Ezra Jacobs

Human Functionality Analyst

ezra.jacobs8@yahoo.com

Member

Dudley Bode

Chief Interactions Administrator

dudley_bode@gmail.com

Viewer

Mikel Reichel

Customer Optimization Liaison

mikel.reichel@gmail.com

Admin

Roman King

National Identity Architect

roman.king45@hotmail.com

Admin

Moises Denesik

Forward Assurance Associate

moises.denesik51@yahoo.com

Member

Abbigail Miller

Regional Metrics Officer

abbigail_miller54@hotmail.com

Viewer

Anais Watsica

Direct Identity Agent

anais.watsica@gmail.com

Viewer

Lorna Harvey

Product Program Associate

lorna_harvey@hotmail.com

Admin

Avery Huel

Dynamic Solutions Developer

avery.huel99@yahoo.com

Member

Berta Shields

District Brand Supervisor

berta.shields@gmail.com

Admin

Javier Cartwright

Product Communications Liaison

javier.cartwright@yahoo.com

Member

Meda Pfeffer

Human Quality Coordinator

meda.pfeffer34@yahoo.com

Viewer

Patience Mayert

Lead Directives Strategist

patience_mayert56@yahoo.com

Member

Carmine Lemke

Global Brand Assistant

carmine_lemke@yahoo.com

Member

Edgardo Schowalter-Ziemann

International Functionality Specialist

edgardo.schowalter-ziemann20@gmail.com

Viewer

Arturo Hills

Internal Implementation Associate

arturo.hills51@hotmail.com

Member

Dale Streich

Customer Paradigm Orchestrator

dale_streich1@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
Antoinette Bergnaumloy_keeling@yahoo.comWest AmelymouthActive$498.49
Dr. Kyle Jerde IIImable29@yahoo.comCaryInactive$334.48
Mitchell Millsebony72@gmail.comLake ConniefortActive$435.80
Perry Johnsonchester14@gmail.comWisozkvilleActive$755.85
Dr. Justin Baileyerin.torp19@hotmail.comSmyrnaInactive$946.48
Total$2,971.10

Basic table

Table with Images

NameEmailLocationStatusBalance
Ms. Myra Schulist
@gilda_schaden92
rozella48@yahoo.comSmithamportInactive$612.33
Herbert Lubowitz
@dorian_conroy
lucienne_carter@hotmail.comWildermanmouthInactive$794.61
Douglas Bode
@lilian11
joana_hahn@yahoo.comAlvastadInactive$761.71
Everett Bashirian
@milo30
sherwood.kilback@gmail.comKarlbergInactive$501.47
Teri Fahey MD
@johnpaul_gutkowski38
silas.pfeffer83@yahoo.comPort WilliamshireInactive$82.04

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Hector Nienowoda_nienow54@yahoo.comElisaboroInactive$272.87
Mrs. Misty Jaskolskilue21@hotmail.comShawnasideActive$294.26
Brandon Mohrkaia.schultz58@yahoo.comEast ThomasInactive$853.88
William Ebertraegan92@gmail.comKulasportInactive$875.19
Glenn Rosenbaumhulda.hoppe16@yahoo.comBridgeportActive$78.08
Total$2,374.28

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Gordon Hayes-Haneglenda_reinger@gmail.comAshevilleActive$181.96
Ann Ratkejuwan.kemmer88@hotmail.comKovacektonInactive$494.87
Daryl Kovacek-Schulistflorencio.koelpin14@gmail.comWest MicheleInactive$377.97
Doug Legrosrowan47@gmail.comCarlottaburyActive$324.98
Tasha Wittingmauricio_macejkovic@gmail.comConroysteadActive$205.33
Total$1,585.11

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Eric Oberbrunnerodessa_altenwerth17@hotmail.comNorth CrystalActive$488.19
Constance Hermannhelga.upton@hotmail.comNorth SalvadorInactive$827.09
Mildred Reichelserena_weimann30@gmail.comWest GinoInactive$94.90
Mr. Brent Kunzerobb.larkin11@hotmail.comRoobcesterInactive$1,082.84
Abel Murazik-Runolfssoncecilia77@hotmail.comStiedemannmouthActive$775.17
Total$3,268.19

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
Mr. Max Bruenlexi76@yahoo.comDanielviewInactive$535.39
Molly Koeppfrancisco0@gmail.comWest KrystinamouthActive$871.60
Marc Rolfsonjeanette42@hotmail.comNorth TracyInactive$154.16
Rudy Emardhilma.zemlak@gmail.comSparksActive$972.83
Benny Schulistdaron_hoeger@yahoo.comFort MelissaActive$62.41
Total$2,596.39

Table with row selection

Card Table

NameEmailLocationStatusBalance
Ira Carrollkelly78@hotmail.comSouth HowellviewActive$157.93
Theodore Willmartin_rohan@hotmail.comNew JaylancesterInactive$686.35
Cornelius Beierpauline_reinger@hotmail.comFisherbergActive$62.29
Marie Mullertom30@gmail.comThe HammocksInactive$452.99
Rose Johnscordia93@hotmail.comJacobstonInactive$46.39
Total$1,405.95

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
Hugo Lefflerhilbert.franecki@gmail.comUplandInactive$0.09
Jessica Feestlorenzo.sporer45@gmail.comFort JohnathontonActive$92.70
Mrs. Della Ortizbennie.bartell@yahoo.comSabinasideInactive$1,068.50
Lawrence Mullerpiper_stoltenberg67@yahoo.comWisokyburghInactive$274.66
Larry Kling IIbeulah61@yahoo.comJosefinalandInactive$868.24
Esther Jaskolskialthea_hamill-mayer56@gmail.comFort JaymeActive$440.83
Ricardo Strackebrody45@yahoo.comFort BerneicehavenActive$933.05
Minnie Grimesannetta_stroman31@hotmail.comEast EstefaniaInactive$1,053.49
Mr. Alfonso Pfannerstillmabel15@yahoo.comWest AlanismouthActive$299.84
Kerry Kertzmannpietro_kiehn@gmail.comFort DewittActive$88.95
Silvia Hanebreana_hirthe@hotmail.comHermanhavenActive$1,183.92
Cynthia Daughertymekhi_barrows42@yahoo.comPort HazlesideInactive$165.64
Debra Harrissydney.bartell3@gmail.comPort KarliActive$588.86
Doyle Greenfelderearline_lang85@yahoo.comLindbergActive$461.42
Ellen Rutherford DVMcarmelo_cormier0@yahoo.comTianaboroActive$531.32
Total$8,051.51

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