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
INV001UnpaidPayPal$804.20
INV002PaidBank Transfer$411.39
INV003PaidPayPal$573.52
INV004PaidPayPal$534.48
INV005UnpaidCredit Card$626.50
INV006PendingPayPal$818.63
INV007PendingBank Transfer$928.19
Total$4,696.91

Simple

Users

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

NameTitleEmailRoleActions
Pablo HilpertSenior Security Strategistpablo.hilpert@gmail.comMember
Jeannie TillmanDistrict Branding Associatejeannie_tillman48@gmail.comMember
Lyle KlingInternal Interactions Agentlyle_kling@gmail.comViewer
Carlos StehrCentral Applications Executivecarlos_stehr1@hotmail.comAdmin
Paulette O'ConnellSenior Metrics Directorpaulette_oconnell86@gmail.comAdmin
Matt KrisGlobal Applications Executivematt.kris47@yahoo.comMember

Stacked on mobile

Users

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

NameRoleActions

Jules Macejkovic

Product Mobility Agent

jules.macejkovic@hotmail.com

Member

Price Wolf

Principal Metrics Designer

price_wolf@yahoo.com

Viewer

Roman Heidenreich

National Directives Executive

roman_heidenreich@yahoo.com

Admin

Omar Sauer

Forward Division Architect

omar_sauer@hotmail.com

Admin

Betsy Hills

Forward Data Designer

betsy.hills66@yahoo.com

Member

Sheila Abbott

Chief Tactics Administrator

sheila_abbott@yahoo.com

Viewer

Sticky header

Users

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

NameRoleActions

Kendra Tremblay

Dynamic Solutions Specialist

kendra_tremblay@gmail.com

Member

Joan Willms

Global Identity Liaison

joan_willms@gmail.com

Member

Tammy Gutkowski

Global Implementation Supervisor

tammy.gutkowski@gmail.com

Member

Leo Champlin

Lead Accounts Supervisor

leo_champlin10@hotmail.com

Admin

Russ Schmeler

Investor Implementation Strategist

russ.schmeler@gmail.com

Viewer

Yasmine Becker

Forward Applications Agent

yasmine_becker10@yahoo.com

Viewer

Pam Pfeffer

Future Applications Associate

pam_pfeffer54@hotmail.com

Member

Simon Flatley

Direct Group Designer

simon.flatley90@gmail.com

Member

Savion Hane

Chief Interactions Facilitator

savion.hane@gmail.com

Admin

Reece Stark

Corporate Usability Manager

reece.stark33@yahoo.com

Admin

Lance Heller

Legacy Creative Agent

lance_heller@hotmail.com

Admin

Garnett Padberg

Chief Response Liaison

garnett.padberg@hotmail.com

Viewer

Archie Gislason

Human Program Developer

archie_gislason@hotmail.com

Admin

Deontae Crist

Corporate Intranet Analyst

deontae.crist@gmail.com

Admin

Rudolph Hettinger

Dynamic Data Manager

rudolph_hettinger@yahoo.com

Member

Shanna Prosacco

Corporate Response Coordinator

shanna_prosacco74@hotmail.com

Viewer

Emilia Buckridge

Human Functionality Consultant

emilia_buckridge@hotmail.com

Member

Selena Dach

International Brand Technician

selena.dach88@hotmail.com

Admin

Lucinda Keebler

Global Web Specialist

lucinda.keebler84@hotmail.com

Viewer

Diane Jacobs

Internal Integration Producer

diane.jacobs@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
Lambert Emardpeggy.ernser@gmail.comLake DelbertchesterInactive$217.02
Edmund Daughertytevin73@hotmail.comVidamouthActive$722.50
Moses Jakubowskidenise92@yahoo.comSouth WillardActive$1,144.54
William Lehnerhenri14@yahoo.comFort AshaburghInactive$364.97
Edmund Champlinpaul99@yahoo.comHansenhavenActive$424.22
Total$2,873.25

Basic table

Table with Images

NameEmailLocationStatusBalance
Mr. Ivy Kilback
@coty.smith-auer
velma4@gmail.comLoufieldInactive$428.86
Verner Conn
@katrina_padberg44
makenzie.vandervort83@hotmail.comBeerfortInactive$1,047.05
Emory McCullough PhD
@amparo.kub
claire_batz75@yahoo.comNorth GretchenInactive$780.45
Blanca Williamson
@darla_dickens64
emely_orn83@yahoo.comBrakussideInactive$321.26
Joshua Yundt IV
@dwayne_kshlerin15
dewey_goyette21@yahoo.comBurienActive$133.11

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Vivian O'Haradanny69@gmail.comHowellmouthInactive$237.63
Rigoberto Bradtke Vjosh85@gmail.comAnkundingtownInactive$859.35
Ms. Trevion Jakubowskiernestina_cartwright@gmail.comSouth ClintonActive$1,033.84
Everett Corwinbella36@hotmail.comNew CodyActive$1,095.05
Raymond Ornmuriel53@yahoo.comPatersonInactive$956.49
Total$4,182.36

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Verla Armstrongtimmy_lehner-hauck60@gmail.comAlessiatownActive$603.11
Elfrieda Millercarol_donnelly@yahoo.comHowesideActive$973.43
Horace Ortiztroy_pollich58@gmail.comArmstrongsteadActive$352.04
Miss Yvonne Rodriguezsasha.ritchie-altenwerth64@gmail.comRachaelboroughInactive$273.15
Lana Kris PhDjane_rippin2@hotmail.comAlexandraburghActive$952.20
Total$3,153.93

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Jesus Steuberkeara_morar60@hotmail.comSt. PetersInactive$480.57
Shany Wyman-Dachderek46@yahoo.comGloriaburghInactive$676.36
Mr. Henri McClureshari83@hotmail.comPort AylaInactive$436.98
Juvenal Swaniawskiisaiah_sporer73@hotmail.comSoniashireInactive$569.36
Kathleen Wittingrandal_klein@hotmail.comJochesterActive$910.91
Total$3,074.18

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
Iva Simonis MDdeshawn55@hotmail.comRocklinInactive$623.37
Conrad Sauerolga70@gmail.comNorth MeredithActive$888.60
Althea Satterfieldlawrence.runolfsdottir75@gmail.comFort MadalynlandActive$60.07
Lorine Runolfsdottirgage.bednar@yahoo.comSophieburyInactive$353.01
Elyse Reillywm.zieme19@yahoo.comBoehmcesterInactive$842.35
Total$2,767.40

Table with row selection

Card Table

NameEmailLocationStatusBalance
Sophia Pfefferolga_ratke93@hotmail.comChandlerburghActive$1,190.14
Mr. Summer Veumclementine.denesik55@hotmail.comBessiesteadActive$1,132.69
Consuelo O'Connerguiseppe8@hotmail.comElectatonInactive$652.32
Essie Emardbob40@gmail.comNew MarielleActive$947.20
Renee Zemlakcasimir32@hotmail.comBerwynActive$468.45
Total$4,390.80

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
Christine Barrowskatrina.walsh@gmail.comPort VirginiaviewInactive$41.76
Kianna Labadieconnie86@gmail.comDonnietonActive$716.72
Ruben Koss IIIlew_gerlach62@gmail.comLake KayleeActive$274.37
Vickie Hodkiewiczmarianne.connelly61@hotmail.comWest KennaburghActive$246.86
Angelita Christiansen Jr.brielle_osinski68@yahoo.comSouth ConstantinInactive$809.26
Shelly O'Reillyefren_kuvalis@hotmail.comMannsideActive$380.10
Nadine Christiansenfilomena.champlin81@gmail.comEvanstonInactive$767.76
Mr. Claud Purdyalene.mclaughlin45@yahoo.comEast MarjorieInactive$779.97
Miss Elvira Altenwerthdortha_greenholt82@yahoo.comZiemeportActive$533.65
Howard Kshlerinpam98@yahoo.comLake YolandaActive$30.90
Robert Oberbrunner Jr.brent.glover@yahoo.comConroeInactive$584.54
Ms. Waldo Schambergerterrance_cronin@hotmail.comNew IvanlandActive$420.54
Ressie Harveyhenry34@hotmail.comNew PresleyworthActive$845.83
Elvera Kuphalrory28@gmail.comFort GeorgianaActive$584.18
Linwood Schummhope.bernhard@yahoo.comPetefortInactive$342.00
Total$7,358.44

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.