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
INV001UnpaidPayPal$459.45
INV002PendingPayPal$494.11
INV003UnpaidCredit Card$282.75
INV004PaidPayPal$654.69
INV005UnpaidBank Transfer$843.67
INV006PaidPayPal$915.39
INV007PaidPayPal$787.81
Total$4,437.87

Simple

Users

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

NameTitleEmailRoleActions
Barbara MedhurstProduct Quality Officerbarbara_medhurst@gmail.comMember
Geoffrey LegrosSenior Metrics Plannergeoffrey_legros@hotmail.comMember
Stanley AuerCorporate Accounts Analyststanley_auer61@yahoo.comAdmin
Elvie HamillInvestor Tactics Engineerelvie.hamill39@hotmail.comViewer
Jacinto HahnFuture Infrastructure Architectjacinto.hahn35@hotmail.comAdmin
Marlon WittingNational Program Strategistmarlon.witting58@yahoo.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Ezekiel Ebert

Customer Intranet Assistant

ezekiel_ebert@yahoo.com

Viewer

Lori Ratke-Nitzsche

Regional Assurance Officer

lori.ratke-nitzsche@yahoo.com

Admin

Breana Gutkowski

Product Accountability Orchestrator

breana_gutkowski40@yahoo.com

Admin

Orie Luettgen

International Applications Architect

orie.luettgen@hotmail.com

Admin

Eleanor Koepp

Chief Directives Liaison

eleanor.koepp@gmail.com

Admin

Clementine Auer

District Program Associate

clementine.auer@gmail.com

Member

Users

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

NameRoleActions

Shyann Mann-Pagac

Forward Communications Assistant

shyann.mann-pagac55@gmail.com

Member

Sigurd Zieme

Principal Accounts Planner

sigurd.zieme7@hotmail.com

Viewer

Jayne Walker

Corporate Usability Executive

jayne.walker9@yahoo.com

Member

Virgil Wiza

Regional Assurance Strategist

virgil.wiza@yahoo.com

Viewer

Juliet Paucek

Internal Applications Agent

juliet_paucek@hotmail.com

Member

Leora Hessel

National Implementation Engineer

leora.hessel45@hotmail.com

Admin

Matt Ruecker

Dynamic Marketing Orchestrator

matt_ruecker@gmail.com

Member

Doyle Sipes

Future Solutions Coordinator

doyle.sipes47@yahoo.com

Admin

Clinton Corkery

Central Brand Liaison

clinton.corkery@yahoo.com

Member

Della Predovic

District Paradigm Consultant

della_predovic@yahoo.com

Admin

Josh Dach

Global Operations Assistant

josh.dach47@hotmail.com

Member

Sue Veum

National Research Director

sue_veum@yahoo.com

Viewer

Helen Roberts

Lead Response Architect

helen_roberts@yahoo.com

Member

Mercedes Bernhard

Customer Marketing Coordinator

mercedes_bernhard71@hotmail.com

Admin

Howard Beer

Future Usability Executive

howard_beer4@yahoo.com

Admin

Lauren Kulas

Regional Implementation Supervisor

lauren_kulas57@gmail.com

Viewer

Brittany Runolfsdottir

Corporate Metrics Designer

brittany_runolfsdottir56@yahoo.com

Admin

Davin Kuvalis

Legacy Accounts Associate

davin.kuvalis@yahoo.com

Member

Randy Jenkins

National Identity Representative

randy_jenkins56@yahoo.com

Admin

Celia Anderson

Human Optimization Consultant

celia_anderson@yahoo.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
Hilma Hudson-Spencer PhDernesto.huel@gmail.comSilasvilleInactive$904.01
Rose Hudsonkamren.reichert79@gmail.comNew PeggyburghActive$331.69
Nathen Hudsonluther.zemlak98@gmail.comVirginia BeachInactive$584.09
Lempi Hermannflavio64@yahoo.comLehigh AcresActive$11.91
Mr. Rudy Sporerzora35@yahoo.comOrlandoInactive$581.29
Total$2,412.99

Basic table

Table with Images

NameEmailLocationStatusBalance
Mittie Oberbrunner-Skiles
@andrew.yost
minnie_crooks@gmail.comPort KatelinInactive$2.43
Celia Robel
@iris.morar41
amir64@gmail.comNorth KennyboroughInactive$1,118.00
Adela Dickens II
@thurman_mclaughlin
paolo56@gmail.comDanielfurtActive$74.19
Loretta Bogisich
@kailyn76
evert.hackett51@yahoo.comDellatonActive$1,062.20
Neva Grant
@stacey_quitzon91
geovanni_kutch19@hotmail.comLittletownInactive$98.87

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Liliana Dickishawna_mcdermott-kuphal@gmail.comJuliusportActive$1,082.51
Mindy Mrazrenee_larkin46@yahoo.comMurrayActive$952.52
Blanca Kertzmannshawna9@gmail.comRichmondInactive$470.04
Dr. Alexa Schowaltermike65@yahoo.comRobynfortActive$884.07
Clifton Welchvanessa_friesen-collier14@hotmail.comWest LorenechesterActive$1,005.14
Total$4,394.28

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Glenn Gorczany Jr.karelle85@hotmail.comNorth DesireeshireActive$356.97
Ocie Beckermorton_reichel@hotmail.comSchoenportInactive$262.77
Whitney Webergregg89@hotmail.comPort TheresafurtActive$834.93
Mr. Frederique Durganhelen43@hotmail.comBethesdaActive$1,151.97
Georgiana Greenfelderpatrick23@yahoo.comMeridianActive$557.07
Total$3,163.71

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Dr. Emily Keebler Jr.gilberto_weissnat44@yahoo.comSouth ElmiraboroActive$585.33
Odessa Feeneyherta84@gmail.comPort AmirtonInactive$1,190.66
Melissa Fadelbethany.lubowitz@gmail.comNew JoannefieldInactive$330.37
Kennedi Effertztoni26@gmail.comLake ForestInactive$217.96
Kiera Muellerfrancesco.donnelly@hotmail.comLake MarlonInactive$457.19
Total$2,781.51

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
Faye Harveysydni92@yahoo.comArcadiaInactive$1,173.16
Silvia Balistreriofelia_douglas19@gmail.comRyanshireActive$376.22
Joey Halvorsonclement_shanahan@yahoo.comStokestonActive$279.23
Jerel Runolfssonquincy_lehner3@gmail.comClarksvilleInactive$80.81
Barry Ankundingvalerie72@hotmail.comEast VioletteviewActive$1,125.06
Total$3,034.48

Table with row selection

Card Table

NameEmailLocationStatusBalance
Todd Sipesbridgette33@gmail.comSevernActive$721.61
Mr. Dominick Hoppepatricia92@gmail.comJoannefieldActive$422.85
Bernice Huel-Blockjacquelyn_will-denesik53@gmail.comFort TaylorActive$1,031.92
Grace Moenvalerie_metz44@gmail.comGarrettcesterInactive$340.68
Elias Robel-Mosciskidan_nikolaus76@gmail.comLatoyafortInactive$900.81
Total$3,417.87

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
Eloise Wehnerwarren34@yahoo.comPort EleanoratownInactive$546.52
Shawn Treutelcharles77@hotmail.comMetairieInactive$1,028.72
Manuel Fritschguillermo67@yahoo.comCrystalsideInactive$296.51
Kale McCulloughjonathan.feil@yahoo.comFedericosideInactive$179.09
Bo Conncary.aufderhar@gmail.comClaudiaportActive$150.07
Annette Murphydewey87@hotmail.comRatkeworthActive$338.27
Blanche Morarlucinda.hills50@yahoo.comWest BrianshireActive$262.93
Myrtis Lemkedax19@hotmail.comEast BethanyburyActive$354.71
Marco Schuppeskylar_feil45@yahoo.comSouth LuisfieldActive$59.03
Joel Legrosmorris51@hotmail.comSan FranciscoActive$388.94
Mr. Judah Schusterrosalie.reilly49@gmail.comTorphyboroInactive$1,174.70
Rylee Schamberger-Nitzscheclement22@gmail.comDouglandActive$175.85
Dr. Yvette Maggio Iedith.kuphal@hotmail.comEast CassiestadActive$566.90
Jacinto Leuschkedrew.leannon@yahoo.comErnestochesterInactive$52.32
Joanna Waelchihazel.roob88@hotmail.comMarshallfieldInactive$1,187.11
Total$6,761.67

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