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$400.53
INV002PendingPayPal$678.38
INV003PendingBank Transfer$809.83
INV004UnpaidCredit Card$664.19
INV005UnpaidCredit Card$399.67
INV006PendingCredit Card$794.24
INV007UnpaidBank Transfer$344.12
Total$4,090.96

Simple

Users

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

NameTitleEmailRoleActions
Vinnie KrisForward Data Officervinnie_kris57@hotmail.comMember
Amara OkunevaCustomer Security Manageramara.okuneva@yahoo.comMember
Quinton LangPrincipal Tactics Executivequinton_lang24@hotmail.comAdmin
Isaiah RoweInvestor Marketing Associateisaiah.rowe@gmail.comMember
Julian EffertzFuture Branding Strategistjulian.effertz6@hotmail.comAdmin
Chaya FraneyRegional Metrics Agentchaya_franey31@hotmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Dewayne Johns

Dynamic Response Liaison

dewayne_johns@hotmail.com

Viewer

Sonia Mayert

Dynamic Metrics Analyst

sonia_mayert8@hotmail.com

Member

Wilford Nader

Forward Directives Technician

wilford_nader@gmail.com

Admin

Hertha Farrell

International Division Manager

hertha.farrell3@gmail.com

Viewer

Judge Torphy

Dynamic Infrastructure Assistant

judge.torphy80@hotmail.com

Member

Annabel Kemmer

Central Data Strategist

annabel.kemmer90@yahoo.com

Admin

Users

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

NameRoleActions

Roel Yundt

Dynamic Mobility Manager

roel_yundt@yahoo.com

Admin

Barbara Moore

Internal Markets Coordinator

barbara_moore19@gmail.com

Viewer

Grady Ferry

Direct Branding Coordinator

grady.ferry@yahoo.com

Admin

Pedro Lubowitz

Senior Marketing Agent

pedro.lubowitz@hotmail.com

Viewer

Haley Kassulke

Regional Creative Strategist

haley_kassulke12@gmail.com

Viewer

Clifford Ortiz

Chief Directives Consultant

clifford.ortiz@gmail.com

Admin

Katheryn Schultz

Direct Communications Planner

katheryn.schultz@hotmail.com

Member

Chase Osinski

Lead Data Representative

chase_osinski57@hotmail.com

Viewer

Vincenza Rath

Central Paradigm Developer

vincenza_rath96@yahoo.com

Member

Deshawn Mueller

Central Data Facilitator

deshawn.mueller@yahoo.com

Admin

Lindsey Davis

Investor Data Consultant

lindsey.davis@yahoo.com

Admin

Darien Shanahan

International Communications Associate

darien_shanahan29@hotmail.com

Admin

Rosendo Hartmann-Stoltenberg

Principal Markets Associate

rosendo.hartmann-stoltenberg55@hotmail.com

Admin

Madyson Fahey

Lead Functionality Designer

madyson.fahey13@gmail.com

Viewer

Devin Dickinson

National Infrastructure Manager

devin.dickinson@yahoo.com

Admin

Raymundo Marvin

Investor Data Agent

raymundo_marvin@yahoo.com

Viewer

Mabel Stokes

Lead Factors Architect

mabel.stokes14@gmail.com

Member

Brannon Koss

Global Accounts Assistant

brannon_koss3@gmail.com

Admin

Cydney Okuneva

Global Accountability Technician

cydney_okuneva64@gmail.com

Member

Austin Metz

Customer Paradigm Specialist

austin_metz@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
Levi Fahey-Dachkattie83@gmail.comSporersideActive$710.55
Ivan Donnelly DDSmissouri_strosin99@yahoo.comLake JessieInactive$1,004.37
Clint Hammesophelia86@hotmail.comSouth JeffrystadInactive$253.52
Phillip Franey IIIcathy.carroll@yahoo.comSchenectadyActive$1,086.69
Armando Becker PhDemerald_stamm13@yahoo.comSouth VadaInactive$511.59
Total$3,566.72

Basic table

Table with Images

NameEmailLocationStatusBalance
Dale Harris
@tillman9
carole_bruen@yahoo.comWest NoemymouthActive$181.86
Dr. Randolph Zemlak
@franco6
jacklyn_weber@hotmail.comRoyal OakInactive$491.30
Lee Cummerata
@eugenia.legros
sandy_dubuque@hotmail.comCrooksburyActive$425.66
Brenda Rogahn
@annamarie_leannon54
bryana21@gmail.comDooleysideActive$1,065.31
Lisa Dickens
@tiara_donnelly10
sydnee41@gmail.comLeesburgActive$704.73

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Gladys Gleasonjeffery.paucek-heidenreich99@yahoo.comGrand JunctionActive$926.24
Miriam Kuvalislionel_lynch@yahoo.comWisozktonInactive$805.14
Ralph Kihnblake.bartoletti90@yahoo.comMaddisonfieldActive$816.10
Leah Kovacekkaden_reinger@yahoo.comSmithamshireInactive$604.39
Calvin Cronamanuel_dare3@yahoo.comMaple GroveInactive$1,084.72
Total$4,236.59

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Fernando Feeststephania_harris72@yahoo.comDouglasvilleActive$1,030.76
Marvin Rosenbaum Iearnest19@gmail.comRemingtonbergInactive$268.67
Cesar O'Connellcamden88@yahoo.comNew ElenorboroActive$877.19
Tonya Nienowshanny_maggio27@yahoo.comWest SunnyActive$702.05
Cathy Lowebartholome_macgyver76@gmail.comNorth CortezsteadActive$1,153.18
Total$4,031.85

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Mr. Moses Blickmateo94@yahoo.comSan AntonioInactive$384.96
Victor Fisherkaleb14@hotmail.comPort CalebportActive$403.00
Bennie Huelkattie.anderson17@yahoo.comVancouverActive$145.06
Lynn Botsford Sr.felicity.klein43@gmail.comFraneyburghActive$117.83
Roderick Haagarjun_feeney@yahoo.comLittelvilleActive$560.48
Total$1,611.33

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
Marian Ryansheridan61@yahoo.comSouth SamanthaburghInactive$190.12
Terry Pouroshelen24@hotmail.comRodriguezshireActive$1,175.80
Doreen Hettingerpearline.nader92@hotmail.comRueckertonActive$523.65
Kerry McClurehiram.breitenberg@yahoo.comJaskolskivilleInactive$391.35
Nancy Kingjeromy_ferry70@yahoo.comFort GretalandInactive$20.95
Total$2,301.87

Table with row selection

Card Table

NameEmailLocationStatusBalance
Jeanette Croningarret_reinger@hotmail.comSierra VistaInactive$1,095.68
Lucille McCulloughherta_gerhold@yahoo.comCronafieldActive$1,099.38
Suzanne Goldnergenoveva28@hotmail.comGreenbergActive$892.79
Barbara Pacochanicole.haag@hotmail.comSouth VivienneActive$136.88
Carole Bernhardalberta_fahey43@gmail.comMidlandActive$999.42
Total$4,224.15

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
Erick Stantonbrady.herzog7@hotmail.comLake FeliciaActive$1,016.23
Willie Paucekjanice_schaefer@yahoo.comEast BeaulahInactive$563.40
Tomas Pfeffermariano_howe-daugherty44@yahoo.comMadisencesterActive$972.65
Courtney Konopelskidena.feil@hotmail.comNashuaInactive$1,171.81
Brent Kassulkelenny.fritsch@yahoo.comLubowitzboroughInactive$458.63
Roberto Mannterence99@yahoo.comFort YesseniaActive$43.81
Lewis Mantenedra_zieme@yahoo.comTamaracActive$51.64
Steven Deckowskye_mccullough12@hotmail.comKesslerviewActive$1,173.61
Kay Heidenreichfay_smith@hotmail.comWisozkchesterInactive$979.63
Miss Bernadette Dibbertlaurianne98@hotmail.comLake AleneActive$531.76
Dr. Emilio Watsicageorgiana.turner50@yahoo.comNewtonInactive$922.40
Clinton Tremblayebony.kassulke@gmail.comCoraliehavenActive$496.63
Monique Considinesavannah.fisher69@yahoo.comLake RyleighActive$664.63
Geraldine Naderannetta_effertz@yahoo.comPort MattInactive$1,095.75
Gloria Borermargaret48@gmail.comFranciscotownInactive$713.90
Total$10,856.48

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