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$869.32
INV002UnpaidPayPal$355.36
INV003PaidPayPal$351.09
INV004PaidPayPal$563.71
INV005PaidBank Transfer$678.54
INV006PaidPayPal$415.45
INV007PaidPayPal$870.56
Total$4,104.03

Simple

Users

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

NameTitleEmailRoleActions
Gianni DavisCentral Optimization Consultantgianni_davis68@yahoo.comMember
Grady KlockoProduct Branding Associategrady_klocko@hotmail.comMember
Narciso BaumbachSenior Optimization Orchestratornarciso.baumbach@yahoo.comMember
Alana LuettgenInternal Directives Orchestratoralana_luettgen30@yahoo.comViewer
Elvis HaleyProduct Functionality Liaisonelvis.haley@yahoo.comAdmin
Zella KlockoLead Program Executivezella_klocko@yahoo.comMember

Stacked on mobile

Users

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

NameRoleActions

Okey Gusikowski

Customer Security Representative

okey_gusikowski86@hotmail.com

Viewer

Ubaldo Padberg

Forward Assurance Consultant

ubaldo_padberg46@gmail.com

Member

Kiara Bergnaum

Senior Research Consultant

kiara.bergnaum19@gmail.com

Admin

Eva Greenfelder

Chief Applications Technician

eva.greenfelder@hotmail.com

Member

Wade Walsh-Brakus

Forward Identity Architect

wade.walsh-brakus@yahoo.com

Admin

Elliott Rice

Senior Web Manager

elliott.rice23@gmail.com

Viewer

Users

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

NameRoleActions

Bria Schoen

Lead Communications Engineer

bria_schoen28@gmail.com

Admin

Hanna Hessel

Principal Applications Supervisor

hanna.hessel@hotmail.com

Viewer

Dayne Murazik

Investor Brand Director

dayne_murazik@yahoo.com

Admin

Christine Glover

International Response Consultant

christine.glover5@hotmail.com

Admin

Franz Yundt

Central Configuration Facilitator

franz_yundt28@gmail.com

Member

Noe Spinka

Regional Functionality Assistant

noe.spinka@gmail.com

Member

Audreanne Wolff

Product Integration Technician

audreanne.wolff18@gmail.com

Member

Kiley Keebler

Customer Optimization Director

kiley_keebler0@yahoo.com

Admin

Kirstin Littel

Senior Markets Analyst

kirstin_littel@hotmail.com

Member

Caterina Armstrong

Principal Program Developer

caterina_armstrong57@yahoo.com

Viewer

Geovanny Rodriguez

Legacy Brand Facilitator

geovanny.rodriguez@gmail.com

Member

Brooklyn McCullough

Global Solutions Architect

brooklyn.mccullough@gmail.com

Viewer

Lavina Hills

Direct Functionality Consultant

lavina_hills81@hotmail.com

Admin

Barbara Conroy

Dynamic Marketing Specialist

barbara.conroy67@yahoo.com

Viewer

Vickie Waelchi

Dynamic Program Liaison

vickie.waelchi@gmail.com

Admin

Aileen Stamm

Central Markets Orchestrator

aileen_stamm3@yahoo.com

Member

Mozelle Kunze

Chief Web Analyst

mozelle.kunze@yahoo.com

Admin

Kristoffer Schuppe

Principal Infrastructure Analyst

kristoffer_schuppe78@hotmail.com

Member

Hyman Rempel

Central Communications Strategist

hyman_rempel12@yahoo.com

Admin

Enrique Sawayn

Product Infrastructure Associate

enrique.sawayn45@hotmail.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
Lionel Kleinlorena36@yahoo.comJanissteadInactive$865.26
Gwen Nitzscheharley.lockman-mayer@yahoo.comAnkundingtownActive$972.61
Ronnie Yundtgiovanna.ferry@yahoo.comStratfordActive$504.80
Ian Dooleyglenna_olson72@hotmail.comFort TysonActive$901.73
Russell Fishersusie.conn82@hotmail.comArmandsteadActive$839.99
Total$4,084.39

Basic table

Table with Images

NameEmailLocationStatusBalance
Freddie Blanda-Breitenberg
@audreanne.prohaska39
santa_koss20@gmail.comLake ShannytonInactive$609.27
Ivan Hartmann
@titus48
percival.buckridge@hotmail.comLake RonnyportActive$196.76
Ms. Marguerite Satterfield
@paris8
amely_rice44@gmail.comMarcellaboroughActive$121.27
Maggie Braun
@ivory_wuckert22
delpha_bogan@hotmail.comPort IvyActive$981.93
Dr. Domingo Borer
@braden55
kieran_jakubowski3@hotmail.comBaumbachshireInactive$419.08

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Frankie Kshlerinmurl_mante80@yahoo.comJacintosideActive$383.16
Kenny VonRuedengarfield15@hotmail.comDearbornActive$158.91
Kristen Walterotilia_greenholt@yahoo.comCrookscesterActive$851.19
Alicia Funkgeneral40@hotmail.comRosaleeshireInactive$59.60
Claudia Hodkiewiczveda.davis@hotmail.comKrystalbergActive$350.22
Total$1,803.08

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Cora Rempelclementina33@gmail.comDeckowbergActive$558.97
Nettie Murphylysanne42@yahoo.comMilfordbergInactive$1,138.86
Kelly Jacobsonretta.rutherford39@yahoo.comHillsboroActive$256.75
Alfonso Parkerkenyatta_konopelski@yahoo.comLake AdonistonActive$352.75
Eleanor Stamm DDShelga_abbott@gmail.comDanykastadInactive$955.27
Total$3,262.60

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Miss Elisa Lang-Quitzonparker_mante-fahey42@gmail.comNew KhalidInactive$925.93
Fredrick Riceestrella_wiegand6@gmail.comKuhnfurtInactive$582.47
May Ullrichvivienne79@gmail.comKeaganchesterInactive$1,124.53
Rhonda Tremblayprice_murazik88@gmail.comNew HeavenburghInactive$752.16
Miranda Braunarthur25@hotmail.comNew JohnathansideActive$472.27
Total$3,857.36

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
Tomas Carrollbrando8@yahoo.comHalvorsonfortInactive$1,016.34
Ms. Lorene Parisianbernice.durgan@yahoo.comPort BriceActive$534.16
Kent Hoegerreggie_hilll85@gmail.comFort EstevanInactive$1,137.72
Lionel Baileythurman28@gmail.comEast MinaInactive$593.31
Dr. Georgia Medhurstamari_howell54@yahoo.comStreichcesterInactive$472.23
Total$3,753.76

Table with row selection

Card Table

NameEmailLocationStatusBalance
Jermaine Huelambrose83@yahoo.comOmerfurtActive$705.92
Noah Schmelernola_abshire8@hotmail.comSchoenfieldInactive$959.62
Geneva Boscoharrison.carroll10@hotmail.comNew BettyInactive$1,162.41
Jerald Hauckronaldo.kohler1@hotmail.comNorth JustonInactive$974.74
Melanie Farrellbetty_ziemann-jenkins73@hotmail.comFort BridgettebergActive$776.01
Total$4,578.70

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
Kathleen Gradycristian.koss-dach@gmail.comMertzchesterActive$744.66
Julian Macejkovic DDSviolet57@hotmail.comFort AleenActive$450.85
Stanley Predovicorie.prosacco26@yahoo.comWest CeasarfortActive$64.75
Clyde Nicolasearline.jenkins@hotmail.comCypressActive$89.39
Leonard Buckridgegrayce.walter@hotmail.comCoral GablesInactive$617.05
Samuel Marquardtlavern.miller51@yahoo.comCerritosActive$1,112.46
Joyce Sanfordtomasa_wyman55@hotmail.comKubfortActive$1,095.77
Stewart Hermiston DDSbo_conroy@hotmail.comElmorestadInactive$368.13
Bessie Langbriana.pfeffer21@hotmail.comNew PenelopeInactive$49.79
Pete McClurekamryn.sawayn@yahoo.comNew RhodaActive$796.87
Miss Shari Bauchkyra.marquardt@yahoo.comAkronInactive$620.33
Katie Runolfssonmargot27@yahoo.comPort BellaboroughActive$396.50
Barry Murray MDlorenza62@gmail.comHelgaburghActive$615.86
Gary Waters DVMgeovany59@gmail.comNorth SibylsideInactive$1,151.82
Alexis Rodriguezbrannon58@hotmail.comFort DedrickActive$1,065.43
Total$9,239.66

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