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
INV001PendingBank Transfer$752.63
INV002UnpaidCredit Card$723.36
INV003PaidPayPal$253.25
INV004UnpaidPayPal$346.66
INV005PendingCredit Card$126.47
INV006PendingBank Transfer$601.10
INV007PendingPayPal$594.00
Total$3,397.47

Simple

Users

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

NameTitleEmailRoleActions
Alice WolfChief Security Produceralice.wolf@yahoo.comAdmin
Crystel YundtProduct Security Developercrystel_yundt68@yahoo.comAdmin
Mckenna RitchieSenior Brand Orchestratormckenna_ritchie82@yahoo.comAdmin
Conner MertzCentral Markets Facilitatorconner.mertz66@hotmail.comAdmin
Graciela CristCorporate Brand Consultantgraciela.crist@hotmail.comViewer
Sim HoppeFuture Markets Assistantsim_hoppe@gmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Oda Daugherty

National Operations Consultant

oda_daugherty5@yahoo.com

Member

Columbus Kovacek

Legacy Intranet Coordinator

columbus_kovacek@hotmail.com

Viewer

Nellie Crooks

Senior Data Producer

nellie_crooks49@yahoo.com

Member

Jerald Beer

Future Usability Developer

jerald_beer88@yahoo.com

Member

Jaycee Lind-Littel

Global Solutions Specialist

jaycee_lind-littel@yahoo.com

Viewer

Shaina Blick

Chief Accountability Planner

shaina_blick11@hotmail.com

Admin

Sticky header

Users

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

NameRoleActions

Salvatore Murazik

Global Security Planner

salvatore_murazik@hotmail.com

Admin

Lori Kunze

Senior Response Technician

lori_kunze33@gmail.com

Viewer

Daisy McClure

Product Group Engineer

daisy.mcclure@hotmail.com

Member

Marilyn Schoen

Investor Operations Consultant

marilyn.schoen52@hotmail.com

Member

Fern Altenwerth

Central Communications Specialist

fern.altenwerth@yahoo.com

Viewer

Suzanne Kassulke

Senior Research Coordinator

suzanne.kassulke@hotmail.com

Admin

Magnolia McCullough

Senior Research Producer

magnolia.mccullough@hotmail.com

Member

Ansley Labadie

International Metrics Consultant

ansley.labadie@hotmail.com

Viewer

Gwendolyn Goldner

Chief Markets Representative

gwendolyn_goldner@hotmail.com

Member

Elza Kemmer

Direct Identity Orchestrator

elza.kemmer45@yahoo.com

Admin

Murray Quigley

Chief Infrastructure Liaison

murray.quigley@yahoo.com

Member

Omer DuBuque

Direct Infrastructure Coordinator

omer_dubuque87@hotmail.com

Admin

Virgil Jaskolski

Corporate Brand Specialist

virgil.jaskolski27@hotmail.com

Member

Rose Huel

District Applications Engineer

rose.huel@yahoo.com

Member

Kevin Quigley

Legacy Security Engineer

kevin.quigley75@hotmail.com

Admin

Lillie Romaguera

Customer Research Agent

lillie_romaguera@yahoo.com

Admin

Sammy Schamberger

Principal Marketing Consultant

sammy.schamberger@hotmail.com

Member

Christie Medhurst

District Paradigm Liaison

christie_medhurst71@hotmail.com

Admin

Chesley Corwin

Senior Assurance Representative

chesley_corwin92@hotmail.com

Viewer

Micaela Schoen

Forward Creative Agent

micaela_schoen53@hotmail.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
Virginie Schaeferubaldo_wiza@yahoo.comWest GennaroActive$515.24
Sandra Botsfordalexandrine35@hotmail.comWalnut CreekActive$565.87
Dr. Nora Sporerelissa_emmerich@hotmail.comO'ConnerportActive$784.35
Maurine Stantondianne_heller@gmail.comSouth MayActive$431.87
Carmel Kiehnthaddeus.harber@yahoo.comConnshireInactive$1,120.04
Total$3,417.37

Basic table

Table with Images

NameEmailLocationStatusBalance
Roberta Denesik
@alysson_mante73
debbie_walker@hotmail.comAltoonaInactive$1,156.00
Joe Wisozk
@terrell_hettinger25
freeda.kutch@yahoo.comLebsackfurtActive$735.31
Mr. Jerome Willms
@elyssa_willms14
lindsey29@gmail.comWest AlvenaInactive$151.27
Jenny Parker
@rowan.langosh93
neil95@hotmail.comSwaniawskiburghActive$1,048.36
Gail Schroeder PhD
@josue96
gerard.koss-fisher@gmail.comLeonardcesterInactive$588.77

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Della Lakin Sr.nicholas_mcglynn76@gmail.comDonaldhavenInactive$1,026.79
Raul Welchtodd_grant@hotmail.comGulfportActive$140.81
Marietta Kunde DDStricia54@yahoo.comEast RobertoviewInactive$1,115.86
Coty Strosinshari.west@hotmail.comFort LorettaActive$256.32
Teri Quigleybryant54@hotmail.comWaipahuActive$153.42
Total$2,693.20

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Reyna Wiegand IIana83@hotmail.comFort HermanInactive$1,152.19
Dr. Brock Dooleyshari_corkery43@yahoo.comOkunevastadActive$582.68
Myron Torpsebastian58@yahoo.comPort JacquelineInactive$831.59
Freddy Boehmkameron.jast98@yahoo.comLake JoanneInactive$742.91
Mr. Noel Hermannoemy.shields69@yahoo.comFort JohannaInactive$551.51
Total$3,860.88

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Ramona Marquardtolga.grimes@yahoo.comDowners GroveActive$805.56
Mr. Florine Kuphaljermain39@yahoo.comBonita SpringsInactive$901.37
Ella Langbessie96@gmail.comPort DangelohavenInactive$248.94
Inez Watersnora_skiles39@yahoo.comLake SherryActive$7.72
Mr. Lilly McClurefreddie_bode50@gmail.comTuscaloosaActive$824.17
Total$2,787.76

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
Nancy Ratkelance_hilll92@yahoo.comRolfsonbergInactive$765.78
Edith Feeneyneil48@hotmail.comMcAllenActive$972.93
Gordon Jenkinscolleen30@hotmail.comLake FrancescasteadInactive$1,074.89
Shaylee Lowefrancisco.mayert48@yahoo.comNew CarrieInactive$146.08
Sophia Wildermanniko_powlowski28@hotmail.comRosenbaumboroActive$33.90
Total$2,993.58

Table with row selection

Card Table

NameEmailLocationStatusBalance
Marcelo Balistrerisavannah90@hotmail.comEast AnahichesterActive$810.61
Wellington Stanton-Walkerraven94@yahoo.comFort ArloActive$880.15
Danika Bogan DVMsammie16@hotmail.comNorth StacybergInactive$263.56
Mr. Brad Hermannjoann74@hotmail.comAmarifurtActive$663.11
Stewart Lubowitzderon_goyette96@hotmail.comLake KatharinafieldActive$3.46
Total$2,620.89

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
Mrs. Marianne Denesikbob0@yahoo.comShanahanbergActive$1,172.37
Kennedi Mohrjarod_rowe54@hotmail.comSandy SpringsInactive$894.55
Darrel Parkersydney.wiegand@gmail.comGulgowskiburyInactive$346.88
Brooks Hyattrudolph_hessel@hotmail.comJackburyInactive$1,164.79
Kristopher Schmelerellen_conn30@gmail.comPittsburghInactive$246.61
Shayna Hagenesmyrtie_emard84@gmail.comDasiacesterActive$641.97
Ms. Annette Smithamjeff.murazik@gmail.comFort DashawnshireActive$699.30
Pascale Beattykate89@gmail.comEast DaveActive$26.10
Kaia Collierminnie8@gmail.comNew NelsonInactive$184.44
Darren Heidenreichsheri.brekke82@gmail.comTauntonInactive$747.01
Amber Rolfsoncaroline85@yahoo.comWest EllissideActive$258.00
Willard Murraykaren.ritchie71@hotmail.comFort MelindashireActive$303.84
Todd Lebsackseth52@hotmail.comSallyworthActive$610.95
Lucia Crist Vbernadette1@hotmail.comPort KiarafurtInactive$561.07
Miss Shelly Cronaeugene.padberg@hotmail.comEwaldsteadInactive$1,114.81
Total$8,972.69

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.