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$457.94
INV002PendingPayPal$542.46
INV003PaidPayPal$443.99
INV004PaidBank Transfer$937.63
INV005PaidPayPal$593.36
INV006UnpaidPayPal$985.64
INV007UnpaidBank Transfer$740.18
Total$4,701.20

Simple

Users

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

NameTitleEmailRoleActions
Myrl RomagueraCorporate Marketing Architectmyrl.romaguera@yahoo.comAdmin
Edmond KochLegacy Functionality Directoredmond.koch@hotmail.comViewer
Janiya KeelingDistrict Markets Developerjaniya_keeling26@gmail.comAdmin
Mylene SchaeferCentral Accountability Developermylene.schaefer@hotmail.comMember
Lori WiegandForward Integration Analystlori.wiegand4@gmail.comMember
Karlee FerryFuture Marketing Agentkarlee_ferry32@yahoo.comViewer

Stacked on mobile

Users

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

NameRoleActions

Carroll McLaughlin

Dynamic Directives Executive

carroll.mclaughlin@hotmail.com

Viewer

Ellis Rau

Investor Solutions Analyst

ellis.rau@hotmail.com

Viewer

Julio Larson

Internal Creative Manager

julio.larson@gmail.com

Viewer

Pamela Kulas

District Interactions Engineer

pamela_kulas68@hotmail.com

Viewer

Ariel Crona

Dynamic Markets Associate

ariel_crona@hotmail.com

Member

Jill Sipes

Central Brand Administrator

jill_sipes@hotmail.com

Viewer

Sticky header

Users

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

NameRoleActions

Gayle Lesch

Global Mobility Supervisor

gayle_lesch19@yahoo.com

Admin

Antonia Kuphal

Internal Program Specialist

antonia.kuphal40@hotmail.com

Viewer

Benny Moore

Lead Infrastructure Officer

benny.moore23@gmail.com

Admin

Eduardo Greenfelder

Internal Mobility Coordinator

eduardo.greenfelder65@gmail.com

Admin

Tyler Maggio

Human Marketing Technician

tyler.maggio15@gmail.com

Admin

Ken Bailey

Regional Branding Producer

ken.bailey@hotmail.com

Viewer

Antonia Hintz

Central Paradigm Supervisor

antonia.hintz@gmail.com

Admin

Eileen Howe

Dynamic Assurance Architect

eileen_howe@hotmail.com

Viewer

Debra Grimes

Regional Configuration Director

debra_grimes49@gmail.com

Admin

Margot Klocko-Turcotte

National Operations Officer

margot_klocko-turcotte@yahoo.com

Admin

Melba Dickens

Lead Markets Administrator

melba_dickens@gmail.com

Viewer

Omer Daugherty

Dynamic Web Engineer

omer_daugherty@hotmail.com

Member

Carla Ritchie

Global Accountability Administrator

carla_ritchie84@hotmail.com

Member

Darla Hoeger

Regional Creative Director

darla.hoeger@yahoo.com

Member

Beryl Haag

District Factors Orchestrator

beryl.haag@yahoo.com

Admin

Nyah Heathcote

Global Paradigm Agent

nyah_heathcote27@gmail.com

Member

Irving Macejkovic

Principal Implementation Planner

irving_macejkovic@gmail.com

Member

Jenna Ratke

Forward Mobility Analyst

jenna.ratke56@gmail.com

Member

Kraig Hartmann

Direct Operations Designer

kraig.hartmann56@gmail.com

Viewer

Greyson Jast

International Integration Architect

greyson.jast15@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
Doreen VonRuedenjoan21@yahoo.comNorth Richland HillsInactive$561.26
Sonya Mullernettie70@hotmail.comTrishastadActive$1,171.97
Brandi Vonjaida96@gmail.comPort TaureansideInactive$742.85
Beau Hackettrufus.gleichner13@yahoo.comDevynsideActive$899.19
Dean Daughertyshari91@hotmail.comLake HankburyActive$652.16
Total$4,027.43

Basic table

Table with Images

NameEmailLocationStatusBalance
Tyrese Hettinger
@donald66
ayla.franey@yahoo.comFraneckiviewInactive$235.21
Johnson Muller
@earl83
leonor.muller@yahoo.comFort CarolineActive$699.24
Sidney Farrell
@gloria10
kevin_grady57@yahoo.comHerzogfieldActive$731.24
Bessie Block
@elijah_cartwright
helga.lemke@hotmail.comWarrenActive$1,071.80
Fermin Farrell
@iris50
andy_ward@yahoo.comSouth TheodoreActive$1,055.62

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Mr. Boyd Dietrichalexandra_beatty@yahoo.comAthens-Clarke CountyActive$738.39
Jerome Altenwerthpercy.mckenzie@gmail.comEast JaniyaInactive$1,155.11
Julie Gradyenoch.fay@yahoo.comMaple GroveInactive$754.13
Geovany Schmelerjay.bergnaum@yahoo.comJewelfortInactive$1,169.47
Wallace Maggioludie60@yahoo.comBatzburyActive$420.51
Total$4,237.61

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Kiana Hayes Iclinton.keeling91@yahoo.comPort IsomfieldActive$393.99
Dr. Ellis Coledaphnee.oreilly@gmail.comWest HipolitofurtActive$673.87
Forrest O'Harastanley.pouros@hotmail.comFort BillInactive$798.18
Lydia Hansencolleen_huel78@gmail.comAlohaInactive$51.61
Irene Jonesole17@gmail.comGrimesboroInactive$491.48
Total$2,409.13

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Lourdes Kossrudy77@hotmail.comHarlingenInactive$167.78
Lila Parker Vrosie_rice-armstrong@yahoo.comEmmerichburyActive$282.84
Preston Langbrigitte.bauch@gmail.comReingerburghActive$472.53
Gavin Hamillgwen.anderson@hotmail.comDearborn HeightsActive$705.54
Myrtle Halvorsonfrank_steuber@gmail.comLeague CityActive$638.97
Total$2,267.66

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
Layne Considineellis12@hotmail.comCrooksboroActive$306.56
Mr. Iva Zemlakluther8@gmail.comNew AmberActive$845.68
Abelardo Bartell Igene54@gmail.comCountry ClubActive$864.51
Moses Haagmichel.zieme@yahoo.comLake AlyceworthActive$133.40
Ena Lowekallie96@hotmail.comNampaInactive$36.22
Total$2,186.37

Table with row selection

Card Table

NameEmailLocationStatusBalance
Amber Jaskolskikatherine37@gmail.comOverland ParkInactive$791.18
Guy Reichertsoledad_hermiston@yahoo.comEmmerichburghInactive$1,044.86
Annabell Schimmeldameon_weissnat31@yahoo.comNew GenevaInactive$81.13
Carmella Rolfson DVMkennedy.schuster54@gmail.comNorth UlicesInactive$359.97
Karlee Maggiotyree.stanton5@hotmail.comWest NoeliasteadActive$632.19
Total$2,909.33

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
Catherine Ornwiley.bradtke@yahoo.comTemeculaInactive$867.97
Tamara Feestdarrel.simonis@yahoo.comMayerfortActive$475.37
Faith Bednartania_kovacek81@yahoo.comWest MarlenehavenActive$53.32
Haylee Hellerbilly81@hotmail.comLake JaclynInactive$715.82
Joey Kirlinjerry_moen@yahoo.comSouth LewismouthInactive$720.20
James Willmsdevonte_parker44@hotmail.comWest JonboroughActive$419.71
Miss Sylvia Murazikfreda7@gmail.comAllentownActive$1,075.24
Al Faynaomi93@hotmail.comFort MargarettcesterActive$713.93
Mara Abbottschuyler.turner@hotmail.comDuBuqueboroInactive$755.27
Mr. Lloyd Barrowsflorence_batz@yahoo.comWest LarrytownActive$725.00
Garrick Predoviclena_stracke@gmail.comPort JoshireActive$460.06
Veronica Binsjacey.medhurst67@gmail.comLeschcesterInactive$864.31
Joe Schusterdeanna58@hotmail.comNewport NewsActive$1,096.10
Mr. Andres Pfefferlindsay.luettgen14@gmail.comKiehn-BogisichviewActive$982.65
Sophie Stokes Ijamir_ferry95@gmail.comNew ThaliaActive$188.86
Total$10,113.81

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.