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$845.21
INV002UnpaidBank Transfer$634.44
INV003PaidPayPal$916.13
INV004UnpaidPayPal$354.32
INV005UnpaidPayPal$729.14
INV006PendingBank Transfer$515.63
INV007UnpaidCredit Card$159.02
Total$4,153.89

Simple

Users

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

NameTitleEmailRoleActions
Ben KuhicCorporate Integration Agentben.kuhic98@hotmail.comMember
Waylon HartmannInternational Marketing Coordinatorwaylon_hartmann@gmail.comAdmin
Oma WilliamsonGlobal Factors Manageroma_williamson@hotmail.comMember
Geraldine Trantow-MonahanInvestor Operations Coordinatorgeraldine_trantow-monahan53@yahoo.comAdmin
Felicia ProhaskaChief Functionality Officerfelicia.prohaska@yahoo.comViewer
Marcelle ZboncakChief Applications Associatemarcelle_zboncak89@gmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Charity Gottlieb

Future Marketing Coordinator

charity_gottlieb89@hotmail.com

Member

Maci Goyette

Forward Implementation Liaison

maci_goyette@hotmail.com

Admin

Marie Dicki

Legacy Communications Developer

marie.dicki@yahoo.com

Admin

Alphonso Kunze

Central Directives Facilitator

alphonso_kunze@hotmail.com

Member

Taryn Zulauf

Product Identity Developer

taryn_zulauf@yahoo.com

Admin

Alexandre O'Connell

Customer Research Representative

alexandre.oconnell95@hotmail.com

Member

Sticky header

Users

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

NameRoleActions

Mohammad Champlin

District Functionality Designer

mohammad.champlin24@hotmail.com

Member

Marie Lubowitz

Dynamic Directives Director

marie.lubowitz67@gmail.com

Viewer

Rachelle Schuster

Future Integration Administrator

rachelle_schuster72@yahoo.com

Viewer

Thalia Morar

National Marketing Supervisor

thalia.morar@yahoo.com

Admin

Brendan Gerlach

National Assurance Analyst

brendan.gerlach41@hotmail.com

Admin

Jamey Kshlerin

Corporate Identity Supervisor

jamey_kshlerin@gmail.com

Viewer

Golda Ferry

Chief Accountability Coordinator

golda_ferry@yahoo.com

Admin

Paulette Ankunding

Customer Mobility Coordinator

paulette_ankunding23@yahoo.com

Viewer

Kody Zemlak

Global Usability Technician

kody_zemlak64@hotmail.com

Admin

Aaron Collier

Legacy Communications Planner

aaron_collier@yahoo.com

Viewer

Velma Kunde

Regional Metrics Liaison

velma.kunde14@gmail.com

Member

Bernhard Mann

Investor Brand Analyst

bernhard_mann@hotmail.com

Admin

Kenneth Denesik

Forward Operations Representative

kenneth_denesik@yahoo.com

Viewer

Jennings Hansen

International Quality Specialist

jennings.hansen@yahoo.com

Viewer

Alanna Armstrong

Human Accountability Designer

alanna_armstrong47@gmail.com

Admin

Marcia Casper

Chief Functionality Developer

marcia_casper29@hotmail.com

Admin

Brisa Hills

Human Infrastructure Executive

brisa.hills@yahoo.com

Admin

Tamia Bogisich

Direct Operations Strategist

tamia.bogisich@gmail.com

Member

Reid Funk

Investor Markets Agent

reid.funk@yahoo.com

Member

Llewellyn Kshlerin

International Infrastructure Manager

llewellyn.kshlerin@hotmail.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
Marcos Jacobson IIernest38@yahoo.comSouth DelphiavilleInactive$722.01
Dr. Beryl Turcotte-Collinsruben60@gmail.comMetzfieldActive$774.16
Dr. Brendon Sawayn DVMmarjorie7@gmail.comTerre HauteActive$564.24
Bernard Padberg-Trompkacey.nader16@gmail.comLynch-DanielfieldInactive$24.34
Kennedy Fritschfloy_kunze97@gmail.comSouth PetraInactive$702.33
Total$2,787.08

Basic table

Table with Images

NameEmailLocationStatusBalance
Kent Trantow Sr.
@angie_bergnaum
daryl_towne@hotmail.comFort JoannaInactive$990.92
Deontae Walsh
@garland.jacobs87
darryl_russel@hotmail.comFort BertashireActive$1,036.35
Mrs. Chaya Marquardt
@samuel.green11
eddie_klein@hotmail.comBrownboroInactive$368.63
Quincy Blanda
@hugo.sawayn5
rosario.schneider@gmail.comLarkinmouthInactive$74.15
Hollie Hammes
@favian_batz50
ansel_dare84@yahoo.comPort JasminechesterInactive$779.28

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Erick Kautzerbuford_stroman64@gmail.comLake ClaytownActive$1,078.72
Wilbur Morissettesarina8@hotmail.comTallahasseeInactive$728.02
Jeffry Zboncakjaquelin96@hotmail.comLake AureliatownInactive$50.09
Elliot Swiftbernard.franey66@yahoo.comPort ArturochesterInactive$636.15
Gilbert Loweyolanda_schultz33@yahoo.comNew MattiechesterInactive$311.24
Total$2,804.22

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Ferne Wuckertbuck74@gmail.comCollege StationInactive$878.94
Teri Walterkirk_schmidt@hotmail.comWelchtownActive$590.68
Katelin Collierbuddy_casper17@gmail.comJoelandActive$627.78
Lois Ernser-Swaniawskitomas.gibson88@hotmail.comEast BrittanyInactive$446.02
Opal Willkarelle20@hotmail.comWest AllisActive$589.77
Total$3,133.19

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Krista Tillmanemmet6@gmail.comNorth WaylonvilleInactive$619.16
Christ Rippinarchibald_cruickshank76@yahoo.comTheresaboroActive$601.61
Tre Lowemaritza_wehner13@gmail.comHowellfurtInactive$508.77
Florida Fisher Jr.rubye.senger98@gmail.comHershelsteadInactive$671.51
Roderick Tremblaymauricio_mcclure51@hotmail.comBernhardmouthInactive$1,157.08
Total$3,558.13

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
Carlotta Harberdawson_windler@gmail.comNormalInactive$1,059.37
Mr. Alonzo Becker IIadrienne_schaden-wisoky@gmail.comNew AlvinActive$867.73
Donna Lubowitz Vglennie.gottlieb@yahoo.comConcordInactive$108.77
Derek Aufderharmaurice69@hotmail.comRiverviewActive$578.48
Rey Streichpeter71@gmail.comOrland ParkActive$18.24
Total$2,632.59

Table with row selection

Card Table

NameEmailLocationStatusBalance
Diane Hessel Iyvette87@gmail.comRippinfortActive$1,185.47
Jessica Skileselisha6@yahoo.comParkervilleInactive$869.58
Felton Kemmerarne31@hotmail.comDillontonInactive$1,042.31
Gilbert Toylizeth_connelly@yahoo.comFort EddieInactive$679.38
Otis Turcotteida15@gmail.comEast RhondaActive$896.72
Total$4,673.46

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
Howard Framimay_price61@hotmail.comNorth LaneyInactive$283.25
Erna Abbott Jr.roderick10@gmail.comEast MyrticeburghActive$431.82
Kyra Schuppeeloy.ebert@hotmail.comFort QueenieworthInactive$78.06
Dr. Misael Jenkinstrenton_witting19@hotmail.comGarden GroveActive$515.42
Roland Langoshdan70@hotmail.comMillcreekActive$104.01
Damon Aufderharphyllis_buckridge@gmail.comPort SueInactive$450.06
Xavier Gusikowski IIIdevante_flatley@gmail.comCeceliafieldActive$844.73
Omar Bogisichjared_cronin93@hotmail.comHodkiewiczstadActive$700.29
Rosella Feeneyhenrietta83@gmail.comRempelhavenActive$992.77
Megan Lefflerkrista_schumm97@hotmail.comNapaInactive$983.96
Desiree Kiehnlance68@yahoo.comGreeleyActive$955.23
Emmie Schmelerbrandy_doyle@gmail.comBurlingtonInactive$833.91
Jody Harveynellie84@hotmail.comWest CurtisvilleInactive$867.67
Malika Little DDSmalika_green13@gmail.comHighlandInactive$80.67
Ashlee Rogahn DVMjed_lebsack@yahoo.comNorth BulahportActive$1,103.80
Total$9,225.65

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.