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
INV001PaidPayPal$219.75
INV002PendingPayPal$127.97
INV003PaidPayPal$614.12
INV004PaidCredit Card$477.63
INV005PaidPayPal$232.25
INV006UnpaidBank Transfer$725.76
INV007PaidPayPal$880.97
Total$3,278.45

Simple

Users

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

NameTitleEmailRoleActions
Dedric FritschDistrict Accountability Analystdedric_fritsch@yahoo.comViewer
Weston KihnForward Interactions Facilitatorweston.kihn94@yahoo.comViewer
Fernando KeeblerInvestor Directives Consultantfernando.keebler@yahoo.comViewer
Vladimir ConnellyCentral Directives Specialistvladimir_connelly94@hotmail.comMember
Aditya NikolausDistrict Group Executiveaditya.nikolaus@hotmail.comMember
Giovanni BoscoDistrict Interactions Producergiovanni.bosco4@hotmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Kayleigh Bogan

District Tactics Associate

kayleigh_bogan@yahoo.com

Viewer

Jaida Boyer

Dynamic Optimization Coordinator

jaida.boyer93@yahoo.com

Viewer

Olive Daniel

Corporate Paradigm Coordinator

olive_daniel15@gmail.com

Admin

Grady Bode

Regional Communications Manager

grady.bode@yahoo.com

Member

Isaias Zemlak

Dynamic Operations Supervisor

isaias.zemlak@yahoo.com

Member

Berta Kuphal

Global Paradigm Officer

berta_kuphal@yahoo.com

Admin

Sticky header

Users

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

NameRoleActions

Wilson Champlin

Global Accounts Manager

wilson_champlin28@hotmail.com

Member

Justina Reilly-Ryan

Human Data Facilitator

justina_reilly-ryan92@yahoo.com

Viewer

Mikel Raynor

District Infrastructure Assistant

mikel_raynor87@gmail.com

Admin

Myrtle Becker

Principal Operations Executive

myrtle.becker89@gmail.com

Viewer

Penny Mills

Direct Group Technician

penny_mills86@yahoo.com

Admin

Omar Yundt

Chief Security Executive

omar.yundt@hotmail.com

Viewer

Granville Kohler

Dynamic Tactics Engineer

granville_kohler@gmail.com

Admin

Muriel Raynor

Direct Response Manager

muriel.raynor4@yahoo.com

Member

Maybell Funk

District Directives Technician

maybell_funk@hotmail.com

Viewer

Audrey Franey

Product Identity Analyst

audrey_franey@hotmail.com

Member

Alma Reichel

Chief Quality Coordinator

alma.reichel42@gmail.com

Admin

Braden Fay

Central Tactics Manager

braden.fay11@hotmail.com

Admin

Zackery Pfannerstill

National Communications Architect

zackery_pfannerstill81@gmail.com

Member

Steve Waters

International Security Director

steve_waters@yahoo.com

Member

Linnie Spinka-Labadie

Customer Directives Architect

linnie.spinka-labadie@hotmail.com

Viewer

Hope Graham

Lead Program Analyst

hope_graham@gmail.com

Member

Serenity Smith

Product Solutions Technician

serenity.smith65@yahoo.com

Viewer

Jacinto Rau

Legacy Implementation Liaison

jacinto.rau74@hotmail.com

Viewer

Devin Lebsack

Forward Implementation Coordinator

devin.lebsack@yahoo.com

Viewer

Aaron Miller

Global Program Liaison

aaron_miller@hotmail.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
Peter Prohaskabrett_roberts@gmail.comRippinvilleActive$313.35
Ellsworth Wisozkpatti51@gmail.comNatashatownInactive$1,002.76
Karlie Schmeler Vcandelario59@hotmail.comKokomoInactive$1,168.54
Jerel Haaggerald.hilll@yahoo.comHettingervilleActive$577.40
Mateo Dickiluigi.breitenberg75@yahoo.comFishermouthInactive$642.80
Total$3,704.85

Basic table

Table with Images

NameEmailLocationStatusBalance
Jonathan Batz
@evan.abernathy
thomas_hammes@hotmail.comCorkerycesterInactive$30.99
Shelley Rippin
@ted.hessel
nina.kozey99@gmail.comNorth StephenbergInactive$457.10
Chester Jenkins
@vicki23
bobby.rodriguez@gmail.comLawrencefurtActive$815.97
Gregory Wintheiser
@duncan_medhurst29
kyla9@hotmail.comMantecaActive$205.21
Dr. Emely Nitzsche
@rigoberto.larson11
jeanette83@hotmail.comEast ZacharyInactive$1,031.77

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Leon Leuschkebessie39@gmail.comSchmidthavenActive$290.48
Maximo Strosinhumberto_kiehn@gmail.comSchroedershireActive$944.10
Louise Dare-Willmscarroll8@gmail.comRoselynstadActive$998.73
Verdie Aufderharsadie32@gmail.comCoral GablesInactive$159.42
Dale Farrelldallin.heathcote38@gmail.comJuanashireInactive$914.50
Total$3,307.23

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Desiree Sawaynmilton87@hotmail.comLucindahavenActive$583.44
Melissa Cronincarmelo.rosenbaum67@gmail.comSpringfieldInactive$742.25
Amalia Kertzmann-DuBuquefae66@gmail.comPort DeshaunActive$411.12
Mr. Emanuel Leannon IIImercedes_legros43@yahoo.comCasperInactive$415.17
Kennedi Deckowkendra.mclaughlin-hagenes@yahoo.comDollyfieldActive$60.42
Total$2,212.40

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Benny Wintheisershari_oberbrunner@gmail.comApple ValleyInactive$286.81
Erick Thompsonkiel.prohaska@yahoo.comSouth MathewInactive$875.33
Laverne Dibbertnoah_stracke@hotmail.comWest JacquelinefieldActive$681.43
Friedrich Hayestommy17@hotmail.comPalm HarborInactive$711.43
Mr. Kale Cassinolin69@yahoo.comNew StewartcesterActive$1,143.02
Total$3,698.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
Ora Huelssasha29@hotmail.comTauntonInactive$1,180.17
Dr. Bonnie Prohaskaricardo_stanton@yahoo.comWest OllieInactive$244.51
Nestor Schroeder IValejandro.zulauf@hotmail.comCharlottetonInactive$240.63
Melany Toycarl.price79@hotmail.comStromantownActive$156.20
Mr. Orville O'Konkristie.robel44@yahoo.comFort MarioActive$217.34
Total$2,038.85

Table with row selection

Card Table

NameEmailLocationStatusBalance
Kenyatta Kuphaljon.daniel@gmail.comNorth MiltonInactive$164.50
Isabel Gusikowskiromaine35@yahoo.comPort AshleighfortActive$214.25
Zena Lubowitzelbert.barton15@gmail.comRosenbaumburyActive$23.29
Lisa Grahamtanya65@yahoo.comMethuen TownInactive$755.79
Elizabeth Blickviola59@hotmail.comSchimmelshireActive$136.92
Total$1,294.75

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
Mr. Justin Dooley-Trantow PhDneal40@hotmail.comSan Buenaventura (Ventura)Active$1,093.91
Edith Hoppearchie27@gmail.comBodeworthActive$939.18
Kristina Huelsoscar.collins@yahoo.comFort VickieActive$569.73
Karl Schaeferflorian_collier-wuckert@hotmail.comEast AugustinecesterInactive$199.47
Dr. Earl Hellerella_ritchie88@gmail.comAllantonActive$161.45
Eunice Heaneysalvatore75@yahoo.comEast HipolitoworthActive$467.79
Celestine Franeylionel_leuschke@hotmail.comTremblayportInactive$1,011.95
Leah Bednaralan.howe@yahoo.comChicopeeActive$221.34
Billie Kihnada11@gmail.comNew MarcelinashireActive$863.78
Melissa Kuhic MDclint_torp56@hotmail.comEileenchesterInactive$974.77
Myriam Langworth-Lockmanmargarett_carroll18@yahoo.comNorth GarybergActive$403.90
Luis Cormierimani_mccullough95@gmail.comFountainebleauActive$176.99
Callie Westransom.howe@hotmail.comPort NadiaInactive$588.15
Alexis Hegmanneula55@yahoo.comPort LizziesteadInactive$757.15
Miss Tanya Boscoerma.kertzmann47@gmail.comBrooklineActive$710.30
Total$9,139.86

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

Switch

A control that allows the user to toggle between checked and not checked.

Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.