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
INV001PaidPayPal$491.79
INV002PaidPayPal$267.96
INV003PaidBank Transfer$172.06
INV004PendingCredit Card$134.63
INV005PendingBank Transfer$919.50
INV006PendingBank Transfer$263.07
INV007UnpaidBank Transfer$171.17
Total$2,420.18

Simple

Users

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

NameTitleEmailRoleActions
Clayton HuelPrincipal Optimization Developerclayton.huel98@gmail.comAdmin
Darrel HesselDynamic Program Supervisordarrel.hessel93@gmail.comViewer
Maria MacGyverProduct Configuration Executivemaria.macgyver@gmail.comAdmin
Irene ColeFuture Marketing Plannerirene.cole@yahoo.comMember
Mathew CorkeryInternational Response Agentmathew.corkery15@gmail.comAdmin
Patti KuhlmanHuman Tactics Strategistpatti_kuhlman87@gmail.comMember

Stacked on mobile

Users

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

NameRoleActions

Carson Steuber

Dynamic Interactions Orchestrator

carson_steuber98@yahoo.com

Viewer

Gail Kris

Product Implementation Executive

gail.kris@hotmail.com

Admin

Wendy Gleason

Chief Quality Planner

wendy.gleason@yahoo.com

Admin

Kayden Boehm

Lead Research Producer

kayden.boehm@gmail.com

Viewer

Sheri Berge

International Markets Planner

sheri_berge83@yahoo.com

Member

Anita Predovic

Central Brand Agent

anita_predovic22@hotmail.com

Viewer

Sticky header

Users

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

NameRoleActions

Tristian White

Senior Solutions Coordinator

tristian.white34@hotmail.com

Viewer

Julie Waelchi

International Marketing Analyst

julie_waelchi@hotmail.com

Viewer

Harry Walter

Chief Infrastructure Agent

harry.walter@hotmail.com

Member

Olive Emmerich

District Communications Executive

olive_emmerich40@gmail.com

Member

Derek Heaney

Investor Metrics Technician

derek_heaney@yahoo.com

Admin

Ila Towne

Corporate Division Administrator

ila.towne41@gmail.com

Viewer

Cletus Koss

Chief Creative Assistant

cletus_koss@yahoo.com

Member

Giovanna Windler

Future Brand Manager

giovanna_windler48@hotmail.com

Admin

Jonatan Schiller

National Branding Associate

jonatan.schiller@gmail.com

Admin

Leta Rodriguez

Principal Solutions Agent

leta_rodriguez28@hotmail.com

Member

Claudia Lind

National Metrics Facilitator

claudia_lind@gmail.com

Viewer

Lacy Casper

Central Tactics Planner

lacy_casper10@gmail.com

Admin

Mathilde Kshlerin

Future Identity Manager

mathilde_kshlerin84@gmail.com

Viewer

Jazmin Balistreri

Central Creative Strategist

jazmin_balistreri31@yahoo.com

Admin

Sergio McKenzie-Sporer

Central Metrics Director

sergio_mckenzie-sporer45@hotmail.com

Viewer

Lora Rutherford

Legacy Division Producer

lora_rutherford40@hotmail.com

Viewer

Tanya Stoltenberg

Future Interactions Facilitator

tanya_stoltenberg32@hotmail.com

Admin

Dianne Schmeler

Future Markets Coordinator

dianne_schmeler@yahoo.com

Member

Dusty Legros

Senior Response Representative

dusty.legros@gmail.com

Viewer

Mack Tillman

Lead Division Orchestrator

mack_tillman@yahoo.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
Roscoe Robertscarolyne_feil71@yahoo.comMandytownActive$437.76
Chadrick Skilesclementina_goodwin@yahoo.comEldonstadInactive$630.01
Catherine Hyattcrystel94@hotmail.comSayrevilleActive$573.00
Maybelle Framiwesley.feeney@hotmail.comFort FatimaInactive$636.12
Naomie Aufderharcorbin86@gmail.comQuitzontonActive$1,157.19
Total$3,434.08

Basic table

Table with Images

NameEmailLocationStatusBalance
Marguerite Nicolas
@rhett.medhurst9
annette77@gmail.comBlockvilleInactive$1,183.55
Rahul Skiles-Volkman
@ara_ullrich66
johathan_ledner91@yahoo.comNew LlewellynActive$123.50
Janick Donnelly
@leonard.harris
barbara.rodriguez@yahoo.comKeyshawnfieldInactive$697.93
Sabrina Cronin
@monique.corkery4
natasha29@yahoo.comNew TylerchesterActive$260.02
Eliza Hilll
@nadine_king45
viviane.kunze77@hotmail.comJunesideInactive$666.12

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Evelyn Littleaniya.dickinson88@gmail.comFort NedActive$996.20
Alexander Emmerichlemuel53@gmail.comEast HildegardInactive$674.95
Hazel Shields-Parkerthad_gulgowski@hotmail.comWest SamircesterInactive$73.87
Monserrat Abernathyroman_gorczany7@hotmail.comAllenActive$138.10
Dr. Gabe Hahnedmund2@hotmail.comFort AnniechesterActive$1,014.43
Total$2,897.55

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Amanda Walter-Morarmellie_kunde@hotmail.comHermansideActive$891.73
Dianna Hoppechrist18@gmail.comElginActive$574.04
Krista O'Connellsara12@hotmail.comNew JohannatonInactive$1,059.57
Mr. Jerry Schimmelelijah82@hotmail.comSchneidermouthInactive$675.37
Rhianna Homenick MDariel34@hotmail.comSouth BrandiInactive$739.39
Total$3,940.10

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Vanessa Jacobsonleonard.bradtke@yahoo.comEast ShadburghInactive$313.76
Lowell Schmidtmay_torp50@gmail.comNew VelmaInactive$463.52
Cordelia Borerannabell39@gmail.comKautzerworthActive$556.67
Brett Hauckneal_collins@gmail.comFlatleysteadActive$476.02
Emiliano Dietrichronald.pacocha@yahoo.comLauramouthInactive$811.86
Total$2,621.83

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
Jackson Haleyparker36@hotmail.comGrimesworthActive$1,161.97
Ben Kuvalisantonetta.robel25@hotmail.comQuigley-LeannonsteadInactive$726.09
Bradford Lueilwitztiana67@gmail.comReinger-HeathcotefieldInactive$941.59
Erik Labadieterrence_gleason@yahoo.comEast LauriesideInactive$839.77
Joann Lindlonzo67@yahoo.comSouth SandrineboroInactive$970.63
Total$4,640.05

Table with row selection

Card Table

NameEmailLocationStatusBalance
Traci Fishermalvina.runolfsson-kunze@yahoo.comSavannahInactive$909.53
Donnie Kundecarole.sporer@yahoo.comNorth AdolfosideInactive$1,060.07
Xzavier Hahnrosie_ratke29@yahoo.comCedar HillActive$970.33
Abigayle Runolfsdottirjacquelyn75@hotmail.comWest TonyboroughActive$754.30
Tanya Brauneden.wisoky21@hotmail.comYorba LindaActive$975.97
Total$4,670.20

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
George Baumbachlindsay79@hotmail.comCummingsmouthActive$700.04
Lucio Metzwinifred_upton@gmail.comRayvilleActive$159.01
Shaun Rosenbaumsheri_jacobs77@yahoo.comJacintofortInactive$992.03
Domenick Reingerkayley43@gmail.comFort DelphiaActive$700.96
Sophie Kovacekmandy.kunze99@yahoo.comEltonmouthInactive$171.82
Delia D'Amorewalter97@gmail.comFeestbergActive$1.65
Winifred Schillerrowena94@hotmail.comYorkInactive$669.10
Charlie Trantow IVlydia_oberbrunner@yahoo.comPalatineInactive$87.88
Anais Dibbertdarryl56@yahoo.comSouth TobybergActive$678.62
Dr. Madeline Ritchiehaven_marks40@hotmail.comLebsackfurtInactive$935.46
Mr. Frederique Kihnemerald_prohaska@yahoo.comWest EloiseboroActive$911.63
Dr. Kathryne Rueckerdoreen86@hotmail.comNorth KellenburghInactive$175.22
Lula Ratkerhonda64@yahoo.comHicksvilleActive$416.67
Allene Pricemargarete73@yahoo.comLake PetefurtActive$649.33
Ignacio Jones-Howellkrista84@gmail.comPadberghavenActive$551.26
Total$7,800.68

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.