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
INV001PendingPayPal$426.20
INV002PaidCredit Card$917.15
INV003PaidBank Transfer$206.64
INV004UnpaidPayPal$694.61
INV005UnpaidPayPal$409.04
INV006PendingCredit Card$300.26
INV007PaidPayPal$148.18
Total$3,102.08

Simple

Users

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

NameTitleEmailRoleActions
Geraldine McKenzieChief Operations Directorgeraldine_mckenzie23@hotmail.comAdmin
Nova SchaeferRegional Directives Administratornova.schaefer78@gmail.comViewer
Laurence SpencerCorporate Marketing Associatelaurence_spencer81@gmail.comMember
Dwight NikolausHuman Division Managerdwight_nikolaus42@gmail.comAdmin
Joe RoobDistrict Branding Supervisorjoe.roob@yahoo.comAdmin
Jett JacobiFuture Program Representativejett.jacobi@gmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Daija Rosenbaum-O'Reilly

Human Infrastructure Agent

daija_rosenbaum-oreilly@yahoo.com

Admin

Patsy Mann

Legacy Brand Strategist

patsy_mann1@gmail.com

Member

Vera Parker-Kertzmann

Central Functionality Executive

vera_parker-kertzmann67@yahoo.com

Admin

Tatum Tromp

Senior Group Producer

tatum_tromp@yahoo.com

Admin

Roderick Dare

Product Paradigm Executive

roderick_dare44@gmail.com

Member

Ida Beatty

Human Division Strategist

ida.beatty26@yahoo.com

Viewer

Users

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

NameRoleActions

Rogers Kunde

Human Infrastructure Planner

rogers.kunde59@hotmail.com

Member

Grayce Hayes

Direct Configuration Developer

grayce_hayes@hotmail.com

Admin

Maida Wolff

Global Applications Director

maida_wolff9@yahoo.com

Viewer

Manuel McLaughlin

Forward Applications Administrator

manuel_mclaughlin@yahoo.com

Viewer

Jett Schulist

International Branding Administrator

jett.schulist84@hotmail.com

Admin

Rashad Treutel

Senior Communications Specialist

rashad_treutel@gmail.com

Viewer

Ira Jacobs

Human Quality Representative

ira_jacobs@hotmail.com

Viewer

Kirk Ebert

Senior Assurance Executive

kirk_ebert36@gmail.com

Admin

Urban Kling

Product Interactions Consultant

urban.kling19@hotmail.com

Admin

Santiago Mohr

Product Research Director

santiago_mohr@gmail.com

Admin

Velma Franey

Central Brand Engineer

velma.franey44@gmail.com

Viewer

Rita Huels

Investor Data Administrator

rita_huels18@gmail.com

Viewer

Halle Nicolas

Corporate Data Coordinator

halle.nicolas41@yahoo.com

Admin

Iliana Hessel

Human Research Designer

iliana.hessel@hotmail.com

Admin

Erika Hauck

Product Accountability Developer

erika.hauck50@gmail.com

Admin

Hiram Kertzmann

Global Metrics Administrator

hiram.kertzmann90@hotmail.com

Viewer

Elva Howe

District Configuration Engineer

elva_howe97@hotmail.com

Admin

Margarete Senger

National Infrastructure Liaison

margarete.senger@hotmail.com

Viewer

Jordan Runolfsdottir

Dynamic Group Liaison

jordan_runolfsdottir@yahoo.com

Viewer

Lela Murray

Internal Accounts Planner

lela.murray@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
Gregorio Erdmanbryan83@yahoo.comDooleyfieldInactive$846.09
Selina Jenkinsheidi_reichel@gmail.comPort TiffanybergInactive$458.17
Dwight Ledner Isonya_osinski@gmail.comNational CityActive$513.47
Stephan Haleylloyd51@yahoo.comAbbieburyActive$17.41
Wanda Morarvickie_abernathy@gmail.comWolfburyActive$1,022.37
Total$2,857.51

Basic table

Table with Images

NameEmailLocationStatusBalance
Carmen Jacobi
@alicia_prosacco
sabrina_weissnat@hotmail.comRochelleviewActive$1,108.36
Nora Harvey
@amie_gutmann
jerrell.macgyver30@gmail.comMargarettaboroughInactive$729.11
Lorenza Hand
@elias69
claude_kris@yahoo.comNorth GrantInactive$271.56
Elda Pfannerstill I
@ginger_white
pearlie_damore74@hotmail.comWest MargaritaActive$1,196.01
Mr. Arnold Kovacek Sr.
@lorenzo1
felicity.schneider73@yahoo.comFloydhavenInactive$9.90

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Evalyn Schimmel Jr.glenn77@yahoo.comRatketownInactive$275.82
Dr. Nellie Gulgowski Vevelyn13@hotmail.comLolafieldInactive$872.57
Trisha Conroyarmand.lueilwitz18@hotmail.comHarveytonInactive$205.05
Ethan Mayerkari_yundt63@hotmail.comNew ElviraInactive$569.82
Jadyn Stroman IIgeorgette_cruickshank4@yahoo.comPort TavaresActive$348.65
Total$2,271.91

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Creola Lakinallan_buckridge-ferry@gmail.comSunriseActive$621.41
Hazle Wizajavonte_dietrich@hotmail.comRosemariechesterInactive$401.41
Carl Feeneytyrone.pacocha20@hotmail.comProhaskatonActive$1,129.13
Jay McGlynndameon37@gmail.comWisozk-LabadiefortInactive$805.95
Eileen Blandaangie34@hotmail.comSouth JoeyActive$659.96
Total$3,617.86

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Wanda Prosaccocynthia60@gmail.comLindfortActive$298.56
Antwon Funkneal.hoeger-dietrich@yahoo.comVanfurtActive$841.80
Connor Roweseth33@hotmail.comEast WaylonInactive$1,113.47
Ashton Keebler Igreyson.hickle52@yahoo.comSatterfieldsteadActive$55.56
Lisa Vontroy_effertz@hotmail.comSan DiegoActive$360.40
Total$2,669.79

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
Lloyd Pollichjake65@yahoo.comNorth ArchActive$1,037.83
Olive Beerbrendan.lind@yahoo.comWillisboroInactive$442.55
Dewayne Gibsonbyron.thiel36@gmail.comLake TonyActive$1,107.12
Hope Hegmannerin_smitham44@yahoo.comRichlandActive$256.44
Patty Wisokymarcella_goodwin47@gmail.comLisatownInactive$447.06
Total$3,291.00

Table with row selection

Card Table

NameEmailLocationStatusBalance
Wade Feesthank3@gmail.comWiegandburyActive$375.99
Lacy Hahn-Mills IIImeagan_bechtelar@gmail.comPort ElsaActive$132.76
Dan Bergnaummilton_spencer@yahoo.comBotsfordlandInactive$80.26
Mallory Hahnkristina1@yahoo.comPort DarnellInactive$93.39
Amos Schoen-Bode IVmathew49@hotmail.comNew SheriburghInactive$172.56
Total$854.96

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
Steve Krajcikalena_reilly@yahoo.comBoyleburghActive$463.00
Fay Bruenowen_hettinger-hansen@hotmail.comTracyActive$693.43
Thea Johnson-Halvorsonheidi.ullrich-lueilwitz5@gmail.comHayesportInactive$1,152.33
Dr. Crawford Willmshaley.trantow@yahoo.comEdwinboroActive$337.60
Kent Walterdorothy60@hotmail.comLake MargotstadActive$67.00
Seamus Gorczanynicholaus.hoppe84@yahoo.comEfrenburyActive$936.58
Mrs. Janis Walkerollie9@gmail.comBlanda-WilliamsonfortActive$582.02
Yasmine Wittingmakenna.tillman21@gmail.comNew DominickInactive$261.15
Santiago Dickinsondorothea.morissette49@gmail.comMoenmouthActive$1,176.13
Bernice Dibbertjesse94@hotmail.comJolietActive$167.47
Kristine Pfannerstill DVMrebeca68@yahoo.comNealcesterInactive$945.98
Trevion Bergelester_wintheiser-ohara@gmail.comNew EileenboroughInactive$687.59
Vicente Kreiger DDSleon.bode61@gmail.comMillermouthActive$1,092.69
Ida Labadieraphaelle_reinger62@gmail.comDestinhavenActive$444.10
Leon Corwinlexi.bailey@gmail.comLynchmouthActive$619.76
Total$9,626.83

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