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
INV001PendingPayPal$403.95
INV002PaidPayPal$404.50
INV003UnpaidBank Transfer$912.72
INV004PendingCredit Card$380.49
INV005PaidPayPal$184.14
INV006PendingBank Transfer$918.24
INV007PaidBank Transfer$177.42
Total$3,381.46

Simple

Users

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

NameTitleEmailRoleActions
Darren KuhnForward Response Liaisondarren_kuhn@hotmail.comViewer
Marguerite GrimesDirect Group Managermarguerite_grimes@hotmail.comMember
Sheri PfefferDirect Branding Producersheri.pfeffer57@yahoo.comViewer
Bessie GoodwinDynamic Group Representativebessie.goodwin26@hotmail.comViewer
Celestino ZiemannCentral Solutions Engineercelestino.ziemann80@gmail.comAdmin
Jannie DonnellyNational Response Executivejannie.donnelly12@hotmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Lucy Glover

Global Security Engineer

lucy.glover49@yahoo.com

Admin

Lucas Armstrong

Internal Solutions Coordinator

lucas_armstrong@hotmail.com

Member

Conrad Hermann

Human Marketing Designer

conrad.hermann29@yahoo.com

Viewer

Casey Bergstrom

District Quality Specialist

casey.bergstrom@hotmail.com

Viewer

Lelia Bosco

National Brand Assistant

lelia_bosco64@hotmail.com

Viewer

Carmen Turner

Senior Interactions Specialist

carmen_turner3@gmail.com

Viewer

Sticky header

Users

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

NameRoleActions

Kayla Bechtelar

Regional Usability Director

kayla_bechtelar@hotmail.com

Viewer

Lois Howe

Lead Directives Officer

lois_howe@gmail.com

Viewer

Cary Jacobson

Direct Data Strategist

cary_jacobson27@gmail.com

Admin

Rita Wyman

International Web Executive

rita_wyman37@gmail.com

Admin

Tom Bednar

Investor Functionality Administrator

tom_bednar@gmail.com

Member

Elaine Schinner

Human Paradigm Consultant

elaine_schinner1@gmail.com

Admin

Louie Leffler

Direct Division Officer

louie.leffler64@gmail.com

Viewer

Jeannie Turner

Corporate Assurance Specialist

jeannie_turner85@gmail.com

Admin

Terri Trantow

Human Brand Developer

terri_trantow@yahoo.com

Viewer

Santa Skiles

Global Markets Manager

santa.skiles2@yahoo.com

Viewer

Cassandre Schumm

Global Quality Architect

cassandre_schumm38@gmail.com

Member

Edmond Goldner

Legacy Paradigm Liaison

edmond.goldner@gmail.com

Admin

Ibrahim Barton

Senior Program Assistant

ibrahim.barton27@gmail.com

Admin

Piper Bosco

Principal Division Representative

piper_bosco@gmail.com

Admin

Napoleon Nitzsche

Internal Markets Facilitator

napoleon.nitzsche95@hotmail.com

Admin

Tiana Aufderhar

Product Brand Officer

tiana.aufderhar81@gmail.com

Admin

Santiago Schultz

Dynamic Branding Strategist

santiago_schultz@hotmail.com

Admin

Domenico Wiza

Customer Assurance Executive

domenico.wiza75@yahoo.com

Member

Lorenzo Stark

International Identity Architect

lorenzo_stark@hotmail.com

Admin

Frances Hintz

Chief Accountability Producer

frances.hintz@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
Jeffrey Gutkowskilucas.raynor@gmail.comSouth AustinlandInactive$62.94
Candace Connelly IVbeulah.franey@yahoo.comNicolesteadActive$841.46
Garry Jenkinslance96@hotmail.comCambridgeInactive$973.27
Lillian McGlynnyvette.powlowski1@hotmail.comWest AllenInactive$886.79
Edna Nitzschemauricio76@hotmail.comMorissette-SwaniawskibergActive$803.26
Total$3,567.72

Basic table

Table with Images

NameEmailLocationStatusBalance
Chad Mann
@micheal_waelchi45
emerald_lubowitz33@hotmail.comDublinActive$23.20
Natalia Graham
@easter_waelchi
cassandra.strosin@gmail.comPort EthelInactive$409.35
Ms. Mikayla Douglas
@adeline94
avery2@hotmail.comLake MaureenburghActive$353.19
Ashleigh Crona
@freddie_berge
myrtle_nicolas9@hotmail.comMount PleasantInactive$1,191.25
Jaycee Fisher
@lorenzo_nienow
roslyn_deckow@yahoo.comLake Havasu CityActive$37.18

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Jadon Kleinterrence_howell@gmail.comSan LeandroActive$278.51
Mrs. Cara Kingwilma_schamberger34@yahoo.comVolkmansteadActive$169.63
Gwendolyn McClurehaylee31@hotmail.comNew LatoyaActive$210.75
Shanny Starkeugene21@hotmail.comLoyalburghActive$644.83
Sandy MacGyver-Schultzaliyah88@gmail.comSchmelerviewInactive$719.18
Total$2,022.90

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Kali Armstrongjoel.abbott78@yahoo.comNew UrsulachesterInactive$25.04
Rusty Hartmannlou.jacobs@gmail.comLake HelenboroughActive$118.01
Alford Gutmannanthony_steuber24@yahoo.comLynchburgInactive$241.12
Dr. Dallas Kubfelipe.wuckert89@yahoo.comCoconut CreekActive$1,029.24
Jon Lynchsherwood91@hotmail.comFritzvilleInactive$493.91
Total$1,907.32

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Daryl Bradtketod94@yahoo.comEast TedInactive$110.21
Mrs. Neha Millerora.fadel-torphy@gmail.comAnaisshireInactive$470.37
Ms. Rosanna Nolan DDStomas.douglas68@hotmail.comSterling HeightsInactive$776.58
James Champlinmoses_graham82@gmail.comHaneboroActive$25.65
Miss Jessica Schuppeperry_hermiston64@yahoo.comPort JadonfortActive$330.18
Total$1,712.99

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
Glenda Harris Ibrant.marquardt@yahoo.comChandlerburyActive$1,041.30
Chaz Howellramon.macgyver@hotmail.comVernonfurtInactive$951.80
Mr. Hettie Borerkale_cormier71@yahoo.comSouth KaraboroActive$1,133.61
Ed Goyette Sr.charlotte_feeney72@hotmail.comSouth LelandInactive$294.03
Calvin Ernserelsa_emard@hotmail.comSouth SandyfieldActive$492.69
Total$3,913.43

Table with row selection

Card Table

NameEmailLocationStatusBalance
Asha Bahringerchristian_thiel@gmail.comJerdeburyActive$185.28
Priscilla Rueckerleatha_johnson73@hotmail.comBeerfieldInactive$671.90
Nicolette Vandervortcorey17@yahoo.comSouth JoannchesterInactive$1,026.37
Constance Brownhope.cummerata-kuhlman22@yahoo.comPort ShaneActive$1,120.74
Alyssa Harrisira58@hotmail.comNorth PaulshireInactive$178.78
Total$3,183.07

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
Larry Greenfelderelisha.bergnaum23@yahoo.comEast AniyahActive$731.91
Matthew Medhurst Jr.afton_blick98@hotmail.comSt. GeorgeInactive$497.65
Lamar MacGyver IIroxane_schimmel@yahoo.comFort TraciActive$579.47
Alize Cristjodi_ratke@hotmail.comLake MarthaviewActive$1,080.09
Gertrude Greenholtpatsy_williamson80@gmail.comAlonzoboroughActive$592.22
Amanda Runolfssonkristopher.welch78@hotmail.comSouth DellaInactive$520.48
Aiden Wisozkgayle.heller@hotmail.comNew ChelsievilleActive$332.44
Megan Keeblersantiago51@gmail.comNorth BenedictActive$901.74
Mr. Bob Pourosmelody95@gmail.comNew OtisActive$861.42
Aubree Stroman IVpeyton_mitchell21@hotmail.comNorth CathyInactive$752.93
Marsha Douglaswilbert.effertz80@hotmail.comSouth EulahInactive$260.84
Ronald Kautzerrochelle76@gmail.comSouthavenActive$893.55
Axel Reingeredna63@hotmail.comPort TarasteadInactive$95.86
Mrs. Jeanne Nader Jr.brielle93@hotmail.comFremontActive$967.88
Adolphus Greenfelderconnie42@yahoo.comAnn ArborActive$728.76
Total$9,797.24

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.