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$731.04
INV002PendingPayPal$399.22
INV003PendingCredit Card$387.48
INV004PendingPayPal$371.80
INV005PaidCredit Card$403.50
INV006PaidCredit Card$362.20
INV007PaidBank Transfer$827.26
Total$3,482.50

Simple

Users

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

NameTitleEmailRoleActions
Dora KerlukeDirect Metrics Strategistdora.kerluke68@hotmail.comAdmin
Brandon WiegandDirect Program Supervisorbrandon_wiegand@gmail.comAdmin
Emily Bartoletti-VolkmanLegacy Solutions Associateemily_bartoletti-volkman@hotmail.comAdmin
Caleigh LittelDirect Quality Supervisorcaleigh.littel@gmail.comViewer
Ron HandInternational Program Associateron_hand@yahoo.comMember
Paige BernierCentral Infrastructure Assistantpaige.bernier96@hotmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Kamren Leannon

Direct Interactions Architect

kamren_leannon@hotmail.com

Member

Carol Greenfelder

Lead Usability Supervisor

carol_greenfelder@hotmail.com

Admin

Melanie Stokes

Internal Integration Assistant

melanie.stokes56@gmail.com

Viewer

Aaliyah Heathcote

National Marketing Representative

aaliyah.heathcote64@hotmail.com

Member

Lucious Ebert

Principal Creative Representative

lucious.ebert23@gmail.com

Admin

Desiree McLaughlin-Cummings

National Solutions Consultant

desiree.mclaughlin-cummings31@gmail.com

Member

Users

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

NameRoleActions

Luciano Jakubowski

Direct Directives Designer

luciano.jakubowski@hotmail.com

Viewer

Cruz Trantow

Corporate Data Architect

cruz.trantow@gmail.com

Admin

Casper Ruecker

Internal Program Architect

casper_ruecker@gmail.com

Member

Rachael Wisozk

Forward Identity Specialist

rachael.wisozk@yahoo.com

Member

Payton Rosenbaum

Dynamic Communications Specialist

payton.rosenbaum@yahoo.com

Admin

Logan Johnson

Global Solutions Associate

logan_johnson@hotmail.com

Viewer

Hillard Bode

Internal Paradigm Strategist

hillard_bode@yahoo.com

Viewer

Francisco Johnston

Regional Mobility Manager

francisco.johnston@yahoo.com

Admin

Clemens Auer

Forward Applications Liaison

clemens_auer50@yahoo.com

Member

Herminia Homenick

Customer Assurance Consultant

herminia_homenick@hotmail.com

Viewer

Marie Carroll

Global Functionality Supervisor

marie_carroll53@yahoo.com

Admin

Roscoe Ferry

Dynamic Data Facilitator

roscoe_ferry60@gmail.com

Viewer

Benedict Howe-Towne

Human Program Strategist

benedict.howe-towne@gmail.com

Viewer

Santos Lakin

Forward Group Executive

santos_lakin@gmail.com

Admin

Velda Armstrong

Central Directives Director

velda_armstrong@gmail.com

Member

Mildred Smith

Human Metrics Planner

mildred_smith@gmail.com

Member

Rudy Turcotte

Future Infrastructure Supervisor

rudy_turcotte61@hotmail.com

Viewer

Johnny Steuber

Central Mobility Engineer

johnny_steuber81@gmail.com

Member

Stephen Hoppe

Customer Factors Designer

stephen.hoppe@hotmail.com

Admin

Rozella Ondricka

Internal Integration Representative

rozella.ondricka@gmail.com

Viewer

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
Payton Ferryhope2@yahoo.comSouth WhittierActive$588.18
Shad Tillmanhaleigh_gislason81@gmail.comZulaufbergActive$169.25
Ova Weissnatlauren72@hotmail.comVidaltonInactive$183.55
Mrs. Denise Satterfieldsabryna38@gmail.comLake DenisehavenInactive$288.11
Felicia Fisher-Jastalexander_damore@gmail.comPort KeenanportInactive$1,158.68
Total$2,387.77

Basic table

Table with Images

NameEmailLocationStatusBalance
Ellis Doyle
@hope87
brent77@hotmail.comKassulkeboroActive$690.71
Mr. Yasmin Murray
@gregg_cormier-conn
aaron50@yahoo.comPort AndytonInactive$729.21
Sonja Maggio
@shawna.morissette94
ashley99@gmail.comBakersfieldInactive$1,067.59
Domingo Mayer
@madeline_senger70
soledad.zulauf13@hotmail.comWizafortActive$701.12
Elinore Kunde
@rosie12
neha.bins@hotmail.comCruickshankcesterActive$700.37

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Hassie Homenickdoreen_rutherford@gmail.comRippinportInactive$64.03
Clementina Boyeralexie3@yahoo.comLake RosalindaInactive$175.00
Misty Milleremilie67@gmail.comNorth EllenInactive$1,104.24
Carey McGlynnanika_schimmel50@gmail.comNorth MargueriteActive$377.33
Martine Gerlachmohammad.funk93@hotmail.comSouth AshaburyActive$451.99
Total$2,172.59

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Keshawn Treutelmyrtle81@gmail.comGorczanycesterActive$740.16
Rafael Powlowskiedwin99@hotmail.comImogeneburyInactive$415.58
Marie Glover-Kunzegladys.hamill@hotmail.comPowlowskiportInactive$205.96
Mr. Rodolfo Satterfieldverna21@yahoo.comSouth YasmeenActive$908.96
Hector Mrazdamon_bauch@gmail.comSouth JoshworthActive$387.28
Total$2,657.94

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Raul McGlynn IVheidi_kutch-effertz@yahoo.comAngelitaportInactive$300.04
Florence Blandaantoinette61@hotmail.comEmiliaworthInactive$141.32
Maybell Morissettekirk_jakubowski23@gmail.comSmithamburyInactive$219.70
Otha Huelvickie_lang14@gmail.comHalvorsonburyInactive$478.81
Hermina Gerlach-Leuschkeesta.heathcote80@yahoo.comPort GeorgiatownActive$1,107.67
Total$2,247.54

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. Arden Friesenmiguel.schulist47@hotmail.comLouisaworthInactive$333.34
Naomie Kuhlmankirstin.steuber88@gmail.comMcDermotthavenInactive$226.87
Josh Bernierericka.langworth@yahoo.comPort IsabelletownActive$168.44
Tomasa Hilpertdemarco69@gmail.comMacejkoviccesterInactive$470.20
Miss Emily Heathcotewalter_mclaughlin51@yahoo.comWest JavierstadActive$571.09
Total$1,769.94

Table with row selection

Card Table

NameEmailLocationStatusBalance
Mr. John Pollichalex_bosco88@hotmail.comLake DennisworthInactive$793.22
Judson Denesikrachael.prosacco38@gmail.comBraun-FarrellcesterInactive$1,046.30
Frank Haleymelany.bergnaum89@hotmail.comHettingercesterInactive$300.78
Brooks Waters DVMsharon_sporer@hotmail.comSouth DouglasInactive$59.61
Mrs. Janice Cummerata Jr.belinda_hartmann75@hotmail.comJohnsonchesterActive$18.05
Total$2,217.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
Alison Morissettegeoffrey_lakin@hotmail.comVirginia BeachActive$910.56
Sherri Joneselse_wehner63@hotmail.comPort RydervilleActive$160.15
Mr. Barry Johnson-Grimesjanessa.bahringer21@hotmail.comStrosincesterActive$846.09
Dorian Grahamjaiden.gislason@gmail.comWest BlakeInactive$897.37
Dr. Orlo Adamsfannie.hagenes@hotmail.comPort DaphneeActive$72.37
Rosemary Ebertjuan.nader@yahoo.comPalatineActive$417.92
Stephen Metzharriet_kuphal@gmail.comStratfordInactive$206.59
Byron Jacobsmariam_haag20@yahoo.comLake BryantownInactive$768.29
Lester Jerde PhDalessandra_schroeder@gmail.comVelvabergActive$472.51
Janick Schadenlaverne8@hotmail.comMurrayInactive$768.72
Marsha Zboncakclayton_emmerich12@yahoo.comEast AdellefortInactive$822.19
Lloyd Hellerguy.daniel@yahoo.comSouth JuliusActive$428.12
Roy Treutellelia_bailey@gmail.comEast ErickActive$545.77
Dane Farrelltodd_torp60@gmail.comEast DonnaInactive$796.70
Melba Pollichwendy_gerhold@gmail.comPort ConorboroActive$18.28
Total$8,131.63

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