Components

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$333.58
INV002PendingCredit Card$437.80
INV003PaidPayPal$775.37
INV004UnpaidPayPal$168.75
INV005PendingBank Transfer$257.62
INV006PendingPayPal$930.86
INV007PendingCredit Card$674.78
Total$3,578.76

Simple

Users

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

NameTitleEmailRoleActions
Roman ToyCorporate Markets Developerroman_toy32@gmail.comMember
Aric FaheyLegacy Web Planneraric_fahey@yahoo.comMember
Stefanie SchowalterProduct Assurance Assistantstefanie_schowalter@hotmail.comAdmin
Austyn KuvalisSenior Integration Coordinatoraustyn.kuvalis@gmail.comMember
Martine GutkowskiLegacy Marketing Officermartine.gutkowski@hotmail.comMember
Emmett PredovicLead Creative Designeremmett.predovic@hotmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Mindy Krajcik

Regional Mobility Technician

mindy_krajcik39@gmail.com

Admin

Justine Renner

Investor Accounts Associate

justine.renner75@gmail.com

Viewer

Queen Abshire

National Mobility Executive

queen_abshire74@hotmail.com

Viewer

Shelley Treutel

Human Quality Designer

shelley_treutel@gmail.com

Admin

Ayana Gislason

Product Metrics Associate

ayana_gislason@yahoo.com

Admin

Elenora Ullrich

Investor Marketing Director

elenora.ullrich@hotmail.com

Member

Users

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

NameRoleActions

Vincent Hyatt

Direct Branding Producer

vincent_hyatt@yahoo.com

Member

Lilla MacGyver

Senior Research Analyst

lilla.macgyver33@yahoo.com

Viewer

Brandy McKenzie

Human Marketing Representative

brandy_mckenzie@hotmail.com

Admin

Jason Thompson

Future Intranet Liaison

jason.thompson@hotmail.com

Admin

Loren Dooley

Internal Marketing Producer

loren.dooley@hotmail.com

Viewer

Tim Franecki

Principal Functionality Planner

tim_franecki@gmail.com

Admin

Keshaun Stracke

Forward Branding Liaison

keshaun.stracke10@hotmail.com

Admin

Anna Douglas

Chief Factors Technician

anna.douglas17@hotmail.com

Admin

Wade Reichel

Future Accounts Manager

wade_reichel96@gmail.com

Admin

Francesca Heller

Product Paradigm Orchestrator

francesca.heller84@gmail.com

Admin

Murray Gulgowski

Legacy Branding Facilitator

murray.gulgowski60@yahoo.com

Viewer

Kristoffer Reinger

Future Data Executive

kristoffer.reinger13@yahoo.com

Viewer

Fatima Jacobs

Lead Branding Producer

fatima.jacobs@yahoo.com

Member

Harriet Legros-Tremblay

Customer Security Officer

harriet_legros-tremblay71@gmail.com

Admin

Belle Waters

Future Creative Associate

belle.waters@hotmail.com

Admin

Nettie Rau

International Markets Engineer

nettie_rau@gmail.com

Member

Palma Rempel

Regional Factors Developer

palma_rempel42@gmail.com

Viewer

Amara Wyman

District Group Liaison

amara_wyman@gmail.com

Viewer

Kelli Pfannerstill

Central Branding Specialist

kelli_pfannerstill@gmail.com

Admin

Caterina O'Keefe

Human Accountability Consultant

caterina_okeefe@yahoo.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
Reta Heathcotejazlyn8@yahoo.comKristinachesterActive$482.63
Carlton Turnerroman.weimann@yahoo.comHomenickboroActive$1,126.36
Eugenia Ledner Vnaomie12@gmail.comNew CiceroActive$144.36
Maximillian Wardeverett30@hotmail.comEmardvilleInactive$146.23
Valerie Conroymarcelo_cremin@hotmail.comDeckowvilleInactive$1,151.54
Total$3,051.12

Basic table

Table with Images

NameEmailLocationStatusBalance
Micheal Grady
@roberto_ryan43
vickie_hammes21@hotmail.comBalistreriboroughInactive$258.58
Weldon Rodriguez
@pasquale_thompson65
rochelle.wilderman54@gmail.comKuhlmansteadInactive$683.69
Andy Bartoletti
@delbert.wunsch22
laurie.dubuque@gmail.comBogisichmouthActive$124.19
Amie Anderson-Harvey
@meredith93
brooke.mraz-orn@yahoo.comTremblayburyInactive$646.89
Nicole Lakin
@linwood40
paul5@hotmail.comPort ArmandInactive$5.40

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Griffin Dibbertjoey_kuhic@gmail.comRio RanchoInactive$1,036.19
Emilio Wiegandcharity_greenfelder@yahoo.comPort DarrinInactive$492.01
Wade Davismildred.vonrueden@hotmail.comJakubowskisideActive$552.31
Ulices Ricehilda_mueller33@hotmail.comSalinaInactive$837.85
Mohammad Kihn Sr.chelsey15@gmail.comLake EltastadInactive$539.76
Total$3,458.12

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Shane Padbergdestinee_emard@hotmail.comEast RamonaActive$604.57
Rahul Leuschkedallas79@yahoo.comPembroke PinesActive$215.87
Homer Gleasonzakary_spencer34@hotmail.comCydneyhavenInactive$726.62
Miss Belinda Heathcoteemil.blanda41@hotmail.comHermann-PagaccesterActive$886.22
Gregg Deckowtristian.conroy@gmail.comSouth KasandrafieldActive$790.70
Total$3,223.98

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Dr. Wade Goyettejazlyn_hoppe85@gmail.comFort JacquelineInactive$254.14
Colleen Franeyjohn.klein60@yahoo.comNorth AntoinettetonInactive$840.87
Eugenia Bednarcielo.bauch74@hotmail.comCremincesterInactive$856.51
Clayton Swaniawski IIsonia96@yahoo.comDerrickfortInactive$52.54
Lori Langsilvia.smitham27@gmail.comRichiesteadActive$850.68
Total$2,854.74

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
Pamela Leannonmac_considine-lesch23@yahoo.comGregcesterActive$728.17
Lester Cronincortez85@gmail.comNovatoActive$768.54
Jane Ankundingadam.oberbrunner@gmail.comCummerataportActive$324.17
Miss Lexi Bartellfrancisco22@hotmail.comMarieshireActive$762.35
Gretchen Wolfdale.greenholt84@yahoo.comMarquardtburyActive$453.09
Total$3,036.32

Table with row selection

Card Table

NameEmailLocationStatusBalance
Dr. Jess Graham IIcandice.spencer@yahoo.comNew MaybelleportInactive$68.22
Brad Crist Jr.ethyl_barton1@gmail.comForestbergActive$318.84
Ottilie Nadercory.zboncak82@yahoo.comWest ZoieActive$257.61
Lavinia Mertz DVMsherry99@hotmail.comEast TaylorfurtInactive$111.20
Amber Schinneruriel_braun@gmail.comPort BlancacesterInactive$441.62
Total$1,197.49

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
Euna Bartolettimorton_schmeler97@gmail.comDuBuquechesterInactive$322.52
Homer Pfannerstillanna.turner99@gmail.comBethesdaActive$915.22
Lana Rueckerdelbert.kovacek77@hotmail.comPensacolaInactive$454.02
Amie Pouros-Parkermilan_rohan@gmail.comTracyInactive$830.42
Lawson Kochjesus49@gmail.comNew BufordsideActive$574.95
Leah Cummeratakirstin_champlin69@gmail.comCharliebergActive$385.25
Hattie Oberbrunnerelsa_doyle49@gmail.comManhattanActive$183.13
Miss Blanche Effertzgreg_paucek@hotmail.comLuisburghInactive$560.31
Dr. Tomasa Baumbachdimitri.fahey@hotmail.comAdonisfurtInactive$527.66
Nicole Barrowsmaximillia.torphy75@yahoo.comLionelshireInactive$675.77
Lou Mantegracie90@gmail.comVacavilleActive$1,125.69
Aubrey Hermanseth7@hotmail.comHegmannviewInactive$1,189.53
Abe Roweesther99@yahoo.comEmoryburghInactive$1,026.33
Gerhard Lehnerabner.halvorson@yahoo.comSchmidtportInactive$335.44
Bill McLaughlinminnie24@hotmail.comOxnardInactive$981.92
Total$10,088.16

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