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
INV001UnpaidPayPal$982.41
INV002PendingPayPal$622.66
INV003PendingCredit Card$111.24
INV004PaidCredit Card$331.00
INV005PendingBank Transfer$545.47
INV006PaidPayPal$307.70
INV007UnpaidCredit Card$157.37
Total$3,057.85

Simple

Users

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

NameTitleEmailRoleActions
Osbaldo D'AmoreChief Interactions Liaisonosbaldo_damore81@hotmail.comAdmin
Cierra KundeLegacy Factors Administratorcierra.kunde73@yahoo.comMember
Claudia CasperFuture Group Directorclaudia.casper@gmail.comMember
Alford ArmstrongInternal Tactics Coordinatoralford_armstrong@hotmail.comViewer
Dexter AnkundingForward Usability Executivedexter.ankunding88@hotmail.comAdmin
Naomie DaughertyCentral Metrics Consultantnaomie.daugherty@hotmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Frieda Corwin

Human Communications Engineer

frieda_corwin81@hotmail.com

Viewer

Preston Veum

Dynamic Assurance Supervisor

preston.veum92@yahoo.com

Member

Paxton Hartmann

Investor Intranet Associate

paxton_hartmann82@yahoo.com

Viewer

Elliot Witting

Lead Research Administrator

elliot_witting@yahoo.com

Admin

Colton Rice

Future Tactics Executive

colton.rice69@yahoo.com

Viewer

Trevor Runolfsdottir

Central Group Officer

trevor_runolfsdottir90@yahoo.com

Viewer

Users

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

NameRoleActions

Scarlett Schmidt

Customer Solutions Specialist

scarlett.schmidt@hotmail.com

Admin

Syble Runte

National Accountability Strategist

syble_runte41@yahoo.com

Member

Dorthy Williamson

National Integration Strategist

dorthy.williamson@hotmail.com

Member

Kelly Wyman

Customer Infrastructure Facilitator

kelly.wyman@gmail.com

Viewer

Edmund Casper-King

Central Division Specialist

edmund.casper-king65@gmail.com

Member

Kamryn Mante

Global Group Specialist

kamryn_mante12@yahoo.com

Admin

Halle Miller

Future Assurance Manager

halle_miller12@yahoo.com

Member

Shaun Brakus

Lead Functionality Planner

shaun_brakus@yahoo.com

Viewer

Frederick Rodriguez

Internal Intranet Specialist

frederick_rodriguez14@hotmail.com

Viewer

Rashad Robel

Product Accounts Technician

rashad_robel40@yahoo.com

Viewer

Joey Parisian

International Assurance Specialist

joey.parisian92@gmail.com

Admin

Madaline Deckow

Future Accounts Executive

madaline_deckow25@gmail.com

Viewer

Mathias Rau

Central Quality Orchestrator

mathias.rau@gmail.com

Member

Zoey Ankunding

International Factors Technician

zoey.ankunding@yahoo.com

Admin

Kellen Corkery

Chief Response Producer

kellen_corkery@gmail.com

Member

Joannie Kovacek

Corporate Directives Associate

joannie_kovacek@gmail.com

Viewer

Laurine Vandervort

Lead Quality Specialist

laurine.vandervort@yahoo.com

Viewer

Gaetano Kilback

Internal Tactics Director

gaetano.kilback@hotmail.com

Viewer

Sophia Haag

Lead Group Analyst

sophia_haag@hotmail.com

Member

Kristin Veum

Regional Division Producer

kristin.veum@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
Mr. Woodrow Predoviclew79@hotmail.comJenkinsstadInactive$721.43
Marcia Boscovince.murphy@gmail.comRicochesterInactive$68.26
Melissa Thompsondeontae55@yahoo.comNew HavenInactive$13.73
Lillie Vonearnestine_keeling84@gmail.comSouth AliviaInactive$1,083.81
Woodrow Rempel IImia_kunze15@hotmail.comBauchsideActive$81.87
Total$1,969.10

Basic table

Table with Images

NameEmailLocationStatusBalance
Timothy Jacobi
@kayden_weber68
luther.howe@yahoo.comSmithtonActive$194.47
Tracy Casper-Senger
@esperanza.littel
allen.hudson32@gmail.comFlorence-GrahamActive$517.74
Alexandra Roberts
@caesar_fadel78
mara.spencer@gmail.comGibsonfurtActive$145.05
Eddie Rutherford
@wallace97
easter_keebler@yahoo.comWest BriancesterInactive$6.73
Vicki Wintheiser-Hegmann
@deshawn29
emory_abernathy@hotmail.comKozeyviewInactive$562.29

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Kristy Berge Jr.pedro80@gmail.comEmmittshireInactive$1,015.05
Regina Fadellambert.schmidt@hotmail.comEl PasoActive$966.22
Bernice Kemmeralden_beahan@gmail.comRobeltownActive$669.67
Pedro Kuhic IVhector.stamm78@yahoo.comWainotownInactive$692.69
Jake Kuhlman IIIamya_aufderhar@hotmail.comPort FredyInactive$424.06
Total$3,767.69

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Kevin Balistrerinoble.schaden@gmail.comRayfurtInactive$911.30
Marlene Stromanrickie.oconner@gmail.comNew OmerActive$677.43
Joyce Maggioole_gottlieb@yahoo.comGloriahavenInactive$983.67
Howard Moorecassandra.farrell@gmail.comPort ColemanburyActive$277.55
Desiree Ernser-Ruecker IVdanny_walter16@gmail.comPort JenaInactive$837.63
Total$3,687.58

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Wendy Marvinjenifer30@gmail.comSouth ModestaActive$145.43
Lauren Harber Sr.chyna8@yahoo.comSouth SamsontownActive$1,169.56
Rachael Rohanmozelle.kshlerin@yahoo.comFadelsteadActive$487.28
Jackie Thompsonisabel_price90@hotmail.comPort BernadineActive$215.84
Alejandro Schimmelkody59@gmail.comGibsonshireInactive$422.13
Total$2,440.24

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
Billie Muellerwalter_jacobs17@hotmail.comMarcellandActive$842.78
Meredith Zemlakstacey_gleason65@gmail.comNienowsteadInactive$167.78
Arnold Corwinhalie.predovic70@gmail.comEverettboroActive$408.47
Manuel Hackettarlie_schimmel2@yahoo.comBreitenbergfurtInactive$782.61
Walter Roobnathanial8@yahoo.comRacineInactive$202.98
Total$2,404.62

Table with row selection

Card Table

NameEmailLocationStatusBalance
Elisa Ratkebeverly.nitzsche70@yahoo.comLake EsperanzaInactive$471.41
Julia Nicolascoy83@hotmail.comMargateInactive$330.78
Dwayne Emardscot80@gmail.comKertzmannburyActive$645.94
Glenn Davisjazmin.schultz21@yahoo.comAmiehavenActive$781.05
Jackie Grahamcullen.keebler49@gmail.comGibsonboroInactive$269.34
Total$2,498.52

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
Mona Fritschsanford.schinner74@yahoo.comSouth WaldoInactive$1,158.52
Mr. Nicolas Markskeshawn2@yahoo.comPort RodrickburyActive$957.76
Dr. Earnest Farrell IVhermina_purdy75@yahoo.comMiltonworthActive$752.92
Seth Considinecicero_kautzer39@yahoo.comAltamonte SpringsActive$1,119.72
Leo Considinelora.nitzsche@yahoo.comLake TadcesterActive$376.12
Ian Kiehnshanon_huels5@hotmail.comGardenaInactive$153.29
Everett O'Connerbrenna_swift@gmail.comO'ReillyviewInactive$1,143.71
Myrtle Zboncakjevon_waelchi99@gmail.comPort JeremyActive$1,044.15
Dr. Benjamin Toyclaudie.effertz@hotmail.comAllenInactive$975.98
Doreen Windlernestor.ziemann@gmail.comNorth AmaliatonActive$1,059.32
Patsy O'Keefetaurean.rohan60@gmail.comSamanthasideInactive$935.22
Michele Goodwinsusana.barton@gmail.comTreutelsideInactive$736.71
Stacy Hayesrobyn_crooks53@gmail.comTorpburyActive$800.90
Clinton Cristosvaldo.beahan48@gmail.comReecefieldActive$72.82
Adrian Volkmantina33@gmail.comSouth ThaliamouthActive$304.01
Total$11,591.15

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