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$796.51
INV002UnpaidBank Transfer$633.58
INV003PaidPayPal$541.27
INV004PendingPayPal$432.01
INV005PendingCredit Card$981.48
INV006UnpaidCredit Card$885.14
INV007PendingPayPal$711.05
Total$4,981.04

Simple

Users

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

NameTitleEmailRoleActions
Beau McClureSenior Implementation Orchestratorbeau.mcclure@hotmail.comMember
Reed TowneChief Communications Technicianreed_towne36@hotmail.comMember
Cecilia ToyNational Division Coordinatorcecilia.toy72@gmail.comMember
Brown AnkundingFuture Markets Developerbrown_ankunding92@hotmail.comMember
Kali AndersonPrincipal Program Strategistkali_anderson@yahoo.comMember
Misael BednarCorporate Operations Plannermisael_bednar27@hotmail.comMember

Stacked on mobile

Users

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

NameRoleActions

Ken Marks

Product Division Strategist

ken.marks@hotmail.com

Viewer

Joshuah Casper

Regional Communications Assistant

joshuah_casper94@hotmail.com

Member

Erin Zulauf

Dynamic Optimization Orchestrator

erin_zulauf42@gmail.com

Viewer

Asha Mante

Global Infrastructure Supervisor

asha.mante@hotmail.com

Member

Kristofer McGlynn

District Markets Architect

kristofer.mcglynn@hotmail.com

Admin

Mathilde Gusikowski

International Communications Developer

mathilde.gusikowski85@yahoo.com

Admin

Users

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

NameRoleActions

Lelah White

Human Quality Facilitator

lelah_white73@gmail.com

Viewer

Evan Armstrong

District Identity Agent

evan_armstrong50@gmail.com

Admin

Merritt Parker

Internal Accounts Orchestrator

merritt.parker@gmail.com

Admin

Hailie Padberg

Lead Communications Director

hailie_padberg@gmail.com

Member

Broderick Nikolaus

Customer Tactics Technician

broderick.nikolaus42@hotmail.com

Admin

Sage Kozey

Chief Web Analyst

sage_kozey72@gmail.com

Admin

Vallie Koepp

Chief Communications Agent

vallie.koepp33@yahoo.com

Member

Raleigh Mills

Dynamic Directives Developer

raleigh.mills20@hotmail.com

Admin

Corrine Wilderman

Global Research Director

corrine.wilderman@yahoo.com

Admin

Deangelo Smith

Investor Usability Orchestrator

deangelo.smith65@gmail.com

Admin

Angel D'Amore

Senior Configuration Director

angel.damore@gmail.com

Member

Charity Stracke-O'Reilly

District Communications Specialist

charity_stracke-oreilly21@yahoo.com

Member

Gabriella Altenwerth

Product Integration Assistant

gabriella.altenwerth@yahoo.com

Viewer

Lucy Pouros

Regional Group Designer

lucy_pouros24@yahoo.com

Viewer

Lela Ullrich

Legacy Accountability Director

lela.ullrich@yahoo.com

Viewer

Margot Schumm

Legacy Accounts Technician

margot.schumm@yahoo.com

Viewer

Riley Jast

Forward Data Liaison

riley.jast12@yahoo.com

Admin

Maverick McDermott

Global Tactics Executive

maverick_mcdermott55@gmail.com

Viewer

Gustave Zieme

National Accounts Supervisor

gustave.zieme64@hotmail.com

Viewer

Derek Douglas

District Infrastructure Specialist

derek_douglas15@yahoo.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
Erin Brekkemitchel_gerhold42@hotmail.comEast LloydInactive$486.63
Cecilia Tillmanjayden.johns2@yahoo.comConnsideInactive$815.94
Violet Bartelllucius_lynch24@gmail.comLeuschkeboroActive$206.57
Dr. Ira Huelsemmitt70@hotmail.comLeanntownInactive$619.24
Adrienne Pricevernice35@hotmail.comAugusta-Richmond CountyInactive$232.45
Total$2,360.83

Basic table

Table with Images

NameEmailLocationStatusBalance
Marta Greenfelder
@jerel_huels
tabitha.kiehn@yahoo.comTrujillo AltoActive$512.61
Marcus Schaden
@aimee.mills
leonor48@gmail.comRowland HeightsActive$92.76
Shannon Kling DDS
@misael64
felicity_haley@yahoo.comLewistonActive$624.67
Lorene Zboncak V
@michele9
verda31@gmail.comCitrus HeightsActive$963.60
Jo Waters
@oscar.price
ephraim.treutel58@hotmail.comUptonviewActive$626.87

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Lynne Sipeslexus.wyman@gmail.comOkunevaportActive$1,126.84
Jeremiah Weimannelisabeth95@gmail.comNorth RebaburghInactive$867.29
Bill Mayeralvera.yundt23@hotmail.comSeattleInactive$1,121.09
Jesse Walkergloria_satterfield@hotmail.comEast TressaInactive$558.62
Geoffrey Swiftmikayla.thompson@gmail.comPaucekburyInactive$1,038.46
Total$4,712.30

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Carolyn Hayesmaia11@hotmail.comFort FernportActive$809.80
Blanche Ratke-Harrisabdiel79@yahoo.comFort CollinsActive$194.23
Terrance Mayerclement93@gmail.comSouth TheronInactive$666.65
Sergio Hodkiewiczwellington29@hotmail.comMertzcesterActive$1,055.12
Jill Schroederjordi2@hotmail.comCasperviewInactive$639.25
Total$3,365.05

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Brandon Kunzeemmanuel_stark30@gmail.comMaccesterActive$929.84
Christine Zboncakyasmine_emard@hotmail.comCordiasteadInactive$146.71
Otis Braunezekiel.smith79@hotmail.comFort KaiaInactive$425.14
Sylvester Volkmansarina.parisian@gmail.comFort ClemmiechesterActive$113.92
Jane Toymaritza_hauck@hotmail.comRyannchesterActive$268.32
Total$1,883.93

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
Dr. Adrienne Fisher Iclaire_predovic32@yahoo.comFort FriedrichActive$862.51
Sabrina Durganamir_powlowski44@hotmail.comWest GunnarlandActive$507.99
Homer Halvorsonfabian70@yahoo.comCarrolltonInactive$617.76
Ms. Marcia Altenwerth IIbeatrice.paucek@gmail.comPort MekhiInactive$327.34
Tammy Greenfelderesmeralda.lesch@gmail.comAllansideActive$1,128.92
Total$3,444.52

Table with row selection

Card Table

NameEmailLocationStatusBalance
Winston Brekkemaya.turcotte@gmail.comGradyburyActive$1,052.34
Jamie Homenick DDSbernadine38@yahoo.comPacochamouthActive$952.30
Mr. Rick Corwintianna35@hotmail.comAmayavilleInactive$633.11
Jamie Dickensgarret.upton-beatty58@hotmail.comLake DawsonInactive$668.09
Holly Kuhncandido_tillman20@yahoo.comPort EstelleInactive$294.69
Total$3,600.53

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
Jody Konopelskikyler.volkman35@gmail.comWest DarrinchesterActive$513.43
Sylvia Cartwrightedmond_barrows13@gmail.comNew NoemieActive$241.58
Lucas Grahammavis.fahey68@hotmail.comFort DelphinebergInactive$820.63
Colin Hillskamron51@yahoo.comPort DevinInactive$1,002.76
Rosemary Spencerisidro.krajcik89@yahoo.comIvyworthInactive$931.44
Ralph Simonis PhDdeja11@gmail.comWilsonActive$678.83
Grace Mohroran.howe@gmail.comEmeliafortActive$1.67
Nettie Towneokey_simonis93@hotmail.comTatumshireActive$67.90
Levi Starkkris50@yahoo.comLevittownInactive$408.71
Geraldine Bernieroral_stark-anderson@yahoo.comGenovevachesterInactive$602.28
Terri Creminkeara97@gmail.comBeattyshireActive$352.43
Austin Ratkedangelo_aufderhar@yahoo.comSouth NicoletteInactive$1,144.66
Earl Konopelskieulah_dibbert43@hotmail.comDelbertfieldInactive$834.54
Lynne Kulas-Schmittbrycen_welch47@hotmail.comWest BettyfurtInactive$406.58
Rosa Douglaschyna.becker@yahoo.comArihavenActive$724.20
Total$8,731.64

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