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
INV001PendingBank Transfer$211.71
INV002UnpaidBank Transfer$986.69
INV003PendingPayPal$586.00
INV004PaidBank Transfer$254.91
INV005PendingBank Transfer$218.56
INV006PendingBank Transfer$288.28
INV007PendingBank Transfer$406.87
Total$2,953.02

Simple

Users

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

NameTitleEmailRoleActions
Sean PredovicForward Program Consultantsean.predovic19@gmail.comAdmin
Ivy LarkinDynamic Integration Analystivy_larkin40@gmail.comAdmin
Marjolaine DeckowForward Markets Architectmarjolaine.deckow7@gmail.comAdmin
Nadia ZboncakGlobal Program Developernadia_zboncak10@gmail.comMember
Monica BartolettiCustomer Identity Strategistmonica_bartoletti9@gmail.comAdmin
Gunner KuhlmanInternal Operations Developergunner.kuhlman@yahoo.comViewer

Stacked on mobile

Users

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

NameRoleActions

Gene Cummings

Direct Brand Assistant

gene_cummings89@hotmail.com

Viewer

Lorenz Watsica

Lead Optimization Liaison

lorenz_watsica@yahoo.com

Member

Daniel Green

Investor Optimization Coordinator

daniel_green@yahoo.com

Viewer

Erick Terry

Global Directives Representative

erick.terry43@gmail.com

Admin

Simon Walsh

Future Configuration Officer

simon_walsh@yahoo.com

Viewer

Rickey Johnston

District Security Designer

rickey.johnston@yahoo.com

Admin

Sticky header

Users

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

NameRoleActions

Quinten Heaney-Toy

Chief Identity Technician

quinten_heaney-toy71@hotmail.com

Admin

Natasha Sawayn

International Operations Technician

natasha.sawayn@hotmail.com

Member

Jon Purdy

Chief Research Producer

jon.purdy21@hotmail.com

Viewer

Kyler Paucek

Global Solutions Assistant

kyler_paucek89@hotmail.com

Viewer

Junior Jaskolski

Corporate Interactions Officer

junior_jaskolski42@gmail.com

Member

Gary Gislason-Heaney

Corporate Creative Liaison

gary_gislason-heaney@gmail.com

Member

Jamal Abbott

Legacy Communications Engineer

jamal_abbott@hotmail.com

Member

Alexander Koepp

Corporate Brand Representative

alexander_koepp13@gmail.com

Member

Christy Reilly

Direct Brand Representative

christy.reilly@yahoo.com

Admin

William Grimes

Customer Integration Officer

william.grimes19@gmail.com

Admin

Lemuel Kerluke

Investor Operations Designer

lemuel.kerluke33@yahoo.com

Admin

Magnus Crooks

Global Brand Officer

magnus.crooks70@yahoo.com

Member

Angie Hirthe

Principal Communications Consultant

angie.hirthe@hotmail.com

Member

Dean Langworth

Direct Security Analyst

dean_langworth@hotmail.com

Admin

Eulah Nolan

Dynamic Marketing Facilitator

eulah_nolan@yahoo.com

Admin

Birdie Sauer

International Integration Representative

birdie.sauer37@hotmail.com

Viewer

Manuel Franecki

District Optimization Officer

manuel.franecki@yahoo.com

Member

Gerson Moore

Lead Identity Executive

gerson_moore@yahoo.com

Member

Marlene Erdman

District Solutions Specialist

marlene_erdman71@yahoo.com

Member

David Goodwin

National Division Agent

david.goodwin@gmail.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
Trystan Yundt IIIzachary90@gmail.comMayertfortInactive$1,052.27
Clayton Funksandy86@yahoo.comDomenictownInactive$833.17
Ericka Lakinallan70@yahoo.comVolkmanfieldInactive$553.56
Hector Stantonrenee.harvey@yahoo.comToledoInactive$661.90
Gunner Prosaccobrandt_harris40@yahoo.comAuburnActive$640.13
Total$3,741.03

Basic table

Table with Images

NameEmailLocationStatusBalance
Darryl Pollich I
@fausto.sipes83
michelle.kirlin@hotmail.comRosemeadActive$6.89
Marian Jones-Donnelly
@rhianna_dicki
andy.kuhn51@yahoo.comNorth MelyssashireActive$817.98
Arvid Mertz
@richie76
antonio_emmerich31@gmail.comVirginia BeachActive$1,189.41
Claudia Labadie
@edmond95
dustin9@gmail.comEast MartinburghInactive$278.26
Myron Weimann
@holly.keeling31
green90@yahoo.comCartwright-KemmermouthInactive$15.61

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Ottis Rosenbaumlinnie6@yahoo.comEstebanchesterInactive$252.98
Stanford Pagacclifford.robel@hotmail.comKendale LakesInactive$92.18
Joyce Hackettjasmine56@yahoo.comOpalvilleActive$144.70
Mr. Rafael McClurejoanna.lesch66@gmail.comCliftonActive$303.10
Jazmyne Bergnaumdeonte29@hotmail.comEmeliebergActive$377.90
Total$1,170.86

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Audra Swaniawskiamelie_hilll76@yahoo.comLowechesterInactive$1,098.47
Gladys Kesslernasir.crooks@gmail.comNew HayleeInactive$1,019.05
Monty Cummingsladarius.bartell@yahoo.comSt. LouisInactive$360.68
Abdiel Spencerjanessa.smitham@hotmail.comSouth TressieActive$110.76
Mr. Zora Thompsonakeem21@yahoo.comNorth BeryltonActive$459.54
Total$3,048.50

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Waldo Dibbertandres13@hotmail.comDevonworthInactive$386.14
Lenora Watsicaorlando.waelchi47@gmail.comSouth BurdetteActive$1,025.21
Faustino Rowetrinity_ankunding28@gmail.comHartfordActive$201.75
Delbert Beermargie.hintz@yahoo.comHaleysteadActive$650.43
Adan Bruened25@hotmail.comWunschfurtInactive$97.85
Total$2,361.38

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
Whitney Mitchellalanna.prosacco6@yahoo.comEast KayleeActive$700.58
Herminia Hahnjayda.carroll45@gmail.comJeremiahtonActive$8.32
Kyle Hintzkerry38@hotmail.comNikolaussteadActive$376.59
Everett Feeneymaria.welch57@hotmail.comSonialandInactive$167.39
Carl Beckersarah.jerde@yahoo.comWest DarrinInactive$348.06
Total$1,600.94

Table with row selection

Card Table

NameEmailLocationStatusBalance
Yvette Rueckershyann.muller@gmail.comFarrell-VolkmanburyActive$962.56
Bob Runolfssonthomas_abbott35@hotmail.comNorth KorytonActive$735.58
Rhonda Corwinbethel_boyle-herzog45@gmail.comLake TrinityboroActive$386.52
Kay Kautzer Vtasha92@hotmail.comOlesideActive$472.59
Cloyd Dickijovani_adams69@hotmail.comNew EnochstadInactive$195.34
Total$2,752.59

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
Caleigh Gusikowskinoemy.price56@gmail.comSanta MonicaInactive$577.34
Blake Darehermina.pollich@gmail.comKavonworthActive$495.49
Vincent Goodwinryan_howell67@yahoo.comNorth KaychesterActive$544.74
Roman Douglasguadalupe_jones@gmail.comKutchburghInactive$1,195.50
Raul Ankundinggeorgianna27@hotmail.comSouth ShaniyaInactive$763.22
Toby Hodkiewiczbraeden.swift@gmail.comElzashireInactive$868.45
Carla Lubowitz-Greenfeldergriffin47@hotmail.comNew ShaneInactive$373.24
Dianna Hilpertvictor.reichel@hotmail.comKuhnburghInactive$273.96
Miss Gertrude Walkerrebecca.hand24@hotmail.comIsaacsideActive$38.72
Ebony Williamsonjimmy_daugherty98@hotmail.comFort ElissaboroughInactive$122.04
Deborah Heathcoteelias.hamill66@gmail.comPaucektonActive$669.08
Rolando Gradyelwyn.franey@gmail.comSatterfield-GorczanyboroughInactive$950.18
Nannie Swaniawskihilbert_bosco@yahoo.comNew JoseportInactive$46.83
Claude Lednerashley.wintheiser72@hotmail.comLangboroActive$263.76
Abbie Bartolettisteve_baumbach-beer@gmail.comEast BessieburghActive$717.70
Total$7,900.25

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.