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
INV001UnpaidPayPal$280.88
INV002PendingCredit Card$829.76
INV003PaidPayPal$691.98
INV004PendingPayPal$328.91
INV005PaidCredit Card$808.45
INV006PaidBank Transfer$986.38
INV007PendingPayPal$373.27
Total$4,299.63

Simple

Users

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

NameTitleEmailRoleActions
Ebony DeckowInternational Mobility Engineerebony.deckow77@yahoo.comViewer
Ciara BlickInternal Quality Specialistciara.blick@gmail.comAdmin
Remington Crooks-FeeneyDirect Data Managerremington_crooks-feeney95@hotmail.comViewer
Gwen MurazikNational Division Developergwen_murazik62@yahoo.comViewer
Katheryn SchuppeDynamic Identity Techniciankatheryn_schuppe46@gmail.comMember
Lyle JakubowskiCorporate Implementation Directorlyle_jakubowski@gmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Joshua Kub

Chief Assurance Manager

joshua.kub@gmail.com

Admin

Whitney Mayer

Global Applications Associate

whitney.mayer@yahoo.com

Admin

Jerald Kessler

Lead Implementation Assistant

jerald_kessler@gmail.com

Viewer

Kelley Kemmer

Human Quality Architect

kelley_kemmer31@yahoo.com

Viewer

Brad Lang

Direct Metrics Facilitator

brad_lang61@hotmail.com

Admin

Ludwig Pfannerstill

National Tactics Associate

ludwig.pfannerstill@hotmail.com

Viewer

Users

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

NameRoleActions

Anabelle Wunsch

Customer Communications Producer

anabelle.wunsch@gmail.com

Member

Quinn Hills

Customer Marketing Supervisor

quinn.hills@gmail.com

Viewer

Doris Littel

Regional Mobility Engineer

doris_littel88@gmail.com

Admin

Micheal Stokes

Global Communications Agent

micheal_stokes76@hotmail.com

Viewer

Conrad Breitenberg

Internal Operations Liaison

conrad_breitenberg70@gmail.com

Viewer

Gertrude Hessel

Global Paradigm Strategist

gertrude_hessel33@hotmail.com

Viewer

Kaden Weimann

Lead Marketing Designer

kaden_weimann@hotmail.com

Viewer

Dangelo King

Senior Usability Technician

dangelo.king78@hotmail.com

Admin

Amara Weber

Future Response Technician

amara.weber@hotmail.com

Member

Jennifer Hayes

Investor Directives Manager

jennifer.hayes@yahoo.com

Member

Shane Blick

District Metrics Specialist

shane_blick92@hotmail.com

Viewer

Elza Gusikowski

Investor Applications Coordinator

elza.gusikowski71@yahoo.com

Admin

Lucille Maggio

International Research Manager

lucille.maggio89@yahoo.com

Viewer

Golden Balistreri

Lead Web Engineer

golden_balistreri@hotmail.com

Member

Dean Langworth

District Branding Engineer

dean_langworth0@gmail.com

Admin

Emma Carroll

Corporate Tactics Architect

emma_carroll@hotmail.com

Admin

Minnie Macejkovic

Dynamic Applications Specialist

minnie_macejkovic84@hotmail.com

Member

Judy O'Keefe-Marvin

National Accountability Facilitator

judy_okeefe-marvin@hotmail.com

Admin

Irma Ernser

International Usability Planner

irma_ernser@yahoo.com

Member

Osborne O'Conner-Emard

Forward Data Architect

osborne.oconner-emard@yahoo.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
Teri Zulauf-Bernierbryant55@yahoo.comFramiviewActive$818.86
Norberto Larsondominic0@hotmail.comDeKalbInactive$212.18
Abbie Baumbachurban_stroman@hotmail.comElyriaActive$611.19
Josephine Langoshnella_yundt67@gmail.comWhitebergActive$642.29
Maurine Harveymyra_bradtke18@yahoo.comEarnestboroughInactive$579.91
Total$2,864.43

Basic table

Table with Images

NameEmailLocationStatusBalance
Monty Kunde
@blanca_lowe47
bettie47@gmail.comLake JamilhavenActive$892.77
Hilda Cremin
@trisha_bogan
vivian_rodriguez56@hotmail.comGreeleyInactive$343.92
William Tremblay
@billie_kerluke
roberto.emmerich@hotmail.comFreidaboroughActive$180.51
Salvador Brekke
@leslie36
sammy.bechtelar@hotmail.comBradfordsideActive$1,025.62
Kristy Simonis
@patti.pouros
ryley.reichert98@gmail.comElginActive$1,087.17

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Darren Keeblerbraeden99@hotmail.comEast IsmaelfurtInactive$652.52
Dr. Kelly Beer Iemanuel.boyle@hotmail.comDunwoodyInactive$1,106.00
Gordon Jakubowskidarren29@yahoo.comMarcelinahavenActive$598.33
Dr. Kay Pfannerstillkari.altenwerth@gmail.comNorth SantinoInactive$245.22
Geoffrey Hettingerramona15@gmail.comGuaynaboInactive$1,151.30
Total$3,753.37

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Noah Dibbertlatoya_green@gmail.comSouth DarioActive$1,060.25
Jody Croninmona57@yahoo.comShyanneviewActive$237.50
Holly Johnsoncecilia30@gmail.comGorczanytownActive$815.39
Myra Bergepauline_von@yahoo.comAbshirefurtActive$637.86
Mabel Rodriguezkim_kshlerin17@yahoo.comConroystadActive$527.27
Total$3,278.27

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Vernon Dooleytrent33@hotmail.comHesselburyInactive$874.19
Tressie Vontoni94@gmail.comLake KatherynActive$1,083.43
Pansy Bechtelarbarbara.kulas@hotmail.comPortlandInactive$632.48
Gregg O'Reillyandreane87@yahoo.comNorth AniyahInactive$455.40
Herman Millsrhianna.weimann@gmail.comTomshireActive$143.77
Total$3,189.27

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
Mrs. Evie Sipes-Runolfsdottirdewey.klocko@hotmail.comVancouverInactive$715.12
Estella Reichelpreston_bailey@gmail.comSouth TaureanActive$50.03
Estelle Kirlinclarence58@hotmail.comFreidamouthInactive$323.00
Tim Ziemeemanuel.flatley@hotmail.comKonopelskimouthActive$951.54
Reginald Kuhnnathaniel_gorczany76@hotmail.comFort BorissideActive$1,116.09
Total$3,155.78

Table with row selection

Card Table

NameEmailLocationStatusBalance
Oscar Considinemilford_rogahn@yahoo.comLauderhillInactive$138.26
Treva Schaeferwallace68@yahoo.comLake GianniInactive$495.41
Abraham Jenkinsedwin.hickle82@hotmail.comEast BellshireInactive$192.63
Donato Muller Sr.eric_kunde96@yahoo.comYostworthActive$117.34
Ernest Wymanbryan67@hotmail.comSouth EstrellaburghActive$298.27
Total$1,241.91

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
Evangeline Schmitteduardo84@yahoo.comEast GarnettInactive$526.26
Sheldon Schmelerernesto.boyle11@gmail.comNorth UrbanInactive$150.94
Dr. Micaela Leffleradalberto.mann49@gmail.comElisafieldInactive$1,102.52
Willis O'Haranathaniel.weissnat@gmail.comMaximilianportActive$503.18
Rose Watershudson61@yahoo.comJazmyneboroInactive$679.37
Rossie Thieljaqueline.kemmer@yahoo.comMasonbergInactive$418.81
Hattie Stammmonique56@gmail.comMedhurststeadActive$449.06
John Heidenreichdon.gulgowski@gmail.comAufderharfortInactive$16.51
Katherine Grady IIIchad.corkery75@hotmail.comEast NikkiActive$680.33
Forest Ratkelewis_zemlak15@yahoo.comMacGyverfurtInactive$827.83
Neal Schneider DDSjessy_ruecker@gmail.comFort BennyInactive$1,024.58
Spencer Grantcarolyn_kuhic@yahoo.comLake LizzieActive$349.52
Cecil Marksclaire.olson@yahoo.comCentrevilleInactive$906.30
Emil Pfannerstillarturo_fadel@hotmail.comPalatineInactive$384.83
Fidel Fahey-Beckerrolando.parker@yahoo.comNorth BrianamouthInactive$613.48
Total$8,633.52

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