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$950.34
INV002PaidBank Transfer$439.17
INV003PaidBank Transfer$446.67
INV004PaidCredit Card$413.26
INV005PendingBank Transfer$696.42
INV006UnpaidPayPal$397.12
INV007UnpaidBank Transfer$874.84
Total$4,217.82

Simple

Users

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

NameTitleEmailRoleActions
Mary AdamsForward Branding Coordinatormary.adams@gmail.comAdmin
Patsy SchmidtPrincipal Creative Orchestratorpatsy_schmidt94@gmail.comAdmin
Malcolm WhiteCorporate Solutions Producermalcolm.white9@yahoo.comViewer
Elsa HayesLegacy Markets Designerelsa_hayes53@gmail.comViewer
Kennedi KunzeCustomer Operations Supervisorkennedi.kunze@gmail.comAdmin
Bradford FramiProduct Tactics Agentbradford_frami58@hotmail.comMember

Stacked on mobile

Users

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

NameRoleActions

Mustafa Marvin

Regional Integration Facilitator

mustafa_marvin41@hotmail.com

Viewer

Hazel Bradtke

Corporate Communications Designer

hazel.bradtke35@gmail.com

Member

Sherman Reynolds

Principal Branding Representative

sherman_reynolds87@gmail.com

Viewer

Penny Kertzmann

District Solutions Engineer

penny_kertzmann@hotmail.com

Member

Robert Crooks

Internal Markets Strategist

robert.crooks7@hotmail.com

Admin

Elsa Welch

Human Communications Executive

elsa_welch@hotmail.com

Viewer

Users

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

NameRoleActions

Dominic Gislason

Dynamic Quality Officer

dominic.gislason10@yahoo.com

Viewer

Santiago Mosciski

Human Quality Facilitator

santiago.mosciski75@hotmail.com

Viewer

Boris Yundt

International Tactics Representative

boris_yundt@gmail.com

Admin

Ardella Abshire

Product Branding Supervisor

ardella_abshire18@hotmail.com

Member

Lois Weimann

Legacy Web Agent

lois.weimann23@hotmail.com

Admin

Abraham Kuphal

Direct Tactics Agent

abraham_kuphal@yahoo.com

Viewer

Mary Douglas

Dynamic Directives Manager

mary.douglas@gmail.com

Admin

Dolores Haag

Product Branding Analyst

dolores.haag45@hotmail.com

Member

Melyna O'Connell

Global Markets Executive

melyna_oconnell@yahoo.com

Viewer

Bettie Torphy

District Intranet Orchestrator

bettie.torphy91@gmail.com

Member

Mathew Balistreri

Chief Tactics Coordinator

mathew.balistreri13@hotmail.com

Viewer

Sheldon Nienow

Global Marketing Officer

sheldon_nienow49@hotmail.com

Member

Thomas Gusikowski-Rau

Senior Identity Manager

thomas.gusikowski-rau@yahoo.com

Admin

Oswald Hudson

Regional Functionality Executive

oswald.hudson@yahoo.com

Viewer

Amy Wiegand

Product Accounts Manager

amy.wiegand@gmail.com

Admin

Andy Goyette-Little

Chief Optimization Director

andy.goyette-little@yahoo.com

Member

Sophie Cormier

Lead Communications Assistant

sophie.cormier@gmail.com

Admin

Else Smitham

Principal Program Agent

else_smitham48@gmail.com

Member

Dina Jakubowski

Lead Security Director

dina.jakubowski@hotmail.com

Member

Leona Ward

Legacy Configuration Facilitator

leona_ward@gmail.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
Jesus Hammesjoseph11@hotmail.comBartonfurtInactive$272.14
Jasen Hintztremayne81@gmail.comCoral SpringsActive$905.64
Toney Dickens-Mraznatalia64@hotmail.comWest TadInactive$475.94
Veronica Watsica MDdamion42@hotmail.comFort AlfredoInactive$356.89
Garfield Westmay16@yahoo.comRuntecesterActive$653.91
Total$2,664.52

Basic table

Table with Images

NameEmailLocationStatusBalance
Liliane Bode
@dianne38
haylie_williamson@gmail.comFort DeanhavenInactive$497.35
Erick Kub
@dedric.rohan
edna_hilll@hotmail.comRickeysteadActive$610.94
Simon Mante
@franklin26
thelma_murazik41@gmail.comFort JamesonsideInactive$757.09
Alice Skiles DDS
@alphonso59
fatima.langworth@yahoo.comNorth DwayneboroInactive$93.17
Desiree Sawayn
@broderick18
pietro.turcotte76@hotmail.comRiverviewInactive$911.95

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Albertha Connharriet.crist25@yahoo.comWisozkboroActive$196.34
Daphnee Beckergeorge.bauch@gmail.comJacobitonActive$359.46
Boyd Kozey Vanita11@hotmail.comLee's SummitInactive$1,021.20
James Bodehulda.crona@hotmail.comFarmington HillsInactive$244.37
Juana Powlowskiirma.emmerich@hotmail.comNorth OscarvilleInactive$61.68
Total$1,883.05

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Trinity Crookshailee.leannon@gmail.comWestvilleActive$612.01
Maria Huelsjeff11@yahoo.comMaximilliatonActive$738.46
Jana Koelpinottilie.corwin23@hotmail.comNew HuberttownActive$920.82
Ronnie Gleasonstanley.harber4@gmail.comLangsteadActive$311.12
Verona Lebsackstanley26@yahoo.comPfefferlandActive$361.51
Total$2,943.92

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Brent Crona IIIprudence2@yahoo.comWest KristitonInactive$470.04
Kailyn Turcotteflora.treutel-kuvalis@hotmail.comLeighmouthInactive$507.04
Opal McCullough Velbert_will39@hotmail.comPort TyreekActive$812.55
Payton Jerdebrandi87@yahoo.comFort MagaliActive$118.29
Nathaniel Sipesmilton.mills@yahoo.comRustyboroughActive$97.15
Total$2,005.07

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
Gennaro Boehmsilvia93@gmail.comBrandoshireActive$614.66
Raven DuBuquehoyt_hermiston32@gmail.comSouth GideonburghActive$938.66
Benjamin Flatley DVMorlando_white@yahoo.comEast GerardActive$1,193.72
Frankie Hesselchristian_ortiz66@yahoo.comWestonfortActive$423.27
Dr. Dallas Price Sr.gayle5@hotmail.comFort NoraInactive$211.04
Total$3,381.35

Table with row selection

Card Table

NameEmailLocationStatusBalance
Mrs. Elisabeth Vandervortbrittany_heidenreich42@hotmail.comVonRuedenbergInactive$134.35
Damon Nitzschetasha77@gmail.comMorgan HillActive$372.67
Mr. Charity Mayertgary.bruen74@gmail.comWest CloydvilleActive$854.33
Edward Lynchneil_langworth@gmail.comWalkerboroughInactive$870.50
Craig Volkmanfernando_ledner@gmail.comMorissettemouthActive$893.02
Total$3,124.87

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
Zackary Altenwerthgrady44@hotmail.comChristyshireInactive$1,041.28
Herbert Erdmanbertha_skiles@yahoo.comFort CurtisActive$255.35
Victor Leschkathy.beatty@hotmail.comCamillevilleActive$101.19
Stone Hayestommy.frami@hotmail.comLake MckennaInactive$1,025.88
Lonny O'Harastanley_erdman@yahoo.comKleinburghActive$1,116.17
Frieda Wymansimeon95@gmail.comSioux FallsInactive$403.25
Josh Osinskirolando_harber31@yahoo.comGilbertActive$641.74
Emily Breitenbergtalon70@yahoo.comCalvinsideActive$693.08
Bridgette Lemkepatricia_wilkinson32@yahoo.comSouth ClarksteadInactive$814.92
Elsie Sipesangelica.witting67@yahoo.comWest RandyActive$1,007.97
Vera Predovicchandler.kunze84@gmail.comOntarioInactive$575.87
Emie Cruickshankralph3@yahoo.comPort AustinActive$585.17
Daisy Hudsonlucy_fay@gmail.comWymansteadActive$877.25
Doris Lubowitzglenda.moore30@hotmail.comPort IssacActive$299.34
Jedediah Zulaufyvonne3@hotmail.comLynchburgActive$134.81
Total$9,573.27

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