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$498.56
INV002PaidBank Transfer$889.76
INV003PendingPayPal$377.45
INV004PendingPayPal$390.76
INV005PaidPayPal$782.55
INV006PendingPayPal$948.48
INV007UnpaidCredit Card$641.51
Total$4,529.07

Simple

Users

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

NameTitleEmailRoleActions
Sienna Schamberger-BeattyForward Applications Techniciansienna.schamberger-beatty@yahoo.comViewer
Gennaro NitzscheLegacy Markets Supervisorgennaro.nitzsche@yahoo.comMember
Justina LarkinRegional Interactions Agentjustina.larkin@yahoo.comViewer
Cali BlickInternal Markets Representativecali_blick@yahoo.comMember
Lavina O'ConnerGlobal Group Architectlavina.oconner@gmail.comViewer
Connor WuckertFuture Accountability Orchestratorconnor_wuckert70@hotmail.comMember

Stacked on mobile

Users

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

NameRoleActions

Paula Beatty

Chief Accounts Executive

paula.beatty25@hotmail.com

Member

Wyatt Little

Future Response Analyst

wyatt_little@hotmail.com

Admin

Emory Kunze

Regional Identity Supervisor

emory_kunze@yahoo.com

Admin

Lucious Heathcote

Product Integration Strategist

lucious.heathcote@hotmail.com

Member

Gillian Graham

Customer Tactics Coordinator

gillian_graham62@hotmail.com

Viewer

Ashlee Kirlin

Dynamic Quality Officer

ashlee_kirlin@hotmail.com

Member

Users

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

NameRoleActions

Milan Prohaska

District Functionality Manager

milan_prohaska@gmail.com

Member

Elbert Gottlieb

Product Group Liaison

elbert_gottlieb@hotmail.com

Admin

Beth Hamill

Regional Program Facilitator

beth_hamill@hotmail.com

Member

Liliana Yundt

Global Response Associate

liliana_yundt91@hotmail.com

Admin

Laurie Abshire

International Division Technician

laurie_abshire@hotmail.com

Member

Ciara Huel

Direct Configuration Producer

ciara.huel40@hotmail.com

Viewer

Harmon Legros

Customer Branding Coordinator

harmon_legros87@gmail.com

Member

Una Yundt

Customer Implementation Producer

una_yundt@yahoo.com

Admin

Nicklaus Lockman-Koch

Customer Creative Manager

nicklaus.lockman-koch@yahoo.com

Admin

Marcus Ziemann

Product Identity Officer

marcus_ziemann@hotmail.com

Admin

Adah Goodwin

International Metrics Liaison

adah_goodwin@hotmail.com

Admin

Ludie Weissnat

Lead Integration Planner

ludie.weissnat@hotmail.com

Viewer

Isobel Stamm

Global Response Liaison

isobel_stamm@gmail.com

Admin

Rodrigo Goldner

Legacy Directives Strategist

rodrigo.goldner@yahoo.com

Admin

Pansy Quitzon

Customer Identity Planner

pansy_quitzon32@yahoo.com

Viewer

Maud Thompson

Legacy Division Coordinator

maud.thompson7@yahoo.com

Admin

Jaylan Bruen

Global Accountability Analyst

jaylan.bruen93@gmail.com

Member

Erna Considine

Human Branding Director

erna_considine8@gmail.com

Viewer

Dean Lindgren

Regional Functionality Facilitator

dean.lindgren27@hotmail.com

Member

Flossie Roob

Principal Optimization Facilitator

flossie.roob@yahoo.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
Martha Connellygerson_tromp@hotmail.comJarenfurtActive$882.33
Judy Kilback-Kertzmannflavio_walker@gmail.comPort ShaynaInactive$1,073.08
Kent Kiehnnikita.quitzon@yahoo.comClotildeboroughInactive$965.88
Casey Hirthehelen17@yahoo.comAriviewInactive$1,058.58
Jana Pfannerstillaimee_cartwright6@hotmail.comNapaActive$607.12
Total$4,586.99

Basic table

Table with Images

NameEmailLocationStatusBalance
Kent Rosenbaum
@freeman86
bette.nienow11@yahoo.comFort LoriInactive$185.79
Lula Pagac
@yoshiko.harvey
shanelle.schoen@gmail.comNorth StefanshireInactive$98.32
Oscar Terry
@josue4
reta18@yahoo.comPort AlysaActive$433.66
Ms. June Carroll
@quinton_carter
stacey.lubowitz@gmail.comWarwickActive$916.43
Jimmie Senger
@clara31
berenice.hand@hotmail.comHermistonboroActive$774.39

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Jaime Runolfssonjamaal_sporer@hotmail.comDixieboroughActive$1,067.99
Moses Robertsweston_hayes@hotmail.comLeopoldportInactive$337.92
Andy Robertsoral_von@hotmail.comMaziefurtInactive$414.20
Olive Jaskolski-Adamsgarnet_steuber12@hotmail.comWest SamsonworthActive$627.07
Amy Hoppetracy98@yahoo.comIvahchesterActive$240.58
Total$2,687.76

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Gladys Kshlerinmafalda.hudson@hotmail.comSouth EvelynboroughActive$333.10
Wilbur Mantejedediah.lubowitz@hotmail.comCliftonworthInactive$425.05
Nicole Baileynatalie99@yahoo.comPeoriaActive$899.43
Elizabeth Doyledorothea17@gmail.comSeattleInactive$802.09
Vincent Lynchjanae_okeefe@gmail.comMosciskiportInactive$618.76
Total$3,078.43

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Leroy Bashirianmisty26@gmail.comTrantowlandInactive$296.49
Bonnie Cristchanel70@gmail.comEast KennethInactive$1,068.99
Regina Dibbertaliza68@gmail.comFort RogerslandActive$843.03
Gustavo Jacobimichaela_pfannerstill66@hotmail.comHettingerstadActive$842.91
Andrew Cummingseldred.trantow30@hotmail.comPort KaneActive$412.86
Total$3,464.28

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
Jason Hills Sr.arianna.rosenbaum28@yahoo.comHartmanntownActive$846.92
Darren Bednarfiona21@yahoo.comNorth MarcellavilleActive$50.29
Mrs. Jennie Wintheiserliliane_mante@hotmail.comNorth MozellcesterInactive$650.34
Levi Strosinrosella7@yahoo.comSatterfieldsideInactive$124.84
Ignacio Pfeffersylvia.marquardt61@hotmail.comBowieInactive$893.04
Total$2,565.43

Table with row selection

Card Table

NameEmailLocationStatusBalance
Norman Terrypedro.graham-rogahn21@gmail.comJeansteadInactive$271.14
Pearl Marquardtmarques.lindgren@gmail.comSt. Clair ShoresInactive$1,054.13
Tomas Cronintiara1@gmail.comDanvilleActive$481.68
Martha Brownnettie91@hotmail.comSt. PetersburgInactive$511.35
Eddie Goodwinjennifer.hickle-nitzsche@gmail.comNorth LaurenActive$487.20
Total$2,805.50

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
Dr. Jimmie Goyetteclaud_bashirian80@hotmail.comPerrisInactive$473.40
Wilbert Faheygisselle_schowalter75@yahoo.comHodkiewiczlandActive$66.72
Jackie O'Haraeloy_toy@hotmail.comWest KathrynesideInactive$225.55
Richard Williamsonhaven.pfannerstill76@hotmail.comNorth KaylibergInactive$25.13
Maureen O'Connelljosh58@yahoo.comBoscoboroughActive$1,034.36
Tara Hesselpierre99@hotmail.comEast DarrionchesterActive$332.39
Flora Glover DDSdenis66@hotmail.comKertzmannshireActive$1,023.06
Olivia Crooksadrianna.ledner@gmail.comFort PaoloworthInactive$410.63
Andrew Friesenmaeve_okeefe@yahoo.comHighlandInactive$132.46
Gertrude Gerholdloren10@gmail.comWest MaurineActive$377.90
Steven Ferryelfrieda.cormier31@hotmail.comSan ClementeInactive$455.12
Margie Larsonoscar_bahringer@yahoo.comNew MacstadActive$980.89
Nadine Beiermarques_deckow@gmail.comSouth RamiroActive$394.33
Kent Schultzarch91@yahoo.comCollierchesterInactive$101.20
Rochelle Torpdorthy7@hotmail.comMelodyboroActive$1,015.76
Total$7,048.90

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