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$168.39
INV002PendingBank Transfer$901.32
INV003PendingPayPal$111.00
INV004PaidPayPal$461.43
INV005PaidBank Transfer$215.27
INV006PaidPayPal$399.89
INV007PaidPayPal$396.48
Total$2,653.78

Simple

Users

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

NameTitleEmailRoleActions
Giovani HuelProduct Assurance Officergiovani_huel@yahoo.comAdmin
Shanel HermistonNational Markets Managershanel_hermiston70@yahoo.comMember
Elnora KozeyForward Interactions Executiveelnora.kozey@gmail.comViewer
Clifford LynchLegacy Branding Associateclifford.lynch@yahoo.comViewer
Greg LittleCustomer Integration Managergreg_little98@yahoo.comMember
Lyric SchadenForward Web Facilitatorlyric.schaden69@hotmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

D'angelo Dare

Chief Intranet Agent

dangelo_dare51@gmail.com

Member

Mellie Barrows

Principal Accountability Facilitator

mellie.barrows51@gmail.com

Admin

Korey Howe

Central Quality Liaison

korey_howe91@gmail.com

Admin

Julius Trantow

Dynamic Functionality Director

julius.trantow62@gmail.com

Member

Retta Hilll-Satterfield

Dynamic Metrics Facilitator

retta_hilll-satterfield@yahoo.com

Viewer

Frida Hoppe

Lead Metrics Producer

frida.hoppe31@hotmail.com

Admin

Users

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

NameRoleActions

Aniyah Lang

Chief Security Designer

aniyah.lang78@hotmail.com

Admin

Rudy Grady-Swift

Future Program Developer

rudy_grady-swift44@hotmail.com

Admin

Gerard Kihn

Investor Paradigm Technician

gerard.kihn65@yahoo.com

Member

Vaughn Steuber

Lead Brand Administrator

vaughn.steuber@gmail.com

Viewer

Leonora Schmeler

Forward Creative Representative

leonora_schmeler25@yahoo.com

Admin

Clinton Nienow

Chief Tactics Planner

clinton.nienow60@hotmail.com

Viewer

Glenna Nienow

Internal Division Supervisor

glenna_nienow57@hotmail.com

Member

Lawrence Koss

National Branding Facilitator

lawrence.koss34@hotmail.com

Viewer

Hermina Ritchie

Product Creative Agent

hermina_ritchie@hotmail.com

Viewer

Terrell Hane

Regional Applications Supervisor

terrell_hane29@yahoo.com

Viewer

Graciela Skiles-Mraz

Lead Metrics Agent

graciela_skiles-mraz57@hotmail.com

Admin

Kristin Jenkins

Regional Web Officer

kristin.jenkins48@hotmail.com

Member

Delores Boyer

Future Accountability Engineer

delores.boyer98@yahoo.com

Admin

Camila Ernser

Product Configuration Manager

camila.ernser@hotmail.com

Member

Lorenzo Schowalter

Legacy Program Designer

lorenzo_schowalter@yahoo.com

Admin

Petra Bechtelar

International Branding Liaison

petra_bechtelar@hotmail.com

Viewer

Genevieve Cronin

Dynamic Interactions Strategist

genevieve_cronin28@yahoo.com

Viewer

Casey Kerluke

Internal Implementation Coordinator

casey.kerluke@yahoo.com

Admin

Juston Toy

Forward Marketing Producer

juston_toy90@yahoo.com

Admin

Weldon Kertzmann

Direct Interactions Analyst

weldon.kertzmann@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
Alicia Pricefannie.leuschke14@gmail.comLouisville/Jefferson CountyActive$565.75
Hattie Pollichdaphnee_ziemann@yahoo.comWiegandcesterInactive$541.06
Jessie Dooleypascale97@hotmail.comFort CarminesteadInactive$695.86
Kristi Runolfsdottirenos_koss@hotmail.comPriceshireInactive$978.03
Mattie Wildermanrudolph80@hotmail.comEast WadeActive$549.68
Total$3,330.38

Basic table

Table with Images

NameEmailLocationStatusBalance
Kay Hodkiewicz
@jadon.hand83
jerry38@gmail.comLake CalilandActive$5.59
Ivan Mosciski III
@andres82
keyshawn_stehr61@hotmail.comJalonsteadActive$949.65
Molly Champlin
@vidal.windler66
mathilde.ryan68@yahoo.comFort VioletteActive$255.96
Vickie Durgan
@ora.koss70
davonte97@hotmail.comWest ModestofortActive$1,028.36
Manuel Ruecker-Boyle
@griffin0
norval_balistreri@gmail.comLake ArdellaActive$203.72

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Donald Krajcikharvey79@hotmail.comSouth MarcelleInactive$901.08
Dr. Roberto Leuschkevalentin_denesik75@hotmail.comWest MarianaActive$785.71
Glenda Wilkinson-Wehnerdante95@gmail.comConorshireInactive$165.91
Kristi Kautzerkirstin34@gmail.comFort MarcellaInactive$240.76
Lamar Kerlukehoracio.deckow@yahoo.comWest CarlostadInactive$907.83
Total$3,001.29

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Candice Leschsigrid_jones52@yahoo.comCedar ParkInactive$1,068.14
Mr. Erick Ortizmichael_schamberger16@hotmail.comSauerboroInactive$11.27
Beulah Krishenriette_anderson3@gmail.comMannshireInactive$23.32
Dr. Mario Kihntravis.fadel75@gmail.comNorth StantonstadInactive$423.61
Dr. Gilberto Klockorobin76@yahoo.comAndersonstadInactive$702.27
Total$2,228.61

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Latoya Abshireleland59@yahoo.comKaileeshireActive$948.16
Marcus Millszander77@hotmail.comShreveportActive$194.25
Mr. Greg Kemmerangelica79@yahoo.comLake EnidActive$635.38
Milton Cartwrightwinnifred_boyer45@hotmail.comPort ParissteadInactive$1,065.05
April Thompsonlayla50@hotmail.comCleoraburyActive$901.26
Total$3,744.10

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
Boyd Towne Sr.eldora_nienow@gmail.comMetzfieldActive$26.28
Leslie Mrazelody6@hotmail.comSouth DeclanworthInactive$1,164.02
Jesus Rolfsonchandler.okeefe@hotmail.comMohammedviewInactive$210.48
Richard Hodkiewiczkirstin15@yahoo.comFort TrevionActive$346.22
Sylvia Williamsonjaylin84@yahoo.comNew NelletonActive$838.78
Total$2,585.78

Table with row selection

Card Table

NameEmailLocationStatusBalance
Casey Frami IIkara_metz54@hotmail.comSouth AntoinetteboroInactive$570.21
Erika Feeneyrupert_mosciski-rath@hotmail.comSanta RosaInactive$65.30
Wendell Colewebster_emard85@yahoo.comWest DurwardInactive$234.58
Derrick Deckowvanessa.moen@hotmail.comSouth ValentineviewActive$418.97
Dr. Woodrow Kiehn MDmary.ruecker@hotmail.comSpinkaburyInactive$617.45
Total$1,906.51

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
Audrey Muellerdevin_west@gmail.comWest LoyalActive$647.31
Paulette Raynorvivianne_ziemann-konopelski@yahoo.comNew VeronaburghInactive$1,036.96
Guy Gibsonmarlee53@yahoo.comSouthavenInactive$241.37
Nick Leannonrita_keebler@gmail.comKittyfieldInactive$553.12
Geraldine Granteliza65@yahoo.comStammsteadActive$1,026.08
Byron Simonislionel_muller@hotmail.comLake CadetonActive$1,084.97
Rosa O'Connellbrannon.spencer27@gmail.comAnastaciolandInactive$393.52
Erick Dietrichestel.zieme@yahoo.comMacportActive$175.06
Mr. Roman Creminleora.goyette88@hotmail.comEast LamontworthInactive$521.30
Melody Haleyclement.kassulke13@hotmail.comWillmstonInactive$36.22
Homer Emardcoty_dickinson@hotmail.comSpringfieldInactive$1,076.93
Julian Reichertleila_terry76@gmail.comTillmanhavenActive$443.27
Juanita Paucekowen_ruecker@yahoo.comBurkeActive$193.94
Raymond Lehneryasmine_heidenreich@gmail.comCarterviewActive$843.04
Sue Croninestelle.hudson@yahoo.comWest LazaroviewActive$304.43
Total$8,577.52

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