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
INV001PendingCredit Card$189.23
INV002PaidPayPal$287.91
INV003UnpaidBank Transfer$282.78
INV004PendingCredit Card$630.60
INV005UnpaidBank Transfer$620.30
INV006PendingPayPal$910.34
INV007UnpaidBank Transfer$298.78
Total$3,219.94

Simple

Users

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

NameTitleEmailRoleActions
Loren KeelingInternational Brand Associateloren_keeling77@hotmail.comAdmin
Bridie LoweDynamic Identity Assistantbridie_lowe@yahoo.comMember
Dina Kozey-HeidenreichRegional Applications Coordinatordina.kozey-heidenreich@yahoo.comAdmin
Lindsey FriesenCentral Quality Administratorlindsey_friesen@gmail.comMember
Marvin SpinkaDistrict Tactics Architectmarvin_spinka72@hotmail.comViewer
Leah WalshDirect Intranet Engineerleah_walsh@yahoo.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Jeremiah Cole

Direct Accountability Specialist

jeremiah.cole96@hotmail.com

Member

Alan Hermann

Future Mobility Supervisor

alan_hermann94@gmail.com

Admin

Kari Connelly

Corporate Applications Developer

kari.connelly@hotmail.com

Admin

Olivia Hirthe

Corporate Web Orchestrator

olivia_hirthe47@gmail.com

Admin

Mariam Casper

Customer Identity Planner

mariam.casper@gmail.com

Viewer

Nathaniel Rippin

National Accountability Orchestrator

nathaniel_rippin@hotmail.com

Viewer

Sticky header

Users

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

NameRoleActions

Alma Barton

Corporate Identity Specialist

alma_barton@hotmail.com

Viewer

Virgie McDermott

Forward Factors Supervisor

virgie.mcdermott25@gmail.com

Admin

Vincent Lesch

Future Accountability Representative

vincent.lesch@hotmail.com

Viewer

Kira Marks

Internal Solutions Manager

kira_marks53@hotmail.com

Member

Danny Nader

Principal Accounts Facilitator

danny_nader49@hotmail.com

Viewer

Shanel Tillman

National Data Specialist

shanel.tillman65@yahoo.com

Admin

Maci Bailey

Direct Functionality Consultant

maci_bailey@yahoo.com

Admin

Steven Osinski

District Web Executive

steven_osinski10@hotmail.com

Admin

Kamren Doyle

Human Security Designer

kamren_doyle93@hotmail.com

Admin

Alexander Hoppe

Legacy Division Developer

alexander_hoppe7@hotmail.com

Admin

Alexandre Rempel

Future Functionality Administrator

alexandre_rempel@yahoo.com

Member

Marcia Auer

Legacy Research Specialist

marcia_auer89@yahoo.com

Admin

Joshuah Konopelski

Customer Brand Executive

joshuah.konopelski82@gmail.com

Admin

Marion Trantow

Global Creative Developer

marion_trantow@hotmail.com

Admin

Austin Price

Legacy Security Planner

austin.price36@gmail.com

Member

Mercedes Hyatt

Investor Response Manager

mercedes_hyatt@gmail.com

Member

Earnest Lowe

Central Division Associate

earnest_lowe96@gmail.com

Member

Britney Abernathy

Investor Operations Developer

britney.abernathy86@gmail.com

Viewer

Gabriella Cronin-Mann

Chief Markets Coordinator

gabriella_cronin-mann@yahoo.com

Viewer

Nicole Kautzer-Bruen

Senior Tactics Assistant

nicole_kautzer-bruen@gmail.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
Jettie Bechtelaralexandra_stokes@gmail.comZiemeviewActive$87.03
Vicenta Mohrdahlia_mante25@hotmail.comRichardfieldInactive$327.76
Ms. Erica O'Haradenise33@yahoo.comRoseburghInactive$1,119.17
Kyle Kriscade_abernathy65@yahoo.comLake IanboroInactive$73.09
Dr. Leroy Pacocharaheem_quigley11@yahoo.comHauckboroughActive$526.25
Total$2,133.30

Basic table

Table with Images

NameEmailLocationStatusBalance
Kristina O'Conner-Huels
@jesse54
asa67@yahoo.comNorth LisaInactive$891.52
Jeffery Keeling
@angus.pollich22
faith.ledner67@yahoo.comDanburyInactive$347.82
Ruben Effertz
@marian70
elinor_thiel@gmail.comMercedActive$640.04
Elisa Stracke
@marlon_nitzsche39
simon55@hotmail.comWest AnabelleActive$743.42
Whitney King
@eloise_hessel41
irma.ohara26@hotmail.comWest AubreysideInactive$860.80

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Douglas Homenicklorenzo62@gmail.comNew MartyActive$812.76
Dr. Verna Keeblercharles.senger@yahoo.comPinellas ParkInactive$863.18
Marshall Wolfelena66@hotmail.comFort AglaeActive$900.00
Gerardo Wilkinsonhorace_kohler35@yahoo.comLynchmouthInactive$440.35
Halle Leffler-Wehnerlena9@hotmail.comEast EwellInactive$351.05
Total$3,367.34

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Verlie Framicruz.gottlieb54@hotmail.comCasperActive$1,181.40
Brown Wisokyllewellyn.price@gmail.comSouth KathrynmouthInactive$338.27
Ms. Hattie Bayermarguerite30@hotmail.comWest KatestadInactive$868.69
Janie Pollichyolanda_reichert18@hotmail.comTorptonInactive$373.18
Tami Spinka MDstella.rempel@yahoo.comPort MarshaboroInactive$416.26
Total$3,177.80

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Veda Bauchcelestine.volkman19@hotmail.comNew JudyActive$434.95
Dr. Kirstin Rogahnmandy.wisozk@gmail.comChandlerInactive$133.32
Jennyfer Vandervortberta_yundt@gmail.comGoldnerworthActive$844.20
Velva Williamsonjena26@gmail.comFond du LacInactive$710.96
Kelvin Mohrbeulah.bauch@yahoo.comRuntemouthActive$714.53
Total$2,837.96

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
Elaine Champlinimelda_thiel@yahoo.comSt. PaulActive$949.22
Vella Rodriguezkarla.gottlieb36@hotmail.comKelleyfortActive$376.47
Ivah Beahannicholaus.hansen@gmail.comThieltonInactive$652.69
Hertha Borerelijah.mcglynn16@gmail.comBrooklineInactive$691.03
Ellsworth Darenellie.kiehn@gmail.comLake RidgeActive$844.72
Total$3,514.13

Table with row selection

Card Table

NameEmailLocationStatusBalance
Mr. Leda Hermannlindsey38@yahoo.comWaelchimouthActive$355.87
Erick Goldnerlavon20@hotmail.comWest RosaInactive$818.81
Darian Stiedemannrachel97@yahoo.comNew BrendaInactive$329.18
Marta Hellerfernando30@hotmail.comWest ElzatownInactive$683.80
Eugene Wymanhollis_auer40@gmail.comNew JadeActive$301.53
Total$2,489.19

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
Jessica Treutel IVlillian96@gmail.comFort MadelineActive$8.12
Everett Heathcotescot.gutkowski@gmail.comMorarsideInactive$659.71
Jaycee Macejkovicthea26@yahoo.comPort BetsychesterInactive$439.91
Teri Bergstromhelmer27@gmail.comEast RamonInactive$60.61
Axel Stiedemanntonya_blick9@gmail.comZiemefurtActive$1,084.85
Selena Beerhugo_stoltenberg88@gmail.comJuneshireInactive$1,049.14
Rhea Dietrichremington38@hotmail.comO'KonstadActive$136.72
Crystal Wintheiserjana25@hotmail.comPort MorrischesterActive$1,033.49
Mr. Amely Reichertdexter40@hotmail.comLake TaniastadActive$758.93
Jeremiah Krajcikenid.turcotte99@yahoo.comNorth IsaiahstadActive$290.91
Lamar Adamscayla_tremblay73@hotmail.comGreenwoodInactive$362.46
Ben Schadencarl.yost80@yahoo.comLake DanielInactive$651.44
Jerrod Schambergerdaryl47@gmail.comPuebloActive$1,000.45
Alyssa McGlynndemetris0@gmail.comGusikowskiworthInactive$1,189.59
Mindy Tromptoney_luettgen@hotmail.comBinghamtonInactive$651.93
Total$9,378.26

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.