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
INV001PaidCredit Card$344.66
INV002PendingPayPal$931.53
INV003PendingPayPal$877.62
INV004PendingCredit Card$366.28
INV005PendingPayPal$690.30
INV006PaidPayPal$653.55
INV007PendingBank Transfer$118.51
Total$3,982.45

Simple

Users

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

NameTitleEmailRoleActions
Joy CollinsDistrict Division Producerjoy.collins@gmail.comMember
Charles HarveyDynamic Group Liaisoncharles_harvey@hotmail.comViewer
Laisha CorkeryHuman Accounts Analystlaisha_corkery20@gmail.comMember
Rosie DickiNational Creative Directorrosie_dicki12@gmail.comMember
Kristine RutherfordDistrict Solutions Administratorkristine_rutherford@gmail.comViewer
Ed LindGlobal Applications Coordinatored_lind@hotmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Linda Raynor

Forward Markets Administrator

linda_raynor@gmail.com

Viewer

Scott Wolf

Product Identity Executive

scott.wolf66@yahoo.com

Viewer

Bo Schaefer

Forward Intranet Specialist

bo_schaefer@gmail.com

Viewer

Chanel Nitzsche

Human Marketing Developer

chanel_nitzsche@gmail.com

Viewer

Leona Effertz

National Branding Designer

leona.effertz47@gmail.com

Viewer

Ruben Schneider

Human Quality Coordinator

ruben_schneider10@gmail.com

Admin

Sticky header

Users

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

NameRoleActions

Brionna Hessel

Senior Usability Planner

brionna.hessel@gmail.com

Viewer

Cedric Rice

Regional Response Director

cedric_rice91@yahoo.com

Admin

Raymond Hoppe

District Web Engineer

raymond_hoppe@hotmail.com

Member

Ocie Gottlieb

National Factors Agent

ocie.gottlieb@yahoo.com

Member

Rachael Runolfsson

Lead Quality Liaison

rachael_runolfsson31@gmail.com

Member

Kristopher Kuhlman

Central Quality Strategist

kristopher.kuhlman24@yahoo.com

Admin

Olive Hegmann

Lead Communications Specialist

olive.hegmann@gmail.com

Admin

Gerard Kassulke

National Interactions Executive

gerard_kassulke@hotmail.com

Admin

Macie Kreiger

Corporate Assurance Architect

macie.kreiger@yahoo.com

Viewer

Krystina Parisian

National Usability Manager

krystina_parisian@hotmail.com

Viewer

Syble Fahey

National Research Strategist

syble.fahey@gmail.com

Viewer

Greg Schuster

Direct Response Coordinator

greg_schuster@yahoo.com

Admin

Ann Grady

Lead Tactics Officer

ann_grady@gmail.com

Admin

Dan Russel

Legacy Group Specialist

dan.russel@yahoo.com

Viewer

Ella Pfeffer

Regional Research Developer

ella_pfeffer95@yahoo.com

Member

Conor Ledner

Global Factors Technician

conor_ledner26@yahoo.com

Admin

Emanuel Herzog

Human Markets Technician

emanuel.herzog@hotmail.com

Admin

Roderick Ankunding

Dynamic Quality Supervisor

roderick_ankunding63@hotmail.com

Viewer

Mollie Bosco

Investor Program Director

mollie_bosco@hotmail.com

Viewer

Casimir Graham

Dynamic Communications Consultant

casimir.graham13@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
Magdalen Gibsonshyann_mccullough@gmail.comTheronfortInactive$237.54
Nichole Jacobileanna27@yahoo.comCeresActive$527.09
Catherine Jacobsonviolet.heidenreich98@yahoo.comSmithviewActive$567.12
Armando Bergevern.feil@yahoo.comWest TatumportActive$2.02
Mr. Kellen Haaganna_rogahn@yahoo.comJamesonworthActive$378.75
Total$1,712.52

Basic table

Table with Images

NameEmailLocationStatusBalance
Mable Rutherford
@braeden.lockman
myrtle68@gmail.comDedricsteadActive$335.65
Noe Reichel
@ella12
oliver76@gmail.comNew CorneliuslandActive$412.77
Brenna Doyle Sr.
@gaston_lubowitz-orn
henry25@hotmail.comTulsaActive$339.05
Brook Schulist II
@woodrow_rutherford
eleanore99@gmail.comLake SheliaActive$117.15
Immanuel Kuphal
@dudley35
gardner_abernathy15@hotmail.comEffertzburyInactive$833.25

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Jerome Conncharlotte42@yahoo.comPort TaureanburghInactive$1,050.35
Cleo Heller-Roobashtyn29@gmail.comNew RobertoActive$669.87
Jake Zboncakberneice.botsford@yahoo.comKaleshireActive$323.34
Rochelle Millspercy.kohler@gmail.comHaagworthInactive$739.37
Samantha Larson-Larsonmarjorie90@gmail.comLouisville/Jefferson CountyInactive$753.26
Total$3,536.19

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Jacob Dickibrandi46@hotmail.comLeilanimouthInactive$238.31
Julio Langoshkayla_kunde48@yahoo.comLake MariahInactive$1,086.24
Korbin VonRuedenelisa30@gmail.comLake ChadActive$241.33
Sarah Rolfsonabe.davis@yahoo.comWest MaybellActive$141.93
Elvera Hackettlamar85@hotmail.comJeromefortActive$386.55
Total$2,094.36

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Lilla Howececelia40@hotmail.comKathleenchesterActive$93.02
Madyson Turnerstone_emmerich@gmail.comRaynorworthActive$825.28
Jessica Reicherted.lesch53@yahoo.comPort NathanmouthActive$207.21
Sigurd Littelcameron.nader32@gmail.comJaydentownActive$16.02
Mrs. Helen Jacobsonebony_aufderhar@hotmail.comNewarkActive$757.30
Total$1,898.83

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
Jack Bergeuna.mraz17@yahoo.comNew KennasideActive$576.01
Jamaal Marvin PhDdianna24@yahoo.comCambridgeInactive$19.31
Isabelle Pfeffer DVMfrances63@hotmail.comNeilburyActive$139.62
Lester Naderdarrel77@gmail.comLake HelenInactive$219.92
Talon Stehrraymond92@hotmail.comNew BruceActive$918.08
Total$1,872.94

Table with row selection

Card Table

NameEmailLocationStatusBalance
Morris Dickenskarina.kohler42@gmail.comHoustonInactive$528.74
Priscilla Reillydaphney.heathcote53@yahoo.comNorth HerbertInactive$752.82
Craig Runterylee_donnelly@gmail.comPort NathanviewInactive$904.71
Melissa Gottlieb Jr.marta90@yahoo.comProsaccoportInactive$988.09
Erwin Yundthenrietta_pagac@hotmail.comLake FabianInactive$1,062.24
Total$4,236.60

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
Oscar Cassinelton_kerluke5@yahoo.comCharlenetonInactive$979.91
Genoveva Donnellykari_larson81@hotmail.comFort KiannaActive$509.34
Orville Gorczany DDSima.schaefer@yahoo.comKihncesterInactive$110.33
Karley Feilalanna.heaney23@hotmail.comRohnert ParkActive$252.00
Elvira Kovacekpresley_nitzsche25@hotmail.comPort DianeActive$200.91
Dominique Nolanalfred.quigley27@hotmail.comTorplandInactive$594.53
Serena Dietrichkamryn40@hotmail.comGreen BayActive$1,126.06
Sonya Rohantommie_witting@yahoo.comEmmatonInactive$1,068.51
Juvenal Crist Sr.raymundo.zboncak@hotmail.comNorth HaroldportInactive$553.37
Mr. Marjory Macejkovichattie_bruen@yahoo.comKatrinaboroughInactive$252.31
Manley O'Connellwilfredo_bechtelar@yahoo.comCaspercesterInactive$492.99
Verna Armstrongcamille83@gmail.comHicksvilleInactive$585.84
Mr. Roosevelt Heidenreich-Willsofia71@yahoo.comSouth HaroldsideActive$74.65
Mitchell Ankundingherman_botsford@yahoo.comSouth MarlontonActive$1,026.23
John Sawaynmarguerite40@gmail.comMayertfurtInactive$1,172.04
Total$8,999.02

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.