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$413.67
INV002UnpaidPayPal$270.12
INV003UnpaidBank Transfer$880.52
INV004UnpaidPayPal$139.36
INV005UnpaidBank Transfer$741.98
INV006PendingPayPal$472.58
INV007PaidCredit Card$804.18
Total$3,722.41

Simple

Users

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

NameTitleEmailRoleActions
Leora ReichelNational Functionality Managerleora.reichel43@hotmail.comViewer
Nellie WhiteDistrict Identity Producernellie.white76@hotmail.comAdmin
Vladimir BoyerLegacy Paradigm Technicianvladimir_boyer@yahoo.comMember
Delia SmithPrincipal Communications Representativedelia.smith6@hotmail.comViewer
Davon HeathcoteProduct Optimization Executivedavon.heathcote@gmail.comMember
Marcel UptonRegional Marketing Executivemarcel.upton14@yahoo.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Sandra Huels

Human Group Strategist

sandra.huels64@hotmail.com

Member

Kathryn Gottlieb

National Quality Producer

kathryn_gottlieb@gmail.com

Member

Deborah Jacobs

Human Optimization Engineer

deborah.jacobs@hotmail.com

Admin

Felipa Shields

Product Research Consultant

felipa_shields@hotmail.com

Viewer

Kennith Zboncak

Lead Brand Facilitator

kennith.zboncak@gmail.com

Member

Natalie Adams

Investor Usability Assistant

natalie.adams89@gmail.com

Admin

Users

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

NameRoleActions

Micaela Bernhard

Lead Usability Architect

micaela_bernhard@hotmail.com

Viewer

Arnold Farrell

Corporate Identity Director

arnold.farrell97@yahoo.com

Admin

Augusta Gorczany

Product Functionality Engineer

augusta.gorczany@yahoo.com

Member

Annie Bogisich

Direct Metrics Producer

annie.bogisich18@gmail.com

Viewer

Breanne King-Blick

Customer Configuration Liaison

breanne.king-blick@hotmail.com

Admin

Madisyn Gibson-Ritchie

Investor Web Manager

madisyn.gibson-ritchie@yahoo.com

Admin

Daniella Little

Internal Brand Strategist

daniella.little77@gmail.com

Admin

Claudine Dietrich

Forward Solutions Specialist

claudine_dietrich@gmail.com

Admin

Nyasia Roob

Principal Applications Officer

nyasia.roob78@hotmail.com

Member

Orpha Harvey

Product Program Liaison

orpha_harvey@gmail.com

Member

Carter Little

Product Web Liaison

carter_little@hotmail.com

Member

Jamaal McKenzie

Corporate Program Supervisor

jamaal_mckenzie45@yahoo.com

Member

Amber Harris

Corporate Division Orchestrator

amber_harris@yahoo.com

Admin

Norene Beahan

Corporate Operations Consultant

norene.beahan@hotmail.com

Admin

Michael Mitchell

Central Response Associate

michael_mitchell@gmail.com

Viewer

Edward Koepp

International Markets Officer

edward.koepp@yahoo.com

Viewer

Jacklyn Stoltenberg

Investor Marketing Consultant

jacklyn_stoltenberg80@hotmail.com

Admin

Jasmin Krajcik

Customer Metrics Designer

jasmin_krajcik@gmail.com

Admin

Bart Heller

Human Brand Administrator

bart_heller@hotmail.com

Admin

Khalil McLaughlin

Internal Brand Supervisor

khalil.mclaughlin36@gmail.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
Barbara Mertz Iwatson88@gmail.comFernehavenActive$893.90
Mildred Jacobieleanora80@gmail.comLake DanielafurtInactive$282.03
Rufus Pollich IIIvidal_keeling@yahoo.comRosenbaumstadActive$864.54
Inez Schambergermaude_herman@yahoo.comSouth KelvinbergInactive$1,090.35
Myron Volkmanmyrtis26@gmail.comNorth StuartActive$511.43
Total$3,642.25

Basic table

Table with Images

NameEmailLocationStatusBalance
Kara Funk Sr.
@bertrand3
elise.berge9@yahoo.comWest BeaulahsideActive$343.67
Anita Kutch
@cathryn.von70
scottie.shanahan@yahoo.comEudoraworthActive$1,022.50
Lori Bradtke
@chanel_wiegand
nola.gusikowski@gmail.comMetzboroughActive$757.55
Marcella Hermann
@flavie.farrell
rigoberto87@yahoo.comTillmantownActive$251.24
Jean Gleichner
@idell.raynor-rodriguez
deshawn.heidenreich56@gmail.comDurhamActive$536.64

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Joyce Johnselyssa_franey@hotmail.comSouth LewisfortActive$75.39
Brittany Tromplance75@gmail.comSouth RyderActive$357.66
Garry Kunde Ijoel45@hotmail.comWest DamonviewActive$714.75
Fannie Marvinadaline.johnson@gmail.comLeague CityActive$222.96
Carmen Medhurstkatrine_predovic25@gmail.comNorth SavionInactive$515.89
Total$1,886.65

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Chad Raynorwilson.rice45@gmail.comMiami GardensInactive$308.25
Miss Kristin Spinka MDlaurence.corkery-zulauf@yahoo.comLake DerickActive$1,027.59
Mrs. Kristin Smithamaliza_schiller18@yahoo.comWest KristoferchesterActive$547.20
Dr. Sylvester Rowename.koch75@yahoo.comLake DarylfieldActive$948.48
Alberto Davisryleigh_wisoky13@yahoo.comCentennialActive$232.09
Total$3,063.61

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Geneva O'Konjoyce.cruickshank39@yahoo.comElverasteadActive$261.88
Leslie Gulgowskimeredith_langosh@hotmail.comSouth JasperchesterActive$344.37
Gordon Jastclyde.roberts@hotmail.comPaucekboroActive$541.93
Jose Borerjaren.ondricka@yahoo.comBroomfieldActive$615.30
Leland Cruickshankjaylon.erdman@hotmail.comSchusterboroInactive$915.86
Total$2,679.34

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
Iris Jastdereck_stark@yahoo.comMarcialandInactive$503.96
Emilio Rowegina_lakin@hotmail.comWuckertshireActive$1,134.64
Dave McKenzie IIIlowell_metz@yahoo.comLittle RockActive$56.30
Jared Cronalevi_cartwright82@hotmail.comEast LisandrofurtInactive$1,186.68
Emanuel Bartondomenic_luettgen1@hotmail.comFort JadaportActive$1,044.66
Total$3,926.24

Table with row selection

Card Table

NameEmailLocationStatusBalance
Noel Douglasbrent_schuster@hotmail.comFort JuvenalActive$60.72
Aaron Schmelerterrill.armstrong@gmail.comKristinaportInactive$796.32
Constance Hagenesdamien_carroll73@hotmail.comNew BrantboroughInactive$695.20
Ms. Lila Nienowadele_mitchell@gmail.comLeschbergActive$556.88
Celia Padbergbrook46@yahoo.comDaytona BeachActive$99.94
Total$2,209.06

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
Clara Larson IIIdora.sawayn5@yahoo.comWest LailaInactive$986.88
Dianna Boscojayden11@gmail.comThompsonfieldActive$190.29
Jaime Terrymicheal_kiehn@yahoo.comGreenholtportInactive$586.63
Rachel Robelasha.aufderhar@gmail.comJacquesvilleInactive$328.93
Ellis Stoltenbergcrawford58@gmail.comLake JoannyInactive$967.72
Alfonso McDermott DVMleilani85@yahoo.comYuba CityInactive$111.38
Noel Millslazaro.rohan@gmail.comHassieshireInactive$637.41
Luz Altenwerthzetta53@yahoo.comNew BrockfortInactive$728.14
Anthony Littlekamryn13@hotmail.comPort FannieActive$150.85
Miss Grace Stiedemann DDSgennaro.weimann74@gmail.comRuntemouthInactive$786.37
Ernestine Dickenshattie77@hotmail.comWest LiamActive$338.34
Dennis Hirthebrett_ortiz19@yahoo.comKassulkechesterActive$130.58
Melissa Bartelllinnea_mraz76@hotmail.comRahsaansideInactive$258.43
Mrs. Desiree Quigleyemmy2@yahoo.comMurraysideActive$699.37
Sammy Walsharon12@gmail.comBlue SpringsActive$278.45
Total$7,179.77

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