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
INV001UnpaidBank Transfer$710.79
INV002PaidCredit Card$553.26
INV003UnpaidPayPal$339.78
INV004PendingBank Transfer$304.73
INV005UnpaidPayPal$344.96
INV006PaidBank Transfer$628.91
INV007UnpaidBank Transfer$950.47
Total$3,832.90

Simple

Users

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

NameTitleEmailRoleActions
Kenny DickensCustomer Markets Techniciankenny_dickens43@hotmail.comViewer
Bryant HarberLegacy Tactics Engineerbryant.harber56@yahoo.comMember
Helmer O'ConnellGlobal Program Directorhelmer_oconnell18@hotmail.comMember
Mitchell GleasonSenior Creative Agentmitchell.gleason@yahoo.comMember
Nona TremblayRegional Intranet Assistantnona.tremblay@gmail.comViewer
Abbie RitchieNational Response Developerabbie.ritchie@hotmail.comMember

Stacked on mobile

Users

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

NameRoleActions

Donald Willms

Forward Integration Executive

donald_willms86@gmail.com

Viewer

Nia Braun

Forward Directives Strategist

nia.braun@yahoo.com

Member

Amir Koss

Dynamic Configuration Consultant

amir.koss0@hotmail.com

Member

Izabella Stamm

Direct Infrastructure Supervisor

izabella.stamm12@yahoo.com

Admin

Chesley Gorczany

Chief Branding Technician

chesley.gorczany92@hotmail.com

Member

Tina Ward

National Mobility Executive

tina_ward@yahoo.com

Member

Users

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

NameRoleActions

Donny Abshire

National Tactics Specialist

donny_abshire@yahoo.com

Admin

Alexie Hilpert

Investor Data Planner

alexie_hilpert@hotmail.com

Admin

Hester Ernser

Direct Interactions Producer

hester.ernser20@hotmail.com

Viewer

Waino Terry

Senior Integration Orchestrator

waino_terry@yahoo.com

Admin

Frederique Collier

Direct Tactics Administrator

frederique.collier71@yahoo.com

Viewer

Ezekiel Stark-Zemlak

Internal Solutions Assistant

ezekiel_stark-zemlak40@hotmail.com

Viewer

Clayton Prohaska

District Web Strategist

clayton_prohaska83@hotmail.com

Member

Uriel Walsh

Lead Identity Administrator

uriel_walsh38@yahoo.com

Admin

Cody Batz

Dynamic Research Coordinator

cody.batz@gmail.com

Viewer

Salvatore Hessel

Legacy Division Liaison

salvatore.hessel@hotmail.com

Viewer

Douglas Stark

Product Integration Developer

douglas.stark@gmail.com

Admin

Ivan Sauer

Regional Accounts Coordinator

ivan.sauer65@yahoo.com

Viewer

Jennyfer Feest

Internal Security Director

jennyfer_feest@hotmail.com

Viewer

Glen Reynolds

Human Tactics Representative

glen.reynolds@yahoo.com

Viewer

Jaqueline Barrows

Senior Group Analyst

jaqueline_barrows@yahoo.com

Viewer

Louis Effertz

Senior Optimization Director

louis.effertz84@hotmail.com

Member

Carolanne Nader

District Solutions Representative

carolanne_nader@yahoo.com

Viewer

Ed Schneider

Forward Directives Representative

ed_schneider@hotmail.com

Member

Mack Gleichner

Internal Integration Director

mack.gleichner@hotmail.com

Member

Fae Hodkiewicz

Future Paradigm Technician

fae_hodkiewicz81@yahoo.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
Todd Gutkowski Sr.paulette_barton@yahoo.comJohanhavenInactive$1,039.09
Sharon Buckridgelaurine26@hotmail.comEverettInactive$779.19
Ms. Rosalia Daretraci_mueller49@hotmail.comPort AyanaInactive$436.86
Candice Kuvalisstefanie_glover@yahoo.comNorth FredActive$213.07
Gus Rathdonnie_cole18@gmail.comHannafurtInactive$864.99
Total$3,333.20

Basic table

Table with Images

NameEmailLocationStatusBalance
Lonie Smith
@ian_pollich47
tess.mclaughlin@hotmail.comDamienhavenInactive$357.66
Earline Pacocha Jr.
@rick_mcclure
marguerite_hammes48@yahoo.comLake MauricioInactive$1,095.10
Jaquelin Lemke
@shayna92
merle.denesik-stokes33@hotmail.comEast GertrudeActive$421.52
Douglas Douglas
@gretchen.runolfsson
tamara_funk@gmail.comMcCulloughsideInactive$125.65
Dashawn Green
@garrett41
jeanne_lubowitz34@gmail.comShauntonInactive$1,119.12

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Merritt Koepplorenza.green44@hotmail.comEast JoannsteadActive$1,076.63
Patti Gottliebmylene_maggio@gmail.comWest CovinaActive$138.42
Mr. Laurence Strosintillman78@yahoo.comLake AlexzanderInactive$531.95
Wm Lockmanmarguerite.murphy@yahoo.comFort FeliciaInactive$130.54
Sabina Hermannallan51@hotmail.comGarryviewInactive$392.72
Total$2,270.26

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Rickie Gutkowskiagustin.kihn@gmail.comWest VeraInactive$762.68
Kendall Emmerichrandall.wilderman56@gmail.comHilpertfieldInactive$1,092.41
Camille Torphyveronica17@yahoo.comLeonardboroInactive$354.53
Sylvester Konopelskiaaron_mcdermott38@gmail.comPollichburyActive$457.38
Sonja Legros-Schowalterminnie80@hotmail.comWest NyaInactive$1,059.86
Total$3,726.86

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Magnolia Keeblerpatricia_kub@gmail.comEugeneActive$134.55
Pablo Ullrichparker_nader14@hotmail.comGutmannburghInactive$1,187.51
Kathy Goodwin IIIsam_olson@yahoo.comGutkowskifortInactive$1,071.50
Zachary Hillsmildred_kuhlman77@hotmail.comErieActive$584.04
Laisha O'Connellnathaniel.heaney0@hotmail.comEast RodneyActive$830.64
Total$3,808.24

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
Sonia Reynoldsmarge48@gmail.comSouth PatrickActive$203.91
Mr. Rene Trompsabina_parker-franecki34@yahoo.comSchneiderlandActive$726.15
Jalyn Bartelljulio_ebert@yahoo.comWisozkcesterInactive$451.01
Keith Weber Jr.beaulah.jacobi@hotmail.comAbrahamfieldActive$193.11
Davin Roobmarina.kris-lakin16@yahoo.comZboncaklandActive$1,134.28
Total$2,708.46

Table with row selection

Card Table

NameEmailLocationStatusBalance
Lora Predovicsylvia1@gmail.comPort RavenActive$516.49
Elliot Adams IVbrittany.goldner37@gmail.comEast SophiemouthInactive$1,179.30
Yolanda Rogahnlolita98@hotmail.comWest EdgarActive$244.32
Erica Ritchiedock.swift@yahoo.comNatalieviewActive$52.09
Arturo Bogansofia99@yahoo.comCaguasActive$775.28
Total$2,767.48

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
Melba Connliliana.rohan@hotmail.comMaureenboroActive$615.67
Raoul Nicolas-Cruickshank MDanya.barton18@hotmail.comLynettevilleActive$974.46
Jane Turnermalcolm7@gmail.comPalm CoastInactive$67.71
Kadin Predovicdurward6@hotmail.comLake MatildaboroughActive$1,169.90
Anabel Bartolettilorena_schmitt25@hotmail.comHaywardInactive$591.07
Winifred Kihn DVMaubree1@hotmail.comSouth AureliaInactive$475.12
Leona Mantejulian43@hotmail.comTerrytownInactive$1,039.76
Daisy Carrollrenee.swift@yahoo.comJasonworthInactive$626.66
Luz Smithjoana17@gmail.comWest TriciafieldActive$239.35
Adrianna Oberbrunnermorgan91@hotmail.comJaskolskisteadActive$450.62
Cooper Ondrickaarne7@hotmail.comFort MayeActive$540.29
Bethany Maggiopaula_fadel@gmail.comGottliebmouthInactive$1,163.20
Cheryl Jacobsonlaury_stracke71@hotmail.comNorth MelanieActive$202.44
Junius Reingerjerome_cassin@gmail.comSioux FallsActive$186.55
Nikko Bruen IVlamar.jones8@yahoo.comTitusvilleInactive$333.37
Total$8,676.17

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