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$597.35
INV002PendingPayPal$334.24
INV003PaidPayPal$239.89
INV004UnpaidBank Transfer$204.95
INV005PendingCredit Card$162.30
INV006UnpaidCredit Card$227.24
INV007UnpaidCredit Card$397.48
Total$2,163.45

Simple

Users

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

NameTitleEmailRoleActions
Shaun MayerHuman Accountability Supervisorshaun.mayer@hotmail.comMember
Juana RomagueraCentral Configuration Designerjuana_romaguera39@gmail.comMember
Garfield Renner-FunkLegacy Markets Supervisorgarfield.renner-funk@yahoo.comAdmin
Emmitt ParisianCustomer Assurance Liaisonemmitt.parisian75@gmail.comMember
Roy HandPrincipal Applications Managerroy.hand@yahoo.comAdmin
Michael RatkeRegional Response Strategistmichael_ratke55@hotmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Ricardo Mosciski

Central Paradigm Strategist

ricardo.mosciski59@hotmail.com

Member

Stewart Senger

Dynamic Implementation Architect

stewart.senger@gmail.com

Member

Roxanne Krajcik

Chief Research Executive

roxanne_krajcik65@hotmail.com

Viewer

Harley Murazik

Product Applications Specialist

harley_murazik@gmail.com

Member

Orin Batz

Senior Division Agent

orin_batz@yahoo.com

Viewer

Doug Farrell

Principal Operations Director

doug_farrell@yahoo.com

Member

Users

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

NameRoleActions

Cathryn Muller

Corporate Applications Designer

cathryn_muller58@yahoo.com

Viewer

Evalyn Mueller

Central Identity Analyst

evalyn_mueller93@yahoo.com

Viewer

Kelley Powlowski

Human Interactions Technician

kelley.powlowski@hotmail.com

Member

Chasity Mraz

Direct Web Architect

chasity_mraz@yahoo.com

Admin

Stefan Reinger

Senior Tactics Architect

stefan.reinger@yahoo.com

Admin

Amelia Fisher

Customer Marketing Director

amelia_fisher@hotmail.com

Viewer

Zachary Lemke

Customer Division Orchestrator

zachary.lemke28@yahoo.com

Member

Alexis Ziemann

Lead Factors Planner

alexis_ziemann95@yahoo.com

Viewer

Fiona White

Forward Program Officer

fiona_white3@gmail.com

Admin

Angus Mraz

Principal Creative Developer

angus_mraz@gmail.com

Member

Coby Bauch

Lead Markets Developer

coby_bauch@gmail.com

Viewer

Betsy Stark

District Directives Liaison

betsy_stark35@gmail.com

Member

Kent Marvin

Product Configuration Architect

kent_marvin@hotmail.com

Admin

Gennaro Legros

Senior Accountability Assistant

gennaro_legros@gmail.com

Viewer

Leone Windler

Principal Intranet Agent

leone.windler77@yahoo.com

Member

Ann Kunze

National Data Specialist

ann.kunze81@hotmail.com

Member

Michele Strosin

Legacy Research Engineer

michele_strosin@gmail.com

Viewer

Jeanne McLaughlin

Lead Response Facilitator

jeanne_mclaughlin91@hotmail.com

Viewer

Cory Stoltenberg

Lead Web Strategist

cory.stoltenberg43@hotmail.com

Member

Rosie Nikolaus

Legacy Creative Designer

rosie.nikolaus59@yahoo.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
Lucia Waelchityler.bernier46@yahoo.comHesselvilleInactive$370.71
Marcel Rodriguezjaunita.ondricka29@gmail.comPort JohnburyInactive$15.11
Roberto Uptoneula25@gmail.comWest MelanieInactive$615.88
Enola Nitzsche MDrickey_hettinger79@hotmail.comEast MartaburghActive$24.27
Caroline Colewebster.larkin@gmail.comLake DavonsteadActive$939.56
Total$1,965.53

Basic table

Table with Images

NameEmailLocationStatusBalance
Mrs. Robbie Koelpin PhD
@danyka.auer
rafaela.zieme@hotmail.comMargaritaworthInactive$1,012.16
Gustave Nienow
@mercedes_bernhard
mafalda_white35@hotmail.comFort AprilInactive$58.32
Patti Hauck
@francisca9
maureen10@yahoo.comTucsonActive$424.93
Jackson Gusikowski
@tonya.corkery71
reyes_lang7@hotmail.comPort GregstadActive$259.98
Eulalia Morissette
@adah81
iris.lueilwitz31@gmail.comTedmouthActive$132.24

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Dr. Amie Harrisamelie_schneider@gmail.comGreggtonInactive$1,071.80
Myles Reynoldscelia.leffler50@yahoo.comArnulfoworthInactive$949.14
Emmett Waelchicathrine51@yahoo.comCollinsboroActive$858.76
Stanley Larson Sr.kirsten_gerhold@gmail.comFort GeoffreybergActive$868.33
Maci Green Vkameron_oberbrunner@gmail.comCorkerysteadInactive$476.68
Total$4,224.71

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Mr. Abel Wildermanjarod1@hotmail.comThe HammocksActive$699.25
Moriah Jerderogelio68@gmail.comDamienboroInactive$77.62
Madeline Hicklecarlo24@yahoo.comMcGlynnshireInactive$91.37
Mandy Kertzmann MDsteve_ziemann69@hotmail.comWuckertfortActive$1,086.76
Paula Dachchristy_dietrich@hotmail.comJacksonInactive$254.58
Total$2,209.58

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Raven Beahan-Greenfelder Sr.alvera30@gmail.comO'KeefeboroughInactive$717.33
Lillian Jerdesantino.jenkins20@yahoo.comSurpriseActive$541.10
Tabitha Friesengeneva85@gmail.comMobileActive$875.50
Roel Bernhardryder.krajcik15@gmail.comEnidInactive$1,180.07
Erika Olsonleonor_kub31@hotmail.comTuckahoeActive$295.88
Total$3,609.88

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. Jordan Kautzerkatarina_hyatt55@hotmail.comNew EstafurtActive$362.62
Angelo Ankundingalton10@hotmail.comNorth KatemouthActive$558.50
Dorthy Gorczanycheryl_parisian53@hotmail.comPort WaldoActive$370.26
Matilde Boehmdelta29@gmail.comFort CorneliuschesterInactive$101.07
Ethan Mooreeileen.pagac@hotmail.comParadiseActive$766.97
Total$2,159.42

Table with row selection

Card Table

NameEmailLocationStatusBalance
Amina DuBuquemelba18@hotmail.comEast TonyaActive$620.20
Katie Cartwright Jr.maureen65@yahoo.comEast ElzaInactive$886.45
Tyler Baileyoctavia31@yahoo.comJacobitownActive$1,190.31
Marlon Bauchadam_stark@gmail.comFort JuanitachesterActive$366.16
Drew Bradtkeshaniya_becker@gmail.comHymanmouthInactive$730.34
Total$3,793.46

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
Mozell Langworthgene26@gmail.comBreanneboroughActive$1,009.09
Kellen Harrisrandy_wehner@hotmail.comEdithburghInactive$1,002.13
Miss Toni Reichertdangelo_zulauf32@yahoo.comCamryncesterActive$691.99
Marie McLaughlinerica.gleason-johns@yahoo.comBossier CityActive$411.87
Mr. Elijah Langoshretha.mraz76@hotmail.comCarsonActive$334.13
Sammie Kovacektanya.ullrich76@yahoo.comRapid CityActive$380.70
Betsy Crona Jr.irvin50@hotmail.comJamesviewInactive$342.04
Dawson Tillmanashton.mcdermott@hotmail.comLake ErmaActive$892.97
Belle Bogisich IVophelia_heathcote14@yahoo.comAntoniohavenInactive$468.75
Frankie Wiegandseth_reynolds72@yahoo.comPort SantinaActive$647.85
Denise Raynorkamren31@gmail.comWest JanaInactive$300.09
Samanta Schaefermackenzie71@hotmail.comSouth AlisonviewInactive$267.44
Dr. Preston Nikolausbrandi_dibbert95@yahoo.comWeymouth TownInactive$409.89
Joana Kochryan26@gmail.comBuckeyeInactive$924.55
Sven Larkinvalentina.nienow@hotmail.comFriesensideInactive$144.54
Total$8,228.03

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