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$368.07
INV002PendingPayPal$777.47
INV003PaidCredit Card$245.69
INV004UnpaidCredit Card$182.01
INV005PendingBank Transfer$950.74
INV006PendingCredit Card$281.20
INV007PaidPayPal$651.48
Total$3,456.66

Simple

Users

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

NameTitleEmailRoleActions
Simone SanfordRegional Solutions Managersimone_sanford@yahoo.comViewer
Jevon FlatleyCustomer Group Officerjevon.flatley68@gmail.comMember
Elisabeth BergstromDistrict Intranet Directorelisabeth.bergstrom7@hotmail.comViewer
Noble QuigleyLegacy Optimization Producernoble_quigley54@hotmail.comAdmin
Zita Kautzer-HarveyLead Accounts Strategistzita.kautzer-harvey50@gmail.comAdmin
Jesus CronaInternational Configuration Supervisorjesus.crona10@yahoo.comMember

Stacked on mobile

Users

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

NameRoleActions

Lessie Strosin

Customer Division Technician

lessie_strosin@yahoo.com

Viewer

Chanel Doyle

Product Markets Supervisor

chanel_doyle2@yahoo.com

Member

Stanley Casper

Human Metrics Architect

stanley_casper45@yahoo.com

Viewer

Magali Denesik

Regional Response Agent

magali_denesik@gmail.com

Member

Wellington Cremin

District Creative Representative

wellington_cremin@yahoo.com

Member

Anibal Wunsch

Lead Markets Liaison

anibal.wunsch@hotmail.com

Admin

Users

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

NameRoleActions

Meghan Lebsack

District Creative Coordinator

meghan_lebsack95@yahoo.com

Admin

Adah Schuppe

Legacy Quality Administrator

adah_schuppe67@hotmail.com

Member

Lulu Hand

Legacy Data Associate

lulu.hand@gmail.com

Viewer

Sasha Bernier

Lead Research Executive

sasha.bernier51@yahoo.com

Member

Anastasia Fadel

National Web Planner

anastasia.fadel79@hotmail.com

Member

Ardith Buckridge

Internal Functionality Associate

ardith_buckridge@yahoo.com

Admin

Cicero Windler

Central Data Supervisor

cicero.windler@yahoo.com

Member

Lincoln Ritchie

District Usability Administrator

lincoln_ritchie19@gmail.com

Admin

Jaiden Beahan

Forward Branding Analyst

jaiden.beahan@gmail.com

Member

Mack Durgan

Product Research Analyst

mack_durgan@gmail.com

Viewer

Frederique Lesch

Dynamic Solutions Producer

frederique_lesch45@hotmail.com

Admin

Ari Mante

Customer Communications Assistant

ari.mante@hotmail.com

Admin

Freida Kunde

Corporate Program Technician

freida.kunde@yahoo.com

Member

Mathias Kuhlman

Product Creative Consultant

mathias.kuhlman@yahoo.com

Admin

Valentin Rowe

Principal Accounts Administrator

valentin.rowe25@yahoo.com

Admin

August Bailey

Investor Operations Orchestrator

august_bailey@hotmail.com

Viewer

Dandre Quigley

National Metrics Technician

dandre.quigley46@gmail.com

Viewer

Heath Adams

Legacy Program Orchestrator

heath_adams@yahoo.com

Viewer

Joshuah Hegmann

Forward Web Specialist

joshuah_hegmann74@yahoo.com

Admin

Delilah Gislason

Principal Group Representative

delilah.gislason56@hotmail.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
Greg Casper DVMangelica.hirthe@gmail.comEast MonroechesterInactive$324.18
Jennie Swaniawskirasheed_grimes@gmail.comNew AidanInactive$914.92
Blanca Weissnatdessie_stracke@hotmail.comTrompvilleInactive$762.44
Dr. Darryl Schroedernakia51@yahoo.comDetroitInactive$718.90
Stephen Kutchevans21@hotmail.comFort AlbertachesterActive$235.51
Total$2,955.95

Basic table

Table with Images

NameEmailLocationStatusBalance
Silvia Lindgren
@charley_robel
horacio_lang@hotmail.comRahulworthInactive$948.65
Dexter Tillman
@daryl_hermann
gust3@gmail.comNorth AnnabelfurtActive$826.31
Kurt Gleichner
@arvel97
mercedes_strosin@hotmail.comFort EinarchesterActive$587.51
Jody Howe IV
@justus.haley83
alivia_cummerata85@hotmail.comWest HayleysteadActive$1,067.63
Mable Gorczany
@lenore4
terrell.howell@gmail.comKunzeburghInactive$977.83

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Cecil Dickensbrennon17@yahoo.comLittelshireActive$388.12
Madeline Streichyasmin.thiel49@gmail.comLoweburyActive$31.43
Elisa Luettgenrachelle_bailey@yahoo.comTillmanshireInactive$389.23
Darren Stammdarrion_schimmel@gmail.comLawtonActive$920.87
Drew Tromplorena.abbott@hotmail.comBarrowssteadActive$477.45
Total$2,207.10

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Cathy Keelingcheyenne86@yahoo.comKihnmouthActive$149.37
Jamie Jonesrhett86@yahoo.comKuphalchesterInactive$596.87
Dr. Wilson Boehmsamantha.halvorson85@yahoo.comRosarioworthActive$87.43
Alfred Mosciskiestefania.legros@yahoo.comWest BrockboroughActive$104.98
Dr. Holly Jenkins Sr.jewell_abernathy@hotmail.comFort ObiefieldInactive$514.26
Total$1,452.91

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Mr. Vernon Runolfsdottirsyble24@hotmail.comWest KurtisfieldActive$320.83
Ivan Heidenreichmelvin_lueilwitz0@hotmail.comMariannemouthInactive$573.37
Gregg Quitzonbettie.ondricka35@yahoo.comSchoensideActive$836.58
Cedric Whitedorris_harris@hotmail.comCatonsvilleActive$404.00
Clyde Williamsonisobel96@yahoo.comFort LeliaActive$504.55
Total$2,639.33

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
Jenny Littleguido81@hotmail.comMorissettesteadActive$897.97
Colin Bernhardrandal.klein66@gmail.comSipesportInactive$652.86
Bonnie Waelchibernhard_orn@gmail.comAnaheimInactive$878.05
Anne Roobryleigh35@yahoo.comJaydemouthActive$410.96
Shaun Mannstephania94@gmail.comTorphavenInactive$180.32
Total$3,020.16

Table with row selection

Card Table

NameEmailLocationStatusBalance
James Kunzearon66@gmail.comJadeportInactive$952.40
Jordan Terryrose_ondricka98@yahoo.comLake ErnestinabergInactive$61.59
Ruth Borerharold_schowalter@gmail.comSchinnersteadInactive$622.11
Alejandro Funkshyanne62@hotmail.comSchinnershireInactive$1,160.18
Roger Simonis-Okunevakennith80@yahoo.comWest ElroyfortActive$418.22
Total$3,214.50

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
Randal Reicheljohnnie_koch@gmail.comMillertonInactive$1,124.06
Arturo Friesengregoria63@yahoo.comCamronmouthInactive$660.63
Alton Denesik-Trompriley_quitzon@yahoo.comWest AaronburghActive$426.32
Danny Yostrubie_stoltenberg39@gmail.comLake OravilleActive$363.35
Harriet Mulleraniya41@yahoo.comNorth ConnorcesterActive$853.60
Nathan Rueckermeghan77@hotmail.comBoscoburghInactive$746.31
Jonathon Wehnerjarret.lubowitz-howell@yahoo.comShemarfurtInactive$194.22
Wilbert Robertselaina_cronin82@gmail.comLake GunnarburyInactive$1,150.41
Juana Keeblerdelta.davis42@yahoo.comSofiaworthActive$252.90
Olga Bauchlisa_rowe94@hotmail.comCorkeryfieldActive$327.42
Melvin Deckowmavis.collier@hotmail.comAbdullahstadActive$824.18
Phillip Koeppamie.hartmann@yahoo.comPort HildegardInactive$900.69
Bradford Mertzvilma_cummerata@hotmail.comKreigertonInactive$325.80
Nina Hesseladolph.farrell60@hotmail.comWest GeovanybergActive$523.95
Randy Krajcikadaline_heaney@gmail.comHoustonInactive$495.88
Total$9,169.72

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