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$283.51
INV002UnpaidCredit Card$740.13
INV003PaidPayPal$226.15
INV004PendingCredit Card$775.20
INV005PendingBank Transfer$518.17
INV006PaidCredit Card$395.12
INV007UnpaidBank Transfer$933.99
Total$3,872.27

Simple

Users

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

NameTitleEmailRoleActions
Connor MurazikCustomer Brand Analystconnor.murazik@yahoo.comMember
London RosenbaumLead Directives Producerlondon.rosenbaum@yahoo.comMember
Lourdes ProsaccoCorporate Research Engineerlourdes_prosacco70@yahoo.comMember
Katelin PredovicProduct Mobility Producerkatelin_predovic77@yahoo.comViewer
Luigi TorphyChief Marketing Supervisorluigi.torphy@yahoo.comMember
Guadalupe KingCorporate Group Representativeguadalupe_king79@hotmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Waldo Kautzer

Customer Identity Representative

waldo_kautzer78@gmail.com

Admin

Beulah Hilpert

International Quality Associate

beulah.hilpert@yahoo.com

Admin

Katlyn Huels

Forward Accounts Facilitator

katlyn.huels44@yahoo.com

Member

Dolores Hane

Corporate Security Executive

dolores_hane91@yahoo.com

Viewer

Elisabeth Koch

Dynamic Integration Supervisor

elisabeth.koch@gmail.com

Member

Jonathon Wolff

Lead Response Engineer

jonathon_wolff26@gmail.com

Member

Sticky header

Users

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

NameRoleActions

Kiel Murphy

Legacy Marketing Officer

kiel.murphy44@yahoo.com

Admin

Leon Kuhn

Regional Implementation Producer

leon_kuhn@yahoo.com

Viewer

Dallas Rau

Product Response Planner

dallas.rau@hotmail.com

Admin

Letha Becker-Monahan

Human Data Coordinator

letha_becker-monahan@yahoo.com

Member

Darnell Schmeler

Dynamic Creative Agent

darnell_schmeler62@gmail.com

Admin

Judy Gutmann

Customer Creative Architect

judy_gutmann33@yahoo.com

Admin

Kendra Shields

Corporate Solutions Manager

kendra_shields8@gmail.com

Viewer

Grace Moore

Internal Communications Facilitator

grace_moore@hotmail.com

Viewer

Bethany Sanford-Kihn

Legacy Creative Liaison

bethany_sanford-kihn94@gmail.com

Admin

Julian Mayer

Regional Operations Manager

julian_mayer@hotmail.com

Viewer

Tamara Bailey

Dynamic Brand Supervisor

tamara_bailey15@hotmail.com

Member

Micaela Donnelly

Investor Program Strategist

micaela_donnelly31@gmail.com

Admin

Cordie Rau

Legacy Factors Coordinator

cordie.rau@gmail.com

Member

Ramiro Jacobson-Osinski

Senior Branding Liaison

ramiro.jacobson-osinski64@gmail.com

Viewer

Hannah Sanford

National Research Architect

hannah_sanford81@gmail.com

Admin

James D'Amore

Human Accounts Agent

james.damore38@hotmail.com

Viewer

Cecelia Harber

Corporate Infrastructure Producer

cecelia.harber18@yahoo.com

Member

Vern Schaefer

Lead Operations Analyst

vern.schaefer34@yahoo.com

Admin

Richard Cole

Principal Applications Producer

richard.cole@gmail.com

Member

Deonte Considine

Central Metrics Agent

deonte.considine@yahoo.com

Member

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
Ginger Westrudolph.ernser1@hotmail.comPort VeronicaInactive$865.99
Blake Kautzerchristelle_langosh@gmail.comDoylestadActive$856.75
Antonia Denesikned.hammes@hotmail.comWest KatieActive$1,005.28
Sheri Muellertrent19@yahoo.comEast AngeloInactive$796.96
Mr. Jaquelin Lindgrenclifford81@yahoo.comPort AthenaportInactive$308.63
Total$3,833.61

Basic table

Table with Images

NameEmailLocationStatusBalance
Joanny Weber
@nelle93
kaya1@hotmail.comSouth ArianeboroughActive$817.11
Stacy Maggio-Sipes
@scottie73
pearline_rogahn@gmail.comEbertboroInactive$950.60
Phil Klocko
@graciela_funk
mitchell51@hotmail.comYucaipaInactive$350.67
Orland Carter
@benjamin_hilpert46
jacqueline37@yahoo.comHermannvilleActive$695.83
Melba Kreiger
@abigail.sporer
rashawn_vonrueden@hotmail.comLuciustownActive$1,004.07

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Keegan Effertzvalentina_dibbert68@hotmail.comCiceroActive$313.55
Annabel Spinkaoren42@gmail.comBeaumontActive$1,063.29
Carli Hueldewayne.heidenreich38@yahoo.comSouth AlburghInactive$508.82
Rickey Hyattaustin54@hotmail.comLeannontownActive$168.60
Ms. Norma Ullrichclinton_satterfield57@gmail.comSouth San FranciscoInactive$1,056.03
Total$3,110.29

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Mrs. Jade Kassulkehugh53@gmail.comNorth ElsieActive$1,043.52
Emilio Haagwesley_ernser@yahoo.comMesquiteInactive$499.68
Carl Wiegandsheryl79@gmail.comHamptonActive$311.77
Marguerite Nolan DDSemilia_kreiger@hotmail.comNorth MorganActive$980.65
Maureen Breitenbergtomasa57@hotmail.comLafayetteInactive$795.41
Total$3,631.03

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Crawford Colejovani.goyette@hotmail.comReingersideActive$735.83
Guy Beierraquel32@gmail.comOxnardActive$255.31
Turner Andersonwhitney.herman12@hotmail.comJuanvilleActive$1,027.46
Bryant Lynchalverta.sawayn36@hotmail.comKubfurtActive$233.47
Vivian Johnsoncandace16@yahoo.comNew HenrybergInactive$315.65
Total$2,567.72

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
Jerrell Vondwight.greenfelder-ziemann27@yahoo.comNorth NadinetonInactive$221.56
Clayton Langcharlie.turcotte@hotmail.comLefflersteadInactive$233.02
Daryl Hermistoneva_schuppe@gmail.comGreen BayActive$92.67
Mr. Evan Watsicaelizabeth.powlowski@yahoo.comJanfortActive$745.46
Tyrese Okuneva DDSlilla43@gmail.comSouth GiovanniportActive$808.12
Total$2,100.83

Table with row selection

Card Table

NameEmailLocationStatusBalance
Doris Westrichmond_hackett@hotmail.comKlockosteadActive$621.65
Luis Langchristopher.muller15@gmail.comFlavioburyInactive$197.48
Waino Wintheisertony22@hotmail.comKendrafurtInactive$551.65
Timothy McKenziedennis_kerluke13@yahoo.comAufderhartonActive$680.81
Brooklyn Treutelvalerie2@yahoo.comCliftonInactive$1,067.42
Total$3,119.01

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
Lindsay Legrossarah.marks@gmail.comDominicshireActive$397.50
Dr. Birdie Strackemonica.koelpin63@yahoo.comPort JohnInactive$816.02
Jacquelyn Monahantrevor51@gmail.comWest EarleneActive$752.19
Theresa Kuhnalex.kuhic3@gmail.comNorth SimeontonInactive$877.19
Filomena Mayerjaylen78@gmail.comLemkefieldActive$361.02
Rosario Abbottlewis14@yahoo.comSouth MargueritefieldInactive$1,095.47
Roselyn Batzarmando.beatty@yahoo.comSouth RodolfovilleActive$759.18
Tyrel Ritchie-Zemlakraven.barrows44@hotmail.comWeissnatviewActive$108.69
Shyanne Satterfielddalton88@gmail.comBradtonActive$928.14
Mr. Jon Turnerolivia_ferry@yahoo.comEast MoisesActive$348.25
Van Willmsorlando.flatley@gmail.comJuliusfurtInactive$1,030.47
Mr. Kody Beahangardner73@hotmail.comReddingInactive$257.05
Gene Romaguera-Maggioblanche_leffler@hotmail.comConstanceboroInactive$733.59
Daphney Greenholtdean.christiansen91@gmail.comBuckeyeInactive$429.27
Anderson Cronamarilou.hand@yahoo.comPort BrandonhavenInactive$1,145.25
Total$10,039.28

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.