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$257.20
INV002PendingBank Transfer$421.50
INV003UnpaidBank Transfer$889.67
INV004PaidPayPal$411.49
INV005UnpaidPayPal$488.95
INV006PaidBank Transfer$217.11
INV007UnpaidCredit Card$710.53
Total$3,396.45

Simple

Users

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

NameTitleEmailRoleActions
Paula LangoshInternal Intranet Architectpaula.langosh@yahoo.comAdmin
Kailey MuellerChief Data Liaisonkailey_mueller38@hotmail.comMember
Russel GoldnerChief Optimization Plannerrussel.goldner51@gmail.comViewer
Eino WalshLead Web Associateeino_walsh@yahoo.comMember
Louisa O'HaraCustomer Security Supervisorlouisa_ohara@yahoo.comMember
Joe BradtkeCorporate Directives Engineerjoe.bradtke39@gmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Asa Ryan

Human Implementation Consultant

asa_ryan@gmail.com

Member

Georgette Wilkinson

Product Implementation Administrator

georgette_wilkinson57@gmail.com

Member

Micheal Conroy

Product Functionality Administrator

micheal_conroy@yahoo.com

Admin

Manuela Barton

Dynamic Response Engineer

manuela.barton74@gmail.com

Member

Aliza Anderson

Forward Communications Facilitator

aliza.anderson@yahoo.com

Admin

Caterina Streich

Corporate Implementation Consultant

caterina_streich@gmail.com

Viewer

Users

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

NameRoleActions

Mckayla Ernser

Dynamic Metrics Liaison

mckayla.ernser@hotmail.com

Member

Freeda Schinner

Global Integration Director

freeda.schinner30@gmail.com

Admin

Jabari Schuppe

National Operations Designer

jabari_schuppe@yahoo.com

Admin

Hope Heller

Legacy Group Specialist

hope_heller@yahoo.com

Admin

Kallie Glover

Global Group Liaison

kallie_glover@gmail.com

Viewer

Macy Wehner-Fritsch

Product Quality Executive

macy.wehner-fritsch@yahoo.com

Admin

Aisha Moore

Principal Implementation Manager

aisha_moore60@hotmail.com

Viewer

Libby Beier

Customer Interactions Developer

libby_beier67@yahoo.com

Member

Jeffrey Buckridge

Forward Identity Executive

jeffrey.buckridge59@gmail.com

Admin

Breanna Collins

Customer Assurance Director

breanna_collins@hotmail.com

Viewer

Brannon O'Kon

Regional Research Manager

brannon_okon35@yahoo.com

Viewer

Toby Schuppe

Principal Communications Producer

toby.schuppe@gmail.com

Viewer

Kailee Brown

Central Security Architect

kailee_brown@hotmail.com

Viewer

Cooper Lueilwitz

Customer Division Consultant

cooper.lueilwitz@yahoo.com

Admin

Jailyn Gibson

Regional Infrastructure Technician

jailyn.gibson@gmail.com

Member

Lupe Robel

Forward Accountability Administrator

lupe_robel@yahoo.com

Member

Arnaldo Yost

Central Directives Engineer

arnaldo_yost28@hotmail.com

Admin

Kolby Turner

Future Security Representative

kolby_turner@yahoo.com

Admin

Annamae Muller

Investor Brand Engineer

annamae.muller92@yahoo.com

Viewer

Selmer Beatty

Chief Accounts Manager

selmer.beatty30@yahoo.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
Betsy Prohaska-Kutchamina_leannon@gmail.comLubbockInactive$579.43
Kevin Langtyreek9@yahoo.comNew LeolafortInactive$976.42
Gail Thompsonangelo71@gmail.comWest NorbertostadActive$24.89
Caleb Hirthedwight_schaefer@yahoo.comNew ArmandActive$914.07
Roosevelt Rueckeradeline78@hotmail.comRoobviewActive$613.48
Total$3,108.29

Basic table

Table with Images

NameEmailLocationStatusBalance
Beatrice Wisoky MD
@winona_ankunding83
markus.barrows@yahoo.comWest JoshuaActive$490.55
Felicia Buckridge
@cydney_quigley82
darwin80@yahoo.comWunschfortActive$689.65
Stacy Wuckert
@chauncey_franey36
kelley97@hotmail.comNorth TaureanbergInactive$138.23
Shelly Hickle
@tina.schmitt
coy50@yahoo.comZackaryshireInactive$303.62
Alexandra Dibbert-Gutmann
@nelle30
pedro.mraz@yahoo.comPort JohnsonInactive$1,044.47

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Jessica Mohremelia.hudson99@yahoo.comFort KatherynInactive$88.72
Wendy Rempelkeon_skiles47@hotmail.comHobokenInactive$517.63
Gabriel Thompsonwinston.marvin@hotmail.comZboncakworthActive$400.46
Traci Wilkinson IIfabian_shanahan@gmail.comPort ShaniyaInactive$889.79
Donald Grimesaliza.bauch-ullrich@gmail.comChristopherworthActive$330.39
Total$2,226.99

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Jessie Fadel Ijerrod82@yahoo.comDeshaunbergActive$477.84
Benny Kutchjaylan95@hotmail.comNew AliaportActive$141.16
Mitchell Sawaynezra_goyette39@gmail.comLake ShaniyaActive$1,185.68
Arlene Bednarterry_hills@yahoo.comShawnsideActive$1,193.58
Florence Medhurstgiles.spinka2@gmail.comEast AdalinefortActive$243.48
Total$3,241.74

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Jay Purdylesly70@yahoo.comEast TillmanmouthActive$369.49
Mrs. Sara Hillsarvilla47@yahoo.comPort KelliportInactive$516.38
Tasha Homenickcaden_zulauf-adams89@gmail.comFort HopeportActive$973.05
Everett Stehrchaim_rippin80@gmail.comSouth CleoburyInactive$161.21
Traci Erdmanmaximillian_swaniawski98@gmail.comLilianacesterInactive$1,189.59
Total$3,209.72

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
Mike Schinnerchris.harris@yahoo.comBerniecefurtActive$22.06
Jaime Prosaccocarson93@yahoo.comEast FinnInactive$280.72
Marguerite Thieldominic16@hotmail.comHoegerbergActive$1,178.45
Evelyn Zulauf-Millerspencer.wolf54@yahoo.comWest JaniscesterInactive$1,051.83
Yvette Nolanfreddie_nikolaus-carter27@gmail.comNew OsbornetonInactive$836.62
Total$3,369.68

Table with row selection

Card Table

NameEmailLocationStatusBalance
Judy Hegmannnoble59@hotmail.comNew BarrettvilleInactive$611.28
Sharon Beahanmargaret_bergnaum16@hotmail.comLemketonActive$542.25
Cornelius O'Reillycarli_turcotte-marks@hotmail.comLake LeonardoActive$205.99
Cathy Waelchinils38@hotmail.comBillbergInactive$286.78
Bonnie Raususana29@yahoo.comNew GwenInactive$308.58
Total$1,954.88

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
Inez Baumbachlesly_johns29@gmail.comNitzschelandInactive$377.69
Robin Wunschtiana.ohara@yahoo.comLake IsraelviewActive$75.16
Mrs. Kristy Gottlieb-Bins MDlolita.kerluke44@yahoo.comKevinworthActive$249.05
Wilson Runolfssonodessa9@yahoo.comEast ArloburghInactive$620.11
Dr. Mamie McGlynnarvid62@gmail.comPort MarychesterActive$102.66
Willie Lueilwitztorrance44@hotmail.comPort NoemievilleActive$1,038.93
Jerome Corwinuriel.roob@hotmail.comBarneyboroughInactive$73.71
Greg Goodwinkatheryn.marvin@gmail.comNorth JulioInactive$939.05
Courtney Smithamrosa.kautzer64@hotmail.comThompsonburyActive$803.78
David Balistreriroma.weissnat94@gmail.comMacon-Bibb CountyInactive$659.52
Clarence Beahaneaston.ritchie@gmail.comSouth BertlandActive$329.25
Pete Steubertristin.schroeder69@hotmail.comSouth MaribelfortActive$733.13
Wallace Stiedemann Sr.timmy5@hotmail.comPort BraedenhavenInactive$230.21
Harriet Collinsbroderick.prosacco@gmail.comPort JonasActive$531.00
Boyd Vonlilly_kihn25@yahoo.comEast BereniceboroInactive$197.05
Total$6,960.30

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