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
INV001PaidBank Transfer$569.27
INV002PaidPayPal$728.08
INV003UnpaidBank Transfer$592.40
INV004PaidPayPal$560.43
INV005PendingBank Transfer$762.17
INV006PaidCredit Card$625.79
INV007PaidCredit Card$173.97
Total$4,012.11

Simple

Users

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

NameTitleEmailRoleActions
Stephany WardForward Tactics Architectstephany_ward16@yahoo.comViewer
Jayme CollinsInvestor Usability Specialistjayme_collins30@gmail.comMember
Lelah MrazCorporate Security Agentlelah_mraz60@hotmail.comViewer
Bette PacochaCorporate Program Representativebette.pacocha69@gmail.comAdmin
Marley JohnstonCentral Identity Facilitatormarley.johnston90@hotmail.comAdmin
Rex ReynoldsForward Factors Designerrex.reynolds@yahoo.comViewer

Stacked on mobile

Users

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

NameRoleActions

Robyn Cole

Senior Configuration Facilitator

robyn.cole@yahoo.com

Member

Pierre Lueilwitz

Direct Program Coordinator

pierre_lueilwitz@yahoo.com

Admin

Jean Jakubowski

Customer Communications Specialist

jean_jakubowski@yahoo.com

Viewer

Virginia Kilback

Human Integration Coordinator

virginia.kilback15@gmail.com

Viewer

Meda Grant

Human Markets Producer

meda_grant@yahoo.com

Admin

Vicenta Kulas

District Solutions Planner

vicenta.kulas@yahoo.com

Admin

Users

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

NameRoleActions

Armani Kassulke-Skiles

District Branding Officer

armani_kassulke-skiles@yahoo.com

Admin

Jordyn Tremblay

Global Program Specialist

jordyn_tremblay@gmail.com

Admin

Jarrod Hilpert

Human Infrastructure Consultant

jarrod.hilpert20@gmail.com

Viewer

Jeff Murazik

Future Directives Coordinator

jeff.murazik51@yahoo.com

Viewer

Gregory Kris

Dynamic Branding Supervisor

gregory_kris@yahoo.com

Admin

Neha Davis

Internal Integration Executive

neha_davis@hotmail.com

Admin

Dereck Borer

Global Security Manager

dereck_borer20@hotmail.com

Member

Tavares Herzog

Global Intranet Executive

tavares_herzog51@gmail.com

Member

Devonte Greenholt

District Solutions Specialist

devonte.greenholt69@yahoo.com

Viewer

Dariana Yost

Global Optimization Assistant

dariana.yost52@yahoo.com

Viewer

Meagan Williamson

District Markets Specialist

meagan_williamson@hotmail.com

Member

Rudolph Lowe

International Mobility Assistant

rudolph_lowe54@hotmail.com

Admin

Cleta Pollich

Corporate Configuration Facilitator

cleta_pollich51@gmail.com

Member

Lina Schaefer

Legacy Response Agent

lina.schaefer53@gmail.com

Member

Alysa Schumm

Direct Branding Coordinator

alysa.schumm@gmail.com

Member

Kamren Rohan

Principal Mobility Executive

kamren_rohan3@gmail.com

Viewer

Adolfo Wintheiser-Adams

Customer Division Assistant

adolfo_wintheiser-adams@gmail.com

Viewer

Emmy Bashirian

Central Program Manager

emmy_bashirian69@hotmail.com

Member

Connie Lebsack

Direct Applications Producer

connie_lebsack59@yahoo.com

Viewer

Ashleigh Fahey

Corporate Marketing Coordinator

ashleigh.fahey86@gmail.com

Viewer

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
Forrest Schultz Vorion_abernathy@yahoo.comLake CharlesInactive$473.29
Bernadette Wehner PhDpatricia.franey@hotmail.comWest NedActive$861.60
Benny Satterfieldgeorgiana27@hotmail.comSouth MariaInactive$794.84
Elsie Luettgennyah.olson88@hotmail.comLake ArchActive$418.01
Bessie Kautzerrhiannon40@gmail.comSporerportInactive$557.23
Total$3,104.97

Basic table

Table with Images

NameEmailLocationStatusBalance
Monica MacGyver
@harry46
jett_huel@yahoo.comHamiltonInactive$857.61
Jodi Trantow-Harris
@treva_sanford15
malika8@hotmail.comWest LafayetteActive$89.78
Omar Marquardt
@mikayla.spinka12
brigitte_bailey@gmail.comWest HassanActive$1,130.87
Debbie Robel MD
@suzanne58
adelbert.ritchie48@gmail.comMoniqueviewInactive$222.98
Marcus Stracke
@elinore_larkin
ashley_hoeger54@hotmail.comPort TrystanstadActive$69.97

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Miss Ginger O'Reillywillow.romaguera@gmail.comVancouverInactive$68.94
Beth Hyattfannie.bartell@yahoo.comNew PaxtonInactive$256.43
Maryann Cartwright Iaudie_kassulke81@gmail.comFresnoActive$1,179.86
Frances Dachjamil.schoen66@gmail.comAltenwerthtonActive$635.96
Mr. Chad Spencerjayson63@hotmail.comSouth ThadchesterActive$143.51
Total$2,284.70

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Dr. Ruby Pagacjustice.hagenes66@gmail.comSt. CharlesActive$580.72
Seth Hansenjamir.streich75@gmail.comWest AngeloInactive$376.95
Todd Schusterjuvenal_wiegand17@hotmail.comMesaInactive$459.88
Andres Bergstromwilfrid35@gmail.comMurrayboroughActive$227.62
Jeanette Murrayelvie.schaden@hotmail.comBernierburyActive$1,176.85
Total$2,822.02

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Brendan Waters-Powlowskitania.braun@gmail.comTrishalandActive$1,088.88
Miss Sabrina Dietrichearnest.wiegand@gmail.comFort LennaworthActive$905.57
Miss Nicole Nadercarlie_johns8@hotmail.comTreutelbergInactive$822.55
Melba Sipesabraham.mante@gmail.comSouth KarsonportInactive$127.58
Felipe Quitzonferne25@yahoo.comSavannahInactive$963.28
Total$3,907.86

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
Wm Smithalexandro.anderson81@yahoo.comZiemannstadInactive$72.22
Dwight Hyatteli.mertz@yahoo.comNew JerrodActive$449.80
Cristina Pagacdonato.stoltenberg13@yahoo.comDecaturActive$1,005.68
Hattie Kirlinfelipe.armstrong@gmail.comMacGyvertownInactive$726.66
Abraham Wiegandmadge15@yahoo.comAllyburghActive$1,073.08
Total$3,327.44

Table with row selection

Card Table

NameEmailLocationStatusBalance
Sylvia Hand-McGlynnjoel_kautzer55@hotmail.comTaylorsvilleInactive$341.67
Margaret Shieldsjordane28@hotmail.comLake CourtneyActive$1,009.80
Austin Beckerisabel.thompson64@gmail.comEast NoeActive$387.52
Faye Roweludwig_kiehn@gmail.comEmeraldsideInactive$1,082.30
Eddie Williamsondaisy16@hotmail.comFraneyshireInactive$475.66
Total$3,296.95

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
Dewey Denesikmarkus_mcglynn70@hotmail.comGrapevineInactive$542.29
Dennis Hermistonbud.jacobson@yahoo.comEast PriceActive$898.10
Juan Gleichnerheidi.klein@gmail.comHendersonInactive$133.23
Alma Littlesheldon_dickinson@gmail.comNikolaushavenInactive$721.27
Jody Kovacek-Monahanjennyfer_heathcote21@yahoo.comWatsonvilleActive$679.39
Miss Laura Homenickdevan_abshire@gmail.comJodyhavenActive$600.15
Mamie Jakubowskiariane_wyman@gmail.comEast BeverlyInactive$213.11
Gene Schaefer MDlenora_greenfelder@hotmail.comPalm Beach GardensActive$172.90
Mr. Sidney Wisozkada_weber@gmail.comSouth AnnaliseActive$1,042.11
Russell O'Keefejune.morissette21@yahoo.comWest CaraviewActive$1,010.05
Mr. Nathaniel Ondrickanyah_dickens11@hotmail.comMargateInactive$215.04
Roy MacGyvercecilia.armstrong@hotmail.comTurnertownActive$196.62
Constance Wiegand-Krisvictoria.swift@yahoo.comAlbinafieldActive$899.79
Janie Williamsonart46@hotmail.comJacobiburghInactive$9.46
Frank Schummcolumbus.boehm@gmail.comAdeliaboroActive$874.70
Total$8,208.21

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