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
INV001UnpaidBank Transfer$601.17
INV002PaidCredit Card$220.08
INV003PendingPayPal$288.18
INV004PaidCredit Card$253.69
INV005PendingCredit Card$353.26
INV006PaidCredit Card$129.92
INV007PendingCredit Card$129.68
Total$1,975.98

Simple

Users

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

NameTitleEmailRoleActions
Trent McLaughlinDistrict Marketing Developertrent_mclaughlin@gmail.comAdmin
Rosetta MurrayRegional Quality Liaisonrosetta_murray@yahoo.comAdmin
Brycen HeidenreichCustomer Web Specialistbrycen_heidenreich12@yahoo.comViewer
Benjamin SatterfieldRegional Program Representativebenjamin.satterfield@yahoo.comAdmin
Patty AnkundingChief Infrastructure Executivepatty_ankunding5@hotmail.comAdmin
Pedro BednarForward Web Managerpedro.bednar@hotmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Carolyn Jaskolski

District Response Producer

carolyn.jaskolski@hotmail.com

Member

Julius Rodriguez

Central Optimization Associate

julius.rodriguez11@gmail.com

Admin

Danial Wehner

Future Marketing Technician

danial.wehner7@hotmail.com

Admin

Jermaine Schumm

Principal Infrastructure Consultant

jermaine_schumm@gmail.com

Member

Maribel Roob

Corporate Infrastructure Manager

maribel.roob@hotmail.com

Member

Susie Gleason

National Integration Designer

susie_gleason@hotmail.com

Viewer

Users

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

NameRoleActions

Mathew Hyatt

Product Mobility Facilitator

mathew_hyatt@hotmail.com

Member

Mario Kovacek

District Quality Analyst

mario.kovacek75@hotmail.com

Member

Gennaro Morissette

District Operations Administrator

gennaro.morissette98@hotmail.com

Admin

Rhonda Stracke

Human Data Consultant

rhonda.stracke62@yahoo.com

Viewer

Clay Gleason

Forward Marketing Designer

clay_gleason@gmail.com

Member

Cecilia Cremin

Dynamic Paradigm Executive

cecilia_cremin44@gmail.com

Viewer

Katie Sporer

Corporate Division Specialist

katie.sporer1@yahoo.com

Viewer

Genevieve Graham

Product Tactics Executive

genevieve_graham71@yahoo.com

Admin

Eric Kshlerin

Global Directives Director

eric_kshlerin@gmail.com

Admin

Charity Bosco

Legacy Brand Manager

charity_bosco@gmail.com

Member

Lavonne Ferry

Senior Communications Planner

lavonne.ferry@gmail.com

Admin

Curtis Rogahn

National Accountability Director

curtis_rogahn@yahoo.com

Admin

Antonina Turner

Global Infrastructure Facilitator

antonina_turner71@gmail.com

Member

Leticia Corkery

Chief Factors Specialist

leticia.corkery40@yahoo.com

Viewer

Troy Toy

Chief Brand Planner

troy_toy38@yahoo.com

Admin

Minerva Veum

District Infrastructure Architect

minerva_veum@yahoo.com

Admin

Alek Sipes

Senior Directives Executive

alek.sipes2@gmail.com

Member

Luke Schimmel

Corporate Division Technician

luke.schimmel56@yahoo.com

Member

Nicholas Cummerata

Central Marketing Executive

nicholas.cummerata58@hotmail.com

Member

Kenneth Donnelly

Corporate Metrics Assistant

kenneth_donnelly@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
Alfonso Feest Vmariana39@yahoo.comNew CoyActive$778.90
Fred Kautzercarley.connelly12@gmail.comLake EdmondstadInactive$698.63
Christopher Streich DDSclyde_dickens73@gmail.comAliyaburghInactive$1,186.98
Vera Dickensgavin_cummerata-swaniawski@gmail.comNorth BrycenInactive$169.26
Ethyl Powlowskiarchie.runte@gmail.comCreminboroInactive$608.33
Total$3,442.10

Basic table

Table with Images

NameEmailLocationStatusBalance
Stephen Koepp
@shanel60
sharon.anderson@yahoo.comJustenchesterActive$134.67
Tate Tillman Sr.
@salvatore65
joe.witting@yahoo.comJohnsviewInactive$769.61
Maria Hoppe DDS
@byron74
olivia_stehr71@gmail.comBothellInactive$601.98
Jamie Bayer
@melody.mayert
audrey37@yahoo.comKirklandActive$711.87
Jonas Bartell
@loma.brown98
earnest.rohan@hotmail.comBrownburyInactive$1,079.49

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Baby Boscopercival60@gmail.comArlofortActive$1,102.60
Lauren Hermannroberto.gislason@gmail.comRitchievilleActive$230.80
Filiberto Wuckertlaurence.bode60@yahoo.comNorth SiennaInactive$40.68
Miss Alma Mayerruthe_farrell22@gmail.comAlfonsofurtActive$148.32
Lucy Franeckiiris.smitham@yahoo.comNew ElainesteadInactive$655.39
Total$2,177.79

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Jarvis Shanahanoscar.shanahan56@yahoo.comNorth GladysmouthInactive$399.76
Rodolfo Pfannerstilljoseph_walker18@hotmail.comHarveylandActive$1,166.48
Connie Parkerhubert.barrows19@gmail.comMelvinacesterInactive$783.53
Charlie Nitzschevernon9@yahoo.comWest AriellesteadActive$487.76
Drew Schaeferspencer.raynor69@gmail.comDanielfieldActive$1,003.39
Total$3,840.92

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Dianne Bednar Vcoy90@hotmail.comFlorenceburyInactive$1,116.96
Marjorie Gerhold DVMignacio79@yahoo.comCamryncesterInactive$328.29
Ms. Patricia Rowe DVMcristal.yost18@yahoo.comMamiehavenActive$525.58
Carolina Rauwayne.kuvalis52@gmail.comFort TrinityboroughActive$722.24
Mr. Sunny Wildermanyvette.bayer40@gmail.comLuettgenstadActive$680.89
Total$3,373.96

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
Todd Kuhnjoanna_graham78@gmail.comWindlerboroughInactive$428.33
Jonathan Powlowskicarlos_franey@hotmail.comEast FranklinInactive$457.11
Harry Kosstyrique_lang37@hotmail.comMartyburghInactive$868.96
Harriet Reynoldsalton_dibbert65@gmail.comPowayActive$84.85
Twila Kuhngarett10@yahoo.comElk GroveInactive$636.65
Total$2,475.90

Table with row selection

Card Table

NameEmailLocationStatusBalance
Jordan Millerbridget_collins@yahoo.comNorth VernbergActive$236.47
Morris Volkmanernesto.boyle@gmail.comLake NakiaActive$503.33
Mr. Vergie Ziemannvicente.swaniawski@yahoo.comSchadenhavenActive$24.50
Darryl Roobemma_blick@yahoo.comDuluthActive$585.50
Hazle Dibbertnatasha.altenwerth-muller@yahoo.comStuartstadInactive$646.61
Total$1,996.41

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
Justine Morarherman.white56@yahoo.comJohnsonshireActive$140.93
Shanny Morarxzavier99@yahoo.comRochester HillsActive$249.72
Gladys Gutmannoliver.reichel@gmail.comEdwardsideActive$895.35
Belinda Millsroland_breitenberg@yahoo.comFort KristyboroInactive$718.64
Emilie Heidenreichaugust.marks26@yahoo.comReichertfieldInactive$115.10
Damon Kubjosh96@yahoo.comHagenesboroughInactive$994.66
Anthony Kohlerarnold65@hotmail.comSchoenchesterInactive$446.42
Mr. Carmine Baumbachmargarita_spencer@yahoo.comMetzvilleActive$605.69
Casper Hermistonthelma.bode@gmail.comMcKenzievilleInactive$626.81
Charlie Hudsonwendell51@yahoo.comLeannonfurtActive$465.17
Tamia Smithamivy.kub43@hotmail.comJackievilleActive$341.27
Gertrude Reingerjaron.anderson@hotmail.comFort TobyInactive$446.96
Liliane Mertzmyles84@yahoo.comLake LaneyviewActive$104.63
Leonard O'Haraali_fritsch75@yahoo.comPort BertmouthActive$409.24
Tim O'Keefemichelle.breitenberg@yahoo.comNorth LuzActive$731.74
Total$7,292.33

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