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
INV001PendingCredit Card$332.12
INV002UnpaidCredit Card$538.10
INV003PendingCredit Card$616.78
INV004PendingPayPal$500.57
INV005UnpaidBank Transfer$869.61
INV006PendingCredit Card$719.70
INV007PendingBank Transfer$932.13
Total$4,509.01

Simple

Users

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

NameTitleEmailRoleActions
Mervin LindDistrict Optimization Coordinatormervin_lind@hotmail.comAdmin
Green Kshlerin-StammCorporate Creative Specialistgreen.kshlerin-stamm@hotmail.comMember
Creola GorczanyDistrict Response Executivecreola_gorczany@gmail.comAdmin
Herminia D'AmoreNational Marketing Agentherminia_damore@hotmail.comAdmin
Esta PollichFuture Security Coordinatoresta.pollich@hotmail.comAdmin
Kelli LarsonDistrict Usability Producerkelli.larson77@yahoo.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Laurine Spinka

Lead Applications Supervisor

laurine.spinka@yahoo.com

Admin

Sincere Hauck

Legacy Mobility Orchestrator

sincere_hauck52@hotmail.com

Viewer

Elias Johnston

Direct Solutions Developer

elias_johnston@gmail.com

Member

Rodrigo Morissette

Global Paradigm Orchestrator

rodrigo.morissette@yahoo.com

Viewer

Jeffery Quitzon

National Creative Specialist

jeffery_quitzon36@hotmail.com

Admin

Molly Johnson

Customer Creative Specialist

molly.johnson@hotmail.com

Admin

Users

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

NameRoleActions

Jordan Kulas

Internal Solutions Coordinator

jordan_kulas@gmail.com

Viewer

Leonard Goodwin

Human Optimization Liaison

leonard_goodwin88@hotmail.com

Admin

Adolf Stiedemann

Direct Web Manager

adolf.stiedemann@hotmail.com

Member

Alice Schaefer

Global Accounts Designer

alice.schaefer96@yahoo.com

Member

Edna Russel

District Accountability Developer

edna_russel@gmail.com

Member

Payton Crist

Forward Brand Designer

payton_crist@gmail.com

Admin

Haylie Ortiz

National Quality Facilitator

haylie.ortiz70@yahoo.com

Member

Merl Rempel

International Research Facilitator

merl.rempel57@gmail.com

Viewer

Gayle Bartell

Senior Marketing Agent

gayle.bartell4@hotmail.com

Admin

Joesph Effertz

Regional Accountability Executive

joesph.effertz30@yahoo.com

Admin

Bernard Dooley

Customer Directives Facilitator

bernard.dooley27@gmail.com

Member

Unique Heidenreich

Investor Group Supervisor

unique_heidenreich@yahoo.com

Viewer

Augustus Pacocha

Senior Directives Representative

augustus_pacocha75@hotmail.com

Admin

Jazmyn Hayes

Lead Data Strategist

jazmyn.hayes@gmail.com

Viewer

Junius Cormier

Forward Intranet Assistant

junius_cormier5@yahoo.com

Viewer

Brett Hoeger

Investor Integration Strategist

brett.hoeger37@yahoo.com

Viewer

Lonny Franey

Product Solutions Facilitator

lonny_franey@yahoo.com

Member

Carmine Osinski

Legacy Security Liaison

carmine_osinski@gmail.com

Admin

Erich Larson

Lead Communications Agent

erich.larson41@hotmail.com

Viewer

Norwood Moore

International Markets Analyst

norwood.moore@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
Margie Parisianjoseph_marks@hotmail.comWest KingInactive$465.14
Ethel McLaughlinshaina_lehner38@hotmail.comNew AlexzanderActive$1,148.97
Mrs. Erika Reillyestel_rutherford72@gmail.comNorth IsmaelmouthActive$611.14
Wilfred Haucknorwood_howell@yahoo.comNew RebecaActive$437.55
Alan Kerlukejudah_predovic@yahoo.comNorth FlorenceActive$370.38
Total$3,033.18

Basic table

Table with Images

NameEmailLocationStatusBalance
Dr. Archie Hahn-Cremin
@alysa30
annie_ledner16@hotmail.comWest GarettmouthActive$32.64
Dave Blanda
@savion.gleason63
caroline.bayer@hotmail.comGiovannicesterInactive$563.85
Mr. Matt Dickinson MD
@jeremy_murazik74
aubrey75@yahoo.comLockmanviewActive$268.13
Theresa Stoltenberg
@chad_rolfson
osvaldo_funk@hotmail.comGerlachtonActive$163.37
Edna Armstrong
@samantha.macgyver55
derick.jacobs@yahoo.comCreminportActive$958.13

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Chad Jenkinslucius12@yahoo.comDamoncesterActive$794.57
Shelia Tremblayrory.jacobi-runolfsson@hotmail.comTillmanstadActive$849.33
Saul Ernserbo.carroll81@yahoo.comSydneyhavenActive$473.31
Rudy Wuckertmelyna_koch@yahoo.comFort TateInactive$183.25
Paula Reillyrachael40@gmail.comAnnamarievilleInactive$851.06
Total$3,151.52

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Ramiro Volkmansantino63@hotmail.comWest PatbergActive$644.99
Florence Emmerichdevonte.huel45@yahoo.comSouth DamionActive$164.02
Lynn Collierdalton.lubowitz39@hotmail.comLake AftonmouthActive$879.96
Spencer Hamillarnaldo.hammes@gmail.comLake JudgemouthInactive$985.93
Debra Shanahanbrett.nicolas41@gmail.comElizabethInactive$430.41
Total$3,105.31

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Mr. Rufus Lakin IVjany.fadel@hotmail.comWest SonnyActive$390.22
Johnny Blockadrian_conn18@yahoo.comNorth ShanefortInactive$311.75
Nathan Schmidtsusanna.kautzer@hotmail.comLake LemuelActive$1,011.32
Madeline Stehrmilo.hauck47@yahoo.comFredericshireInactive$159.66
Della Bayergillian89@hotmail.comNorth MerrittActive$1,079.40
Total$2,952.35

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
Mrs. Elizabeth Hermistoncarrie_legros4@yahoo.comMaudtonActive$1,068.03
Byron Bashiriangabriella.runolfsson@gmail.comSouth BritneyburyInactive$1,194.49
Sylvia Champlin Jr.jon_klocko@yahoo.comLebsackburghInactive$1,130.67
Doreen Emmerichrusty.mann67@yahoo.comCarolinaInactive$100.86
Mrs. Jenna Rowebenedict62@gmail.comWest EmmaworthInactive$566.04
Total$4,060.09

Table with row selection

Card Table

NameEmailLocationStatusBalance
Lawrence Thielanjali28@hotmail.comDanburyInactive$771.59
Patti Tremblaymathew_beahan36@yahoo.comPagacstadActive$379.36
Dr. Terence Kreiger-Bernhardkyler.mclaughlin77@yahoo.comGaithersburgInactive$608.34
Jon Shanahanmikayla_hilpert90@gmail.comDamienburyInactive$491.84
Jeremy Dickinsoncorbin.kuphal10@hotmail.comLongviewActive$41.99
Total$2,293.12

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
Martha Millershayne44@yahoo.comLake VelmaInactive$498.88
Marcia Spinka IIIwebster_windler@hotmail.comKieraboroughActive$168.44
Sandy Hettingergideon.casper60@gmail.comFort ConnerInactive$1,120.75
Willie Leuschke Sr.glen_miller66@yahoo.comLake JalonboroActive$554.75
Jackie Farrellreese32@hotmail.comWallacefurtInactive$408.32
Cheryl Champlin Sr.brigitte51@hotmail.comSouth MaximillianshireActive$270.30
Marion Turneryasmin.jerde42@gmail.comHerzogsideActive$929.58
Dr. Beatrice Romaguerakarelle47@gmail.comWest DylanInactive$1,188.39
Laurie Abernathybreana.hoppe14@yahoo.comLake VincenzosteadActive$345.70
Mr. Lamar Windler Sr.neil_blick46@hotmail.comPalmdaleActive$25.00
Brent Schillerjayce_herman@gmail.comPeytonlandActive$206.78
Karl Rutherfordrosalee_boyer20@gmail.comPort DeonchesterActive$1,063.78
Kristi Bartolettinorbert_howell@hotmail.comAlbinstadActive$49.39
Mr. Clifton Gislason-Rueckersantos_erdman@yahoo.comCruickshankfortInactive$209.34
Megan Dietrichjacynthe58@yahoo.comEast SanfordInactive$183.59
Total$7,222.99

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