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
INV001PendingPayPal$590.88
INV002PaidCredit Card$542.18
INV003PendingPayPal$451.70
INV004PaidCredit Card$633.19
INV005PaidPayPal$172.54
INV006PaidCredit Card$250.90
INV007UnpaidPayPal$168.32
Total$2,809.71

Simple

Users

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

NameTitleEmailRoleActions
Tracey BalistreriLegacy Research Managertracey.balistreri@hotmail.comViewer
Rey PaucekLead Paradigm Designerrey_paucek@gmail.comMember
Calista ReillyCorporate Branding Producercalista_reilly@gmail.comViewer
Gabriel DurganInternational Operations Engineergabriel.durgan62@gmail.comMember
Oda ConnInvestor Security Agentoda.conn77@yahoo.comViewer
Moshe GrimesInvestor Interactions Coordinatormoshe_grimes@gmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Anabelle Heaney

Forward Security Planner

anabelle.heaney32@hotmail.com

Admin

Pearline Bruen

Direct Security Orchestrator

pearline.bruen@hotmail.com

Member

Kenyon Leuschke

Product Assurance Orchestrator

kenyon.leuschke0@hotmail.com

Admin

Fred Wiegand

Direct Identity Executive

fred.wiegand@hotmail.com

Member

Orpha Brekke

Investor Creative Administrator

orpha.brekke74@gmail.com

Member

Axel Hodkiewicz

Global Creative Administrator

axel.hodkiewicz23@gmail.com

Admin

Users

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

NameRoleActions

Meta Senger-Franey

Investor Creative Representative

meta.senger-franey@yahoo.com

Admin

Herbert Hammes

National Functionality Representative

herbert_hammes5@hotmail.com

Admin

Kaylah Gulgowski

Direct Quality Specialist

kaylah.gulgowski57@gmail.com

Admin

Yessenia Mante

District Configuration Associate

yessenia_mante53@yahoo.com

Member

Jimmy Roberts

Dynamic Branding Associate

jimmy_roberts91@gmail.com

Viewer

Briana Dare

District Identity Liaison

briana.dare44@yahoo.com

Viewer

Kade Bartell

Senior Intranet Representative

kade.bartell40@gmail.com

Admin

Silas Koepp

Forward Metrics Agent

silas_koepp@hotmail.com

Viewer

Elyse Gleason

Regional Research Coordinator

elyse.gleason79@yahoo.com

Viewer

Patrick Gorczany

Legacy Communications Facilitator

patrick.gorczany65@yahoo.com

Viewer

Bridie D'Amore

Corporate Factors Coordinator

bridie_damore9@yahoo.com

Member

Sidney Macejkovic

Future Operations Assistant

sidney_macejkovic@gmail.com

Viewer

Frances Terry

Forward Web Assistant

frances.terry67@hotmail.com

Viewer

Fernando Johns

Global Creative Technician

fernando_johns@yahoo.com

Admin

Concepcion Romaguera

Senior Communications Strategist

concepcion_romaguera@gmail.com

Admin

Beverly Cruickshank

Internal Optimization Designer

beverly.cruickshank59@yahoo.com

Viewer

Melyna Adams

Forward Directives Agent

melyna.adams19@hotmail.com

Member

Ben Schinner

Human Assurance Orchestrator

ben_schinner@yahoo.com

Admin

Fae Kovacek

Future Group Developer

fae.kovacek@hotmail.com

Viewer

Sharon Huels

Senior Infrastructure Liaison

sharon.huels27@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
Toni Lynchprice.gerhold@yahoo.comKansas CityInactive$667.83
Neil Williamsonellis.monahan@yahoo.comStokestownActive$127.23
Grace Keeblernils_friesen86@yahoo.comNew ReeceInactive$807.51
Irving Deckowluis.boyer59@gmail.comHodkiewiczburghActive$597.07
Salvatore Jaskolski Vcelia_renner@yahoo.comEast AmyActive$808.21
Total$3,007.85

Basic table

Table with Images

NameEmailLocationStatusBalance
Elijah Marvin
@casper58
bethany79@gmail.comPort PaulastadInactive$792.34
Philip MacGyver
@brianne.mclaughlin
hettie61@gmail.comLake MackhavenInactive$820.36
Mr. Herbert Sipes
@jeramy_mcglynn
verner.roberts@hotmail.comCiceroInactive$1,086.18
Marta Adams
@sidney0
shanelle_windler@hotmail.comWest SamirshireActive$1,046.06
Henry Goyette
@dimitri_metz
justice72@hotmail.comFort MireilleActive$736.86

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Jeannie Parisianjamarcus_waters@yahoo.comProhaskalandActive$903.91
Tommie Greenholtraphael_schneider48@yahoo.comPort CassidytownActive$255.09
Douglas Danielhilton.williamson73@gmail.comWest ElouiseviewInactive$1,107.93
Erica Klockoeleonore16@yahoo.comStreichboroActive$39.15
Joann Windlerchelsie61@gmail.comNew MaddisonviewInactive$1,165.96
Total$3,472.04

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Estelle Jaskolskidarren_wisozk@gmail.comEast MackenziecesterActive$584.57
Jeannie Darebonnie29@yahoo.comPort SydneyInactive$650.87
Joan Shieldscorbin.heller@yahoo.comWest MarioActive$379.38
Ashley Durganbrook_langosh@yahoo.comLake SaigeInactive$72.78
Miss Dixie Faheyelroy.gutkowski@hotmail.comEaganInactive$259.30
Total$1,946.90

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Florence Kihndewayne_koch11@yahoo.comMayertfieldActive$1,181.46
Cameron Bergstrom DDSalden.powlowski@gmail.comSouth SiennaInactive$263.84
Alma Boyer DVMomer.mraz@yahoo.comFort MckenzieActive$282.51
Leslie Caspertroy66@yahoo.comBaytownActive$777.24
Hazel Morarzechariah.okon@gmail.comEast GavinInactive$816.99
Total$3,322.04

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
Vera Swaniawskiroger_rice77@gmail.comEmiliashireInactive$1,030.85
Genevieve Andersonkrista71@yahoo.comNorth MilanfieldInactive$148.82
Dr. Vivian Schoenkeenan_gorczany@hotmail.comSchustershireInactive$209.90
Mrs. Patsy Torphy-Gloverwilfred_beahan90@hotmail.comDestinyvilleActive$490.89
Brandon Hermann-Lakinmadisyn.abbott48@yahoo.comHoegervilleActive$1,044.53
Total$2,924.99

Table with row selection

Card Table

NameEmailLocationStatusBalance
Deanna Mayertpalma61@yahoo.comEast AbbigailActive$94.81
Bert Zemlakdedric.lynch@gmail.comElyriaActive$997.19
Leroy Beahancamylle_rowe@gmail.comWest NasirActive$12.19
Michele Reichelhazle_corwin@yahoo.comKilleenInactive$1,033.04
Mercedes Monahanleopold30@gmail.comNew GarryInactive$233.88
Total$2,371.11

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
Otis Deckowloyce81@gmail.comOverland ParkActive$681.63
Ruben Boylelawrence46@gmail.comWest KurtboroughActive$782.49
Kristina Hahnibrahim_christiansen@hotmail.comMillsviewActive$1,097.72
Marlon Hanemaynard83@hotmail.comJuanahavenInactive$152.08
Rick Trantowkathleen_kuhic96@gmail.comNathanfortInactive$972.76
Ben Ryan IIalfreda68@yahoo.comZulaufsteadActive$437.68
Forrest Trantowgrady77@hotmail.comEast PamelaActive$325.93
Bobby Franeyaric.funk2@hotmail.comFort HeloiseInactive$492.58
Shane Harveybraden.windler95@hotmail.comSchaeferhavenActive$529.72
Debra Kubquentin53@gmail.comColbyshireInactive$166.43
Rosemarie Hills Jr.corene27@hotmail.comNorth Little RockActive$957.85
Bruce Friesenalfreda_willms@gmail.comHagenessideInactive$1,190.96
Lela Powlowskikatlynn.adams25@gmail.comPort ConorActive$39.21
Olga Stiedemannedward_gutkowski22@yahoo.comArmstrongstadInactive$298.30
Eloise Boyleaugustine28@hotmail.comFort RubyActive$1,153.99
Total$9,279.33

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