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
INV001PendingCredit Card$545.05
INV002UnpaidPayPal$425.96
INV003UnpaidCredit Card$900.02
INV004UnpaidPayPal$830.51
INV005UnpaidPayPal$898.77
INV006PaidCredit Card$178.63
INV007UnpaidCredit Card$241.96
Total$4,020.90

Simple

Users

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

NameTitleEmailRoleActions
Adriel GleichnerRegional Paradigm Specialistadriel_gleichner93@yahoo.comViewer
Katie DanielCentral Factors Managerkatie.daniel@gmail.comViewer
Blake LuettgenForward Research Architectblake.luettgen@gmail.comAdmin
Prince MorarPrincipal Research Liaisonprince.morar8@gmail.comAdmin
Dee SatterfieldCentral Assurance Supervisordee.satterfield@hotmail.comMember
Debbie Pouros-TrompFuture Factors Strategistdebbie.pouros-tromp@hotmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Boris Champlin

International Program Director

boris.champlin@gmail.com

Member

Louvenia Corkery

Chief Program Representative

louvenia_corkery@gmail.com

Member

Tiana Goyette

Investor Brand Director

tiana.goyette2@hotmail.com

Viewer

Jacques Abernathy

Human Interactions Manager

jacques.abernathy43@gmail.com

Viewer

Prudence D'Amore

Product Integration Director

prudence_damore@gmail.com

Member

Bartholome Beatty

Corporate Communications Assistant

bartholome_beatty48@yahoo.com

Admin

Users

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

NameRoleActions

Dejuan Beier

Senior Quality Director

dejuan_beier@hotmail.com

Admin

Chadd Watsica

Future Branding Developer

chadd.watsica35@gmail.com

Admin

Annette Sporer

Chief Solutions Technician

annette.sporer@hotmail.com

Viewer

Alison Murray

Customer Usability Specialist

alison_murray49@gmail.com

Viewer

Wilburn Jakubowski

Product Implementation Associate

wilburn.jakubowski44@hotmail.com

Admin

Wm Crooks

Customer Interactions Liaison

wm.crooks@gmail.com

Admin

Milton Green

Legacy Solutions Associate

milton_green97@yahoo.com

Admin

Mark Torp

Principal Intranet Coordinator

mark.torp@gmail.com

Viewer

Kaitlyn Schaden

International Solutions Representative

kaitlyn.schaden97@yahoo.com

Admin

Casimer Koepp

Human Factors Agent

casimer_koepp8@hotmail.com

Member

Rylan McCullough

Global Division Developer

rylan_mccullough@gmail.com

Viewer

Marilyne Ferry

Forward Directives Developer

marilyne.ferry68@hotmail.com

Admin

Dulce Ritchie

Product Group Developer

dulce_ritchie@yahoo.com

Member

Marcelina Bartoletti

Global Branding Technician

marcelina_bartoletti68@gmail.com

Viewer

Elizabeth Ernser

Investor Operations Developer

elizabeth_ernser@hotmail.com

Member

Chadd Ondricka

District Research Officer

chadd.ondricka@hotmail.com

Viewer

Gregory Sipes

Direct Assurance Specialist

gregory_sipes@hotmail.com

Admin

Tyrese Crist

Principal Solutions Manager

tyrese.crist@gmail.com

Viewer

Bethany Smith

Regional Security Orchestrator

bethany_smith22@hotmail.com

Viewer

Earnest Hermann

District Factors Manager

earnest_hermann@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
Verona Trantowfaith.ziemann@gmail.comCasas AdobesInactive$264.82
Javier Hermanedmond19@yahoo.comNew JaleelstadInactive$894.97
Mike Wilderman Velisha_jenkins10@hotmail.comWest RashawnfieldActive$752.78
Vickie Schambergeremmett6@gmail.comEast NehaInactive$289.50
Bridget Howebennie_gislason99@gmail.comTromphavenInactive$550.58
Total$2,752.65

Basic table

Table with Images

NameEmailLocationStatusBalance
Verna Schuppe III
@edmund.cummings42
elijah.breitenberg@gmail.comProvidenceInactive$300.65
Bailey Kuhn
@greta_okuneva1
lydia.lesch41@hotmail.comHahnburyActive$824.22
Orin Nienow
@nakia.jenkins
noemie.lueilwitz@gmail.comEast HaltonInactive$317.74
Jamir Schiller
@abraham.parker57
al.emmerich@gmail.comFort AlbinaworthInactive$571.70
Makayla Stoltenberg III
@naomi33
leigh7@gmail.comMaldenInactive$1,027.51

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Miss Jayde Stammdestiney_armstrong67@gmail.comNorth AmbrosefurtActive$201.16
Kenneth Rolfsonrahsaan_brakus91@hotmail.comTremblayportActive$808.81
Amina Boyer-Champlinlea.parisian@hotmail.comClementinaboroActive$987.38
Cooper Fritsch Jr.meredith_kihn@yahoo.comBattle CreekActive$24.53
Mitchel Bradtkedanika90@yahoo.comRussellburghActive$70.09
Total$2,091.97

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Esteban Abbottgardner.bins13@hotmail.comKovaceklandInactive$861.74
Fanny Funkjerrod_runte@yahoo.comCassandratonActive$790.65
Marguerite Bergejeannette42@yahoo.comPort RolandfieldInactive$831.18
Ms. River O'Connellnaomi46@yahoo.comPort IdellaActive$770.46
Darrel Rathbernadette93@gmail.comShawnfieldInactive$526.09
Total$3,780.12

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Dorian Schusterdoris.kessler@hotmail.comDedricworthInactive$132.75
Delphine Bayerseth.walsh@gmail.comFort KatarinahavenActive$1,163.79
Dan Reynoldsalexandra.ratke7@hotmail.comEast RiverActive$810.23
Darnell Robertsashleigh_nitzsche@yahoo.comNew TobyInactive$886.63
Andres Sporerdante92@hotmail.comSouth ElinorebergActive$252.07
Total$3,245.47

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
Mrs. Joy Lindmarcia_littel41@yahoo.comKilbacksideInactive$263.20
Diane Fadelkarelle24@hotmail.comNorth DeborahActive$419.93
Quincy Donnellynorval.toy@hotmail.comNew GretchenActive$1,198.36
Patty Weissnat MDwilla75@yahoo.comGlen BurnieInactive$716.03
Roosevelt Stiedemannhorace.hand@yahoo.comNew KieransideInactive$297.78
Total$2,895.30

Table with row selection

Card Table

NameEmailLocationStatusBalance
Dexter Handashton10@gmail.comWest DustyInactive$527.22
Elnora Ritchiebarbara18@yahoo.comWest PhillipchesterActive$691.35
Daryl Faheyjailyn12@gmail.comNew LonieportInactive$273.56
Arnaldo Walshelsa_hagenes@gmail.comSergiofieldActive$640.84
Keenan Dickiivan.beahan@yahoo.comNorth JordanInactive$1,078.30
Total$3,211.27

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
Wilma Kemmerwerner.welch@gmail.comCorneliusburghInactive$525.76
Wellington Jonesclyde_kirlin18@hotmail.comHegmannhavenActive$1,132.37
Imogene Botsfordqueenie_kozey84@hotmail.comKatieworthInactive$1,189.92
Jana Grimesmarques40@hotmail.comPort OrangeActive$948.41
Rogelio Lowemalcolm_zulauf@hotmail.comCarmichaelInactive$1,199.73
Carissa O'Connerorlando_trantow87@hotmail.comMillstonInactive$626.15
Kailey McKenziepauline_gibson3@gmail.comDeanboroInactive$496.23
Odessa Hauckflorence.graham21@yahoo.comLaytonActive$1,101.48
Grant O'Harashawn.rodriguez36@hotmail.comNellaviewActive$456.60
Gladys Schoenliliane51@yahoo.comNew MatthewmouthInactive$682.23
George Bruenrebecca.miller@hotmail.comLehnersteadActive$426.05
Letitia Greenfeldercrystel.jaskolski81@gmail.comCarrolltonActive$874.45
Jacob Wardmalvina_lebsack@yahoo.comBowieActive$710.06
Afton Colevernice_kertzmann@gmail.comHowardfieldActive$747.53
Rosie Heaneyderek.gulgowski96@yahoo.comSouth ValentinaInactive$431.69
Total$11,548.66

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