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$805.89
INV002PaidCredit Card$668.24
INV003PendingBank Transfer$397.20
INV004PendingCredit Card$721.43
INV005UnpaidBank Transfer$758.25
INV006UnpaidBank Transfer$989.18
INV007UnpaidCredit Card$733.01
Total$5,073.20

Simple

Users

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

NameTitleEmailRoleActions
Dylan TrantowChief Data Producerdylan.trantow53@yahoo.comViewer
Albina LockmanHuman Directives Directoralbina.lockman@yahoo.comMember
Kasandra SporerDynamic Directives Architectkasandra_sporer@gmail.comMember
Rene KerlukeCentral Optimization Orchestratorrene_kerluke38@hotmail.comAdmin
Orpha JacobiForward Marketing Directororpha.jacobi23@hotmail.comMember
Peyton WelchCustomer Research Associatepeyton.welch44@hotmail.comMember

Stacked on mobile

Users

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

NameRoleActions

Laurence Veum

International Infrastructure Technician

laurence_veum@gmail.com

Viewer

Delta Nitzsche

National Integration Director

delta_nitzsche54@yahoo.com

Admin

Josh Langosh

Global Research Analyst

josh.langosh39@yahoo.com

Admin

Jerry Hagenes

International Security Strategist

jerry.hagenes@hotmail.com

Admin

Albina Krajcik

Central Brand Supervisor

albina_krajcik@hotmail.com

Viewer

Carrie Gulgowski

Product Optimization Associate

carrie_gulgowski34@yahoo.com

Viewer

Users

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

NameRoleActions

Salvatore Streich

Forward Applications Strategist

salvatore.streich@gmail.com

Viewer

Cynthia Haag

Forward Integration Engineer

cynthia.haag@hotmail.com

Member

Crawford Veum

International Applications Analyst

crawford_veum9@yahoo.com

Member

Olive Jacobs-Pollich

Internal Brand Producer

olive_jacobs-pollich@yahoo.com

Admin

Blanche Anderson

Internal Tactics Designer

blanche.anderson44@gmail.com

Member

Dianna Conn

Forward Quality Orchestrator

dianna_conn53@hotmail.com

Admin

Brielle Volkman

Senior Accounts Orchestrator

brielle_volkman@yahoo.com

Member

Gina Reichert

Corporate Brand Officer

gina_reichert58@yahoo.com

Member

Louis Jacobs

Customer Data Strategist

louis_jacobs16@gmail.com

Viewer

Hannah Emard

Principal Quality Representative

hannah.emard54@hotmail.com

Admin

Percy Bahringer

Global Marketing Specialist

percy.bahringer12@gmail.com

Member

Pedro Medhurst

Customer Web Executive

pedro_medhurst@yahoo.com

Viewer

Tommy White

Global Accountability Associate

tommy_white@gmail.com

Admin

Alexandrea Ratke

Corporate Configuration Coordinator

alexandrea.ratke@yahoo.com

Member

Alia O'Conner

National Communications Associate

alia_oconner46@hotmail.com

Viewer

Chasity Denesik

Central Configuration Technician

chasity.denesik@yahoo.com

Viewer

Leta Pollich

Lead Brand Officer

leta.pollich@yahoo.com

Viewer

Micheal Schmidt

Central Branding Manager

micheal.schmidt@hotmail.com

Viewer

Bobbie Parisian

Legacy Branding Architect

bobbie.parisian94@yahoo.com

Viewer

Tyrone Kreiger

Forward Assurance Engineer

tyrone.kreiger@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
Elfrieda Deckowbruce.schuppe@yahoo.comJeanettefurtInactive$340.89
Mr. Jada Leuschkefredrick.reichel@gmail.comCoryfortInactive$757.67
Demario Wittingkrista30@gmail.comSchimmelviewActive$126.11
Mrs. Kelsi Hoegerherbert_macejkovic@yahoo.comNew VictoriaActive$1,077.50
Belinda Runolfsdottirkate.hills@gmail.comSarasotaInactive$881.55
Total$3,183.72

Basic table

Table with Images

NameEmailLocationStatusBalance
Glen Jacobson
@lilian_feeney16
greg.schneider78@yahoo.comFort MargieshireInactive$155.66
Amanda Schneider
@tia.nicolas
rudolph48@gmail.comDundalkActive$698.66
Cesar Becker
@adolphus.lubowitz
zachariah.kutch@yahoo.comEau ClaireActive$1,075.44
Michele Yost
@stanley.volkman
gerhard_haley47@hotmail.comWest CletafieldActive$395.56
Mrs. Marianne Nicolas
@jayson.kub20
bryan.cormier@yahoo.comIrvineActive$274.42

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Brendan Wardjeremiah_blick@yahoo.comFort FrankiefieldActive$1,110.98
Erin Schimmeljessika.greenholt@gmail.comElinorecesterInactive$287.94
Johnson Kerlukehubert4@gmail.comFort GriffinActive$400.24
Nestor Willmskelley.wiegand42@yahoo.comBillingsInactive$531.18
Freeman Sauer PhDtavares24@gmail.comNorth KylerInactive$590.60
Total$2,920.94

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Lola Marquardtclinton72@hotmail.comOndrickaworthActive$226.71
Jed O'Keefegayle_wisoky-corkery90@hotmail.comGaryActive$957.20
Elvie Schneiderdahlia.prohaska@yahoo.comNew GarrettbergInactive$662.49
Stacey Lednermicaela.macejkovic@hotmail.comElizabethInactive$443.48
Leah Coleoscar.kshlerin@gmail.comNienowsideActive$304.56
Total$2,594.44

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Dora Nienow PhDchristie12@gmail.comLeschviewInactive$154.67
Mr. Magdalen Schmidtvivienne50@hotmail.comEast BrownInactive$80.52
Jovanny Yundtarmani.braun91@gmail.comEast LanceshireActive$45.01
Miss Brock Orndemario_schultz60@hotmail.comMelanysteadActive$972.82
Rylan Weberdereck_nitzsche0@hotmail.comVerdamouthActive$563.57
Total$1,816.59

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
Preston Brekkecharlotte71@hotmail.comRiversideActive$99.01
Elisha Ankunding IIIkacey43@hotmail.comPort JaquelinboroughActive$690.43
Dr. Neha Mosciskiashley.bartoletti@hotmail.comNew MarcosideInactive$791.45
Jessica Pacocha Sr.regan_pagac83@gmail.comOndricka-BartolettilandActive$5.96
Mr. Victor Hermaniva39@gmail.comLorainActive$68.00
Total$1,654.85

Table with row selection

Card Table

NameEmailLocationStatusBalance
Isaias Leschtoby31@hotmail.comFredcesterInactive$1,004.52
Lynne Von-Veumwinona14@hotmail.comSouth BusterfurtActive$1,053.49
Claudia Gleasonallen_oconnell51@gmail.comSan FranciscoInactive$728.41
Daniel Wilkinson DVMkathryn_grady76@hotmail.comWest ArnoInactive$363.66
Phyllis Harberrick_batz@gmail.comKentInactive$686.09
Total$3,836.17

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
Vivian Kub-VonRuedendamon_welch75@yahoo.comNorth MaryannvilleActive$394.77
Bert Hackettmarcos_hand12@yahoo.comBoyerboroActive$249.20
Jena Eberterling74@yahoo.comSan RamonActive$353.68
Braulio Rennerhubert.kshlerin73@gmail.comWest MazieInactive$221.07
Mina Harriskeith_leannon64@gmail.comJenkinsfieldInactive$424.04
Rupert Quitzonconnie_auer84@gmail.comTobysideActive$1,045.29
Alanna Macejkovicjanice.wintheiser71@gmail.comSuzanneburghActive$180.07
Lupe Rodriguezdarla_auer@yahoo.comEast EloisaInactive$245.14
Bobbie Willmstimmy_stokes18@hotmail.comKingsportInactive$713.89
Sylvia Kuhicboyd.borer-nicolas90@yahoo.comNew MarianoActive$137.18
Jovan Boyerjesus_beahan48@hotmail.comKutchcesterActive$235.88
Joana Legrosjeremie64@gmail.comNorth CorneliusActive$23.39
Johnny Mrazellen_koepp@gmail.comBeattyburyActive$229.26
Dr. Carol Abbott IIIarlene.fay28@hotmail.comToledoActive$291.34
Mr. Walter Mullergilbert37@gmail.comEvelynsideInactive$493.78
Total$5,237.98

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