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
INV001PendingCredit Card$501.41
INV002PaidPayPal$724.39
INV003PaidBank Transfer$171.15
INV004PaidCredit Card$721.29
INV005UnpaidBank Transfer$280.46
INV006UnpaidPayPal$490.83
INV007UnpaidPayPal$567.70
Total$3,457.23

Simple

Users

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

NameTitleEmailRoleActions
Justin NikolausInternational Metrics Strategistjustin.nikolaus49@hotmail.comMember
Nicole JaskolskiChief Directives Liaisonnicole_jaskolski60@hotmail.comViewer
Johnathan JacobsonPrincipal Data Consultantjohnathan.jacobson@hotmail.comViewer
Norman LynchCorporate Intranet Techniciannorman.lynch@hotmail.comMember
Larry KautzerPrincipal Division Producerlarry_kautzer@gmail.comAdmin
Horace TreutelInternal Intranet Strategisthorace.treutel@yahoo.comViewer

Stacked on mobile

Users

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

NameRoleActions

William Prosacco

Human Group Technician

william.prosacco88@hotmail.com

Member

Valentin Weissnat

International Functionality Director

valentin_weissnat10@gmail.com

Member

Dolores Donnelly

National Communications Developer

dolores_donnelly@yahoo.com

Viewer

Bailee Kuphal-Anderson

Human Intranet Orchestrator

bailee.kuphal-anderson@hotmail.com

Viewer

William Erdman

Investor Division Producer

william.erdman94@hotmail.com

Viewer

Carmelo Weber-Towne

Internal Identity Administrator

carmelo.weber-towne@gmail.com

Viewer

Users

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

NameRoleActions

Alec VonRueden

Customer Directives Technician

alec_vonrueden@gmail.com

Admin

Rodney Deckow

Central Web Designer

rodney_deckow@hotmail.com

Admin

Karla Champlin

Human Integration Producer

karla_champlin@yahoo.com

Admin

Delores Ernser

International Infrastructure Facilitator

delores.ernser@hotmail.com

Member

Estelle Block

Regional Accounts Facilitator

estelle.block22@gmail.com

Admin

Noah Armstrong

Internal Quality Agent

noah.armstrong45@hotmail.com

Admin

Christina Quigley

Legacy Web Agent

christina.quigley18@yahoo.com

Admin

Enrique Rogahn

National Accountability Technician

enrique.rogahn10@gmail.com

Member

Lincoln Senger

Regional Configuration Consultant

lincoln_senger@hotmail.com

Member

Peggy Gulgowski

Corporate Interactions Administrator

peggy_gulgowski15@gmail.com

Viewer

Yvette Kohler

Central Accountability Supervisor

yvette.kohler20@hotmail.com

Admin

Patti Mitchell

Internal Markets Orchestrator

patti.mitchell@hotmail.com

Member

Mervin Runte

Global Optimization Specialist

mervin_runte59@gmail.com

Viewer

Vicki McGlynn

Investor Solutions Technician

vicki_mcglynn@yahoo.com

Viewer

Waldo Ritchie

District Identity Developer

waldo_ritchie@hotmail.com

Admin

Danny Beer

Direct Markets Liaison

danny.beer83@yahoo.com

Member

Glenn Tromp

Forward Markets Producer

glenn.tromp48@hotmail.com

Member

Jalon Kassulke-Schulist

Central Data Administrator

jalon.kassulke-schulist@hotmail.com

Member

Rey Hauck

Internal Research Liaison

rey.hauck@gmail.com

Admin

Geoffrey Wolff

Chief Data Agent

geoffrey_wolff@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
Alayna Robertslaron_white@gmail.comOrntownActive$940.25
Asia Mohrjaiden.hilpert4@hotmail.comColefurtInactive$216.04
Charlotte Lakinjanis.cormier@hotmail.comNorth GabriellefieldActive$874.19
Breana King Vamber_grimes79@gmail.comSouth DavesideActive$808.75
Elroy Uptonjonathon.nader-boyer70@yahoo.comHirthe-KilbackchesterInactive$949.19
Total$3,788.42

Basic table

Table with Images

NameEmailLocationStatusBalance
Jaden Reinger
@rosemarie52
irving_feeney30@hotmail.comLeschsteadActive$574.18
Ms. Caroline Kunde V
@shelly9
lisandro_senger75@yahoo.comAmesInactive$96.61
Ismael Zieme
@ian_rippin69
renee0@gmail.comNorth FaeActive$816.83
Mr. Elody Schoen DVM
@yasmine.hayes24
vincenza_west58@hotmail.comCoachellaInactive$1,065.65
Shane Schumm II
@ismael93
aurelia22@yahoo.comAnnetteportInactive$33.11

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Mrs. Roberta Kohler-Hoegercasandra.pfannerstill@gmail.comRolfsonburghActive$675.32
Michelle Crooksdolores_bayer54@yahoo.comGardenaActive$317.75
Kate Barrowspaolo.ritchie@gmail.comEast MarietonInactive$768.77
Rochelle Tromphobart_boehm98@hotmail.comLake AronInactive$61.87
Parker Powlowski-Jenkinsleonel_hansen@gmail.comNew YorkActive$585.43
Total$2,409.14

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Erik Schadenstephon_hamill@yahoo.comChaddburyActive$871.09
Novella Runte IVmarisa_kirlin@gmail.comBlickviewActive$1,051.86
Bryan Binsalma69@gmail.comHermannfieldInactive$436.21
Phillip Nienowbart_greenholt@hotmail.comOraburghActive$1,134.75
Jerrod O'Keefedarrin.moen19@yahoo.comLake AlbertabergActive$163.44
Total$3,657.35

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Nick Beerjensen_hauck-zulauf@hotmail.comRapid CityInactive$1,005.67
Elwin Hahnguy.green39@gmail.comBobbieportInactive$675.49
Margie Zemlakzachary.ritchie@gmail.comRochester HillsActive$300.86
Heather Jerdejoanne.bartell-quitzon90@yahoo.comHoppeburyInactive$959.07
Mrs. Leah Oberbrunnergerard_collins@gmail.comBernhard-HettingerboroInactive$625.54
Total$3,566.63

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
Glen Pfannerstilltyler_weimann-wisoky70@hotmail.comParkerActive$464.01
Hector Kutchtravis.glover31@gmail.comBethesdaInactive$882.72
Marie Stantonlaila_lynch@gmail.comWest ShakirahavenActive$986.09
Florida Stehrleatha.turner@yahoo.comSouth GraysonsteadActive$201.19
Dr. Freda Leuschkefurman.mckenzie@yahoo.comHugomouthInactive$749.56
Total$3,283.57

Table with row selection

Card Table

NameEmailLocationStatusBalance
Alvin Mertzcasandra_wilkinson@gmail.comSchneiderburyActive$763.51
Mr. Enrique Lindgrenjacob.cole@hotmail.comHialeahInactive$64.64
Deborah Pricececelia7@gmail.comPort VeronicaworthInactive$844.82
Marilou Berge Imike_glover92@gmail.comWest DestineeInactive$749.39
Lana Bednarcassandre25@hotmail.comFort ChelsiesideInactive$434.06
Total$2,856.42

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
Chelsey Effertzmajor.fay15@yahoo.comFort JudahtownInactive$470.08
Leonie Kingbetty.nicolas-mcclure@gmail.comDeloresfieldInactive$254.76
Erma Gibsoncody.leuschke@yahoo.comJosetonActive$1,095.46
Heather Spinkajosefa4@hotmail.comJastboroughActive$44.89
Dr. Tre Ryanrosario29@hotmail.comReichertfortActive$1,122.60
Salma Jenkinsblanca_howe7@yahoo.comPerrisActive$321.78
Viva Denesikethel_haag59@yahoo.comEast RexmouthInactive$902.93
Jocelyn Boylenatasha.langworth@yahoo.comCruzlandActive$4.45
Melvin Fritschorville.pfannerstill22@gmail.comWest JoycetownInactive$505.84
Preston Fadelcandelario29@gmail.comJaidenlandActive$1,024.86
Clemens Blandamaybelle_stokes57@yahoo.comWest AltonActive$164.57
Ardith Kesslerzachary.lind93@gmail.comNew NorvalInactive$202.39
Hazel Mullerpearlie44@hotmail.comNorth EmiliovilleActive$1,092.22
Jacob Schoenleah_graham@gmail.comPort ChazActive$259.03
Dr. Jennie Gottliebrufus_fahey69@gmail.comKeeblershireActive$344.84
Total$7,810.70

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