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
INV001PendingBank Transfer$257.47
INV002PaidCredit Card$906.94
INV003PendingPayPal$264.84
INV004PendingBank Transfer$836.48
INV005PendingPayPal$736.56
INV006PendingCredit Card$888.86
INV007PendingPayPal$581.35
Total$4,472.50

Simple

Users

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

NameTitleEmailRoleActions
Elias SchneiderPrincipal Interactions Developerelias_schneider89@yahoo.comViewer
Estelle BeierProduct Tactics Producerestelle.beier31@yahoo.comViewer
Alyssa ConnForward Assurance Directoralyssa.conn91@hotmail.comMember
Charlene GoldnerDynamic Solutions Executivecharlene_goldner@yahoo.comMember
Monica ProhaskaFuture Research Associatemonica_prohaska@hotmail.comMember
Eleanora SchimmelInternal Group Specialisteleanora_schimmel@hotmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Clarence Botsford

Regional Operations Producer

clarence_botsford@yahoo.com

Member

Stewart Stehr

National Metrics Specialist

stewart.stehr@yahoo.com

Viewer

Pearl Wunsch

Global Implementation Director

pearl.wunsch98@yahoo.com

Admin

Gene Hackett

Investor Marketing Designer

gene_hackett@gmail.com

Viewer

Jaunita Rogahn

Senior Communications Facilitator

jaunita_rogahn47@hotmail.com

Member

Abraham Dickinson

Legacy Accountability Orchestrator

abraham.dickinson95@gmail.com

Member

Users

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

NameRoleActions

Sherry Jenkins

District Mobility Specialist

sherry_jenkins17@yahoo.com

Member

Peter Von

Internal Functionality Representative

peter.von90@yahoo.com

Admin

Jermaine Cronin

Corporate Usability Assistant

jermaine.cronin@gmail.com

Member

Katrina Hettinger

Investor Assurance Supervisor

katrina.hettinger@gmail.com

Member

Dalton Smitham

Central Accounts Assistant

dalton_smitham@gmail.com

Admin

Kolby Sporer

Forward Marketing Developer

kolby.sporer36@gmail.com

Member

Lindsey Gorczany

Human Communications Engineer

lindsey_gorczany58@gmail.com

Admin

Raul Aufderhar

Regional Marketing Manager

raul_aufderhar0@gmail.com

Member

Mona Hilll

Senior Integration Strategist

mona.hilll60@hotmail.com

Viewer

Norman Cummerata

Internal Infrastructure Administrator

norman.cummerata92@yahoo.com

Viewer

Melinda Greenfelder

Internal Identity Engineer

melinda.greenfelder@hotmail.com

Member

Julius Bayer

Principal Tactics Executive

julius.bayer39@gmail.com

Admin

Jerome Considine

Global Creative Manager

jerome_considine57@yahoo.com

Admin

Annabel Crist

Future Brand Associate

annabel.crist70@yahoo.com

Member

Jevon Blanda

Forward Branding Representative

jevon.blanda82@gmail.com

Viewer

Alana Witting

Senior Accountability Assistant

alana_witting@gmail.com

Member

Cierra Franey

Dynamic Program Analyst

cierra.franey@hotmail.com

Admin

Abelardo Kovacek

Senior Mobility Officer

abelardo.kovacek@hotmail.com

Admin

Trever Rutherford

Principal Configuration Officer

trever_rutherford95@yahoo.com

Viewer

Kenneth Parker

Customer Program Assistant

kenneth_parker@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
Dr. Malcolm Veumdianne_wolf@hotmail.comLockmanvilleActive$292.52
Ella Franeywade_roob@hotmail.comWest RussellfurtInactive$295.24
Harriet Pollicheunice.rice46@hotmail.comKonopelskistadInactive$452.37
Norberto Schmittdulce_okeefe-jacobs@gmail.comBlick-CarrollboroInactive$627.98
Soledad Beckerbethel36@hotmail.comAdanburghActive$1,137.92
Total$2,806.03

Basic table

Table with Images

NameEmailLocationStatusBalance
Kristen Brown
@rosetta.windler55
alanna_cruickshank@gmail.comHagenesportInactive$457.97
Mr. Demarcus Morar Jr.
@michelle13
murl_gutmann@hotmail.comPontiacActive$710.44
Ora Osinski
@lucy.hand34
myron_keebler@yahoo.comNorth LorettaActive$797.94
Savion Boehm
@candice.rau
darryl.hermiston@gmail.comCleveland HeightsInactive$741.00
Lillie Price-Schaden
@daron_glover
virginie29@gmail.comD'AmoremouthInactive$421.92

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Mr. Antonietta Schowaltertressie_treutel@yahoo.comAlsideActive$852.27
Patsy Bashirianbianka_torphy79@gmail.comPort FriedaInactive$559.82
Faith Gloverleif39@gmail.comNew ZackchesterInactive$209.95
Penny Cummeratagreg_hills-ondricka77@gmail.comKreigerfurtActive$273.70
Mattie Armstrongroselyn_christiansen58@gmail.comMinotInactive$181.13
Total$2,076.87

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Kylie Yundtbobbie_greenholt@hotmail.comBoyerboroActive$1,152.11
Garrett Wilkinsonclint_miller@gmail.comHarrisonviewInactive$39.87
Hannah Wunschcandida_mcclure@gmail.comNew OctavialandActive$516.90
Ralph Marks-Smithross.pouros14@yahoo.comPine HillsActive$641.88
Eva Millereva48@hotmail.comPort WoodrowportInactive$307.68
Total$2,658.44

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Deontae Stiedemannedward67@hotmail.comJuliofieldInactive$966.41
Tyrique Schultzlaurence_heaney39@yahoo.comWeimann-SawaynworthInactive$364.58
Carlton Grahammireya73@gmail.comYorkActive$452.64
Alejandro Cronatami.tromp@yahoo.comMonicaportInactive$733.11
Lori Padbergtremayne31@hotmail.comNorth ChandlerbergActive$883.33
Total$3,400.07

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
Eldon Hanegavin_grimes50@gmail.comLake WilburshireInactive$305.93
Afton Flatleycorrine.maggio@yahoo.comFort HeatherInactive$246.35
Giovanna Flatleyjazmyn72@yahoo.comFloydburyInactive$50.97
Linwood Macejkovicbradford.pfannerstill@hotmail.comDanielcesterActive$687.51
Newell Lueilwitzmadeline89@gmail.comNorth ChloefurtActive$327.47
Total$1,618.23

Table with row selection

Card Table

NameEmailLocationStatusBalance
Miss Bethel Kris Vlavina.schneider@yahoo.comEffertzshireInactive$189.82
Erik Wunschzachery_oreilly67@hotmail.comGerholdburghActive$890.59
Juanita Schowaltergrady0@hotmail.comRoobvilleInactive$69.38
Dalton Abbottjonathan36@yahoo.comLake MacysideInactive$564.51
Montana Parkersheryl_gleason59@gmail.comWest EthelynActive$362.37
Total$2,076.67

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
Lester Kautzer-Rice Jr.terrill66@hotmail.comNewport BeachInactive$1,120.00
Reynold Danielseth.vandervort@gmail.comWintheiserlandActive$838.24
Camylle Jacobskali_kshlerin@hotmail.comEast MarielletonInactive$1,113.65
Percy Hagenesjerod.durgan55@hotmail.comGilbertActive$863.08
Ollie Feilpaula_gislason@gmail.comReadingInactive$79.57
Sarah Moorefredrick78@gmail.comParkermouthInactive$994.29
Kelly Powlowski Sr.phyllis21@gmail.comPort JohnathonActive$727.22
Cullen Langoshjaniya62@hotmail.comBruenburyInactive$911.82
Joelle Davisrhoda.rowe@gmail.comGiaportInactive$72.35
Brenda Kemmergail_cremin@hotmail.comNorth MarlonActive$865.24
Becky Rutherfordbertram_emard67@gmail.comCrookstonInactive$659.75
Marian Koepp IIIladarius_jast@gmail.comWittingviewInactive$1,179.46
Frances Hoppe PhDmurray81@hotmail.comEast KevinActive$176.01
Randy Heidenreichblair.feest@gmail.comWest ArdellaInactive$504.10
Shari Raynorirvin.kautzer72@hotmail.comKayleyboroInactive$900.23
Total$11,005.01

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