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$726.31
INV002PaidPayPal$955.86
INV003UnpaidCredit Card$725.16
INV004UnpaidBank Transfer$779.93
INV005PaidBank Transfer$976.38
INV006PendingPayPal$690.17
INV007PaidCredit Card$535.43
Total$5,389.24

Simple

Users

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

NameTitleEmailRoleActions
Jamil TrantowInvestor Usability Coordinatorjamil_trantow@hotmail.comMember
Eric PriceLead Branding Strategisteric_price1@gmail.comViewer
Jocelyn HarberGlobal Response Officerjocelyn.harber@gmail.comViewer
Kayley HermistonRegional Accounts Administratorkayley_hermiston46@gmail.comViewer
Cory AnkundingFuture Web Facilitatorcory_ankunding@yahoo.comAdmin
Alma NicolasInvestor Research Associatealma_nicolas@hotmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Julian Champlin

Forward Mobility Orchestrator

julian_champlin@gmail.com

Admin

Giovanna Barrows

Internal Intranet Administrator

giovanna_barrows25@hotmail.com

Viewer

Shyann Fadel

Corporate Creative Analyst

shyann.fadel@hotmail.com

Member

Ruben Zboncak

District Integration Representative

ruben_zboncak@yahoo.com

Admin

Ashley Quitzon

Future Research Technician

ashley_quitzon32@hotmail.com

Viewer

Connie Watsica

Senior Brand Strategist

connie_watsica69@yahoo.com

Member

Sticky header

Users

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

NameRoleActions

Ray Lakin

Central Directives Coordinator

ray.lakin88@yahoo.com

Member

Alfreda Schmeler

Dynamic Identity Designer

alfreda.schmeler@yahoo.com

Admin

Carroll Hilpert

Global Functionality Director

carroll.hilpert@yahoo.com

Viewer

Diane Erdman

Global Branding Planner

diane_erdman94@hotmail.com

Admin

Amy Upton

Regional Communications Coordinator

amy.upton@hotmail.com

Viewer

Elton Prohaska

Future Infrastructure Designer

elton.prohaska93@gmail.com

Viewer

Katelyn Rowe

Customer Usability Administrator

katelyn_rowe@yahoo.com

Member

Karen Reichert

Senior Interactions Representative

karen_reichert50@hotmail.com

Member

Jessica West

District Data Producer

jessica.west35@gmail.com

Viewer

Kayla Baumbach

Chief Communications Designer

kayla.baumbach3@yahoo.com

Member

Ebba Schamberger

Internal Assurance Director

ebba_schamberger@hotmail.com

Member

Rachel Armstrong

Direct Tactics Administrator

rachel.armstrong@hotmail.com

Admin

Antonia O'Conner

Human Functionality Officer

antonia.oconner@yahoo.com

Admin

Wilbur Lueilwitz

Dynamic Solutions Planner

wilbur.lueilwitz15@yahoo.com

Admin

Hailey Farrell

Investor Marketing Executive

hailey_farrell34@hotmail.com

Admin

Earl Fritsch

Principal Web Liaison

earl_fritsch67@hotmail.com

Admin

Barbara Stamm

Human Paradigm Executive

barbara.stamm@yahoo.com

Member

Mia Kihn

Future Implementation Liaison

mia.kihn@hotmail.com

Viewer

Elyse Osinski

Central Security Administrator

elyse_osinski92@hotmail.com

Member

Chadd Grady

Principal Infrastructure Strategist

chadd.grady@hotmail.com

Admin

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
Asa Ferryrandal.krajcik@yahoo.comSouth DerrickhavenActive$994.11
Marjory Milleremely_west@gmail.comSonjafortActive$110.47
Isabel Daredelta.kertzmann@hotmail.comNorth BeulahburyActive$1,192.62
Leila Hicklecharley_ziemann@hotmail.comWest GavinInactive$1,093.45
Joanie Kassulkecandelario.lind@hotmail.comNorth CarychesterInactive$213.37
Total$3,604.02

Basic table

Table with Images

NameEmailLocationStatusBalance
Pearl Tromp
@madalyn41
devan.maggio-schulist1@yahoo.comTabithasteadActive$171.25
Donny Wyman
@jesus92
eddie_ortiz3@gmail.comO'ConnerlandInactive$421.47
Austin Bernhard
@kristi_marquardt
chris_moore22@yahoo.comStokesfurtInactive$1,066.24
Ryan Keeling
@jill_casper
charles.morar73@hotmail.comMantecaActive$389.78
Dr. Ashton Bednar PhD
@christopher.haag94
sherri_pfeffer@yahoo.comLake DesireeInactive$1,091.36

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Adolf Sauerulises.schimmel@hotmail.comWest CarlboroActive$1,095.41
Marlene Heller MDtommy_nicolas95@hotmail.comRound RockInactive$959.84
Kane DuBuquejoe.macgyver85@gmail.comNorth KaileyActive$560.10
Terri Nicolasmaurice.rempel@yahoo.comLulaworthInactive$958.42
Ara McDermotttorey34@yahoo.comSipesboroActive$151.47
Total$3,725.24

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Dortha Hoppelaverne89@yahoo.comNew JabaritownActive$745.44
Mrs. Dora Rippindawn_fadel@gmail.comCheyenneInactive$899.22
Cletus Reichertwilfredo3@yahoo.comSouth AnissaInactive$693.96
Dr. Queenie Goyetteelijah.padberg@gmail.comBoulderActive$968.03
Wendy Kundesamara_nitzsche@hotmail.comLake EthelInactive$585.46
Total$3,892.11

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Dixie Leannonmack_lemke@yahoo.comSouth CrystalActive$1,193.57
Dwayne Brakuskim_hermann44@gmail.comStarksideInactive$762.39
Miss Christine Hettinger IImallory.rohan53@hotmail.comNew CeliaInactive$453.85
Lionel Klingnicole.vonrueden@gmail.comPort JacquelyntownInactive$1,172.91
Mr. Cyrus Hillsbart_schamberger@yahoo.comNew AudreanneshireActive$89.00
Total$3,671.72

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
Dr. Nichole Yundtmercedes12@yahoo.comDearbornActive$718.84
Ms. Theresa Durganbennie.steuber32@yahoo.comFort RuthhavenInactive$312.44
Krystal Welchcarla55@gmail.comEast HugoActive$559.75
Viola Bergnaumford_zulauf89@hotmail.comMilwaukeeInactive$288.82
Allen Lueilwitz DVMcarl1@yahoo.comStrosinchesterActive$994.15
Total$2,874.00

Table with row selection

Card Table

NameEmailLocationStatusBalance
Mr. Dominique Murphyjavier36@hotmail.comEast GregoryInactive$85.86
Kacey Donnellybonita_schimmel34@gmail.comLake ClarafortActive$924.67
Kathleen Bednarhayden.bartoletti-wolff60@yahoo.comFort SalvadorvilleInactive$416.19
Jettie Bogansally_mante@hotmail.comNorth KevinbergInactive$69.46
Arturo Spencerthelma_kutch70@hotmail.comLake ConnorInactive$468.28
Total$1,964.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
Maryjane Grimessusan_walsh58@gmail.comHuntersvilleInactive$775.93
Eric Stammmarty.pagac30@hotmail.comDeltonaActive$499.83
Jedidiah Gerlach IVvirginia.okon@yahoo.comSouth KrisfurtInactive$7.78
Tyrel VonRuedenjosiane_fay@yahoo.comNew DawsonburyActive$273.46
Mr. Dustin Prosaccoleticia.weimann17@hotmail.comKubworthActive$326.74
Korey Williamsonkara25@hotmail.comPort EugeneActive$700.12
Kristy Larsongeorgia49@yahoo.comSouth KendrasideActive$628.05
Michelle Denesik Jr.mary_pfannerstill45@gmail.comRunolfssonstadActive$1,102.49
Jordane Monahankasey39@yahoo.comWest AltavilleInactive$181.33
Timmy Ryan Jr.ozella_sporer@hotmail.comKuvalisviewInactive$547.97
Miranda Zulaufnathanial39@gmail.comStehrcesterInactive$350.91
Marcella Hauckmelany12@yahoo.comAkronActive$338.45
Orlo Strackecalista53@hotmail.comNorth AngieActive$1,080.56
Gilbert Wardbarbara_lowe@gmail.comAshleysideInactive$868.73
Lois Koeppllewellyn_rogahn60@hotmail.comLake AbbyActive$412.39
Total$8,094.74

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.