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
INV001UnpaidPayPal$983.75
INV002UnpaidPayPal$151.79
INV003PendingBank Transfer$380.83
INV004PaidCredit Card$732.59
INV005PendingPayPal$479.57
INV006PaidPayPal$957.77
INV007UnpaidBank Transfer$941.16
Total$4,627.46

Simple

Users

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

NameTitleEmailRoleActions
Larry CroninLead Markets Managerlarry_cronin@hotmail.comMember
Marta KemmerChief Factors Plannermarta_kemmer@hotmail.comAdmin
Eusebio BotsfordLead Group Strategisteusebio_botsford25@yahoo.comAdmin
Gayle OberbrunnerInvestor Security Engineergayle_oberbrunner90@yahoo.comMember
Austin BeckerInternal Assurance Specialistaustin_becker93@hotmail.comAdmin
Sherry TorpCorporate Configuration Developersherry.torp@gmail.comMember

Stacked on mobile

Users

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

NameRoleActions

Dagmar Kozey

Investor Configuration Strategist

dagmar.kozey78@gmail.com

Viewer

Russ Boehm

Senior Response Representative

russ_boehm@hotmail.com

Admin

Sven Kemmer

Corporate Marketing Agent

sven_kemmer63@hotmail.com

Member

Jana Lindgren

Chief Research Agent

jana_lindgren25@gmail.com

Viewer

Gudrun Ortiz

Internal Integration Supervisor

gudrun.ortiz62@hotmail.com

Member

Jodie Streich

Regional Creative Planner

jodie.streich@hotmail.com

Member

Sticky header

Users

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

NameRoleActions

Maeve Leffler

Principal Group Agent

maeve_leffler@yahoo.com

Member

Aidan Hammes

Lead Quality Liaison

aidan.hammes@hotmail.com

Viewer

Giuseppe Gislason

Legacy Integration Executive

giuseppe_gislason36@hotmail.com

Member

Maureen Rowe

Investor Communications Technician

maureen_rowe@hotmail.com

Admin

Mallory Corwin

Global Quality Strategist

mallory_corwin@hotmail.com

Admin

Rigoberto Olson

Legacy Interactions Orchestrator

rigoberto.olson24@yahoo.com

Member

Madge Welch

Principal Tactics Assistant

madge_welch26@yahoo.com

Member

Sallie Lang-Kuhlman

Dynamic Creative Consultant

sallie_lang-kuhlman@yahoo.com

Member

Travis Heaney

Regional Solutions Orchestrator

travis.heaney20@gmail.com

Member

Vickie Moen

Global Directives Specialist

vickie.moen67@yahoo.com

Admin

George Greenfelder

Forward Program Planner

george.greenfelder@gmail.com

Viewer

Phil Kirlin

Internal Branding Facilitator

phil.kirlin16@hotmail.com

Member

Walter Reynolds

Lead Security Developer

walter_reynolds@gmail.com

Viewer

Rosa VonRueden

Internal Usability Technician

rosa_vonrueden@hotmail.com

Admin

Adrienne Weissnat

Lead Identity Representative

adrienne_weissnat15@yahoo.com

Viewer

Rosendo Jacobson

Future Functionality Producer

rosendo_jacobson@yahoo.com

Admin

Leland Ferry

Chief Accountability Engineer

leland_ferry@gmail.com

Member

Jordi Lakin

National Mobility Representative

jordi.lakin16@gmail.com

Member

Filiberto Bergstrom

Corporate Quality Officer

filiberto_bergstrom25@gmail.com

Viewer

Jean Buckridge

National Program Coordinator

jean_buckridge94@gmail.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
Mr. Tony Russelpatricia17@hotmail.comBeavercreekActive$953.59
Stephan Spinka DVMfelicita_walker80@yahoo.comSouth AntwanInactive$0.00
Armando Shields PhDanne61@hotmail.comClaudetonActive$737.78
Bertha Bahringersamuel.oconnell@yahoo.comTinley ParkActive$1,072.31
Lavinia Schneidertianna14@yahoo.comPort RigobertoActive$722.32
Total$3,486.00

Basic table

Table with Images

NameEmailLocationStatusBalance
Gracie Bogan DDS
@hannah53
misty_koss@yahoo.comSouth GateActive$245.49
Amelia Fadel
@cleo.hoppe
heidi31@hotmail.comNew YorkActive$302.58
Russ Herman
@adolph.hodkiewicz48
humberto_graham@yahoo.comFort AstridfortActive$272.85
Bennett Kautzer
@dorcas_homenick63
lester.dibbert@yahoo.comEast PennyInactive$201.50
Laverne Osinski
@maverick99
darien.runolfsdottir23@yahoo.comMathiasburghActive$1,008.10

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Iris Whiteedgar.schulist72@yahoo.comFort GlennastadInactive$770.82
Marcia Pfannerstillcorey16@hotmail.comFarmingtonActive$1,005.71
Maybell Reingerelizabeth_welch38@yahoo.comRedwood CityInactive$333.84
Rosalia Schinnerdoreen.deckow84@hotmail.comPuebloInactive$1,191.29
Meghan Schulistpaulette_kertzmann80@hotmail.comPort JuanitaActive$477.25
Total$3,778.91

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Cielo Hudsonmohamed.koelpin62@yahoo.comFort AracelyInactive$546.28
Flora Feil PhDallan97@gmail.comFort OzellaInactive$989.30
Jared O'Connellarturo18@yahoo.comNew DerricktownActive$1,192.17
Emmie Willdevan48@gmail.comBell GardensInactive$875.05
Christie Legrosdoyle.mccullough32@yahoo.comKundelandInactive$959.94
Total$4,562.74

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Rodrigo Parisianmarco16@hotmail.comHirthesideActive$946.22
Mariah Lehnervicki21@gmail.comNew HomerInactive$1,029.67
Roxanne O'Haraconnie2@hotmail.comFort MariaboroInactive$387.97
Josephine Fritschalexys_nicolas-lueilwitz@gmail.comNew JayceeInactive$853.80
Sidney Predoviclouise0@gmail.comApopkaInactive$561.27
Total$3,778.93

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
Antoinette Hellerwinston_yundt@hotmail.comSouth RoslynInactive$670.70
Idella Smithmargarete2@gmail.comDylanfurtActive$1,013.80
Tyrique Pagackiarra_herzog@gmail.comLake TamaraInactive$880.91
Guillermo Lednerjaclyn44@yahoo.comSunriseActive$220.90
Benny Marquardtgerhard_kuphal@yahoo.comEunaburghInactive$1,156.73
Total$3,943.04

Table with row selection

Card Table

NameEmailLocationStatusBalance
Donna Schadenroxanne39@gmail.comCorwinstadInactive$509.04
Kara Simonissalma6@gmail.comRenoInactive$64.42
Tyrell Zemlakavis69@yahoo.comHermanntownInactive$304.64
Ruthe Stammstephen_brekke55@gmail.comNorth JennietonInactive$1,186.79
Brionna Tremblay MDelisabeth_larson44@hotmail.comHowellfurtInactive$680.00
Total$2,744.89

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
Claud Kochfranz5@yahoo.comNew BrianInactive$965.88
Aubrey Waters-Haucktwila_lubowitz@yahoo.comBurkeActive$265.35
Jeannie Aufderharsonja.gibson@hotmail.comWest GeorgiaboroInactive$618.02
Amie Beattykiarra_beer63@gmail.comLake IrenemouthActive$517.70
Emma Brownubaldo80@gmail.comMetzworthInactive$925.73
Lisa Pourosjohanna39@gmail.comAnkenyActive$764.48
Alexandra Andersonlaron49@yahoo.comSouth CorneliusboroughInactive$942.29
Horace Sauerpamela91@yahoo.comNorth TanyaInactive$518.45
Stacey Kingmary.jaskolski98@hotmail.comEast AntwontownInactive$831.50
Taryn O'Conner Jr.dwayne.oreilly98@yahoo.comEast DarlatonInactive$36.18
Wyman Stokesaliza_jerde61@hotmail.comWaldorfActive$906.23
Columbus Kuhlmanantoinette_goodwin90@yahoo.comMayertlandInactive$767.07
Nils Boganfelipa_kuvalis9@gmail.comPort JeromysteadActive$177.61
Mrs. Erma Raynormiriam.mante@hotmail.comWest SethstadActive$571.30
Helen Jonesshelia14@gmail.comSalvadorfurtInactive$949.88
Total$9,757.67

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.