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
INV001PaidPayPal$612.88
INV002PaidPayPal$535.04
INV003UnpaidPayPal$201.00
INV004PaidCredit Card$383.03
INV005PendingBank Transfer$598.35
INV006PendingPayPal$660.56
INV007UnpaidBank Transfer$134.81
Total$3,125.67

Simple

Users

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

NameTitleEmailRoleActions
Kari ErnserProduct Security Assistantkari.ernser@yahoo.comMember
Friedrich LeschHuman Factors Representativefriedrich.lesch@yahoo.comAdmin
Moses CrooksHuman Identity Engineermoses.crooks@yahoo.comMember
Brian CollinsCorporate Marketing Strategistbrian.collins10@hotmail.comMember
Tina SanfordSenior Optimization Designertina_sanford@gmail.comAdmin
Joy McKenzieNational Division Developerjoy.mckenzie@yahoo.comMember

Stacked on mobile

Users

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

NameRoleActions

Enrico Conn

Product Configuration Representative

enrico.conn@hotmail.com

Member

Jonathon Fay

Chief Configuration Specialist

jonathon.fay@hotmail.com

Viewer

Lera Zulauf

Legacy Assurance Representative

lera.zulauf6@hotmail.com

Viewer

Michelle Crooks

Senior Web Officer

michelle.crooks@hotmail.com

Member

Wallace Ondricka

Forward Solutions Developer

wallace.ondricka47@hotmail.com

Member

Winfield Cremin

Lead Security Executive

winfield.cremin61@gmail.com

Admin

Sticky header

Users

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

NameRoleActions

Luz Runolfsson

Corporate Tactics Producer

luz.runolfsson64@hotmail.com

Admin

Delaney Bruen

Legacy Assurance Director

delaney.bruen35@gmail.com

Admin

Burnice Kiehn

Lead Assurance Facilitator

burnice_kiehn47@hotmail.com

Admin

Roosevelt Cormier

Human Infrastructure Orchestrator

roosevelt_cormier@hotmail.com

Member

Adell Quitzon

Global Branding Manager

adell_quitzon90@gmail.com

Admin

Justin Howe

Regional Research Facilitator

justin.howe@yahoo.com

Member

Bryon Nader

National Intranet Liaison

bryon_nader52@hotmail.com

Member

Pedro Hackett

Forward Functionality Associate

pedro.hackett26@gmail.com

Member

Kenny Nitzsche

Direct Mobility Facilitator

kenny.nitzsche@hotmail.com

Admin

Alice Schuppe

Senior Markets Planner

alice_schuppe@yahoo.com

Viewer

Nicolas Goldner

National Factors Supervisor

nicolas_goldner@yahoo.com

Member

Alexandro Reichert

Regional Implementation Officer

alexandro_reichert16@gmail.com

Viewer

Amiya Stoltenberg

National Functionality Administrator

amiya_stoltenberg@yahoo.com

Viewer

Peggie Stiedemann

National Program Administrator

peggie_stiedemann34@yahoo.com

Viewer

Willy Botsford-Bahringer

District Metrics Executive

willy.botsford-bahringer57@gmail.com

Admin

Taya Thompson

Corporate Brand Designer

taya.thompson@hotmail.com

Admin

Allison Zemlak

Corporate Data Specialist

allison.zemlak13@gmail.com

Member

Dale Nader

Global Mobility Coordinator

dale_nader33@gmail.com

Viewer

Sigrid Luettgen

Customer Creative Coordinator

sigrid.luettgen71@yahoo.com

Member

Candace Gibson

Human Group Strategist

candace.gibson@gmail.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
Amber Hintzevangeline.abshire@hotmail.comPoincianaActive$364.69
Cierra Pfannerstilldedrick_mohr@yahoo.comGreenholtboroActive$500.80
Natasha Schmitthannah.herman@gmail.comCatalina FoothillsInactive$759.82
Ismael Auer-Beahan PhDfaye34@yahoo.comNew TravislandInactive$246.92
William Lynchfae_gislason@gmail.comKublandInactive$929.98
Total$2,802.21

Basic table

Table with Images

NameEmailLocationStatusBalance
Shari Legros
@clement23
orlando.ward99@yahoo.comAnahavenInactive$1,175.69
Tiffany Thompson
@philip55
mateo.schmidt@yahoo.comPort AllansteadActive$645.24
Alanna Windler
@malinda98
turner50@gmail.comGislasonfortInactive$504.77
Wilber Goodwin
@emmett_heathcote
kathleen39@hotmail.comSalinaActive$4.56
Adelbert Huels
@pietro_bednar
vernon.harris-effertz75@gmail.comSouth PeggieboroughActive$25.60

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Keith Casperstephen.veum@hotmail.comKendale LakesActive$1,159.24
Trevor Beckerarlene.simonis33@gmail.comEast PasqualeInactive$524.95
Isai Swaniawski-Brakussidney.mayer@gmail.comNorth AmosActive$278.00
Leanna Ziemeedmund_harvey@yahoo.comEast RandyInactive$1,107.78
Harold Raynorpreston74@yahoo.comEast ElbertInactive$321.77
Total$3,391.74

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Rodolfo Swaniawski-Ernserjameson_oconner@hotmail.comStanleyportActive$1,077.66
Cathrine Andersonsherman69@yahoo.comLeolandInactive$677.29
Miss Caden Pagacterrell.swaniawski@hotmail.comVictoriaburghInactive$170.11
Mr. Duane Farrelldelta.wintheiser30@gmail.comElisafieldActive$951.48
Ansley Hilpertelias_jerde20@gmail.comSimonisbergInactive$884.84
Total$3,761.38

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Irene Armstrong MDblair_kling@yahoo.comPatsyburghActive$559.81
Mossie McKenziemable.oreilly@hotmail.comNorth AnnievilleInactive$1,170.35
Isobel Walkerwesley43@gmail.comTigardActive$382.05
Kennith Hesselsantiago_grant@gmail.comFort DillonvilleActive$672.30
Eden Schmidtleland.larson36@yahoo.comTauntonActive$1,024.89
Total$3,809.40

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
Mr. Laurence Franeckijake.kling@yahoo.comPort OliversteadInactive$979.26
Hilton Schroedercarlton.botsford-sanford@hotmail.comSouth TinaActive$872.56
Kasey Bogisichwalter_moore83@gmail.comFredyfortActive$904.40
Muriel Cassin IImarcia_volkman@gmail.comFort MelvinastadActive$753.96
Shelly Jacobson MDmiles_torphy@gmail.comKavonburghActive$99.54
Total$3,609.72

Table with row selection

Card Table

NameEmailLocationStatusBalance
Floyd Romaguera PhDthad.monahan74@hotmail.comEast DeannaburghActive$1,080.59
Doug Kunzemarvin.koss60@hotmail.comPatricialandInactive$549.35
Markus Schowalter Vlynne.daniel61@gmail.comWest AdalineActive$681.36
Jasmine Schambergerrahul_price@yahoo.comHoppefurtActive$210.35
Rowena Johnsonveda.marquardt90@yahoo.comMuellerboroughInactive$1,072.05
Total$3,593.70

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
Brent Schroedereladio42@yahoo.comHendersonvilleActive$811.84
Dewayne Lehnermindy_armstrong@hotmail.comEast AlmachesterActive$907.92
Lindsey Koeppamerica.hickle92@gmail.comEast CindyInactive$1,139.07
Maryse Waltersanta50@yahoo.comFort WorthInactive$979.59
Lance Watersjorge_feil57@hotmail.comSpringfieldActive$671.74
Caleb Jacobsonharriet72@yahoo.comRohantownActive$1,009.72
Jarred Tremblayisabell2@hotmail.comRosenbaumstadInactive$22.42
Vera Framirahsaan_hintz49@gmail.comNorth ChadtownActive$989.75
Merle Littelquincy56@gmail.comPattiportActive$229.27
Jeanne Krajcikjuanita_wiegand@yahoo.comPfannerstillburyInactive$1,136.98
Marcella Armstrong-Doylejaida.corwin60@hotmail.comAtascocitaActive$975.51
Mr. Frankie Goyettevern.mertz@gmail.comPort SerenityInactive$425.39
Sarah Gerholdcole42@gmail.comCentennialActive$607.72
Andreane Reillywhitney.hermann86@gmail.comFatimatonActive$497.74
Rashawn Cronaisabella62@gmail.comMcLaughlin-BlandachesterInactive$858.54
Total$11,263.20

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.