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
INV001PendingPayPal$376.30
INV002PendingPayPal$128.00
INV003PendingCredit Card$513.16
INV004PaidCredit Card$795.10
INV005PendingCredit Card$761.26
INV006PendingBank Transfer$744.83
INV007PaidBank Transfer$676.45
Total$3,995.10

Simple

Users

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

NameTitleEmailRoleActions
Sid RiceNational Usability Officersid_rice@hotmail.comAdmin
Zoe BogisichCentral Markets Coordinatorzoe.bogisich@yahoo.comMember
Roslyn KoeppGlobal Data Technicianroslyn_koepp@gmail.comAdmin
Talon DaughertyPrincipal Branding Techniciantalon_daugherty36@yahoo.comViewer
Theo SipesHuman Metrics Liaisontheo_sipes@gmail.comMember
Juvenal Morissette-AdamsLegacy Identity Orchestratorjuvenal.morissette-adams@yahoo.comViewer

Stacked on mobile

Users

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

NameRoleActions

Brando Sanford

Product Division Consultant

brando_sanford@yahoo.com

Member

Kade McCullough

Legacy Data Liaison

kade.mccullough@yahoo.com

Admin

Bonnie Stiedemann

Human Operations Representative

bonnie_stiedemann37@hotmail.com

Member

Mariano Romaguera

Forward Markets Planner

mariano_romaguera49@hotmail.com

Member

Melyssa Kutch

Corporate Web Liaison

melyssa_kutch88@gmail.com

Member

Jayden Crist

Lead Assurance Technician

jayden.crist@hotmail.com

Admin

Users

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

NameRoleActions

Jolie Schmeler

Direct Marketing Developer

jolie_schmeler@hotmail.com

Member

Thea Leannon

Human Solutions Manager

thea_leannon@gmail.com

Member

Asha Romaguera

Regional Web Officer

asha.romaguera@gmail.com

Viewer

Prudence Heller

Senior Implementation Representative

prudence.heller@hotmail.com

Viewer

Gilbert Marvin

Customer Configuration Associate

gilbert.marvin86@yahoo.com

Member

Amely Beer

Forward Mobility Facilitator

amely_beer68@gmail.com

Viewer

Leslie Gusikowski

Legacy Usability Executive

leslie.gusikowski33@hotmail.com

Viewer

Hilario Yost

Central Identity Orchestrator

hilario.yost@yahoo.com

Admin

Jeromy Leuschke

Internal Metrics Agent

jeromy.leuschke97@yahoo.com

Member

Matilde Davis

Regional Configuration Engineer

matilde.davis14@gmail.com

Member

Madonna Marquardt

District Security Liaison

madonna.marquardt@gmail.com

Admin

Daren Ferry

Regional Response Specialist

daren.ferry91@yahoo.com

Viewer

Shany Yundt

Human Branding Designer

shany_yundt15@hotmail.com

Member

Sidney Morar

Human Implementation Assistant

sidney.morar9@hotmail.com

Viewer

Germaine Turner

Corporate Optimization Officer

germaine.turner@hotmail.com

Admin

Russ Kunze

Corporate Solutions Specialist

russ_kunze@yahoo.com

Viewer

Nikita Dach

Senior Mobility Planner

nikita.dach@yahoo.com

Admin

Hailey Dooley

National Brand Officer

hailey.dooley34@hotmail.com

Admin

Pamela Gusikowski

Dynamic Operations Orchestrator

pamela.gusikowski48@hotmail.com

Member

Travon Mitchell

Future Accounts Architect

travon.mitchell30@hotmail.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
Latoya Lakinmarques_kling-bayer16@hotmail.comWest DelilahchesterInactive$607.50
Josephine Gradyaugustine.graham22@hotmail.comBeattyfurtInactive$940.85
Carla Toyalfred_corkery@hotmail.comIndioActive$482.10
Dwight Tremblaykathlyn85@hotmail.comLake Havasu CityActive$143.55
Dr. Jerry Mayertreggie55@gmail.comHillardviewInactive$1,138.58
Total$3,312.58

Basic table

Table with Images

NameEmailLocationStatusBalance
Miss Stella Stracke
@rylan72
gayle26@yahoo.comShieldsviewActive$228.69
Justin Grimes II
@alden.jacobs29
hunter32@gmail.comSouth CorinefortActive$539.70
Mr. Carroll Barton
@elinore.hackett
ansel_moen66@gmail.comNew BillyActive$1,018.94
Mr. Sylvester Hettinger
@hardy.cremin
hazle19@yahoo.comSchroedersteadInactive$42.18
Dana Kihn
@gunnar.hand
vivian_keebler38@hotmail.comParisiantonInactive$989.89

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Cristina Keebler-Adams Vmorris_bednar@gmail.comLake JulianaActive$477.38
Claudia Wisokynannie.hoeger@yahoo.comEast LaurenceboroInactive$1,039.49
Allan Ondrickaeli72@yahoo.comDuBuquefieldInactive$1,167.99
Rosa Tremblayscotty_dicki@yahoo.comZiemannshireInactive$208.09
Sheila Schamberger-Ebertweldon_bode@hotmail.comPort RicoshireInactive$447.11
Total$3,340.06

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Lora Wuckertbrandi_okuneva89@gmail.comEnidInactive$131.87
Shannon Cremindulce.parker@hotmail.comEast ProvidenceInactive$817.85
Gail Watsicadudley.parisian28@hotmail.comOtiscesterInactive$324.63
Mr. Leonard Quigleyquentin61@hotmail.comLake DimitriActive$820.38
Gustavo Prosaccovictor.morar@yahoo.comPensacolaActive$1,122.21
Total$3,216.94

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Gordon Rowegudrun_pouros@gmail.comMonroeActive$564.13
Gretchen Spinkaannie_mills55@hotmail.comWest KhalidInactive$715.65
Dr. Willie Schinnerzack22@hotmail.comLenexaInactive$703.15
Marion McClurezachery10@yahoo.comMedhurstsideInactive$180.86
Glenn Hyattdelores.powlowski91@gmail.comMayertsteadInactive$794.25
Total$2,958.04

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
Bradley Hoppecasey_towne@yahoo.comJaylonvilleActive$987.23
Darrell Cassinbraxton_bartell92@yahoo.comLodiInactive$655.20
Mattie Klingjonathan34@gmail.comNorth AmaraActive$822.52
Lewis Emmerichadam_rempel@gmail.comOklahoma CityActive$746.33
Johanna Jastconrad_kohler@hotmail.comThielchesterInactive$115.12
Total$3,326.40

Table with row selection

Card Table

NameEmailLocationStatusBalance
Nathan Langhallie_macgyver@hotmail.comChamplinhavenInactive$851.04
Douglas O'Connerberneice_kovacek88@yahoo.comWilkinsonviewInactive$720.69
Marc Fisherwilfrid.oconnell-daniel@hotmail.comKilbackmouthActive$145.36
Jermaine Hellerelroy_kozey37@yahoo.comLake JenningsActive$705.06
Viola Walterwalker_beier46@yahoo.comDurgansteadInactive$483.53
Total$2,905.68

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
Casey Lefflerwendy_auer-kautzer@yahoo.comBrownsvilleInactive$737.51
Keith Kunzeearnestine56@hotmail.comHayesportActive$327.31
Freda Cartershany_bartoletti@yahoo.comPort MiaActive$279.51
Dr. Bryant Kshlerinophelia_hayes33@gmail.comFriesensideInactive$160.92
Clayton Rodriguezcathryn33@hotmail.comLewportInactive$1,038.55
Jermaine Shieldsbennie.ullrich@yahoo.comGerholdhavenActive$664.61
Melissa Ziemeelvie18@hotmail.comWest EarlinemouthInactive$328.03
Manuel Altenwerthkiara_abernathy-rogahn@yahoo.comSouth KaleburghInactive$728.50
Kristopher O'Connermarcellus_sawayn5@yahoo.comNew AdalineInactive$996.21
Mrs. Nicole Murphyhildegard_shields81@yahoo.comLake MaribeltonInactive$1,045.02
Lowell Rippinharrison_mraz25@hotmail.comNorth BernadettesideActive$953.99
Miss Muriel Romagueraangel.bechtelar@hotmail.comGennarocesterActive$79.66
Audrey Streichvirgie44@gmail.comHomenickstadInactive$838.08
Jan Harveykayla_casper@yahoo.comCarolannemouthActive$530.97
Cassandra Olsonhenri55@yahoo.comElijahburyInactive$1,081.85
Total$9,790.72

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