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
INV001UnpaidCredit Card$563.35
INV002PaidBank Transfer$319.38
INV003UnpaidBank Transfer$275.86
INV004PendingPayPal$605.70
INV005UnpaidBank Transfer$187.88
INV006PaidCredit Card$308.29
INV007PendingCredit Card$983.47
Total$3,243.93

Simple

Users

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

NameTitleEmailRoleActions
Myles PadbergPrincipal Accounts Specialistmyles.padberg42@yahoo.comViewer
Ike JacobsCustomer Assurance Assistantike_jacobs@hotmail.comAdmin
Hulda UllrichSenior Division Architecthulda.ullrich62@yahoo.comAdmin
Wilfrid BednarFuture Integration Liaisonwilfrid.bednar@hotmail.comMember
Vicky CrooksInternational Functionality Producervicky_crooks@yahoo.comViewer
Johnpaul BoehmCentral Assurance Plannerjohnpaul_boehm@gmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Tillman Bailey-Lakin

Senior Infrastructure Technician

tillman_bailey-lakin44@yahoo.com

Viewer

Alessandro Bosco

Dynamic Identity Specialist

alessandro_bosco66@yahoo.com

Member

Doris Wolff

Legacy Usability Director

doris_wolff@hotmail.com

Admin

Ophelia Douglas

Global Program Architect

ophelia.douglas88@yahoo.com

Viewer

Jerome Carroll-Paucek

Principal Security Developer

jerome_carroll-paucek6@gmail.com

Viewer

Jadyn Breitenberg

Chief Markets Orchestrator

jadyn_breitenberg@hotmail.com

Member

Users

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

NameRoleActions

Ambrose Miller-Pollich

Direct Identity Orchestrator

ambrose.miller-pollich8@hotmail.com

Viewer

Milo Kutch

Direct Usability Manager

milo.kutch90@yahoo.com

Member

Geoffrey Ernser

Chief Implementation Planner

geoffrey.ernser@yahoo.com

Viewer

Zachery Trantow

Customer Factors Facilitator

zachery_trantow@gmail.com

Admin

Alfredo Lehner

Principal Configuration Planner

alfredo.lehner@gmail.com

Viewer

Destany Gleason

Central Division Consultant

destany.gleason36@hotmail.com

Viewer

Maegan Baumbach

Investor Group Coordinator

maegan.baumbach24@hotmail.com

Member

Althea Mante

Future Accounts Facilitator

althea_mante@hotmail.com

Member

Mara Heathcote

Forward Configuration Technician

mara.heathcote@gmail.com

Admin

Alexie Armstrong

Internal Tactics Supervisor

alexie_armstrong29@gmail.com

Member

Elian Bahringer

Forward Operations Assistant

elian_bahringer43@hotmail.com

Member

Alexandrea Moore

Internal Research Liaison

alexandrea.moore46@hotmail.com

Member

Aubrey Armstrong

Global Research Architect

aubrey.armstrong@hotmail.com

Admin

Braulio Kiehn-Berge

Direct Marketing Specialist

braulio_kiehn-berge85@yahoo.com

Viewer

Jamir Casper

Investor Brand Designer

jamir_casper80@gmail.com

Viewer

Gino Senger

Corporate Operations Officer

gino.senger@yahoo.com

Viewer

Coleman Willms

Future Marketing Coordinator

coleman.willms@yahoo.com

Member

Miracle Hirthe

Product Mobility Analyst

miracle_hirthe29@gmail.com

Member

Jaleel Oberbrunner

Chief Metrics Technician

jaleel_oberbrunner@hotmail.com

Admin

Trinity Stracke

Direct Implementation Planner

trinity_stracke@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
Jessie Brownemma_doyle@gmail.comLake CaylaInactive$567.92
Ms. Juanita Waltermarianne7@yahoo.comDorasideActive$923.26
Vickie Bergnaumwillow39@yahoo.comNorth BeatriceActive$448.37
Roland Von DDSara.beier0@hotmail.comHanfordInactive$1,025.77
Mrs. Gwendolyn Connelly Sr.rosella.graham6@hotmail.comSouth GeorgetteshireInactive$654.82
Total$3,620.14

Basic table

Table with Images

NameEmailLocationStatusBalance
Roxanne Roob
@kattie19
deonte_bayer@gmail.comHeidivilleActive$897.31
Louise Jakubowski
@miguel.ankunding
travon98@yahoo.comEast LaurelfurtActive$1,146.42
Mrs. Angelica Block
@marion.pfannerstill39
sherman_denesik@gmail.comNorth OnabergInactive$101.56
Wanda Vandervort
@merl_lehner57
fae0@gmail.comWest MelvinaburyInactive$752.96
Gerard Bernhard
@alexane_walsh58
kitty.dooley@hotmail.comKnoxvilleInactive$660.61

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Jodi Torpole.connelly95@gmail.comSouth WestonActive$897.16
Lorraine Colenathaniel_koepp@gmail.comLauryportActive$84.47
Nicholas Shanahangianni.walsh8@gmail.comEvanstonActive$470.05
Sheldon Bradtke DVMjeanne_becker@yahoo.comSouth QuintontonActive$249.01
Mrs. Angelica Wunschirving_hahn@yahoo.comFort ErlingActive$208.55
Total$1,909.24

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Noel Hesselgerhard31@yahoo.comChesapeakeActive$734.16
Vivian Beattyallie44@hotmail.comHuelssteadInactive$43.99
Gary Harbercamron_marvin11@hotmail.comWaltonvilleActive$526.77
Wanda Kuvalisqueenie.gutkowski92@gmail.comFeestportInactive$83.13
Omar Ernser MDrhiannon.crooks@hotmail.comLake LisaportInactive$1,156.26
Total$2,544.31

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Katrina Hermistonvirginia_kreiger@hotmail.comGusikowskivilleActive$478.47
John Smithamsavanah_runolfsdottir40@hotmail.comTiffanybergInactive$179.31
Moses Carterbriana.rogahn14@hotmail.comNorth CyrilboroActive$497.23
Grace Framimauricio_toy@yahoo.comWittingboroughActive$104.71
Ms. Bonnie DuBuquekaylee82@yahoo.comFort LarissaInactive$419.36
Total$1,679.08

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
Ms. Irma Hartmann Sr.valentine.boyle@hotmail.comNew AlvahInactive$597.61
Gordon Coleruss_murphy-schuster@yahoo.comArvadaInactive$259.32
Paul Cummingsclaude.hartmann25@hotmail.comEnochstadInactive$441.79
Miss Debra Gutkowskimyles.gusikowski80@yahoo.comSouth MarcelActive$838.44
Delbert Powlowskiangie.kassulke@yahoo.comStellahavenActive$485.24
Total$2,622.40

Table with row selection

Card Table

NameEmailLocationStatusBalance
Ruth Pfannerstill-Lueilwitz DDSeladio41@hotmail.comPort GuillermoburyActive$473.93
Sophia Sanfordstone.fadel@hotmail.comEast TremainecesterActive$740.32
Allison Brakusmoshe.cremin@gmail.comSchuppetownInactive$205.87
Ismael Corwinophelia.runolfsson44@yahoo.comFlagstaffActive$377.75
Homer Nikolauslorenzo.bashirian@gmail.comNorth LarissatownActive$78.19
Total$1,876.06

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
Georgia McDermott Sr.althea.schneider@yahoo.comFort JaydenmouthInactive$184.76
Kirk Corwinhellen71@yahoo.comNew StanfordchesterInactive$501.42
Latoya Lueilwitzhank.herzog96@hotmail.comNew JessicacesterInactive$134.83
Karen Prosaccoalessandro_walsh@hotmail.comKingboroInactive$257.39
Lucy Moorekaia.klocko46@gmail.comAshevilleActive$377.71
Pedro Gislasonkacey_stanton@gmail.comJenkinscesterInactive$309.95
Rachael Langworthdallas_rowe@yahoo.comBrannonviewActive$139.45
Helen Kilbacknaomie.carroll@gmail.comNorth MyahfortInactive$308.46
Janie Williamsonkendra_oberbrunner3@gmail.comNew GarettActive$688.93
Darryl Lebsack Jr.tod.langworth61@yahoo.comVistaInactive$301.69
Alejandro Kerlukeselina24@yahoo.comSpring HillInactive$1,088.00
Mona Smithamhope.daugherty22@hotmail.comDestinfieldInactive$811.02
Casey MacGyverelecta.bruen38@yahoo.comEast MichaleInactive$915.61
Mrs. Stacy Jacobiarely37@yahoo.comNiagara FallsActive$289.15
Mr. Charles Paucekdianna_dooley1@hotmail.comRoobtonActive$458.93
Total$6,767.30

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