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
INV001PaidBank Transfer$615.10
INV002PaidBank Transfer$538.61
INV003PendingPayPal$686.42
INV004UnpaidBank Transfer$913.98
INV005PaidPayPal$533.73
INV006PaidPayPal$901.42
INV007PaidPayPal$945.81
Total$5,135.07

Simple

Users

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

NameTitleEmailRoleActions
Carlee KuvalisLegacy Research Designercarlee.kuvalis@yahoo.comMember
Matt BergeLegacy Applications Directormatt_berge59@gmail.comMember
Alexandra TremblayInternational Research Designeralexandra_tremblay82@gmail.comViewer
Estevan RohanGlobal Identity Assistantestevan_rohan38@yahoo.comViewer
Wayne KohlerProduct Branding Assistantwayne.kohler@yahoo.comMember
Jude HermistonSenior Brand Managerjude_hermiston77@yahoo.comMember

Stacked on mobile

Users

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

NameRoleActions

Jamel Green

Global Assurance Administrator

jamel_green@hotmail.com

Admin

Lew Powlowski

Regional Marketing Developer

lew_powlowski54@gmail.com

Member

Elinor Wuckert

Lead Factors Executive

elinor.wuckert26@yahoo.com

Viewer

Diana Thompson

International Integration Assistant

diana.thompson87@yahoo.com

Viewer

Pearline Flatley

Human Brand Designer

pearline_flatley50@hotmail.com

Member

Edna Jakubowski

Direct Creative Coordinator

edna.jakubowski70@gmail.com

Admin

Users

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

NameRoleActions

Deanna Bogan-Ernser

Internal Identity Liaison

deanna.bogan-ernser@hotmail.com

Admin

Reagan Lynch

District Creative Administrator

reagan.lynch@gmail.com

Admin

Arnold Murazik-Raynor

Forward Metrics Strategist

arnold.murazik-raynor@hotmail.com

Viewer

Ivah Senger

International Infrastructure Consultant

ivah_senger2@gmail.com

Admin

Rex Runolfsson

Senior Accounts Representative

rex_runolfsson@yahoo.com

Admin

Guido Breitenberg

Legacy Solutions Analyst

guido.breitenberg4@gmail.com

Admin

Nettie Leffler

Lead Paradigm Orchestrator

nettie_leffler45@yahoo.com

Admin

Pamela Lehner

Human Quality Specialist

pamela.lehner38@gmail.com

Member

Kali Klocko

Dynamic Data Strategist

kali_klocko@hotmail.com

Member

Jabari Kilback

Corporate Identity Designer

jabari_kilback15@gmail.com

Admin

Gussie Mann

Senior Operations Architect

gussie.mann4@yahoo.com

Viewer

Clark Glover

Product Paradigm Architect

clark_glover@hotmail.com

Admin

Emmett Daugherty

Internal Accountability Liaison

emmett_daugherty88@hotmail.com

Admin

Gabriel Hagenes

District Security Consultant

gabriel_hagenes16@yahoo.com

Admin

Alejandro Stoltenberg

Senior Usability Analyst

alejandro_stoltenberg@gmail.com

Viewer

Joel Wolf

District Solutions Analyst

joel_wolf@yahoo.com

Member

Joy Monahan

Global Data Consultant

joy_monahan73@hotmail.com

Admin

Zack Schoen

International Mobility Director

zack_schoen97@gmail.com

Viewer

Felicia Mayert

Investor Group Consultant

felicia_mayert26@yahoo.com

Viewer

Hugo Kuhic

International Implementation Designer

hugo.kuhic@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
Johnathan Muellerdoreen.howell@hotmail.comHansfortInactive$908.13
Raquel Kundeirma_breitenberg@gmail.comCathedral CityActive$77.04
Adolph Quigleylindsey.renner47@hotmail.comSaraboroInactive$969.04
Lorenz Kochsantiago_stroman@hotmail.comRebeccachesterInactive$525.23
Don McLaughlindarwin_corkery78@yahoo.comEast HartfordActive$935.61
Total$3,415.05

Basic table

Table with Images

NameEmailLocationStatusBalance
Blanca Bauch-Johnston
@marco77
hadley88@gmail.comWindlerlandInactive$772.14
Annabel Schmeler MD
@xander_okuneva41
steve.jerde@gmail.comJanesvilleActive$465.37
Grady Weber
@wanda77
alexander.littel2@gmail.comPhyllisboroughActive$284.45
Ashley Franey
@irwin57
julianne.kulas@hotmail.comNew ClarenceActive$698.30
Yvette Champlin
@daisy50
jeannette.brown80@yahoo.comWestlandInactive$214.64

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Audrey Mosciskitomasa.dare47@hotmail.comSouth CaliInactive$1,082.06
Kara Blandavicki.white-raynor@gmail.comEast FredricksideInactive$61.95
Prudence Gislasonsigurd.runolfsson33@hotmail.comPflugervilleActive$749.84
Davon O'Kon MDgustavo.goodwin69@gmail.comNew WarrenburghInactive$402.42
Katherine Yundtalison25@gmail.comWest RowlandmouthInactive$723.51
Total$3,019.78

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Betty Ernsermyrtle.bruen@hotmail.comSouth LeonardcesterInactive$1,043.64
Terri Lynchroy_mccullough33@yahoo.comNew JessefortActive$77.65
Keely Kautzerselmer65@gmail.comBeattyhavenActive$192.98
Cory Wisozkricardo_weissnat15@gmail.comJoshuavilleActive$1,160.89
Marianne Bruenroger.zboncak@yahoo.comReingerportActive$194.82
Total$2,669.98

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Otis Reichelchristine.jaskolski0@gmail.comMinnetonkaActive$1,157.19
Katherine VonRuedenorlando.kris@yahoo.comNatashavilleActive$664.72
Dominic Satterfieldhillary15@hotmail.comFort FranklinActive$175.61
Willard Zboncakkaleb.cassin@gmail.comUrsulaworthInactive$399.49
Eric Emardreva84@yahoo.comPort DorcasInactive$919.01
Total$3,316.02

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
Ethelyn Stehrbenny3@yahoo.comScottstadActive$44.03
Ms. Reilly Ferryisaiah.prohaska69@hotmail.comBrettshireInactive$144.43
Blake Paucekmike_macgyver@yahoo.comGreat FallsActive$709.68
Jadon Kiehn-Romagueraana_okeefe@hotmail.comAlekshireActive$569.87
Annette Kundeminnie_prosacco@yahoo.comNew FerminboroughActive$116.92
Total$1,584.93

Table with row selection

Card Table

NameEmailLocationStatusBalance
Grover Hayesaustyn_schowalter@yahoo.comGilbertInactive$633.53
Jean Wizabeatrice.marvin30@gmail.comKuhicstadActive$779.63
Calista Wymanhannah.hessel@yahoo.comWest NicholastownActive$1,112.68
Dr. Miguel Muellerjasmine.hackett15@gmail.comTatyanafortActive$719.22
Franklin Bruentony.casper@yahoo.comHesselsteadInactive$812.87
Total$4,057.93

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
Candida Kshlerin-Schowalterbrenda31@yahoo.comLangworthcesterInactive$1,110.32
Rudolph Fay DVMkelvin.yost87@gmail.comReddingActive$918.11
Miss Daren Bruenemerald_runolfsson@gmail.comFort LorettaActive$452.03
Cindy Stantondan_rath@gmail.comJenkinsviewInactive$899.10
Elvira Howelljan.dooley2@yahoo.comWillmshavenInactive$876.89
Flora O'Reillylora_stracke@yahoo.comNorth VinniefieldInactive$811.15
Abdul O'Konginger_simonis42@yahoo.comJacobiboroughActive$849.34
Frederic Ferry Jr.isac.brown34@hotmail.comZemlakchesterInactive$1,150.17
Freddie Weberjune45@gmail.comWeimanntownActive$816.52
Miss Tammy Aufderharchristian.nader25@yahoo.comCoral SpringsActive$33.41
Alonzo Koelpinjon_kuhn@gmail.comSouth IsraelworthInactive$21.25
Mellie Beeraylin_roob76@hotmail.comAlekshireActive$723.32
Itzel Reynoldsmakayla.huel19@gmail.comSouth JanaeburghActive$1,158.67
Patti Stamm DDScrawford26@hotmail.comLaishaburghActive$354.06
Dakota Welchvivienne_shanahan@yahoo.comVelvahavenInactive$150.65
Total$10,324.99

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