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$881.93
INV002PaidBank Transfer$417.58
INV003PendingCredit Card$460.80
INV004PaidBank Transfer$752.06
INV005UnpaidPayPal$705.27
INV006UnpaidBank Transfer$676.46
INV007PendingBank Transfer$313.47
Total$4,207.57

Simple

Users

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

NameTitleEmailRoleActions
Edythe WehnerForward Research Developeredythe_wehner26@gmail.comAdmin
Raleigh PurdyDynamic Quality Directorraleigh_purdy77@hotmail.comViewer
Maggie GorczanyCentral Usability Facilitatormaggie_gorczany@hotmail.comMember
Maureen JenkinsPrincipal Group Designermaureen.jenkins@yahoo.comMember
Timothy WindlerProduct Research Officertimothy.windler37@gmail.comViewer
Forest AbernathyInvestor Implementation Liaisonforest_abernathy57@hotmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Collin Trantow-Beer

Regional Accountability Designer

collin.trantow-beer@hotmail.com

Viewer

Lynda Stanton

Dynamic Accountability Associate

lynda_stanton35@yahoo.com

Admin

Ollie Parker

Dynamic Optimization Agent

ollie.parker@hotmail.com

Viewer

Janae McLaughlin

Global Implementation Agent

janae.mclaughlin@gmail.com

Admin

Lyda Lesch

Global Configuration Planner

lyda.lesch@gmail.com

Member

Vance Terry

Regional Branding Strategist

vance_terry38@yahoo.com

Member

Sticky header

Users

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

NameRoleActions

Demarco Pfeffer

Internal Operations Administrator

demarco.pfeffer51@yahoo.com

Viewer

Beth McKenzie

International Usability Architect

beth_mckenzie67@gmail.com

Admin

Bailey Hettinger

Human Data Director

bailey_hettinger32@hotmail.com

Viewer

Craig VonRueden-Will

Corporate Data Coordinator

craig_vonrueden-will@yahoo.com

Member

Kathy Koelpin

Corporate Integration Executive

kathy.koelpin@hotmail.com

Viewer

Terrance Stoltenberg

Investor Creative Liaison

terrance.stoltenberg10@gmail.com

Admin

Jeremiah Okuneva

Product Group Orchestrator

jeremiah.okuneva36@hotmail.com

Member

Luisa Bernhard

Global Division Analyst

luisa_bernhard@yahoo.com

Admin

Sunny Yundt

Regional Research Analyst

sunny_yundt@yahoo.com

Viewer

Andre Koss

International Configuration Associate

andre_koss@gmail.com

Admin

Randolph Ritchie

Customer Intranet Associate

randolph_ritchie53@yahoo.com

Admin

Kenny Moore

Principal Research Consultant

kenny_moore86@hotmail.com

Admin

Kristin Ritchie

Dynamic Marketing Agent

kristin.ritchie@yahoo.com

Viewer

Ova Schulist

Internal Branding Specialist

ova_schulist@hotmail.com

Viewer

Kirk Hills

International Factors Consultant

kirk.hills8@yahoo.com

Admin

Layla Zboncak

Forward Functionality Consultant

layla_zboncak@gmail.com

Member

Blanche Leannon

Principal Infrastructure Strategist

blanche_leannon@hotmail.com

Admin

Bertha Maggio

Legacy Group Specialist

bertha_maggio@yahoo.com

Viewer

Gustavo Beahan

Direct Creative Executive

gustavo.beahan43@yahoo.com

Admin

Torrey Altenwerth

Senior Intranet Analyst

torrey_altenwerth@hotmail.com

Viewer

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
Miss Marlene Lindgrenadella17@yahoo.comFort MargottownInactive$137.08
Mr. Alanis Metzkenny.gottlieb@hotmail.comMarksworthActive$501.08
Hanna Prohaskamayra.christiansen@hotmail.comKerlukefurtInactive$78.79
Isaac Grantmelba_deckow39@yahoo.comPort OmarInactive$911.39
Nancy Gibsonamy59@gmail.comSouth ToniInactive$174.71
Total$1,803.05

Basic table

Table with Images

NameEmailLocationStatusBalance
Octavia Huels
@isaiah_stehr
alessandra_bashirian@hotmail.comRooseveltvilleActive$134.49
Richard Schaden
@roslyn.lesch
hertha7@gmail.comCentennialInactive$962.76
Miranda Jones
@kristie.ernser4
kasey.stokes@yahoo.comDemarcusfieldInactive$143.97
Cody Hilll
@lana.toy-kohler
reba49@yahoo.comRosevilleActive$799.00
Arturo Goyette
@chelsea.borer
bernadine.emmerich@gmail.comTucsonActive$252.35

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Mallie Kohlerjaylon_runolfsdottir52@hotmail.comEast MinnieboroActive$173.41
Tremayne Green-Rowemargaretta22@yahoo.comEl MonteInactive$844.17
Aaron Sipes DDSjustin.franecki94@gmail.comEast ErmatonActive$1,161.83
Clair Collins Vryan.mosciski25@gmail.comCummingsportActive$580.05
Sergio Deckowtyrique28@gmail.comReingerfurtActive$474.69
Total$3,234.15

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Loraine Collier DVMjenna.jenkins66@gmail.comPort OrangeActive$218.22
Josephine Rolfson IImacy.mcdermott30@gmail.comLake AnnetteActive$227.36
Annamarie Marquardtharvey.howe@yahoo.comNorth DelberttownInactive$512.90
Valerie Braunearnest.blanda@hotmail.comLake LuellatonActive$763.45
Verna Stehrjustice_weber56@hotmail.comSouth AlbertviewInactive$403.82
Total$2,125.75

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Wendy Riceorval81@gmail.comTulsaInactive$336.25
Mr. Jonathon DuBuqueshelia.thiel54@hotmail.comBuckridgestadActive$901.94
Dr. Brielle Schummgus.reichert@yahoo.comSouth AraceliActive$208.01
Yessenia Jacobilola42@hotmail.comEast AdeleInactive$554.45
Ruben Wymanmadeline_torphy57@hotmail.comNorth YasmineworthActive$368.12
Total$2,368.77

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
Winifred Adams-Tillmanleann.fisher@hotmail.comFlatleyfieldInactive$391.40
Vincent Sauer IVbeth.gislason64@gmail.comEast IsomInactive$244.47
Gene Williamsonjocelyn_johnson@yahoo.comPawtucketActive$1,189.85
Lillian Erdmanbrett_white84@hotmail.comToymouthInactive$520.14
Stephania Sawaynmartine18@yahoo.comNew ThomasfieldInactive$714.16
Total$3,060.02

Table with row selection

Card Table

NameEmailLocationStatusBalance
Ibrahim Yostflossie.emmerich@hotmail.comState CollegeInactive$1,093.17
Bridget Cormierchristina.schmidt@hotmail.comNathansteadInactive$1,119.87
Oliver Schillerpolly.armstrong98@hotmail.comNikolaustownInactive$767.44
Mathew Gusikowskialysha65@yahoo.comWeissnat-GibsonsideActive$724.38
Julio Treuteldeborah20@gmail.comNorth DorrisInactive$916.16
Total$4,621.02

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
Dr. Arthur Sporerreina_legros@gmail.comEast JackInactive$471.22
Judith O'Reillybethel89@gmail.comWestlandInactive$1,098.01
Luna Cruickshankalex.roob@yahoo.comLake CheyanneInactive$125.61
Andre Satterfieldronnie.schinner11@hotmail.comZackaryburghInactive$903.53
Devin McClurecarolyn.schinner@hotmail.comSimonismouthInactive$470.48
Rowland Bergstrommatt_wehner@hotmail.comHeidenreichportActive$543.27
Ashley Rath Idarlene47@yahoo.comRivertonActive$366.22
Dr. Clark Wittingsarah65@yahoo.comReginaldlandActive$1,068.29
Adonis Marquardtalex20@yahoo.comPhoenixInactive$908.37
Carolyn Terrynewton.flatley1@hotmail.comNew GabrielleInactive$632.01
Alycia Gleichnereldred4@gmail.comSatterfieldburyInactive$639.28
Mr. Levi Schneiderjerad.goyette@hotmail.comWest Des MoinesActive$1,195.73
Miss Mercedes Keeblernancy_wiza@hotmail.comKassulke-PurdytownActive$969.22
Lionel Friesenarlene.weber@gmail.comNorth GwenboroActive$117.78
Gordon Morarvelva.kunde@hotmail.comWest ConnieActive$538.63
Total$10,047.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.