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
INV001PendingBank Transfer$218.34
INV002PaidCredit Card$984.02
INV003PendingCredit Card$569.66
INV004PaidPayPal$205.73
INV005PendingBank Transfer$324.70
INV006UnpaidPayPal$506.67
INV007UnpaidCredit Card$233.19
Total$3,042.31

Simple

Users

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

NameTitleEmailRoleActions
Mack RueckerCentral Creative Orchestratormack.ruecker@yahoo.comAdmin
Theodore DoyleDynamic Accountability Consultanttheodore.doyle51@gmail.comAdmin
Ewald KerlukeDirect Paradigm Analystewald.kerluke@yahoo.comAdmin
Evelyn ParkerChief Mobility Facilitatorevelyn.parker@gmail.comViewer
Ressie KossNational Creative Consultantressie.koss10@yahoo.comMember
Alonzo HilpertLead Program Coordinatoralonzo.hilpert36@hotmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Jena Bailey

Senior Communications Liaison

jena_bailey33@yahoo.com

Viewer

Wilber MacGyver

Global Program Administrator

wilber.macgyver@yahoo.com

Viewer

Bernard Jakubowski

Direct Data Administrator

bernard_jakubowski@yahoo.com

Member

Beatrice Jast

International Interactions Facilitator

beatrice_jast@yahoo.com

Member

Lana Bogisich-Ward

Principal Response Administrator

lana_bogisich-ward@yahoo.com

Admin

Reuben Anderson

International Quality Architect

reuben.anderson@yahoo.com

Viewer

Sticky header

Users

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

NameRoleActions

Norris Rosenbaum

Legacy Metrics Director

norris_rosenbaum@gmail.com

Admin

Tricia Funk

Future Implementation Technician

tricia.funk98@yahoo.com

Admin

Ann Smith

Human Assurance Supervisor

ann_smith45@gmail.com

Viewer

Xzavier Pacocha

National Group Director

xzavier_pacocha@hotmail.com

Member

German Franey

District Branding Producer

german_franey36@gmail.com

Admin

Latoya Lubowitz

Dynamic Accountability Architect

latoya.lubowitz@hotmail.com

Viewer

Samantha Gulgowski

Regional Usability Orchestrator

samantha_gulgowski@yahoo.com

Member

Lamar Shanahan

Lead Brand Consultant

lamar_shanahan@gmail.com

Member

Emile Swift-Fadel

Direct Brand Administrator

emile_swift-fadel@hotmail.com

Admin

Megan Jacobs

District Factors Supervisor

megan_jacobs@hotmail.com

Viewer

Dewey Gottlieb

Investor Assurance Associate

dewey.gottlieb36@gmail.com

Member

Mason Pagac

Chief Security Representative

mason_pagac@hotmail.com

Member

Mac Mertz

Lead Usability Designer

mac.mertz81@yahoo.com

Viewer

Susanna Sauer

Chief Solutions Facilitator

susanna_sauer@gmail.com

Member

Tyreek Mayert

Dynamic Solutions Manager

tyreek_mayert@hotmail.com

Member

Alejandro Cormier

Internal Infrastructure Associate

alejandro.cormier39@gmail.com

Admin

Minnie Wyman

Internal Configuration Officer

minnie_wyman@hotmail.com

Member

Clemens Rippin

International Factors Supervisor

clemens_rippin74@yahoo.com

Viewer

Fatima Hauck

Chief Configuration Planner

fatima.hauck4@gmail.com

Admin

Virginia Runte

Chief Accounts Specialist

virginia_runte@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
Kirstin Bashiriandevante49@hotmail.comEast RhiannonActive$625.94
Ladarius Gibsonerica_anderson-kihn@gmail.comMarvinsideInactive$736.00
Heidi Cummerataluis21@yahoo.comLake ThoraInactive$816.70
Erica Collinscourtney.white56@gmail.comPort RufusviewInactive$153.66
Loren Schultzlori.carroll93@gmail.comLake SandralandInactive$458.68
Total$2,790.98

Basic table

Table with Images

NameEmailLocationStatusBalance
Tremaine Dickinson
@franz91
omar_simonis@hotmail.comNorth ChristinelandInactive$423.50
Isabel Gutkowski
@karolann.kub11
wilfred29@gmail.comMonroeInactive$151.68
Angela Hermiston
@marielle_jerde15
ana_kris87@gmail.comCroninburyInactive$510.65
Florida DuBuque
@ebba.hills
amelia55@gmail.comKochfurtInactive$7.51
Albina Harvey MD
@roxane_mayert3
abel_cormier58@hotmail.comGretchenmouthActive$563.83

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Miss Madeline Rolfsonantonette_brekke15@yahoo.comNasircesterActive$1,165.62
Thea Huelivan_sporer15@yahoo.comNorth JustinbergActive$737.51
Miss Tiana Keelingpete_daniel@hotmail.comFederal WayActive$427.62
Tierra Dibbertmaryann_graham0@yahoo.comPort NellieInactive$815.24
Dr. Carroll Hilllryder.abshire2@yahoo.comWest JoshuasteadActive$578.53
Total$3,724.52

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Libbie Kuvalis-Hirthegiovani.greenholt@yahoo.comThielportInactive$669.84
Vladimir Crooks-Creminlucille.mclaughlin@hotmail.comCarlocesterInactive$379.02
Hailie Corkerydana_balistreri80@yahoo.comToledoActive$1,195.48
Royal Predovictatyana_hane@gmail.comHarlingenInactive$899.23
Jaiden Watersdeja.jacobi20@gmail.comPattistadInactive$357.76
Total$3,501.33

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Kamryn Schummdeontae_johnston6@yahoo.comNew DoloresshireActive$658.89
Brandy Lindgrenscott.mohr67@hotmail.comSouth EvelineActive$1,136.00
Dayana Cummeratagwen_skiles81@gmail.comNew ForreststeadInactive$812.00
Louise Armstronglela_daniel@hotmail.comKalamazooActive$1,101.48
Jerome Pouros DVMshaylee52@hotmail.comRandolphmouthActive$125.80
Total$3,834.17

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
Monique Thompson IVkacie_franey54@yahoo.comWelch-HauckbergInactive$786.22
Marianna Gottlieb-Quitzonbob_luettgen37@gmail.comSouth CristalActive$682.06
Sue Dickinsonteresa_murazik69@yahoo.comNorth LucilleInactive$218.37
Jaden Kutchshelley99@hotmail.comSouth LuciatownInactive$701.08
Christian Robertsdanny60@yahoo.comKirlintonActive$795.04
Total$3,182.77

Table with row selection

Card Table

NameEmailLocationStatusBalance
Mandy Huelstraci_skiles-bauch82@gmail.comMayerhavenInactive$66.71
Sophie Dickibeatrice.cronin50@hotmail.comNorth CharlestonInactive$461.08
Vance Smith MDhector25@yahoo.comKohlerlandActive$394.08
Marielle Kingdelphine19@yahoo.comJordonworthActive$9.37
Americo Bergstromkathryn58@yahoo.comPort SheliaInactive$136.11
Total$1,067.35

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
Emilio Bartonloretta_prohaska@gmail.comNew HowardboroughInactive$292.46
Melody Millsadolphus_rodriguez@gmail.comEast ElizabethInactive$534.85
Maryann Beahanjill.auer@hotmail.comHaverhillInactive$572.81
Eleanore Bednarhardy_breitenberg78@gmail.comParkerInactive$460.30
Eleazar O'Connell-Konopelskililian.mcdermott29@yahoo.comEast TanyachesterInactive$76.42
Daryl Jacobsoncharity.roberts69@yahoo.comNormalInactive$165.27
Helen Blandavallie71@yahoo.comIrmaviewInactive$163.13
Ada Zemlaklenora77@gmail.comNew BrandyportInactive$81.54
Dejah Ankundinggustave_armstrong10@hotmail.comSouth KatlynfurtInactive$999.90
Wade Wildermancrystal86@hotmail.comEl Dorado HillsActive$111.48
Walter Greenfelder PhDjaqueline24@yahoo.comWatsicafortActive$186.25
Anne Lebsackbarbara_boyer@hotmail.comNew RosemariechesterInactive$211.09
Damian Schmeler MDboyd68@yahoo.comWindlerportInactive$498.86
Oliver Murray-Considinearnaldo82@yahoo.comWest CamrynInactive$400.71
Mr. Kenny Hamillathena2@yahoo.comSmithamvilleInactive$61.65
Total$4,816.72

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.