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
INV001UnpaidCredit Card$918.86
INV002PaidCredit Card$767.12
INV003UnpaidPayPal$755.94
INV004PaidPayPal$721.81
INV005PendingBank Transfer$302.07
INV006PendingBank Transfer$812.42
INV007PaidPayPal$905.79
Total$5,184.01

Simple

Users

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

NameTitleEmailRoleActions
Mamie HagenesForward Program Analystmamie.hagenes@yahoo.comViewer
Alison BernhardInvestor Research Coordinatoralison_bernhard@gmail.comViewer
Walter LindgrenInternal Intranet Supervisorwalter.lindgren@hotmail.comAdmin
Maxine WolfNational Intranet Assistantmaxine_wolf@hotmail.comAdmin
Winston BrownDistrict Solutions Developerwinston_brown36@hotmail.comViewer
Lori ThielSenior Solutions Officerlori_thiel@hotmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Ruben Goldner

Direct Markets Strategist

ruben_goldner@hotmail.com

Member

Kaitlyn Frami

Internal Factors Strategist

kaitlyn_frami@gmail.com

Admin

Keanu Weimann

Legacy Group Associate

keanu_weimann85@yahoo.com

Admin

Rudolph Klein

Corporate Factors Analyst

rudolph.klein@gmail.com

Admin

Rodney Franecki

National Security Architect

rodney_franecki18@yahoo.com

Admin

Suzanne VonRueden

Legacy Tactics Officer

suzanne.vonrueden@hotmail.com

Viewer

Sticky header

Users

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

NameRoleActions

Roberto Lueilwitz

Internal Factors Architect

roberto.lueilwitz6@hotmail.com

Viewer

Martha Casper

Dynamic Research Producer

martha_casper@yahoo.com

Admin

Sally Schaefer

Lead Markets Director

sally.schaefer@hotmail.com

Admin

Angelina Klocko

Lead Implementation Analyst

angelina_klocko@gmail.com

Viewer

Katherine Kautzer

Global Data Designer

katherine_kautzer@hotmail.com

Viewer

Stella Gorczany

Legacy Paradigm Liaison

stella_gorczany53@hotmail.com

Viewer

Roland Keeling

Legacy Brand Designer

roland_keeling20@hotmail.com

Viewer

Calista Bartell

Investor Response Planner

calista_bartell@gmail.com

Admin

Sonya Schaden

Regional Functionality Planner

sonya_schaden@gmail.com

Admin

Yoshiko Wunsch

International Program Assistant

yoshiko.wunsch50@hotmail.com

Member

Jared Bode

Human Accountability Analyst

jared_bode@gmail.com

Viewer

Garrick Walter

Investor Branding Designer

garrick.walter24@hotmail.com

Viewer

Felipe Wolff

Regional Data Supervisor

felipe.wolff22@gmail.com

Member

Lorna Greenholt

Chief Interactions Director

lorna.greenholt30@gmail.com

Viewer

Kory Lebsack

Investor Operations Associate

kory_lebsack@yahoo.com

Viewer

Rick Blick

Legacy Metrics Producer

rick.blick65@yahoo.com

Admin

Desiree Bernhard

Regional Tactics Developer

desiree.bernhard60@yahoo.com

Viewer

Karianne Renner

Future Data Planner

karianne_renner69@gmail.com

Member

Lionel Spinka

Dynamic Functionality Planner

lionel.spinka39@gmail.com

Admin

Eleanora Daniel

Human Data Producer

eleanora.daniel@hotmail.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
Jeremy Ondrickaluciano20@gmail.comWest ToddActive$999.68
Boris Wintheiserkara_kris@yahoo.comAdriantonActive$647.66
Lois Hilpertwilber.damore-weissnat96@gmail.comClaytonfurtActive$585.12
Green Buckridgejasmine77@hotmail.comLake SherrytownActive$373.52
Elvira Murphyroscoe.rippin69@hotmail.comSouth AmayaActive$224.29
Total$2,830.27

Basic table

Table with Images

NameEmailLocationStatusBalance
Shelly Pfeffer
@kitty_hickle39
rochelle.murphy@gmail.comGreen BayInactive$102.67
Jerome Pagac
@christian_witting
kali17@gmail.comLake CharlesInactive$855.57
Lance Nitzsche
@oscar.murphy24
wanda_ratke@yahoo.comFort BenjamincesterActive$65.25
Edwin Wyman
@carey_lynch46
winston_hand26@gmail.comFort HunterviewInactive$277.99
Gretchen Luettgen-Moore
@kate23
sydnie_corkery-hauck52@yahoo.comNew ChristinaviewInactive$329.45

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Dr. Victor Reicherternest.bahringer46@hotmail.comNew HeavenportActive$97.28
Camila Turcottemeta.harvey@yahoo.comBakersfieldActive$1,113.58
Roland Herman-Carrollanabelle_bechtelar2@hotmail.comWest TylerInactive$1,128.06
Mr. Ryan Lemkearvel.ferry@hotmail.comAustinInactive$434.67
Lela Douglasmathew_purdy@gmail.comWaldorfActive$136.26
Total$2,909.85

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Leon Stehrdaphnee_will-lang@gmail.comEmmitthavenActive$157.28
Darrin McCulloughbill_becker@yahoo.comArlingtonActive$39.60
Danielle Larson IIIbenjamin.zboncak5@yahoo.comLednerburyInactive$1,121.85
Laurel Blickbessie_torp1@yahoo.comPort MariaportInactive$55.68
Benedict Watsicamarcos21@hotmail.comDewittsideActive$31.33
Total$1,405.74

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Virgil Bahringermarietta_medhurst44@gmail.comWest LorraineActive$188.88
Mrs. Amber Douglasshana59@yahoo.comQuigleymouthActive$276.66
Esmeralda Murphyirvin34@hotmail.comKrischesterActive$919.41
Eda Treutelalena_sporer66@yahoo.comDavisfortActive$905.67
Molly Mullerbrooke.dibbert-schuppe@gmail.comDarlabergInactive$281.29
Total$2,571.91

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
Nettie Franeckiwinifred.littel@gmail.comAnnetonInactive$225.05
Josue Batzrocky_murphy15@gmail.comBeattyworthActive$511.00
Felicia Andersonlisa.reilly@yahoo.comLake LoyInactive$351.40
Rodger Simonistaurean.osinski44@yahoo.comArlington HeightsInactive$745.79
Heather Funkvicky25@yahoo.comNorth NadiaburghInactive$764.53
Total$2,597.77

Table with row selection

Card Table

NameEmailLocationStatusBalance
Inez Boylemarjorie_abbott@hotmail.comGeolandActive$15.17
Allen Toykristina.kautzer@hotmail.comEast StacyburghInactive$897.33
Marshall Bergnaumkayla89@hotmail.comSouth KurtActive$774.16
Raul Faheyemilio_fisher@gmail.comWebersteadActive$607.57
Easter Baileyelda_gerlach@hotmail.comBellinghamInactive$870.93
Total$3,165.16

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
Krystal Klockojosiah.von@yahoo.comSamanthasteadInactive$1,026.37
Virgil Larsonelbert.walsh57@yahoo.comAaliyahburghActive$604.25
Josie Sauerjulian10@yahoo.comPort JodieboroughActive$93.64
Aron Blandajusten.heller41@gmail.comWilkinsonhavenActive$1,074.07
Lucille King IIeddie_strosin@yahoo.comAmieshireInactive$730.15
Velma Hellerjay.swaniawski@gmail.comEl MonteInactive$1,150.27
Lester Hanecurtis.jacobi50@yahoo.comBorer-CummingsshireInactive$914.46
Keon Hermannsue48@gmail.comRicefortActive$391.85
Mr. Carter Harveyjosianne_hilll31@gmail.comFort JudymouthInactive$852.28
Juvenal Zemlak-Bechtelarsammy.kunze@yahoo.comPort MaxcesterInactive$197.30
Loyal Homenickwallace.bogisich@hotmail.comAlanissteadActive$166.99
Mr. Ethan Kshlerincolten.howe@yahoo.comFort CierraburghInactive$48.97
Aaron Nicolasmarshall_upton32@yahoo.comToreyburghInactive$631.87
Fernando Barrowsadrain63@yahoo.comMarquardtsideInactive$789.91
Marilie Denesikcecilia_crist@hotmail.comEast CitlalliActive$1,021.81
Total$9,694.19

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.