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
INV001PaidPayPal$551.83
INV002PendingBank Transfer$459.70
INV003PendingBank Transfer$324.33
INV004UnpaidBank Transfer$762.12
INV005PendingBank Transfer$727.65
INV006PaidBank Transfer$731.04
INV007UnpaidCredit Card$908.78
Total$4,465.45

Simple

Users

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

NameTitleEmailRoleActions
Grady ConsidineCorporate Tactics Officergrady.considine@gmail.comAdmin
Hazel BayerHuman Implementation Strategisthazel_bayer@gmail.comViewer
Dessie BinsGlobal Program Representativedessie_bins@yahoo.comMember
Marlin JacobsonDirect Implementation Designermarlin.jacobson@yahoo.comViewer
Carla Pfeffer-BlandaFuture Identity Liaisoncarla.pfeffer-blanda@gmail.comViewer
George PurdyDistrict Communications Techniciangeorge.purdy36@gmail.comMember

Stacked on mobile

Users

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

NameRoleActions

Anya Schimmel

Principal Division Assistant

anya_schimmel34@gmail.com

Viewer

Alysha Swaniawski

Direct Paradigm Engineer

alysha.swaniawski42@gmail.com

Admin

Kian Streich

Human Implementation Planner

kian.streich@gmail.com

Member

Louvenia Conn

International Intranet Specialist

louvenia.conn@hotmail.com

Admin

Trenton Powlowski

Corporate Quality Director

trenton_powlowski@hotmail.com

Admin

Ali Haag

Direct Quality Orchestrator

ali_haag35@hotmail.com

Admin

Users

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

NameRoleActions

Kenya Jones

Internal Program Associate

kenya_jones@hotmail.com

Viewer

Aliya Zulauf

Global Division Specialist

aliya.zulauf80@yahoo.com

Viewer

Clara Vandervort

Direct Usability Director

clara.vandervort@gmail.com

Member

Leora Braun-Nienow

International Accountability Developer

leora.braun-nienow0@gmail.com

Member

Claudia Thiel

Dynamic Paradigm Officer

claudia.thiel@yahoo.com

Member

Walter Kerluke

Forward Accounts Producer

walter_kerluke65@yahoo.com

Viewer

Aliyah Reinger

Principal Division Administrator

aliyah_reinger45@hotmail.com

Admin

Tracey Littel

Chief Paradigm Agent

tracey.littel@gmail.com

Viewer

Lawrence Reynolds

Direct Interactions Engineer

lawrence_reynolds98@yahoo.com

Member

Rhonda Yost

Direct Solutions Developer

rhonda.yost96@gmail.com

Viewer

Lawrence Schaden

Principal Quality Planner

lawrence_schaden98@gmail.com

Admin

Lois Kris

International Intranet Orchestrator

lois_kris@yahoo.com

Admin

Maurice Wolf

Corporate Mobility Orchestrator

maurice_wolf2@hotmail.com

Viewer

Chloe Christiansen

Customer Marketing Consultant

chloe.christiansen@hotmail.com

Member

Lucia Cole

Corporate Directives Orchestrator

lucia.cole@hotmail.com

Admin

Malachi Heller

Global Operations Liaison

malachi_heller92@gmail.com

Admin

Albert Daugherty

Global Infrastructure Strategist

albert_daugherty29@gmail.com

Member

Jill Ebert

Regional Solutions Associate

jill.ebert@gmail.com

Member

Elody Herman

Central Paradigm Executive

elody_herman@yahoo.com

Viewer

Ricky Lubowitz

International Mobility Architect

ricky_lubowitz99@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
Manley McCluremaurice95@gmail.comReichelhavenActive$438.69
Moses Gutkowskirachel.volkman@hotmail.comLake MelissaInactive$574.52
Stanton Greenfelder-Keeblerjessy_powlowski@gmail.comLudiesideInactive$706.29
Mr. Jordy Strackeselmer30@gmail.comShirleybergActive$621.57
Howell Denesiktatyana35@yahoo.comKadesteadInactive$197.69
Total$2,538.76

Basic table

Table with Images

NameEmailLocationStatusBalance
Maximillian Gerhold
@marjolaine.carter
wilbert_bartoletti-buckridge@yahoo.comAndersonboroActive$225.98
Mr. Sammy Armstrong DDS
@enola.wisozk
roosevelt.ullrich47@yahoo.comNormantownInactive$840.35
Nicholaus Corwin
@carolina.cummerata
amy_block95@hotmail.comReginashireInactive$589.88
Mr. Micheal O'Conner
@earnest47
anne.lowe53@hotmail.comFarrellburghActive$1,086.66
Rod Ward
@kathy.bins21
lorenza_nolan@yahoo.comArmanibergInactive$238.14

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Ludie Labadiejamie72@hotmail.comOlatheInactive$19.65
Alyssa Rosenbaumgeoffrey.schimmel36@gmail.comIndependenceActive$1,121.28
Craig Ziemanntod8@yahoo.comMaggiebergActive$1,045.17
Ada Brakustalon_orn@yahoo.comJanessasteadActive$618.99
Athena Runolfsdottirjoan51@gmail.comSouth AliciaActive$537.91
Total$3,343.00

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Cassandre Jenkinsnyah_feest@yahoo.comBurlesonInactive$1,033.46
Alfred Johnston IIlila_ohara44@yahoo.comFunkburghActive$115.52
Lilliana Tillmantyson.will17@yahoo.comBayamonActive$1,044.89
Era Littleminerva.gerhold71@gmail.comDavionshireActive$730.50
Dr. Candida Goyettesidney63@gmail.comHarristonActive$257.84
Total$3,182.21

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Colleen Jacobipearl.rau@gmail.comNew DesireeInactive$358.69
Austin Connemilio_renner42@hotmail.comNorth AnnaviewInactive$500.01
Gwendolyn Shieldsfelipe_gutmann85@gmail.comLake JuanaviewActive$99.97
Mr. Idell Schmittshaun68@hotmail.comLake SherryActive$1,067.42
Randall Yundtashley.dooley5@hotmail.comPaulfieldInactive$931.20
Total$2,957.29

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
Gennaro Riceerika_little53@hotmail.comNorth IrwinActive$1,145.35
Judith Mosciskimindy67@yahoo.comPort TatumchesterActive$952.74
Margie O'Reillytonya70@gmail.comEast SheriInactive$1,039.98
Jerry Runolfssonsienna_tillman@yahoo.comMuhammadfurtInactive$10.47
Janis Towne Vmae.pfannerstill@gmail.comPort LoycesideInactive$663.74
Total$3,812.28

Table with row selection

Card Table

NameEmailLocationStatusBalance
Liana Bosco-Olson DVMelijah.west@hotmail.comTamistadActive$730.78
Garry Kulasclinton.okon91@hotmail.comKansas CityInactive$531.26
Concepcion Hackettclay32@hotmail.comLuciafortActive$971.28
Shari Schaeferangela_parker64@gmail.comAndersonActive$715.64
Hershel Collinskristen.gislason68@yahoo.comDevincesterInactive$779.36
Total$3,728.32

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
Arne Pricemarisa_predovic64@gmail.comKennerActive$1,118.44
Ignacio Walterjuwan.turcotte87@gmail.comSouth TommyportInactive$488.85
Billie Kunde Vsimon_dietrich35@yahoo.comWest RansomtownActive$1,064.55
Irma Renner-Konopelskikeith.reichert38@gmail.comSouth PabloInactive$540.98
Elena Muellerclara_hansen@yahoo.comWest MoniquefortInactive$721.80
Thomas Hueleddie61@yahoo.comPalm HarborInactive$724.67
Miss Alicia Dachdwight1@hotmail.comEast BartholomefurtActive$488.60
Hayden Kozeyneha.watsica@hotmail.comMarksmouthActive$208.84
Sydnie Casperjeff.mayert14@hotmail.comSpinkaportActive$837.29
Ferne Kertzmannkarina.brown@gmail.comLake BrandyInactive$613.98
Vernie Boscoalvin12@yahoo.comLillieworthActive$315.91
Nadine Ullrich Sr.meta28@yahoo.comO'ConnermouthActive$758.84
Sheryl Conn Jr.lynne_koepp52@yahoo.comNorth FilomenavilleActive$144.71
Sibyl Greenholt-Feilarthur76@hotmail.comVictoriaActive$39.06
Isobel Breitenberglester_konopelski38@yahoo.comMelissatownActive$1,133.72
Total$9,200.24

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