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
INV001PaidBank Transfer$149.42
INV002UnpaidBank Transfer$450.71
INV003UnpaidBank Transfer$525.84
INV004PendingCredit Card$678.16
INV005PaidPayPal$236.63
INV006UnpaidBank Transfer$968.35
INV007PendingPayPal$836.26
Total$3,845.37

Simple

Users

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

NameTitleEmailRoleActions
Jerome LeuschkeRegional Metrics Facilitatorjerome_leuschke@gmail.comAdmin
Dylan LittleSenior Security Techniciandylan.little82@gmail.comViewer
Alvin GusikowskiGlobal Data Architectalvin_gusikowski@yahoo.comAdmin
Pattie HeaneyInternal Integration Specialistpattie_heaney58@gmail.comViewer
Eliane DurganNational Optimization Technicianeliane_durgan4@hotmail.comViewer
Sonya WuckertPrincipal Operations Strategistsonya.wuckert@gmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Sharon O'Connell

District Group Consultant

sharon_oconnell@gmail.com

Viewer

Gustavo Herzog

Principal Intranet Orchestrator

gustavo_herzog@gmail.com

Member

Abdiel Wisoky

National Optimization Facilitator

abdiel_wisoky@hotmail.com

Viewer

Russell Wilderman

Dynamic Infrastructure Liaison

russell_wilderman28@yahoo.com

Viewer

Arlo White

Senior Identity Agent

arlo.white@gmail.com

Viewer

Ford Block-Kuhn

Chief Data Orchestrator

ford.block-kuhn@hotmail.com

Member

Users

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

NameRoleActions

Jerry Davis

District Paradigm Consultant

jerry.davis@hotmail.com

Admin

Estell Cummings

National Intranet Technician

estell_cummings65@hotmail.com

Viewer

Vivian Bogisich

Forward Security Technician

vivian_bogisich5@yahoo.com

Viewer

Johathan Swaniawski

Corporate Mobility Coordinator

johathan_swaniawski@hotmail.com

Member

Sebastian Collier

Chief Assurance Analyst

sebastian.collier@hotmail.com

Viewer

Aiyana Deckow-Denesik

Central Factors Officer

aiyana.deckow-denesik@yahoo.com

Viewer

Ryann Emard-Cremin

Global Metrics Architect

ryann.emard-cremin15@gmail.com

Viewer

Erick Hackett

National Usability Designer

erick_hackett38@hotmail.com

Admin

Derek West

Legacy Directives Director

derek_west@gmail.com

Admin

Debbie Brown

Legacy Solutions Liaison

debbie_brown@hotmail.com

Member

Mike Leffler

Senior Data Technician

mike.leffler76@yahoo.com

Viewer

Norma Murphy

Senior Accountability Liaison

norma.murphy77@hotmail.com

Admin

Kiley Wunsch

National Research Manager

kiley.wunsch@yahoo.com

Viewer

Evelyn Koch

Senior Brand Agent

evelyn_koch@hotmail.com

Admin

Marianne Welch

Chief Identity Analyst

marianne_welch@yahoo.com

Admin

Erna Haley

Legacy Accountability Planner

erna.haley20@gmail.com

Admin

Josephine Farrell

International Operations Administrator

josephine.farrell3@gmail.com

Member

Gayle Wiegand

Regional Applications Agent

gayle_wiegand@gmail.com

Viewer

Jessica Hartmann

Customer Tactics Orchestrator

jessica_hartmann72@yahoo.com

Member

Juston Maggio-Romaguera

Lead Functionality Orchestrator

juston.maggio-romaguera@gmail.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
Eleanor Hamillnancy_gutkowski@hotmail.comFraneyvilleActive$72.73
Rafael Considinemelba20@yahoo.comLouisville/Jefferson CountyActive$390.13
Mr. Spencer Pollichmarianne.hansen@yahoo.comSouth JeffcesterActive$1,178.55
Latoya Bauch Jr.christopher7@yahoo.comRolfsonmouthInactive$848.72
Natalie Conncarmel.rice34@yahoo.comWest TammyActive$44.73
Total$2,534.86

Basic table

Table with Images

NameEmailLocationStatusBalance
Ira Bernier
@teresa_graham63
angeline5@hotmail.comNorth MaryInactive$975.88
Anderson Bruen
@henrietta_ziemann29
roxane45@gmail.comNorth CraigviewInactive$145.06
Elsa Heidenreich
@rick80
kelsie.funk27@hotmail.comNorth JeanneInactive$911.17
Nicklaus Moore
@tony_wintheiser36
anderson.schumm87@hotmail.comCarolefurtActive$912.25
Darron Stiedemann
@vera.cormier
angelica.grant@yahoo.comEast DianeInactive$1,093.76

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Vada Botsford Sr.celia.ortiz59@yahoo.comSan JacintoInactive$507.03
Doyle Handantonia_stroman@yahoo.comSanfordfortActive$1,122.86
Alfonso Labadiearnaldo_streich-larkin@yahoo.comKennashireInactive$78.68
Jessy Wilkinsonmarcella.ankunding@yahoo.comVancouverInactive$75.46
Laury Carrollconrad66@gmail.comBartlettActive$1,167.13
Total$2,951.16

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Monte Kubignacio57@yahoo.comWolffurtInactive$184.86
Wade Kozeycolleen14@hotmail.comPamelafieldInactive$517.37
Dakota Webergeraldine9@yahoo.comAbrahamfieldActive$849.02
Addison Feilmaud_corwin47@yahoo.comMission ViejoActive$510.73
Ruthie Wolf DDSmason.mcclure@yahoo.comEugeneActive$786.54
Total$2,848.52

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Elise Hammes IVroland.wuckert@yahoo.comWest DanniecesterActive$509.64
Demond Waelchiisaias.franecki37@yahoo.comNew SalvatorecesterInactive$783.66
Rick Franeckiadolph10@yahoo.comMcKenziechesterActive$72.31
Kamren Brownjannie23@hotmail.comHoffman EstatesInactive$611.50
Devon Kovacekrhiannon_damore@gmail.comEast CarlottaworthActive$1,191.99
Total$3,169.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
Onie Predovicmegane99@yahoo.comCoachellaInactive$1,064.48
Nelson Wisokymary.ledner@gmail.comKarenburyActive$590.23
Wilbur Bogisichhelene.stokes@yahoo.comFort KatherineActive$413.60
Stephan Wehnereva14@gmail.comWest JordanActive$820.24
Christophe Rathmarcos.cole@yahoo.comBowling GreenInactive$621.67
Total$3,510.22

Table with row selection

Card Table

NameEmailLocationStatusBalance
Mr. Stone Lindchloe_hand-mayert80@yahoo.comNew JeffreyActive$275.70
Hugh Cummerataangie_heller28@yahoo.comQuigleyshireActive$923.25
Mr. Vivianne Kessleraugust_hodkiewicz@yahoo.comSouth JoanlandInactive$501.60
Jazmyn Von-Schaeferjerome_sipes63@yahoo.comPort KeltonlandActive$1,193.70
Doug Creminjoe4@yahoo.comTerriboroActive$671.82
Total$3,566.07

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
Mack Mohr-Dietrichmoshe_rempel70@gmail.comBoscoboroActive$79.75
Travon Collinszella.miller57@yahoo.comLake JulietInactive$319.59
Mrs. Brandyn Crooksgwendolyn_zboncak@gmail.comPort SamuelburyInactive$1,130.45
Lindsey Pagacgreg_rice@yahoo.comLake AmiefieldActive$636.71
Perry Considineernestine_harber44@hotmail.comMetzchesterActive$571.48
Alexane Starkjeff_ward63@hotmail.comPort ArthurInactive$742.14
Fay Braunmorton_romaguera@yahoo.comSouth LaceytownInactive$9.39
Reanna Williamsonreginald_rowe2@gmail.comFullertonActive$800.23
Myah Raynorzora.durgan57@yahoo.comThompsonportInactive$282.49
Mr. Easter Hackettcamila_harber-dibbert@gmail.comMaxineviewActive$344.89
Mr. Ted Gradythaddeus_fisher47@hotmail.comWest LillievilleActive$88.59
Jonathon Walshmarjory22@hotmail.comNorth StaceyInactive$882.23
Hannah Danieltimmy29@gmail.comPort LoraInactive$1,149.18
Miss Josefina Millerricardo69@hotmail.comLa MesaInactive$1,153.26
Michelle Robelstella98@gmail.comD'AmoresideActive$344.82
Total$8,535.20

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