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
INV001PaidBank Transfer$393.69
INV002UnpaidPayPal$975.39
INV003PaidBank Transfer$368.61
INV004UnpaidCredit Card$840.49
INV005PaidBank Transfer$672.88
INV006UnpaidBank Transfer$906.34
INV007UnpaidBank Transfer$857.44
Total$5,014.84

Simple

Users

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

NameTitleEmailRoleActions
Beryl CronaNational Creative Consultantberyl.crona@hotmail.comMember
Kennedy HayesDynamic Accountability Coordinatorkennedy_hayes79@gmail.comAdmin
Kimberly ColeForward Group Strategistkimberly_cole@yahoo.comAdmin
Marion SchmittSenior Factors Producermarion.schmitt@yahoo.comMember
Megane Wilderman-GradyDynamic Marketing Directormegane_wilderman-grady@hotmail.comViewer
Hadley DurganProduct Paradigm Plannerhadley_durgan@yahoo.comViewer

Stacked on mobile

Users

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

NameRoleActions

Merlin Berge

Investor Research Director

merlin_berge23@gmail.com

Admin

Holden Bartell

Chief Optimization Architect

holden.bartell26@hotmail.com

Member

Carleton Trantow

Legacy Applications Analyst

carleton.trantow@hotmail.com

Viewer

Granville Anderson

Customer Data Orchestrator

granville_anderson@yahoo.com

Member

Joy Dicki

Lead Data Consultant

joy_dicki@gmail.com

Admin

Shanelle Paucek

Central Infrastructure Specialist

shanelle_paucek83@yahoo.com

Viewer

Users

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

NameRoleActions

Tobin Erdman

Customer Web Liaison

tobin_erdman47@hotmail.com

Member

Stella Barrows-Weber

Senior Assurance Coordinator

stella.barrows-weber26@gmail.com

Viewer

Golden Romaguera

Global Mobility Technician

golden_romaguera58@gmail.com

Viewer

August Fahey

Principal Program Developer

august_fahey32@hotmail.com

Admin

Boris Collier

Future Response Assistant

boris.collier22@hotmail.com

Viewer

Ashlee Fahey-Goyette

Forward Intranet Representative

ashlee.fahey-goyette54@gmail.com

Viewer

Kayley Larkin

Dynamic Security Officer

kayley.larkin@gmail.com

Member

Daren Kulas

Central Tactics Technician

daren.kulas77@yahoo.com

Admin

Kimberly Bogisich

District Infrastructure Strategist

kimberly_bogisich39@yahoo.com

Viewer

Gerald Crona

Senior Security Director

gerald_crona@hotmail.com

Member

Jovany Fay

Chief Response Agent

jovany_fay@hotmail.com

Admin

Braxton Fay

Principal Accountability Manager

braxton_fay80@hotmail.com

Admin

Annamarie Adams

Forward Mobility Manager

annamarie_adams@gmail.com

Admin

Renee Dickinson-Jaskolski

Dynamic Optimization Consultant

renee_dickinson-jaskolski@hotmail.com

Member

Cali O'Keefe

National Branding Developer

cali_okeefe@yahoo.com

Admin

Joaquin Goldner

Regional Metrics Designer

joaquin_goldner@gmail.com

Viewer

Jeramie Hilpert

Investor Assurance Liaison

jeramie_hilpert39@hotmail.com

Viewer

Charity Considine

Lead Tactics Technician

charity.considine99@yahoo.com

Member

Angelita Jacobson

Customer Metrics Assistant

angelita_jacobson51@gmail.com

Admin

Breanne Sanford

Forward Directives Producer

breanne.sanford@gmail.com

Viewer

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
Clifford Bruen-Strosinwade_bahringer@yahoo.comWest MyrnavilleActive$972.15
Mae Trantowjalen_goldner72@gmail.comNew MosesstadActive$772.83
Edmond Schroederalfredo.prosacco@yahoo.comLambertcesterInactive$996.42
Krystal Bergnaum Icortez_murphy@hotmail.comFort ShanabergActive$217.18
Harold Schmittleola57@yahoo.comJohns CreekActive$630.69
Total$3,589.27

Basic table

Table with Images

NameEmailLocationStatusBalance
Erica Rath
@russ.connelly93
alysha.heidenreich@hotmail.comPort CarolyneInactive$77.18
Dr. Susan Wisozk-Hansen
@giovanny.koelpin61
claud92@yahoo.comHacienda HeightsActive$649.43
Claire Schmitt
@tristian_emard
kelly.botsford49@yahoo.comMetafortActive$1,114.13
Merle Doyle
@toney20
jakayla39@yahoo.comNew DanialInactive$690.21
Wanda Murray
@birdie_schowalter
francisco65@hotmail.comSchneiderhavenInactive$995.51

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Mr. Billy Huelsbrice.weissnat27@yahoo.comNorth AlbertfortInactive$954.95
Jose Paucekadah.batz40@gmail.comLake DanniefortInactive$826.54
Julius O'Haradesmond_gottlieb@yahoo.comFeliciaportActive$327.92
Austin Harriszachary_effertz@yahoo.comIndependenceActive$718.31
Wilbur Koelpin-Trantowdolly10@yahoo.comFort KeatonchesterInactive$1,187.57
Total$4,015.29

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Edmund Schusterroxane_franey@hotmail.comLockmansideInactive$401.69
Sergio Danielgarnet_pfeffer7@yahoo.comEast ShadInactive$817.16
Lola Watersgabriel66@hotmail.comEast AlexanderInactive$421.26
Terri Kozeyhailey_schaefer-hintz@gmail.comSan JuanActive$609.49
Dr. Corey Schinnerflorida_dietrich82@gmail.comNorth RoselyntownActive$1,123.56
Total$3,373.16

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Charlene Erdmankrystal35@hotmail.comMullervilleInactive$259.29
Forrest Effertzkoby18@yahoo.comKautzerfortInactive$1,102.43
Marcus Mitchelldewitt_witting@hotmail.comWest HeathActive$607.78
Geoffrey Abernathyshanel_ortiz-romaguera@yahoo.comSouth RosalynActive$540.32
Herbert Hammes PhDflavie.considine@hotmail.comSchultzworthActive$283.36
Total$2,793.18

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
Kent Bahringer Jr.tyrique.howell66@yahoo.comMercedActive$292.42
Jonathan Pacocha-Reichert IVcecile6@hotmail.comFort RafaeltownActive$1,057.51
Delores Schiller-Veumeliseo.goodwin87@gmail.comMcGlynnhavenActive$43.62
Steve Russeltate28@hotmail.comWest LafayetteActive$774.58
Georgia Emmerichlazaro75@gmail.comHammesportInactive$990.70
Total$3,158.83

Table with row selection

Card Table

NameEmailLocationStatusBalance
Cornelius Brakusfelicity92@yahoo.comSouth SalvatoresteadActive$1,160.31
Billy Rodriguezvicente_pollich18@gmail.comLake CaylaInactive$115.18
Vera Marvinlonzo44@yahoo.comNew ReyesActive$297.39
Felix Bernierkurtis78@gmail.comSouth RusselchesterActive$626.23
Dr. Brandi Jonesrory_mckenzie47@yahoo.comElizabethtownActive$120.64
Total$2,319.75

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
Cecelia Kunzeisabella_wiegand@hotmail.comNorth NestorActive$1,164.22
Dr. Ella Hermannaudrey_murray90@hotmail.comLake JaydaInactive$1,084.86
Jacob Jonesderick.sawayn@yahoo.comSouth NicolasInactive$305.01
Miriam Cronaelisabeth.lakin40@gmail.comNorth RevaActive$239.74
Rebecca Kertzmannlorna_beatty51@yahoo.comLake LyricActive$732.14
Patti Steuberrosemarie.waters4@hotmail.comTulareActive$623.39
Amber Sauer-Blandachelsie.moen32@gmail.comLake ElisabethActive$707.57
Keith Goldneryazmin64@hotmail.comSouth OralActive$839.74
Juan Wunschlilly76@yahoo.comFort FreemanfurtActive$721.46
Tony Emmerichmeredith86@yahoo.comJastportInactive$511.06
Anita Braungayle.cremin@hotmail.comAntoniaworthActive$1,052.92
Gary Ullrichtyler.homenick88@yahoo.comNorth KeltonfortActive$1,177.47
Jody O'Harapearl46@hotmail.comLlewellynshireInactive$249.51
Allison Auerconstance_lebsack-crona88@gmail.comLake AhmedInactive$1,091.55
Kevin Balistrerinewton57@hotmail.comFort ZechariahboroInactive$126.85
Total$10,627.49

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