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$836.11
INV002UnpaidCredit Card$732.54
INV003UnpaidPayPal$734.43
INV004UnpaidPayPal$392.70
INV005PaidCredit Card$622.79
INV006PendingBank Transfer$902.61
INV007PaidCredit Card$473.01
Total$4,694.19

Simple

Users

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

NameTitleEmailRoleActions
Agnes CorkeryDynamic Response Orchestratoragnes_corkery8@yahoo.comAdmin
Cletus KemmerDynamic Program Executivecletus.kemmer28@gmail.comViewer
Susie Leffler-KutchHuman Group Analystsusie.leffler-kutch33@gmail.comAdmin
Orland Lesch-HackettCustomer Solutions Orchestratororland_lesch-hackett7@gmail.comAdmin
Khalil GleichnerInvestor Brand Consultantkhalil_gleichner34@gmail.comViewer
Clay BoscoLegacy Accounts Liaisonclay_bosco6@hotmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Carol Herman

Internal Usability Supervisor

carol_herman@yahoo.com

Viewer

Toby Sauer

Forward Communications Designer

toby.sauer@yahoo.com

Viewer

Orlando Walsh

Investor Interactions Developer

orlando.walsh29@hotmail.com

Member

Betsy Rau

Legacy Identity Planner

betsy_rau16@hotmail.com

Viewer

Prudence Hodkiewicz-Gibson

Principal Intranet Administrator

prudence.hodkiewicz-gibson87@gmail.com

Viewer

Andrea Abshire

Lead Marketing Assistant

andrea_abshire51@hotmail.com

Member

Users

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

NameRoleActions

Nadine Schmidt

Senior Integration Specialist

nadine_schmidt@gmail.com

Admin

Kelvin Watsica

Senior Web Planner

kelvin.watsica33@gmail.com

Member

Shakira Cormier

Product Identity Manager

shakira.cormier57@gmail.com

Viewer

Rolando Bogisich

International Configuration Strategist

rolando.bogisich29@gmail.com

Viewer

Edward Schimmel

Direct Paradigm Designer

edward_schimmel5@gmail.com

Admin

Corine Hodkiewicz

Forward Metrics Producer

corine.hodkiewicz25@hotmail.com

Viewer

Ignatius Ondricka

District Interactions Coordinator

ignatius.ondricka68@gmail.com

Viewer

Kariane Homenick

Future Communications Analyst

kariane.homenick@gmail.com

Admin

Eveline Spinka

Global Operations Supervisor

eveline.spinka@hotmail.com

Member

Tiffany O'Connell

Direct Creative Specialist

tiffany_oconnell97@gmail.com

Viewer

Constance Murray

Forward Directives Consultant

constance.murray86@gmail.com

Member

Milton Padberg

Corporate Group Engineer

milton.padberg37@yahoo.com

Admin

Marlene Ernser

Legacy Paradigm Designer

marlene.ernser@hotmail.com

Viewer

Candice Waelchi

Internal Group Technician

candice.waelchi2@gmail.com

Member

Esther Nikolaus

Lead Usability Supervisor

esther_nikolaus18@gmail.com

Viewer

Jonatan Buckridge

Global Paradigm Director

jonatan_buckridge@yahoo.com

Member

Kathryn O'Reilly

Dynamic Creative Supervisor

kathryn.oreilly@yahoo.com

Member

Marian Bins

Forward Solutions Agent

marian_bins25@yahoo.com

Admin

Cortez Reichel

Lead Security Engineer

cortez.reichel31@hotmail.com

Viewer

Earl Cummerata

Legacy Data Manager

earl.cummerata@yahoo.com

Member

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
Jana Kulas-Casperangelo.hills-orn@yahoo.comLake EleonoreburyInactive$149.91
Chance Howebrook_borer-konopelski54@hotmail.comRaycesterActive$243.34
Cordell Sauerlottie_gleichner@hotmail.comPort BerthamouthActive$456.59
Kate Satterfieldchester48@hotmail.comVivafurtActive$1,008.65
Tito Corwinharry90@yahoo.comEast VanceInactive$126.49
Total$1,984.98

Basic table

Table with Images

NameEmailLocationStatusBalance
Kathleen Doyle
@marguerite.cummings
major.weber35@hotmail.comWest SheilaInactive$234.07
Debra Champlin
@ken_williamson
pedro.cummings@hotmail.comIkefortInactive$295.32
Fredy King DDS
@al_langworth19
makenzie.rowe@hotmail.comQuitzonlandActive$194.01
Erik Osinski
@kent_schmidt9
karl_rice@gmail.comEast NaomiInactive$72.64
Mr. Bryana Wisoky
@elnora_bernier80
margie.gleichner@yahoo.comPort EinoInactive$613.47

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Ivan Aufderharclarabelle_johnson@hotmail.comLake JodyActive$106.93
Priscilla Dibbertjulio.larson65@hotmail.comNorth JoaniebergActive$140.25
Giovanny Deckowhilbert.ankunding74@yahoo.comPort RobynActive$52.89
Delia Kerlukewade_dach36@gmail.comConcordInactive$1,072.73
Debra Strackeeugene.collins5@gmail.comValentinechesterActive$298.69
Total$1,671.49

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Reece Haagmabelle35@gmail.comJalynbergInactive$641.31
Janis Carrollthomas.paucek@hotmail.comStracke-BrekkeshireInactive$155.34
Alex Kassulkeemma.lemke-cummings@gmail.comNapaActive$433.35
Bonnie Mosciskialexanne_auer-wisoky@yahoo.comWest FidelboroughActive$950.60
Anthony Connelly Ielise_wiegand-kris@hotmail.comLindenInactive$415.28
Total$2,595.88

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Bo Schowalterjo44@yahoo.comJuanboroughInactive$357.31
Veronica Yostverlie_kunde@yahoo.comMitchellbergInactive$677.07
Alek Macejkovic PhDpeggy_harris@gmail.comPort GersonActive$549.39
Wade Sanfordandrew_ryan75@yahoo.comBednarshireInactive$588.99
Arnold Hoppeelton.goyette33@yahoo.comHilllworthActive$1,042.94
Total$3,215.70

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
Halie Gerholdelena4@hotmail.comRichardsonInactive$930.30
Allie Rosenbaumrene.dibbert@gmail.comNew AdriannaActive$434.32
Kendall Schmittyasmeen_maggio79@yahoo.comMayaguezInactive$626.85
Declan Abbottrose53@yahoo.comDublinInactive$756.88
Robbie Cartergrayson.kertzmann74@hotmail.comColemanworthActive$481.50
Total$3,229.85

Table with row selection

Card Table

NameEmailLocationStatusBalance
Ricardo Ryanmadalyn_schulist-brekke@gmail.comHazelmouthInactive$240.34
Adrienne Lindgren PhDjamel_ernser@gmail.comNew LulaInactive$1,126.58
Barbara Haley PhDbernard34@hotmail.comGeovannichesterActive$56.89
Bobbie Blandamichelle_spencer@gmail.comPort KathleenlandActive$822.75
Daphnee Hartmannabel_dach89@hotmail.comLake SethfurtInactive$970.03
Total$3,216.59

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
Irwin Stokesclayton_legros-cruickshank@yahoo.comFort MelbaInactive$1,090.17
Melanie Hegmannnola54@yahoo.comPatriciasideInactive$579.36
Coty Renner IImozelle4@gmail.comPort LondonmouthInactive$564.68
Mertie Williamsonken64@hotmail.comIsabellesideActive$563.68
Kristoffer Dibbertebony37@gmail.comHermanntonActive$46.65
Saul Collinssarah_jaskolski@yahoo.comNorth AntoniasideActive$775.56
Robyn Jones-Oberbrunner Jr.tabitha.sawayn10@gmail.comNorth LarrycesterInactive$1,150.60
Gerald Cruickshank Sr.darrel69@gmail.comNolantonActive$512.38
Dallas Spinkamertie.monahan@hotmail.comNovatoActive$116.02
Shana Beerjanice.raynor@hotmail.comLake AnnaliseburyInactive$69.25
Alma Johnsantonia_kutch@hotmail.comFort KyliefurtInactive$174.32
Eloisa Hayes Vpresley.lehner@hotmail.comSouth FannyInactive$881.25
Mr. Wendell Tillmanshemar.borer39@hotmail.comBeavertonActive$746.31
Dominic Crooksemerson.terry12@yahoo.comHammessteadActive$1,054.11
Will Bahringermargarette.luettgen15@yahoo.comDoreenfieldInactive$886.51
Total$9,210.85

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