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$892.49
INV002UnpaidBank Transfer$445.24
INV003PendingCredit Card$314.38
INV004PaidPayPal$782.49
INV005PaidCredit Card$212.60
INV006PaidCredit Card$277.80
INV007PaidPayPal$284.11
Total$3,209.11

Simple

Users

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

NameTitleEmailRoleActions
Rylee OrnLegacy Program Producerrylee.orn@hotmail.comAdmin
Merle HandCorporate Security Directormerle_hand52@yahoo.comMember
Alejandra TurcotteCustomer Usability Planneralejandra_turcotte@gmail.comViewer
Ariane WilliamsonSenior Security Analystariane_williamson27@yahoo.comViewer
Micheal VandervortCentral Solutions Liaisonmicheal_vandervort@hotmail.comMember
Lilian WelchGlobal Data Analystlilian_welch@gmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Jerry Mitchell

Internal Tactics Facilitator

jerry.mitchell12@gmail.com

Viewer

Cristian Reichel

Regional Functionality Facilitator

cristian.reichel16@yahoo.com

Member

Sarai Green

Internal Data Director

sarai.green@yahoo.com

Member

Sienna Pagac

Customer Program Assistant

sienna_pagac@gmail.com

Viewer

Ellis Herman

District Functionality Facilitator

ellis.herman77@gmail.com

Admin

Kurt Deckow

Internal Data Engineer

kurt_deckow84@hotmail.com

Admin

Users

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

NameRoleActions

Toy Wunsch

Dynamic Paradigm Director

toy.wunsch49@hotmail.com

Admin

Burnice Nolan

Corporate Branding Representative

burnice.nolan@yahoo.com

Member

Katelyn Hills

Global Program Consultant

katelyn.hills@yahoo.com

Member

Mozell Rempel

Global Solutions Specialist

mozell_rempel11@hotmail.com

Admin

Jonathan Shields

National Markets Facilitator

jonathan.shields36@gmail.com

Member

Hilma Ortiz

Principal Communications Consultant

hilma_ortiz13@yahoo.com

Member

Fatima West

Chief Security Representative

fatima.west63@hotmail.com

Member

Beulah Hackett

Central Solutions Director

beulah_hackett85@hotmail.com

Admin

Salvador Funk

Central Communications Engineer

salvador.funk91@yahoo.com

Admin

Joanie Armstrong

Investor Intranet Manager

joanie.armstrong46@hotmail.com

Member

Terrence Osinski-Huels

Future Markets Designer

terrence.osinski-huels90@yahoo.com

Viewer

Isaiah Moen

Future Infrastructure Engineer

isaiah.moen66@yahoo.com

Member

Naomi Bernier

Future Division Executive

naomi_bernier87@hotmail.com

Viewer

Shany O'Hara

Senior Factors Designer

shany.ohara@gmail.com

Admin

Autumn Kihn

Dynamic Program Representative

autumn_kihn@gmail.com

Viewer

Amie Pfeffer

District Creative Assistant

amie_pfeffer90@yahoo.com

Admin

Ashlee Rohan

National Intranet Administrator

ashlee.rohan@yahoo.com

Member

Citlalli Turner

Product Assurance Facilitator

citlalli.turner@yahoo.com

Viewer

Malachi Renner

Global Division Producer

malachi_renner@hotmail.com

Admin

Francis Roberts

Lead Directives Analyst

francis.roberts@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
Jimmy Fisherarvilla.sauer@yahoo.comCatonsvilleActive$984.69
Nicholas Denesik Sr.myrtie_bradtke@yahoo.comHanemouthInactive$1,098.09
Martha Maggiomonique_hintz26@hotmail.comIrondequoitInactive$463.33
Barry Beierwyatt_lehner50@hotmail.comCiceroInactive$658.43
Toni Purdypayton7@yahoo.comKaraboroInactive$324.63
Total$3,529.17

Basic table

Table with Images

NameEmailLocationStatusBalance
Courtney Tremblay
@tyshawn66
monica57@yahoo.comEast MeaganActive$769.70
Terrell Flatley
@franco86
reina17@gmail.comDaijabergActive$1,156.43
Dean Jakubowski
@triston27
erich.bayer@gmail.comYakimaInactive$381.87
Wanda Yost I
@judy.hartmann77
emil_rempel@gmail.comDonatoburyInactive$387.10
Amanda Cassin
@armand_watsica
jadon.kertzmann61@gmail.comPagacshireActive$901.80

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Margaret Lubowitzgust_schulist@gmail.comLangoshsideActive$711.45
Betsy Gleason Sr.marcos79@gmail.comLake LizethcesterInactive$753.72
Emanuel Luettgenadalberto7@gmail.comHettingersteadActive$547.04
Paula Trompclaudia_senger@yahoo.comNew BritainActive$1,006.62
Erick Tremblayelizabeth.ullrich82@gmail.comPort PriscillabergActive$135.81
Total$3,154.64

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Jorge Schuppeana_stoltenberg@yahoo.comRochester HillsActive$786.76
Becky Stantonwilburn_lubowitz20@gmail.comNorth FranzbergInactive$612.92
Dr. Tyler Mantereinhold.schoen@yahoo.comNew AliciaInactive$588.42
Israel Harrissaul_koepp@yahoo.comPricebergActive$710.78
Allison Westvernie.windler1@yahoo.comFort TristinActive$1,111.60
Total$3,810.48

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Sara Smithamtanner57@gmail.comLake JalenfieldActive$1,122.43
Marilyn Lehnerbrandy21@hotmail.comNikolaussteadActive$3.09
Ollie Gradysusanna_turcotte@yahoo.comWest KeyonworthActive$623.56
Brandon Volkmantrycia_bernier@hotmail.comWest KiarachesterInactive$826.33
Delores Strosinorin.mills26@gmail.comKautzerfortInactive$248.43
Total$2,823.84

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
Terrell Gloverara2@yahoo.comFort RaleighvilleInactive$165.22
Marcella Treutel IIdolly_cummerata@hotmail.comKertzmannfurtInactive$412.12
Mr. Guillermo Conroycaleb.schmeler@gmail.comDooleyhavenInactive$1,137.14
Maxine O'Connellmario30@gmail.comNew AnabeltownActive$581.35
Enrique Halvorsonramon47@hotmail.comIsidroboroActive$1,031.91
Total$3,327.74

Table with row selection

Card Table

NameEmailLocationStatusBalance
Lionel Heller DVMwilfredo_mclaughlin87@gmail.comNew MissouriInactive$316.27
Mandy Streichharley_ritchie34@yahoo.comNew AudievilleInactive$81.25
Anna Trantownelson_sauer@hotmail.comKenoshaActive$849.64
Hattie Johnstonlaverna.hand@gmail.comHarveyfortInactive$191.40
Dallas Zemlakemmie.kiehn@hotmail.comSouth AutumnInactive$979.21
Total$2,417.77

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
Matt Keelingyasmine_ritchie@hotmail.comFort HershelActive$424.81
Clifton Stokes Vyadira_kris35@yahoo.comCorpus ChristiInactive$1,163.70
Rose Goodwindejuan_veum3@hotmail.comReubenvilleInactive$710.85
Kathleen Erdmanuriah_mcglynn@hotmail.comHerminiabergActive$733.74
Beth Johnstonjoanne10@hotmail.comOro ValleyActive$478.57
Pete Stiedemanncelestino_stark@yahoo.comNew JordybergActive$1,080.18
Tammy Walkereinar39@gmail.comFort LonzoInactive$544.40
Lee Erdmananastacio_murray51@hotmail.comPort DomingoActive$278.80
Derek Sipes-Bednarbrett_parker60@yahoo.comSouth JedidiahInactive$421.66
Bridget Davisgrayce_stracke@hotmail.comParkerfieldActive$139.90
Constance Swaniawskigayle67@hotmail.comLake DaltonfortActive$6.50
Leslie Collier MDchandler.blanda-oreilly37@yahoo.comWest HaydenfurtInactive$1,115.09
Myron Whitejevon_dare@hotmail.comCristinahavenInactive$5.86
Henry Walkerhugh89@hotmail.comClarachesterInactive$872.70
Mrs. Agnes Mills DDSbrooke.connelly@yahoo.comSierra VistaInactive$1,077.53
Total$9,054.29

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