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
INV001UnpaidBank Transfer$935.78
INV002PaidBank Transfer$927.23
INV003UnpaidCredit Card$369.12
INV004UnpaidPayPal$477.83
INV005UnpaidBank Transfer$270.52
INV006PendingCredit Card$706.15
INV007PaidCredit Card$150.14
Total$3,836.77

Simple

Users

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

NameTitleEmailRoleActions
Vincenza ErdmanPrincipal Response Supervisorvincenza_erdman@hotmail.comViewer
Claudine HermanInvestor Mobility Assistantclaudine.herman@yahoo.comMember
Bruce PredovicCorporate Creative Representativebruce.predovic@yahoo.comViewer
Ricky KeelingProduct Research Plannerricky_keeling@yahoo.comAdmin
Kayden KlockoInternational Accountability Administratorkayden.klocko54@gmail.comAdmin
Camille KubFuture Directives Facilitatorcamille.kub@hotmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Leland Stiedemann

Central Program Architect

leland_stiedemann3@hotmail.com

Viewer

Alvera Barton

Central Integration Associate

alvera_barton35@yahoo.com

Viewer

Abagail Wintheiser

International Metrics Manager

abagail.wintheiser@gmail.com

Member

Vance Turner

District Operations Designer

vance_turner92@hotmail.com

Viewer

Wilbur Hammes

Chief Accountability Facilitator

wilbur.hammes36@hotmail.com

Member

Holly Gerhold

National Accounts Representative

holly.gerhold@hotmail.com

Viewer

Users

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

NameRoleActions

Beulah Morissette

Corporate Research Representative

beulah.morissette34@yahoo.com

Viewer

Salvador Pfannerstill-Schroeder

Dynamic Brand Facilitator

salvador_pfannerstill-schroeder@gmail.com

Admin

Willy Doyle

Dynamic Integration Director

willy.doyle@gmail.com

Admin

Frances Howe

Forward Division Coordinator

frances.howe@yahoo.com

Viewer

Tammy Willms

Forward Response Liaison

tammy.willms@gmail.com

Member

Mariano Langworth

Internal Identity Executive

mariano_langworth@hotmail.com

Viewer

Laverne Becker

District Paradigm Administrator

laverne_becker6@gmail.com

Member

Rochelle Koss

Lead Mobility Facilitator

rochelle.koss@hotmail.com

Admin

Mariah Hansen

Legacy Research Analyst

mariah.hansen@yahoo.com

Viewer

Lyle Sanford

National Optimization Developer

lyle_sanford@yahoo.com

Member

Seth Koch

Direct Interactions Producer

seth.koch@hotmail.com

Viewer

Tamara Herman

Corporate Infrastructure Designer

tamara_herman@hotmail.com

Admin

Lexi Reilly

Legacy Infrastructure Director

lexi.reilly51@gmail.com

Admin

Yolanda Metz-Walsh

Senior Accounts Specialist

yolanda.metz-walsh@hotmail.com

Member

Colton Bosco

Internal Marketing Orchestrator

colton.bosco@hotmail.com

Viewer

Frances Brown

Customer Creative Liaison

frances.brown@gmail.com

Admin

Ben O'Reilly

Internal Usability Designer

ben_oreilly73@yahoo.com

Viewer

Veda Erdman

Central Group Strategist

veda.erdman99@hotmail.com

Admin

Chris Legros

Dynamic Quality Agent

chris_legros@yahoo.com

Admin

Lauren Bogisich

National Program Planner

lauren.bogisich@hotmail.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
Alvena Binsamy_harber32@hotmail.comBell GardensActive$652.09
Colin Kuhlmantyrese78@yahoo.comLindburghActive$569.08
Frederick Fritschtodd_cronin@gmail.comFort JazlyntownInactive$554.08
Carroll Welchannalise.kessler@hotmail.comSouth LaurettaInactive$234.32
Edna Rempelalyson68@hotmail.comLake JasonInactive$1,094.73
Total$3,104.30

Basic table

Table with Images

NameEmailLocationStatusBalance
Mr. Noble Beahan
@josiane.grant
jorge_durgan@hotmail.comNorth NicolasworthInactive$764.16
Cesar Hermiston DDS
@vera9
felipe_muller@hotmail.comRathvilleInactive$889.67
Mrs. Charlene Johnson
@lenny21
zoila.breitenberg90@gmail.comPort PhyllisActive$115.44
Dr. Ivan Rice
@tara52
eula.littel@hotmail.comHagenesvilleActive$291.22
Ms. Bria Lockman
@jaydon33
enrique74@gmail.comSurpriseInactive$8.20

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Lillie Rath DDSelmore14@hotmail.comLorenztonActive$543.78
Lexus Boscomaximus_kuhlman5@yahoo.comBrownviewActive$110.58
Dr. Jennyfer Kiehnsue99@yahoo.comNew EmanueltonActive$175.29
Kellen Bergnaumdebra5@gmail.comEl Dorado HillsInactive$327.69
Fernando Koss Jr.tami_labadie@yahoo.comTillmanboroughInactive$178.18
Total$1,335.52

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Shelley Greenemerald4@gmail.comZiemeburghInactive$803.88
Eino Lowemike.goodwin56@hotmail.comWest OvaActive$1,009.28
Benny Grantalonzo_jenkins@yahoo.comLacyshireInactive$719.56
Julio Satterfieldcandice_vandervort18@yahoo.comBaileyfurtActive$503.32
Ruth Grimes MDvicente_graham34@gmail.comMooreActive$190.36
Total$3,226.40

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Benton Tillmanethelyn.anderson@gmail.comWintheiservilleInactive$835.44
Vladimir Durgan-Gleasoncole.cole52@gmail.comSouth San FranciscoActive$229.76
Cindy Yost-Olsonbyron_king@gmail.comMargareteburghInactive$490.43
Orville Schillerrussel90@yahoo.comWest SandrasteadInactive$391.73
Marshall Russel-Schusterrosalia1@yahoo.comSouth TravisActive$669.85
Total$2,617.21

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
Marcia Harrisbrian.harber50@hotmail.comFort SilviaActive$860.66
Jennie Koelpinclark45@hotmail.comBeier-RusselhavenActive$1,097.74
Jill Wisokyeloise.ryan35@hotmail.comAlexieboroughActive$1,022.18
Dr. Dixie McCulloughjacinthe_kilback60@gmail.comMaryannworthActive$846.44
Marques Herman MDelouise_donnelly76@yahoo.comLake SandysideActive$29.29
Total$3,856.31

Table with row selection

Card Table

NameEmailLocationStatusBalance
Mrs. Alexandre Walkerwendy98@hotmail.comUptonbergActive$42.35
Adrienne Renner Vkarla_kub48@yahoo.comLake RahulInactive$901.99
Lyric Schillerdevin_schmidt@gmail.comDomingosteadActive$427.24
Ms. Dixie Grady Jr.alvin73@hotmail.comBergnaumboroActive$997.30
Jesse Hermiston Vdovie_schmitt@yahoo.comKerlukeboroInactive$917.64
Total$3,286.52

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
Lorraine Homenickrico59@yahoo.comUrsulaburyInactive$322.03
Mr. Maurice Pollich IVsage20@yahoo.comSan BrunoActive$1,073.10
Joe Boreralva_klein@gmail.comWebershireInactive$507.36
Eloisa Emard-Rutherfordrufus46@hotmail.comLompocInactive$1,045.96
Mr. Caden Parisian-Armstrongedith_wisozk13@gmail.comPort NealboroughInactive$339.22
Horace Kleinannalise.upton@gmail.comMinotActive$506.88
Alyce Donnellyherminio_jones@gmail.comCentennialInactive$887.89
Hoyt Rathteresa_stehr11@gmail.comSouth ElizabethworthInactive$147.37
Otho Gottliebwilson_ohara22@hotmail.comFort AliciatonInactive$988.65
Mr. Cameron D'Amorelorena_heller0@hotmail.comNorth JessieActive$1,038.69
Zachariah Strosinantonetta_kuphal@yahoo.comNew TonyInactive$212.96
Araceli Gusikowskiarmani_jenkins@hotmail.comFort AlessandraInactive$417.56
Dr. Rickey Cassinalfonzo.funk@hotmail.comEast DeancesterInactive$935.67
Mr. Darin Hirthemartine.bauch87@yahoo.comNew MattActive$876.39
Orville Beerseth_runolfsson@gmail.comNorth MarthatownActive$1,004.05
Total$10,303.78

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