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$482.83
INV002UnpaidCredit Card$803.13
INV003UnpaidCredit Card$836.72
INV004PendingCredit Card$232.09
INV005UnpaidCredit Card$672.33
INV006PendingCredit Card$616.17
INV007PaidPayPal$797.90
Total$4,441.17

Simple

Users

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

NameTitleEmailRoleActions
Rosina BalistreriFuture Quality Representativerosina_balistreri48@yahoo.comAdmin
Terry LittleCentral Directives Architectterry.little@gmail.comAdmin
Ethel HyattInternational Group Consultantethel.hyatt93@gmail.comViewer
Carmen BatzCentral Division Designercarmen.batz83@hotmail.comAdmin
Doug SchowalterLegacy Paradigm Analystdoug_schowalter64@hotmail.comAdmin
Earnest WunschPrincipal Optimization Managerearnest_wunsch@gmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Bill West

Forward Identity Director

bill.west0@hotmail.com

Admin

Cody Muller

Senior Implementation Representative

cody_muller50@gmail.com

Viewer

Shany Koepp

Future Metrics Manager

shany.koepp87@hotmail.com

Member

Alejandro Goldner

Forward Paradigm Executive

alejandro.goldner@hotmail.com

Member

Kelly Mayert

Chief Assurance Technician

kelly.mayert@hotmail.com

Admin

Jeremiah Weissnat

Chief Optimization Orchestrator

jeremiah_weissnat7@gmail.com

Viewer

Users

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

NameRoleActions

Winston Bogisich

Regional Solutions Liaison

winston_bogisich37@yahoo.com

Viewer

Roberto Tremblay

Corporate Web Manager

roberto_tremblay78@hotmail.com

Viewer

Robyn Johnson

Human Paradigm Liaison

robyn_johnson74@hotmail.com

Admin

Pat Brown

Customer Tactics Coordinator

pat_brown91@hotmail.com

Member

Latoya Carter

Customer Tactics Agent

latoya_carter@gmail.com

Admin

Burley Orn

Principal Integration Assistant

burley.orn@yahoo.com

Admin

Elizabeth Kihn-Spinka

Senior Interactions Manager

elizabeth.kihn-spinka@hotmail.com

Viewer

Ruby Koepp

Product Usability Analyst

ruby.koepp@yahoo.com

Member

Jan Runolfsson

Future Division Designer

jan_runolfsson@yahoo.com

Viewer

Harry Swift

District Intranet Engineer

harry_swift42@hotmail.com

Admin

Jimmie Lockman

International Interactions Planner

jimmie_lockman37@gmail.com

Member

Carolyn Grimes

National Mobility Architect

carolyn_grimes@hotmail.com

Viewer

Berta Green

Forward Interactions Producer

berta.green@yahoo.com

Member

Herbert Marquardt

Central Interactions Technician

herbert.marquardt@gmail.com

Member

Fannie Pfeffer-Lang

International Mobility Specialist

fannie.pfeffer-lang@hotmail.com

Viewer

Miriam Howell

Legacy Branding Planner

miriam.howell@hotmail.com

Member

Luis Kertzmann

Investor Integration Technician

luis_kertzmann89@hotmail.com

Viewer

Leslie Christiansen

Corporate Paradigm Representative

leslie_christiansen@yahoo.com

Admin

Mariah Botsford

Future Identity Analyst

mariah.botsford@yahoo.com

Viewer

Wilson Lueilwitz-Olson

Direct Identity Officer

wilson_lueilwitz-olson73@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
Amber Bednarstephanie_wolf10@hotmail.comLoraboroughActive$649.65
Torrance Borer MDlila_hickle@hotmail.comAntonettachesterInactive$609.42
Dominic Schroedercayla_hartmann83@hotmail.comTampaInactive$189.41
Emelia Kreiger-Cassinclyde.friesen@gmail.comJanesvilleInactive$937.05
Shirley Hirthesophia12@yahoo.comLake GreentownActive$373.63
Total$2,759.16

Basic table

Table with Images

NameEmailLocationStatusBalance
Maxine Wehner
@rick78
marina_lesch24@gmail.comEastvaleActive$360.46
Mireya Wiza-Denesik
@emerson.auer74
caleb_swaniawski@gmail.comSan AngeloActive$897.51
Margie D'Amore
@lionel26
naomi69@yahoo.comPort AudracesterActive$269.69
Antwan Douglas PhD
@isabel78
zander73@gmail.comFort HalleInactive$972.84
Ms. Melanie Denesik-Collier
@clair_bradtke
bernice.lebsack@gmail.comO'KonvilleActive$757.06

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Darrel Raynornadia.goyette@hotmail.comGibsonboroActive$989.53
Otilia Reillyrosemary_oreilly@yahoo.comPort HardyActive$435.03
Ignatius Stokesdana54@hotmail.comSouth LaurineActive$399.21
Angel Lefflerron45@yahoo.comSouth ChristelleInactive$208.23
Ruben Bogisichshelly_toy-thiel@yahoo.comHudsonportActive$115.60
Total$2,147.60

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Mr. Sienna Pourosabby62@gmail.comLake MariahActive$32.74
Daisy Adamsstephen1@yahoo.comLeilastadActive$590.30
Beatrice Wehnerlindsay_nienow56@hotmail.comNew ShadburghInactive$367.52
Dora Muellerirma47@gmail.comAbeltonActive$564.69
Mrs. Angela Murrayrick77@gmail.comBraunsideActive$183.36
Total$1,738.61

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Russell Brakusdudley21@gmail.comDeSotoInactive$944.82
Reba O'Haradella.haley@gmail.comWaylonfortInactive$844.71
Jaylan Hilll-Runtekirstin_reichert@yahoo.comEast SabrynaActive$741.95
Lisa Oberbrunnerjessika40@hotmail.comWest KoleportActive$39.39
Mikayla Moenalexandra.conroy@yahoo.comLake MaynardInactive$489.32
Total$3,060.19

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
Dr. Lauriane Pfeffer Ileah81@yahoo.comPaulinefieldActive$217.72
Clementina Padberg Jr.kathy_gibson@hotmail.comCandidafurtInactive$236.17
Joel Prosaccomarcos70@hotmail.comOlatheActive$1,121.55
Joey Crookspercy13@gmail.comRossboroActive$487.63
Mittie Rosenbaumrashawn_feeney7@hotmail.comBettychesterActive$172.88
Total$2,235.95

Table with row selection

Card Table

NameEmailLocationStatusBalance
Diane Kuvalisrebekah.oconner-lehner@yahoo.comAnn ArborInactive$172.44
Candelario Schaefercamille.parisian@yahoo.comBurlesonInactive$950.36
Bridget Nikolaussven_hettinger94@gmail.comWest MabelshireInactive$524.67
Eldon Bergstrombryant42@hotmail.comWest ShannyActive$1,068.13
Alexis Dickens PhDcolin_wiegand@yahoo.comHaleytownActive$1,189.86
Total$3,905.46

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
Rosalie Schowaltereric69@hotmail.comFort SammieInactive$352.43
Brandon Heaneydella47@yahoo.comHartmannstadInactive$868.81
Hester Emmerich Isophie.altenwerth@yahoo.comWehnertownActive$517.71
Eleazar Rogahnkeyshawn.leannon@hotmail.comGoldasideActive$403.32
Alonzo Gislasonotha21@yahoo.comBorerchesterInactive$343.78
Doyle Harveycedric_lockman87@yahoo.comSchulistmouthInactive$819.50
Stephen O'Kontre48@yahoo.comHermanworthInactive$605.99
Naomi Raynordonald_lynch89@gmail.comAnkundingviewActive$322.94
Jermaine Turcottecleveland43@yahoo.comNorth SydnieboroughActive$105.92
Trever Marks-Runolfsdottirgretchen33@yahoo.comBurnsvilleInactive$625.43
Misty Terry Sr.kallie.spencer56@yahoo.comJadachesterActive$347.95
Lawrence Okunevajessie_ratke70@hotmail.comPort TevinActive$1,073.89
Alfredo Lakinpaul.heidenreich@yahoo.comEast TobinstadInactive$857.87
James Mitchellskylar_ortiz@yahoo.comAuerchesterActive$423.78
Mercedes Paucekmerritt_satterfield68@yahoo.comReillyvilleInactive$409.90
Total$8,079.22

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