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
INV001PaidBank Transfer$446.72
INV002PendingCredit Card$886.29
INV003UnpaidBank Transfer$322.97
INV004UnpaidPayPal$747.88
INV005PaidCredit Card$257.34
INV006UnpaidPayPal$942.84
INV007PendingCredit Card$202.47
Total$3,806.51

Simple

Users

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

NameTitleEmailRoleActions
Jon WillNational Functionality Producerjon.will24@gmail.comAdmin
Vilma BeerForward Program Technicianvilma_beer3@gmail.comViewer
Joanna KonopelskiCustomer Web Consultantjoanna.konopelski@yahoo.comViewer
Keith FlatleyLegacy Accounts Associatekeith_flatley@yahoo.comViewer
Geneva StrosinProduct Branding Facilitatorgeneva.strosin@gmail.comViewer
Meredith RueckerInternal Metrics Directormeredith.ruecker@yahoo.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Kathryne Towne

Central Communications Coordinator

kathryne_towne@gmail.com

Viewer

Julia Schmitt

Customer Mobility Engineer

julia.schmitt24@gmail.com

Member

Blake Klein

Future Integration Director

blake.klein@hotmail.com

Member

Terrence Olson

Central Web Assistant

terrence_olson@hotmail.com

Admin

Mossie Feest

Future Data Consultant

mossie_feest@gmail.com

Viewer

Charles Gusikowski

Regional Accounts Consultant

charles.gusikowski@hotmail.com

Member

Sticky header

Users

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

NameRoleActions

Kent Predovic

Lead Accounts Manager

kent_predovic@gmail.com

Viewer

Gloria Romaguera

Corporate Implementation Designer

gloria.romaguera@gmail.com

Admin

Whitney Frami

Customer Infrastructure Assistant

whitney_frami@gmail.com

Viewer

Ronald Swaniawski

International Group Facilitator

ronald.swaniawski@hotmail.com

Member

Eda Kiehn

Future Assurance Director

eda_kiehn@hotmail.com

Viewer

Fletcher VonRueden

Human Program Agent

fletcher_vonrueden@hotmail.com

Member

Teri Willms

Corporate Usability Executive

teri.willms@yahoo.com

Viewer

Eloise Koss

Lead Data Administrator

eloise_koss46@gmail.com

Viewer

August Fay

Senior Solutions Planner

august.fay81@hotmail.com

Viewer

Elvie Buckridge

Lead Tactics Architect

elvie.buckridge@gmail.com

Admin

Leanne Boehm

Future Infrastructure Officer

leanne_boehm@hotmail.com

Admin

Evalyn D'Amore

Regional Functionality Associate

evalyn_damore@gmail.com

Member

Jeff Jast

National Mobility Producer

jeff_jast@hotmail.com

Viewer

Sonja Hermann

Regional Markets Analyst

sonja.hermann@yahoo.com

Viewer

Lisa Green

Dynamic Tactics Orchestrator

lisa.green97@gmail.com

Viewer

Eula Quigley

Customer Division Analyst

eula_quigley61@gmail.com

Member

Jordon DuBuque-Krajcik

Chief Directives Strategist

jordon_dubuque-krajcik@yahoo.com

Admin

Loren Rippin

National Web Manager

loren.rippin@gmail.com

Viewer

Elmira Swift

Product Configuration Engineer

elmira.swift@hotmail.com

Admin

Lawrence Cummerata

Global Accounts Technician

lawrence_cummerata4@hotmail.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
Chasity Pagac-Wyman IIlana.sauer32@yahoo.comJoplinActive$152.28
Fernando Hermannroxanne56@yahoo.comGlenviewActive$346.24
Cecil Balistrerisonya.abernathy31@gmail.comInglewoodActive$26.55
Mr. Cletus Heathcoteocie.turner6@yahoo.comHandlandActive$826.59
Ervin DuBuquechristiana41@gmail.comLake FloydActive$245.88
Total$1,597.54

Basic table

Table with Images

NameEmailLocationStatusBalance
Shaun Kiehn
@joaquin_quigley31
guy_stehr-adams71@yahoo.comCaspermouthActive$1,092.52
Adrienne Predovic
@kate96
laurie10@gmail.comCasimerburghInactive$383.23
Tomas Marquardt
@robyn9
shanel.okuneva61@yahoo.comWillburghActive$578.97
Yvonne Rau
@larry_gerhold10
michele.mante@yahoo.comWorcesterInactive$601.57
Lance Bashirian
@chet.batz19
marjolaine_okeefe72@hotmail.comFort MervinInactive$536.84

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Teagan Roobmichael_frami@gmail.comKuhicfurtActive$905.57
Anastasia Kihnmagdalena_kuvalis0@hotmail.comEast TravisfortActive$121.92
Calista Ortizlucia_braun@gmail.comLake MercedeshavenInactive$745.37
Kamille Hintzcasimer.rohan@hotmail.comBoyerboroInactive$950.93
Trisha Konopelskimason.boehm24@yahoo.comLake DebbiebergActive$1,041.75
Total$3,765.54

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Shany Sporeranthony.goodwin23@yahoo.comVeracesterActive$865.62
Ike Dickinsondelaney.dicki4@yahoo.comGarrickburghActive$87.55
Ashtyn Muellergertrude_lindgren80@hotmail.comWest OlgaActive$957.68
Buddy Lubowitznelle63@hotmail.comEast DavinInactive$637.58
Jeff Langrita.carter21@yahoo.comMelbourneInactive$1,133.76
Total$3,682.19

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Ms. Kiera Feeneymelanie.ankunding34@gmail.comMagdalentonActive$518.92
Jo Ritchiemarcus5@gmail.comPearl CityInactive$157.58
Isabel Bradtkekeyon_nader3@hotmail.comTerifieldInactive$215.09
Ms. Linda Whitejoann40@yahoo.comUrbandaleActive$850.86
Bryon Lynchdana_roob43@gmail.comEast CarmenActive$537.82
Total$2,280.27

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
Roscoe Bergnaum Sr.bertha.wunsch@gmail.comAlexandrineshireActive$86.59
Mr. Tyson Abshirejavier_langosh@yahoo.comWardcesterActive$163.80
Mabelle Darecamryn.ankunding@hotmail.comNew GenefurtInactive$464.93
Jake Bahringer-Greenpete.trantow22@yahoo.comBuckridgecesterInactive$1,036.60
Elena Wisozkrafael_torphy@hotmail.comWest JordanActive$645.63
Total$2,397.55

Table with row selection

Card Table

NameEmailLocationStatusBalance
Mr. Jesus Deckowlilliana.lakin@hotmail.comWest ConstanceActive$1,141.36
Jodi Buckridgececil.gleichner55@yahoo.comSouth AdrielfurtActive$755.76
Kattie Okunevaalberta66@hotmail.comNew FredrickboroughInactive$456.58
Mandy Macejkovicalden_trantow19@gmail.comLake GerhardburghInactive$653.47
Sandy Tremblayelvie_marquardt32@gmail.comSouth GonzalobergInactive$527.54
Total$3,534.71

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
Bell Flatleylia.roberts@hotmail.comCarlottaburghInactive$500.06
Sammy Watsicamadie3@hotmail.comFort PattyboroughActive$1,055.73
Arielle Borer-Cummingsrenee_schroeder@yahoo.comNew CarmeloInactive$132.22
Patsy Mertzclaudie_mayer@hotmail.comLake ArvelstadActive$834.79
Dewey Torphy IIjennie27@yahoo.comPort AnjaliActive$43.98
Mercedes Boehmlatoya_waters@hotmail.comJohnstoncesterActive$1,189.84
Leon Tromprhett56@hotmail.comNew JaydonworthActive$1,149.85
Mr. Abel Rippinjeremie.farrell@gmail.comMelvinvilleActive$679.02
Kailey Stehr MDnichole12@yahoo.comBellinghamInactive$628.84
Amara Sengernick.farrell@hotmail.comFort FrancescaActive$26.78
Jared Johnson-Mantecalista94@yahoo.comWardbergActive$372.04
Damon Gorczanysean_shanahan@hotmail.comSouth ChristieburghInactive$148.31
Domenico Vonjovani_dickens23@hotmail.comMesaInactive$425.09
Sheryl Boylemolly67@gmail.comTempeActive$96.72
Archie Faheyadrian_feil@yahoo.comSouth RosamondInactive$331.93
Total$7,615.20

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.