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
INV001PendingCredit Card$554.77
INV002UnpaidPayPal$462.89
INV003UnpaidCredit Card$888.74
INV004UnpaidCredit Card$612.90
INV005PaidCredit Card$102.12
INV006UnpaidCredit Card$538.46
INV007PendingBank Transfer$336.24
Total$3,496.12

Simple

Users

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

NameTitleEmailRoleActions
Clemens GerholdHuman Web Orchestratorclemens.gerhold65@gmail.comViewer
Eryn BlickDistrict Marketing Facilitatoreryn.blick98@gmail.comMember
Taya OkunevaForward Research Agenttaya.okuneva@yahoo.comAdmin
Mike KertzmannDirect Brand Supervisormike_kertzmann@hotmail.comViewer
Hayden SmithInternal Implementation Directorhayden_smith84@hotmail.comMember
Karelle RempelDirect Quality Directorkarelle.rempel@hotmail.comViewer

Stacked on mobile

Users

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

NameRoleActions

Cleve Howell

National Intranet Producer

cleve.howell29@gmail.com

Viewer

Stevie McClure

Investor Optimization Executive

stevie.mcclure78@hotmail.com

Admin

Irma O'Kon

Lead Quality Orchestrator

irma_okon14@gmail.com

Admin

Aisha Hilll

Legacy Applications Supervisor

aisha.hilll@gmail.com

Admin

Alyssa Hane

Lead Research Coordinator

alyssa.hane@hotmail.com

Member

Ronny Nikolaus

Customer Accounts Manager

ronny.nikolaus9@gmail.com

Member

Sticky header

Users

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

NameRoleActions

Roxane Turner

Central Factors Consultant

roxane_turner@hotmail.com

Member

Christie Torphy

Investor Security Associate

christie.torphy44@hotmail.com

Viewer

Ashleigh Hoppe

Legacy Security Producer

ashleigh.hoppe76@yahoo.com

Viewer

Andy Hodkiewicz

Principal Applications Strategist

andy.hodkiewicz@hotmail.com

Member

Austin O'Reilly

Corporate Marketing Planner

austin.oreilly@hotmail.com

Admin

Lily Funk

Future Response Producer

lily_funk43@yahoo.com

Viewer

Ron Little

Future Metrics Representative

ron_little@yahoo.com

Member

Lila Wintheiser-Schoen

Senior Communications Officer

lila_wintheiser-schoen2@yahoo.com

Admin

Jamey Runte

Investor Applications Analyst

jamey.runte22@yahoo.com

Member

Billie Swift

Customer Factors Architect

billie.swift64@hotmail.com

Viewer

Jennie Ullrich

Legacy Infrastructure Assistant

jennie_ullrich99@yahoo.com

Admin

Frankie Schneider

Investor Interactions Specialist

frankie_schneider@yahoo.com

Member

Bailey O'Kon

International Interactions Designer

bailey.okon@hotmail.com

Viewer

Kacie Johns

Investor Directives Producer

kacie_johns@hotmail.com

Admin

Rosina Berge

National Web Representative

rosina_berge@hotmail.com

Viewer

Carolyn Windler

Investor Integration Officer

carolyn_windler@gmail.com

Admin

Terrell Padberg

Principal Tactics Analyst

terrell.padberg99@hotmail.com

Viewer

Tre Corwin

Principal Research Liaison

tre.corwin86@yahoo.com

Member

Abbie Hodkiewicz-Johnson

Lead Operations Supervisor

abbie.hodkiewicz-johnson21@hotmail.com

Member

Nyah Terry-Waters

Internal Usability Orchestrator

nyah.terry-waters@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
Maribel Powlowskidorothy.schuster14@gmail.comPalmdaleActive$113.12
Miss Bettye Rowe-Stoltenbergerin_carter41@gmail.comAlekfortActive$342.04
Omari O'Konwinston_rogahn@gmail.comNorth JosiahActive$182.87
Scott Schimmeldelmer15@yahoo.comFort AlexaInactive$610.98
Nicholaus Prosacco-Hesselkenna_emmerich@gmail.comHattietownInactive$461.10
Total$1,710.11

Basic table

Table with Images

NameEmailLocationStatusBalance
Raheem Blick
@cecile.gerhold27
randall_kuhic@hotmail.comBuckeyeActive$554.90
Izaiah Kuhn
@jaren_gutkowski79
charles32@hotmail.comWest AlexandriaInactive$1,040.92
Macy Koelpin
@sophia_toy
tressie_hickle@yahoo.comSchusterboroActive$302.04
Darby Morissette
@josefa_schumm
marilyn.wuckert@yahoo.comAtlantaActive$470.82
Christa Kuhlman
@kennedy21
gladys.wiza-franecki2@yahoo.comNorth MiamiActive$177.97

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Jazlyn Langoshdarius_emard23@hotmail.comSouth BaileyActive$400.27
Justina Monahanmagdalena_goodwin26@gmail.comDeontebergActive$451.14
Mr. Mortimer Schneiderhelga.stamm90@yahoo.comWest EmersonActive$190.81
Cyril Hellerkelton_schuster70@gmail.comWest AlishaInactive$823.13
Oren Durganariel.rice@yahoo.comLynnburghActive$1,166.90
Total$3,032.25

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Edythe Nitzscherosalia70@hotmail.comNew RodInactive$904.76
Miss Celestine Rodriguez DDSjackie88@yahoo.comKreigerfortInactive$980.63
Jannie Hammesjadon.wiegand25@gmail.comPort RosamouthInactive$1,010.35
Delaney Trantownarciso_grady@hotmail.comNorth HayliehavenActive$620.79
Daniel Hillsorlando_altenwerth@yahoo.comThielcesterActive$448.25
Total$3,964.78

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Leonie Moennicholaus4@hotmail.comRandyshireInactive$32.46
Paxton Marvindino_walker10@yahoo.comAngelfortInactive$124.25
Griffin Wolffjane.swift@yahoo.comLake MyrabergActive$39.38
Vanessa Leuschkemarlin.leffler@yahoo.comJolietInactive$379.20
Aaron Uptondaryl92@yahoo.comWest AgnesburyInactive$896.78
Total$1,472.07

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
Demetrius Schuppe-Robertscarlotta70@hotmail.comCedar RapidsActive$264.88
Eloy Stokesron15@hotmail.comEast OlinInactive$833.83
Casper Hettingersim_goldner97@hotmail.comFavianviewActive$2.28
Alessia King Val_dietrich43@hotmail.comJaydafortActive$853.27
Tamara Lindgren-Trompryley.mitchell@gmail.comO'KonburghInactive$207.61
Total$2,161.87

Table with row selection

Card Table

NameEmailLocationStatusBalance
Eleazar Hillspatty.mueller@yahoo.comWaelchiboroInactive$1,024.19
Etha Ritchie IIlorraine.rowe24@gmail.comNew DuaneviewActive$669.05
Maymie Koepplavina_howe84@yahoo.comShanyportActive$999.08
Mrs. Maryann Willqueenie45@yahoo.comSioux FallsInactive$68.11
Ms. Madisen Stehrstephan_schaden84@yahoo.comWest KielfortInactive$1,050.51
Total$3,810.94

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
Kassandra Morissettecarlton33@gmail.comSanfordburghInactive$742.23
Frederik Binsname14@hotmail.comEast LeroyInactive$181.48
Talia Ortizpatsy.grant@yahoo.comLeannonvilleInactive$732.21
Saige Schmidtunique.kohler@yahoo.comDaynefieldActive$320.56
Mrs. Jadyn Schneiderpattie_larson@yahoo.comDes PlainesInactive$256.07
Emilio Leschkurtis60@hotmail.comMelisatownActive$1,181.90
Jabari Lubowitzsam7@hotmail.comLake TobinsideActive$458.14
Bailey Marvin DVMbettye_runte66@yahoo.comRheamouthInactive$184.94
Ms. Paxton Bartolettimaverick_bartell@gmail.comHaywardInactive$751.68
Alexane Davisrolando_von39@yahoo.comAnastasiaviewInactive$61.76
Kacey Dooleycale.kulas@gmail.comBozemanActive$696.16
Lucius Schmelercristian_graham65@yahoo.comLake NamemouthInactive$647.15
Ashleigh Barrowsnatalie_raynor@hotmail.comMosciskiboroughInactive$974.78
Ronaldo Lockmankirk.stamm@gmail.comSporerchesterActive$780.92
Ms. Lonie Goldnertyreek37@gmail.comLake GennarosideActive$853.14
Total$8,823.12

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.