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$722.56
INV002PaidBank Transfer$383.86
INV003PendingPayPal$540.71
INV004PendingBank Transfer$248.22
INV005PendingPayPal$236.23
INV006PaidBank Transfer$410.66
INV007PaidPayPal$535.61
Total$3,077.85

Simple

Users

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

NameTitleEmailRoleActions
Mckenzie TremblayProduct Intranet Administratormckenzie.tremblay@yahoo.comViewer
Mozelle SmithForward Brand Officermozelle.smith50@hotmail.comViewer
Payton LueilwitzPrincipal Integration Assistantpayton_lueilwitz48@gmail.comViewer
Colton HeidenreichProduct Tactics Strategistcolton.heidenreich35@gmail.comAdmin
Leola BoehmCustomer Creative Producerleola_boehm37@yahoo.comViewer
Claire MrazCustomer Metrics Consultantclaire_mraz@yahoo.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Tomas Bernier

District Interactions Producer

tomas_bernier97@hotmail.com

Member

Leonor Dach

Investor Tactics Consultant

leonor.dach@hotmail.com

Admin

Rubie Gleichner

Central Identity Facilitator

rubie.gleichner52@yahoo.com

Admin

Callie Volkman

Dynamic Group Director

callie.volkman86@hotmail.com

Viewer

Beth Morar

Forward Usability Orchestrator

beth_morar@yahoo.com

Viewer

Forest Durgan

Internal Usability Agent

forest.durgan13@yahoo.com

Member

Users

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

NameRoleActions

Morris Mills

Product Marketing Coordinator

morris_mills@yahoo.com

Admin

Mafalda Hyatt

Future Accounts Coordinator

mafalda.hyatt13@gmail.com

Viewer

Allen Marvin

Direct Branding Engineer

allen_marvin@gmail.com

Viewer

Beatrice Hills

Regional Group Associate

beatrice.hills19@gmail.com

Viewer

Jaquan Walter

Direct Accountability Associate

jaquan_walter@gmail.com

Member

Edward Hansen

Chief Accounts Analyst

edward_hansen@hotmail.com

Member

Alba Murazik

Future Response Designer

alba_murazik@yahoo.com

Viewer

Cordell Kuhn-O'Hara

Regional Markets Analyst

cordell.kuhn-ohara@gmail.com

Member

Aidan Gerlach

Principal Mobility Representative

aidan.gerlach52@gmail.com

Member

Wendell Smith

Dynamic Interactions Administrator

wendell_smith@yahoo.com

Viewer

Maverick Oberbrunner

Senior Configuration Manager

maverick.oberbrunner@yahoo.com

Admin

Dan Harber

Forward Configuration Agent

dan.harber98@hotmail.com

Member

Christ Crona

Global Factors Supervisor

christ.crona13@hotmail.com

Viewer

Jayne Kerluke

Product Configuration Planner

jayne.kerluke58@gmail.com

Viewer

Hector Kassulke

Senior Data Producer

hector.kassulke50@gmail.com

Viewer

Sadie Pouros

Product Applications Representative

sadie_pouros97@hotmail.com

Member

Carey Haag

Customer Brand Designer

carey_haag@yahoo.com

Admin

Santina Von

Human Accountability Engineer

santina.von3@gmail.com

Viewer

Shany Veum

Future Data Coordinator

shany.veum51@yahoo.com

Member

Keshaun Robel

Product Functionality Producer

keshaun.robel@hotmail.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
Ollie Cruickshank MDjarred.mayer@yahoo.comMertzboroActive$861.25
Yvette Emmerichakeem.wolf58@hotmail.comDavisboroActive$585.65
Norma O'Keefemaverick_franecki78@gmail.comTinley ParkInactive$274.88
Mr. Marc Pacocha Jr.jon93@hotmail.comJonshireActive$878.24
Manuel Rolfsonkailyn62@gmail.comLake DominicInactive$500.28
Total$3,100.30

Basic table

Table with Images

NameEmailLocationStatusBalance
Doris Weimann
@estefania_rodriguez
marcia_altenwerth@hotmail.comGrand RapidsActive$267.23
Victoria Emmerich
@bonita_hudson56
lorenzo_jast26@hotmail.comLake AniyaInactive$1,067.02
Dr. Gwendolyn Mueller
@gwendolyn16
lynn93@yahoo.comRaphaellefieldActive$485.39
Traci Barton
@anastacio10
berry.shanahan@hotmail.comEmmerichboroActive$981.74
Peggy Runolfsson
@madge_heller91
trycia_witting@yahoo.comSouth HermanInactive$895.63

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Louise Littelmarie43@yahoo.comWildermanburyActive$644.43
Dave Kuphallyric_schuppe@hotmail.comNorth NikitatownInactive$1,092.59
Wesley Davissadie13@gmail.comVidavilleInactive$710.12
Jennifer Klockoalexa.simonis47@hotmail.comStillwaterActive$1,128.08
Phyllis Jenkinscruz.pagac66@yahoo.comRoswellActive$327.19
Total$3,902.41

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Clifford Nikolauscharlotte_metz@gmail.comSouth MadgechesterInactive$331.29
Annette Bahringer Jr.mozell.mckenzie54@yahoo.comBodeboroInactive$15.18
Miss Elaine Wizaayana.padberg@yahoo.comWest NorbertoActive$480.88
Iris Gutmannjoshua.weber@hotmail.comNew MaeganshireActive$39.08
Johnnie Jacobsonfiliberto.ratke3@gmail.comPansyfieldInactive$909.99
Total$1,776.42

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Ernestine Mertzvito.jaskolski@hotmail.comRebashireActive$867.77
Dr. Leland Prohaskalenora.pouros76@hotmail.comRempelchesterActive$144.99
Ira Krajcikjabari_hilll@gmail.comFort AlfonsoActive$355.82
Laurence Rennerbarbara.stoltenberg@hotmail.comLenexaActive$626.31
Mr. Dean Rohanines_batz@hotmail.comNorth MarisaActive$533.28
Total$2,528.17

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
Miss Hannah Simonisnayeli_goldner@gmail.comPort MarionburghInactive$662.49
Bobbie Wolfnickolas.lynch@hotmail.comSalinasActive$287.32
Guillermo Rennermorton6@yahoo.comNew DelfinaInactive$1,013.64
Marcia Schmittmarisol78@hotmail.comWest NicklausActive$1,111.38
Rodolfo Aufderharjulian_schmitt@yahoo.comRennersideActive$771.84
Total$3,846.67

Table with row selection

Card Table

NameEmailLocationStatusBalance
Vivian Faheymack.goodwin@gmail.comAugusttonActive$282.67
Lee Hillldina9@gmail.comBrooklineInactive$805.52
Lucille Bogan-Veum PhDroger_kautzer@yahoo.comJoyceshireInactive$443.51
Bobbie Kuhlmandasia_glover70@yahoo.comRhiannonburyActive$963.98
Moses Schulistelta_legros68@hotmail.comNew MilanActive$117.69
Total$2,613.37

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
Lynne Aufderharleonel.metz@yahoo.comNametownInactive$652.62
Terri Schadendavon33@yahoo.comKuphalstadActive$707.12
Miss Debbie Buckridgecarolyne56@gmail.comAufderharburghActive$883.48
Latoya Torp-Yundtsallie19@gmail.comNew EvertInactive$586.54
Marta Fay Sr.alberta19@hotmail.comNorth MaryfieldInactive$237.14
Bobby Stehr-Wisozknikita.howell@gmail.comEthantownInactive$93.78
Marc Bernierhipolito_carter31@hotmail.comNapaActive$959.73
Joyce Jacobseldred_rosenbaum@gmail.comNorth MattInactive$687.68
Ella Stiedemannneal59@yahoo.comFort TeresaboroughInactive$167.90
Delbert Cristsantina_bednar98@yahoo.comAldatonActive$1,154.62
Jeannie Crooksron53@yahoo.comNiagara FallsActive$625.87
Gregory Monahanhilario0@gmail.comKirstenburghInactive$1,167.19
Jesse Markslucius84@gmail.comLilianstadActive$754.84
Ramon Wuckertturner.ebert@gmail.comJaniyatownInactive$895.33
Amber Turnermarquis_morissette92@yahoo.comFort DarentonInactive$969.36
Total$10,543.20

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