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$634.95
INV002UnpaidPayPal$600.06
INV003PaidBank Transfer$102.82
INV004UnpaidCredit Card$192.27
INV005PendingBank Transfer$874.07
INV006UnpaidPayPal$361.47
INV007UnpaidPayPal$183.10
Total$2,948.74

Simple

Users

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

NameTitleEmailRoleActions
Marty KlingSenior Accounts Facilitatormarty_kling@gmail.comViewer
Lillian MohrForward Paradigm Technicianlillian.mohr@hotmail.comViewer
Clyde HarrisDynamic Tactics Producerclyde_harris38@gmail.comAdmin
Virginia ZboncakCustomer Web Administratorvirginia_zboncak72@gmail.comMember
Reginald BlickNational Data Associatereginald_blick@hotmail.comMember
Claire HarveyFuture Accountability Assistantclaire_harvey71@gmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Gretchen Mills

Regional Solutions Manager

gretchen_mills14@gmail.com

Viewer

Clint Schmitt

Lead Factors Coordinator

clint_schmitt@hotmail.com

Viewer

Jacqueline Okuneva

Regional Infrastructure Orchestrator

jacqueline.okuneva18@yahoo.com

Viewer

Taurean Champlin

District Data Designer

taurean.champlin@hotmail.com

Viewer

Maggie McGlynn

Central Implementation Agent

maggie_mcglynn@gmail.com

Member

Idell Walsh

Investor Division Specialist

idell.walsh42@gmail.com

Admin

Users

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

NameRoleActions

Francisco Schneider

Future Research Administrator

francisco_schneider1@yahoo.com

Member

Miguel Douglas

District Operations Representative

miguel.douglas45@yahoo.com

Admin

Ezra Fadel

Senior Web Specialist

ezra_fadel97@gmail.com

Member

Rhianna Hermiston

Chief Applications Agent

rhianna.hermiston0@hotmail.com

Admin

Latoya Gutmann

Investor Paradigm Technician

latoya_gutmann93@hotmail.com

Admin

Marjorie Zemlak

Corporate Accountability Agent

marjorie.zemlak@yahoo.com

Viewer

Javier Rippin

Central Creative Producer

javier_rippin9@yahoo.com

Viewer

Delores Oberbrunner

Regional Response Developer

delores_oberbrunner@hotmail.com

Admin

Troy Carter-Emard

Forward Research Facilitator

troy.carter-emard@gmail.com

Admin

Armand Yundt

Principal Identity Supervisor

armand.yundt42@gmail.com

Admin

Ariane Dooley

Legacy Functionality Developer

ariane.dooley@gmail.com

Admin

Isaac Littel

Investor Usability Strategist

isaac.littel@yahoo.com

Admin

Carol Osinski

Investor Interactions Assistant

carol.osinski19@yahoo.com

Viewer

Carolina Sawayn

Product Group Executive

carolina.sawayn67@yahoo.com

Viewer

Dalton Romaguera

Customer Metrics Planner

dalton.romaguera@hotmail.com

Viewer

Madeline Hoeger

Principal Markets Supervisor

madeline.hoeger@hotmail.com

Viewer

Maude Goodwin

Customer Marketing Producer

maude.goodwin54@gmail.com

Viewer

Raymond Schmidt

Future Integration Architect

raymond.schmidt@hotmail.com

Viewer

Lloyd Botsford

Principal Division Associate

lloyd_botsford82@yahoo.com

Viewer

Rita Hammes

Central Functionality Planner

rita.hammes99@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
Napoleon Hegmannbrendan.connelly40@yahoo.comMaddisonsideInactive$19.30
Sammie Monahanshayne92@gmail.comCristalhavenActive$387.56
Noble McCullough DVMharvey24@hotmail.comCamrynsteadActive$344.03
Ruth Hahnrudolph41@yahoo.comFort FilomenaInactive$565.87
Roderick Jenkinshilda.kunde@hotmail.comWest ZachariahActive$1,133.99
Total$2,450.75

Basic table

Table with Images

NameEmailLocationStatusBalance
Nona Sipes
@adam27
kirk95@gmail.comMargretboroughActive$88.87
Mr. Nick Hoppe
@ericka.wisoky
bette.homenick95@yahoo.comNew EsthercesterActive$541.28
Craig Wolf
@agustina77
alberto81@gmail.comVicentelandInactive$950.04
Roxanne Green
@sadie58
kyle_bechtelar-kreiger55@hotmail.comLos AngelesInactive$193.28
Westley Moore
@myra.ortiz-weimann87
shelia.morissette4@yahoo.comHamptonInactive$248.43

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Mr. Benjamin Dickenstiffany_parisian12@hotmail.comFort AbdullahActive$944.11
Davonte Handcarmela.heller89@yahoo.comMontebelloInactive$1,192.48
Cynthia Heaney Idoreen.ryan@hotmail.comThieltonActive$568.41
Laverne Connsteven.harvey32@gmail.comEvelynvilleActive$737.99
Joey Millerdustin_jerde28@yahoo.comPort MargaritaInactive$536.67
Total$3,979.66

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Eric Dickensbilly.mayert8@gmail.comPort ReneeInactive$100.88
Oliver Maggiodonnie35@yahoo.comStammportActive$12.87
Taylor O'Connellflorencio.kemmer@gmail.comBostonInactive$1,072.43
Kelvin Stehrearnest_friesen-koss@hotmail.comRaynorsideActive$907.38
Beth Doylejoey_bashirian76@hotmail.comNorth KristinaburyInactive$1,068.05
Total$3,161.61

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Salvador Grahamelias.christiansen93@yahoo.comLake MarcelinabergActive$425.03
Gladys Olsonclark64@hotmail.comNorth FlavieInactive$885.73
Tomas Kautzernicolas41@hotmail.comDangeloshireActive$1,179.01
Roscoe Hartmannjimmy20@gmail.comPort DavonteActive$1,159.18
Edith Klocko Ikeon61@gmail.comWest NaomieActive$980.26
Total$4,629.21

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
Ray Stantonangel.sanford66@gmail.comSt. PetersInactive$312.09
Theresa Stoltenbergquincy.olson41@yahoo.comSchummfieldInactive$629.43
Daisy Lindgren-Schuppenaomie3@yahoo.comMarcelinoworthInactive$524.87
Miss Idell Schustertiffany37@gmail.comWest DomenickInactive$171.22
Chelsea Rosenbaumkarla_adams@hotmail.comTampaActive$609.06
Total$2,246.67

Table with row selection

Card Table

NameEmailLocationStatusBalance
Ross Effertzmoses11@gmail.comLake HeatherActive$807.99
Columbus Sporer MDwinston99@yahoo.comDelphinestadActive$807.33
Dr. Guillermo Abernathyadriel_wyman@yahoo.comSterling HeightsActive$1,186.28
Joanna Huelsadrain.sauer@gmail.comLake RoslynInactive$1,112.98
Johnny Stantonvivian.greenholt63@yahoo.comTaylorsvilleActive$443.16
Total$4,357.74

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
Cassidy Baumbachgeovanni91@hotmail.comLake SammyActive$145.86
Freddie Carrollnoelia_monahan95@hotmail.comFrancescocesterActive$834.42
Colin Kautzer-Monahanceline.cassin@yahoo.comPortsmouthActive$428.93
Gregoria Reichertfoster10@gmail.comPort DarionInactive$543.60
Christopher Cummingskathlyn.breitenberg@gmail.comFort AdelleInactive$432.97
Manuel Okunevajody.quitzon@hotmail.comFort ReynafurtActive$894.60
Mariah Pfannerstill PhDscottie_gulgowski81@yahoo.comRalphportInactive$103.95
Ms. Lillie Carrollmarley44@hotmail.comZackarystadInactive$300.42
Edna Blockclair_pfeffer59@hotmail.comWisokychesterActive$1,148.44
River Dickensdayna83@gmail.comSouth HayleytonInactive$1,077.91
Stephany Schaeferterrence_effertz9@yahoo.comSouth GustshireActive$185.40
Sonja Jaskolskicora86@yahoo.comWest WhitneyInactive$124.56
Aylin Kerlukebrent_wiegand4@yahoo.comNew DonnaInactive$12.96
Ismael Reichelblaze_stracke@gmail.comNorth JedidiahsideInactive$673.75
Gilberto Wintheiser PhDsidney51@gmail.comWest CandidaInactive$1,159.01
Total$8,066.78

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