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
INV001PaidBank Transfer$476.87
INV002PaidPayPal$973.48
INV003UnpaidBank Transfer$885.65
INV004UnpaidBank Transfer$863.31
INV005UnpaidBank Transfer$721.73
INV006PaidBank Transfer$401.28
INV007PendingCredit Card$782.54
Total$5,104.86

Simple

Users

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

NameTitleEmailRoleActions
Bernice LangoshHuman Mobility Strategistbernice_langosh48@hotmail.comMember
Paula LegrosFuture Creative Technicianpaula_legros@hotmail.comMember
Joanie KozeyInternal Identity Supervisorjoanie.kozey@hotmail.comMember
Emmie HaneDistrict Infrastructure Associateemmie.hane65@yahoo.comAdmin
Rex CollinsProduct Data Facilitatorrex.collins95@gmail.comAdmin
Kale RatkeHuman Directives Facilitatorkale_ratke@hotmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Benny Cole

Future Division Orchestrator

benny.cole@hotmail.com

Admin

Cordia Durgan

Investor Integration Officer

cordia_durgan19@hotmail.com

Admin

Ed Von

Senior Web Producer

ed.von33@gmail.com

Member

Elvie Cremin

International Factors Assistant

elvie_cremin98@hotmail.com

Admin

Dianne O'Kon

District Factors Associate

dianne_okon86@yahoo.com

Viewer

Della Stoltenberg-Murphy

Future Group Assistant

della_stoltenberg-murphy@hotmail.com

Viewer

Sticky header

Users

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

NameRoleActions

Paxton Hickle

Principal Interactions Specialist

paxton_hickle31@hotmail.com

Member

Darla Bergstrom

Lead Marketing Director

darla_bergstrom7@gmail.com

Member

Jamal Okuneva

Corporate Optimization Consultant

jamal_okuneva70@yahoo.com

Member

Ahmad Lind

Legacy Infrastructure Director

ahmad.lind77@yahoo.com

Member

Kristian Haag

Legacy Usability Specialist

kristian.haag@hotmail.com

Member

Nelson Wolf

Forward Optimization Designer

nelson.wolf@gmail.com

Member

Samuel Reilly

Forward Paradigm Producer

samuel.reilly44@yahoo.com

Viewer

Allen Koss

Internal Branding Associate

allen.koss2@gmail.com

Member

Sylvia MacGyver

Customer Intranet Architect

sylvia_macgyver15@hotmail.com

Member

Patrick Dietrich

Forward Branding Facilitator

patrick.dietrich52@gmail.com

Member

Dane Bradtke

Legacy Mobility Executive

dane_bradtke@hotmail.com

Member

Jeanie Corwin

Lead Brand Executive

jeanie_corwin58@hotmail.com

Member

Lottie Crooks

Forward Group Developer

lottie.crooks@gmail.com

Member

Katherine Morar

Future Implementation Supervisor

katherine_morar@hotmail.com

Member

Tom Feil

Principal Accounts Facilitator

tom_feil@yahoo.com

Admin

Willow Hegmann

Lead Optimization Developer

willow.hegmann24@hotmail.com

Admin

Caleb Boyle

Customer Communications Consultant

caleb.boyle50@yahoo.com

Admin

Ford Rutherford

Regional Research Agent

ford_rutherford@yahoo.com

Admin

Eva Nicolas

Future Marketing Officer

eva.nicolas51@gmail.com

Viewer

Philip Leannon

Central Accountability Architect

philip_leannon@yahoo.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
Audreanne Willmskale93@gmail.comWest GenevashireInactive$4.90
Michele Hoegeredmund12@gmail.comJavierchesterInactive$601.39
Gus Zieme Vdestinee.pollich@yahoo.comNoahchesterInactive$969.06
Mr. Glenn Wolff-Weimannarnold_kris@yahoo.comWillfortInactive$159.19
Miriam Brownreed.bauch48@yahoo.comSouth GiovanilandActive$279.18
Total$2,013.72

Basic table

Table with Images

NameEmailLocationStatusBalance
Linwood DuBuque
@wayne.durgan56
christina72@yahoo.comBoynton BeachActive$305.62
Mr. Gunner Cassin
@georgia.klein
sherman_pouros@yahoo.comLanafieldInactive$699.01
Luther Bartell
@elias46
carey68@hotmail.comFort HaskellfortActive$1,128.44
Forest Kris
@kathryn.macejkovic96
skyla_jones@yahoo.comAthenamouthInactive$938.14
Ms. Esteban Witting DVM
@frankie.miller-robel
kristina.willms@gmail.comSchulistburyActive$384.14

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Kenneth Baumbach IIbill.boehm59@yahoo.comIndioInactive$12.98
Freida Batzvance_goyette45@yahoo.comLake FabianActive$1,054.80
Dr. Antwon Quitzon Irosella18@yahoo.comFort AntwonlandActive$1,101.39
Mr. Jimmy Lueilwitzniko_mante@yahoo.comBoca RatonInactive$33.69
Dr. Kathryn Pagac DDScalvin_carter30@gmail.comStratfordInactive$1,084.26
Total$3,287.12

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Eugenia Wiegandcleora.marks22@hotmail.comNorth TreInactive$74.01
Gilberto Bruenalphonso80@yahoo.comWest JoelInactive$159.60
Russell Parker PhDmay_wisozk32@gmail.comDawnsteadActive$670.65
Lisette Willmsmeggie.lueilwitz@yahoo.comWest DebraActive$691.83
Mrs. Emmalee Grimesnicklaus_hudson@gmail.comNew BritainActive$876.90
Total$2,472.99

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Weston Pfannerstill Sr.gina.welch-waelchi12@yahoo.comNorth BonniehavenInactive$601.57
Frieda Bogisichtess5@yahoo.comAdamsvilleActive$119.04
Delmer Kirlinkeenan.rau5@yahoo.comNew JuneActive$636.50
Randal Abshirebrandt82@yahoo.comSouth AdamshireActive$543.42
Monroe Johns PhDkristi_mclaughlin@gmail.comRyanvilleActive$185.25
Total$2,085.78

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
Krista Dibbertgillian_von21@gmail.comPort BetsyburghInactive$309.39
Kale Wuckertandres87@yahoo.comWesley ChapelInactive$462.39
Mrs. Abigayle Paucek-Dareandrea.erdman70@hotmail.comEast HumbertoburyInactive$1,094.50
Sedrick Mayermelody_lind80@gmail.comMissouri CityActive$448.36
Owen Binsora19@yahoo.comFort CollinsInactive$1,070.40
Total$3,385.04

Table with row selection

Card Table

NameEmailLocationStatusBalance
Moses Ankundingchelsea.klocko86@yahoo.comPort AubreystadActive$574.38
Margaret Cormiertyreek_pouros66@gmail.comChamplinbergInactive$1,148.28
Gloria Hodkiewiczshayne_greenfelder@hotmail.comTinley ParkInactive$675.41
Inez Ziemannskylar_cassin@gmail.comCamarilloActive$1,083.96
Cecilia Kertzmannbrook57@hotmail.comBoscoboroughActive$455.21
Total$3,937.24

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
Aylin Bashirianjudson56@hotmail.comIrisfortActive$397.88
Patrick Jaskolskihope16@yahoo.comCastle RockInactive$370.46
Willard Hirtherosalinda.okeefe27@yahoo.comErnserboroInactive$528.47
Jackie Lednerbob.kertzmann@gmail.comNew MireilleInactive$29.49
Hershel Schmidt DVMruth.hansen77@gmail.comLindseyworthInactive$1,189.77
Malika Jakubowskinora.padberg@gmail.comWavaviewActive$1,186.86
James Wittingabel19@yahoo.comPomonaInactive$522.44
Vivian Rowetalia.beier@hotmail.comRitastadActive$179.93
Cathryn Strackeraymond9@gmail.comSouth BriellefortInactive$1,095.01
Antoinette Carter DDSshirley78@hotmail.comLakewoodInactive$819.41
Fidel Hermistonadriel.beahan-stehr@yahoo.comElissaboroActive$1,176.09
Muriel McClurepatti_jakubowski@hotmail.comNorth CatherineInactive$820.40
Merl Hoegerelvira.koss@hotmail.comBurbankActive$528.99
Rita Torphybrock2@yahoo.comVickiecesterInactive$489.96
Jessie Collinslauren.lind-hammes@gmail.comLindgrenlandInactive$984.44
Total$10,319.60

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.