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
INV001PendingBank Transfer$500.48
INV002PaidCredit Card$675.45
INV003PaidBank Transfer$544.12
INV004PaidPayPal$948.12
INV005PaidPayPal$945.86
INV006PaidBank Transfer$130.97
INV007UnpaidBank Transfer$274.20
Total$4,019.20

Simple

Users

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

NameTitleEmailRoleActions
Reanna PaucekHuman Factors Consultantreanna.paucek90@hotmail.comMember
Kyler PacochaCorporate Assurance Engineerkyler.pacocha@yahoo.comMember
Emile BaileyNational Directives Designeremile.bailey@yahoo.comAdmin
Destini WalterRegional Identity Agentdestini_walter@gmail.comAdmin
Hillary O'Conner-RutherfordCustomer Factors Consultanthillary.oconner-rutherford61@gmail.comViewer
Leta SchinnerNational Security Analystleta_schinner78@hotmail.comMember

Stacked on mobile

Users

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

NameRoleActions

Shanie Ziemann

Regional Functionality Consultant

shanie.ziemann68@yahoo.com

Viewer

Dahlia Cruickshank

Human Creative Planner

dahlia.cruickshank41@gmail.com

Admin

Freeda Murphy

Global Creative Designer

freeda_murphy70@yahoo.com

Admin

Moses Feil

Direct Group Assistant

moses.feil0@yahoo.com

Member

Dashawn Goldner-Lindgren

Investor Functionality Specialist

dashawn.goldner-lindgren@hotmail.com

Admin

Bret Von

Direct Research Analyst

bret_von@hotmail.com

Member

Users

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

NameRoleActions

Estefania Baumbach

District Factors Representative

estefania.baumbach@hotmail.com

Viewer

Albina Fay

Human Operations Strategist

albina_fay@yahoo.com

Viewer

Pascale Schimmel

Chief Quality Analyst

pascale.schimmel@gmail.com

Admin

Mariana Simonis

Regional Implementation Representative

mariana.simonis44@gmail.com

Member

Gino Willms

Principal Solutions Supervisor

gino_willms16@hotmail.com

Viewer

Frederique Kessler

Senior Brand Coordinator

frederique.kessler28@gmail.com

Viewer

Francisca Krajcik

Central Security Agent

francisca_krajcik57@gmail.com

Member

Lorenza Gutmann

Global Program Planner

lorenza_gutmann8@hotmail.com

Admin

Joel Howe

Senior Factors Architect

joel.howe70@yahoo.com

Admin

Luigi Gutmann

Legacy Solutions Orchestrator

luigi_gutmann@yahoo.com

Member

Alda Bergstrom

Human Program Analyst

alda.bergstrom@hotmail.com

Admin

Jazlyn Hilll

Customer Response Consultant

jazlyn.hilll@gmail.com

Admin

Salvador West-Orn

District Functionality Manager

salvador.west-orn95@yahoo.com

Viewer

Arnold Johnson

Legacy Program Developer

arnold.johnson3@gmail.com

Admin

Granville Rowe

Internal Tactics Officer

granville_rowe@gmail.com

Member

Trevor Morar-Walsh

Human Functionality Representative

trevor.morar-walsh38@yahoo.com

Admin

Ahmed Herzog

Future Paradigm Liaison

ahmed_herzog61@hotmail.com

Viewer

Elvie Schamberger

Central Marketing Architect

elvie_schamberger@hotmail.com

Admin

Terrence Schulist

Investor Interactions Architect

terrence_schulist@gmail.com

Viewer

Eldon Tromp

Direct Implementation Associate

eldon_tromp@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
John Tremblaydanial.hickle20@yahoo.comMidlandInactive$940.42
Rosa Reynoldstrinity_trantow61@hotmail.comKennedyburyInactive$351.72
Ebony Fadellexus43@yahoo.comGladyssteadActive$140.59
Anthony Schowalterelliott33@yahoo.comSouth JulianActive$469.49
Miss Jeannie Gleichner IVelsie.stark@yahoo.comFort AlthealandActive$722.71
Total$2,624.93

Basic table

Table with Images

NameEmailLocationStatusBalance
Beth Waelchi
@ernie56
drew_conroy@hotmail.comLas CrucesActive$267.83
Tony Howe
@kathryn35
claudie_mcclure60@hotmail.comSouth DangeloActive$695.76
Rosalie Mueller I
@toni77
stan.marquardt92@yahoo.comSibylsteadInactive$244.26
Catherine Blick
@lue_bernier10
darien39@yahoo.comGastoniaActive$296.32
Yvette O'Connell
@laverne_klein72
myra_kilback@gmail.comPfefferfortInactive$961.89

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Arturo Gerholdaugustine_hackett@gmail.comNew ElinoreInactive$1,161.60
Celia Fadelcarolyn.wunsch-gislason@yahoo.comKubfieldActive$488.53
Nichole Stammara_fahey40@gmail.comLeetonActive$1,120.64
Nichole Waelchiprudence30@yahoo.comAmbertownInactive$1,185.00
Erma Maggiocolt_hackett27@hotmail.comLehnerlandActive$52.31
Total$4,008.08

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Hattie Kesslermattie39@gmail.comHahnchesterInactive$552.31
Kelli Streichhoyt3@hotmail.comFort LonnieInactive$543.26
Freddie Osinskikaylin81@gmail.comEast RaphaelleActive$69.04
Jeff Fritschzechariah62@yahoo.comLovelandActive$540.12
Abel Ullrichdarryl_haag@gmail.comLake RickInactive$34.02
Total$1,738.75

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Billie Runolfsdottirlera15@yahoo.comBashirianfortInactive$39.26
Dr. Winifred Weimannbette_roob@gmail.comMontebelloInactive$860.82
Guillermo Rolfsonyoshiko_parker@gmail.comOndrickafortInactive$1,069.52
Blanche Schmittharvey.connelly@hotmail.comPort OrangeActive$901.14
Ms. Penny Johnstondock.kirlin2@hotmail.comJuliusvilleActive$942.29
Total$3,813.03

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
David Langelvera.robel47@hotmail.comLangbergActive$417.60
Elias Williamsonclaire.fisher5@yahoo.comHodkiewiczsideActive$630.62
Jonathon VonRuedenlina_predovic68@gmail.comWest NashInactive$789.26
Perry Quigley PhDkody_ortiz70@hotmail.comNew VernerInactive$1,012.00
Sam Ullrichalverta50@hotmail.comPort VelvaInactive$949.84
Total$3,799.32

Table with row selection

Card Table

NameEmailLocationStatusBalance
Darnell Ernserdorris.aufderhar@yahoo.comJohnsonviewActive$803.03
Ray Hintzamiya8@gmail.comWest SenecaInactive$605.87
Bob Feilbella_gerlach@hotmail.comWest ArnosteadActive$500.45
Homer Kubcarroll34@gmail.comTorranceInactive$1,025.02
Irene Mulleraugusta_kertzmann72@yahoo.comCasperActive$406.40
Total$3,340.77

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
Doyle Hermannporter36@yahoo.comElenorcesterActive$900.22
Antoinette Loweleon.emard58@gmail.comComptonInactive$67.62
Lola Jakubowski DVMtremaine_donnelly87@yahoo.comPalm DesertInactive$420.76
Andre Marquardthertha.steuber88@hotmail.comNew RoncesterActive$605.67
Ricardo Bechtelarfred17@hotmail.comEast CrystalActive$154.26
Van Heathcoteverdie_bins@yahoo.comRichardsonActive$1,025.15
Barry Daugherty-Boyerkody.hilpert@gmail.comNew KennaburyInactive$44.17
Phyllis Grimesdonna.swift31@gmail.comKuhnchesterActive$1,074.70
Dr. Javier Waelchijayda87@gmail.comKirlinburyInactive$1,167.38
Gina Hilpertivy_murphy@hotmail.comSengermouthActive$525.76
Martha Baumbachlucio.cartwright@yahoo.comAbbottburyInactive$1,094.89
Johnnie Croninangeline.watsica58@yahoo.comPort DarbyInactive$364.18
Noah Ferry DVMalba_kunde-kirlin@yahoo.comBocesterActive$822.38
Dolores Wisozkmarietta.senger7@gmail.comDanialboroActive$320.23
Henry Ondrickaedgar.schroeder@hotmail.comFort EstebanInactive$736.90
Total$9,324.27

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