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
INV001UnpaidBank Transfer$528.25
INV002UnpaidCredit Card$743.95
INV003UnpaidCredit Card$571.04
INV004UnpaidBank Transfer$412.97
INV005PaidCredit Card$760.21
INV006PendingBank Transfer$799.99
INV007PaidCredit Card$242.37
Total$4,058.78

Simple

Users

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

NameTitleEmailRoleActions
Pietro LefflerProduct Identity Representativepietro.leffler33@hotmail.comViewer
Marcia RohanSenior Configuration Engineermarcia.rohan53@yahoo.comAdmin
Heaven NolanInvestor Data Orchestratorheaven.nolan32@yahoo.comMember
Molly GrantLegacy Group Coordinatormolly.grant@yahoo.comMember
Dustin CruickshankDistrict Optimization Strategistdustin.cruickshank@hotmail.comAdmin
Wanda WolfHuman Factors Developerwanda_wolf10@gmail.comMember

Stacked on mobile

Users

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

NameRoleActions

Ruth Larson

Regional Web Consultant

ruth.larson63@yahoo.com

Member

Remington Cremin

Product Group Executive

remington.cremin11@gmail.com

Admin

Timmy Beatty

Lead Directives Representative

timmy_beatty@hotmail.com

Member

Josh Collier

Principal Program Director

josh_collier10@hotmail.com

Admin

Sonja Harber

Lead Markets Supervisor

sonja.harber93@gmail.com

Viewer

Kale Franey

Internal Research Architect

kale_franey95@hotmail.com

Viewer

Sticky header

Users

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

NameRoleActions

Stephen Lueilwitz

Central Communications Strategist

stephen.lueilwitz@yahoo.com

Admin

Turner Hagenes

National Security Developer

turner_hagenes@hotmail.com

Admin

Rachel Price

District Factors Strategist

rachel.price@gmail.com

Admin

Yvonne Hauck

National Assurance Liaison

yvonne.hauck92@gmail.com

Admin

Alicia Stanton

Internal Operations Liaison

alicia_stanton1@yahoo.com

Member

Demarcus Cummerata

Investor Branding Manager

demarcus.cummerata@yahoo.com

Member

Evans West

Central Creative Liaison

evans.west@hotmail.com

Member

Jada Hills

Senior Identity Designer

jada.hills35@gmail.com

Member

Angie O'Kon

Forward Markets Producer

angie.okon@gmail.com

Admin

Jan Beer

International Creative Representative

jan.beer@yahoo.com

Member

Eileen Rath

Chief Communications Facilitator

eileen_rath84@yahoo.com

Viewer

Jamar Muller-Spinka

Internal Markets Officer

jamar.muller-spinka@gmail.com

Member

Rod Connelly

Human Paradigm Agent

rod.connelly49@yahoo.com

Admin

Jeanette Ernser

Dynamic Marketing Liaison

jeanette.ernser@hotmail.com

Admin

Anais Fritsch

Product Usability Designer

anais_fritsch13@hotmail.com

Viewer

Nicole Orn-Vandervort

International Program Administrator

nicole.orn-vandervort@hotmail.com

Admin

Marty Hodkiewicz

International Identity Liaison

marty_hodkiewicz@yahoo.com

Admin

Eve Rodriguez

District Interactions Technician

eve.rodriguez61@yahoo.com

Admin

Garry Dicki

Corporate Accountability Manager

garry.dicki@hotmail.com

Viewer

Lorena Fritsch

Internal Metrics Designer

lorena_fritsch46@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
Mrs. Silvia Rueckerwinston_feest@hotmail.comKozeyfurtInactive$715.10
Leroy Lubowitzflorence28@yahoo.comEast DonActive$292.42
Randy Hettingerbarrett.robel@gmail.comFort DiannaInactive$1,106.23
Dr. Toby Botsfordblanca_turner7@gmail.comSummermouthInactive$501.70
Kiana Fisher DDSalyssa54@gmail.comFort NicoleInactive$307.40
Total$2,922.85

Basic table

Table with Images

NameEmailLocationStatusBalance
Mrs. Sheri Bailey
@kathryn13
yasmine.cremin50@gmail.comFort DevanteshireInactive$440.55
Marsha West
@maximilian.wiza
precious77@gmail.comNew PhilworthInactive$256.56
Aaliyah Roob-Hettinger
@wallace72
osbaldo.zieme@yahoo.comDanielshireActive$384.61
Guillermo Corwin
@bella_macejkovic36
alison.okuneva15@yahoo.comWest EleanorActive$542.06
Rickey Nikolaus
@neal_bartoletti
lonnie.boehm@yahoo.comCorkerymouthActive$35.01

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Melissa Greenholtshari.fay@yahoo.comFarmingtonActive$756.87
Bella Mosciskiearnest.powlowski69@yahoo.comEast HonoluluActive$922.01
Wallace Hartmanncheryl.lesch-cremin68@yahoo.comRogahnviewInactive$505.85
Jason Kochelsie59@yahoo.comAdeliaboroActive$43.33
Albert Ebertjohnathan.cassin89@hotmail.comWest ChanceInactive$296.70
Total$2,524.76

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Ellis Bahringerlarry.grimes@gmail.comRileyviewActive$259.31
Dr. Frances Blickeric.towne@gmail.comKeeblerfortInactive$1,056.95
Calvin Watsicafelicita.schaefer@gmail.comGavinburghActive$834.41
Mazie Wintheisermohammad24@yahoo.comWehnerburyInactive$54.70
Mr. Kayden Monahanessie64@hotmail.comStrosincesterInactive$962.73
Total$3,168.10

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Leroy Hegmanndeshawn_spinka66@gmail.comPort ErmaInactive$568.87
Dr. Samanta Rempellula_terry@hotmail.comPort JavierActive$1,159.73
Jeremy Mertzjulio.thompson27@hotmail.comSouth CaseyActive$622.27
Alonzo Goldnermanley_nolan10@gmail.comPatriciafieldInactive$963.36
Ella Crona Ikenyon0@yahoo.comWest GwendolynActive$283.41
Total$3,597.64

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
Tyrique Hageneshenrietta50@yahoo.comNew RexInactive$186.31
Blaze Ziemannjoy97@yahoo.comZemlakportActive$682.24
Kent Schummdora.bode-skiles28@hotmail.comNew LouiseInactive$971.75
Verdie Nitzscheelyssa13@hotmail.comSalt Lake CityActive$824.35
Mr. Rocky Jonesmarta.mante4@yahoo.comNew BrunswickInactive$879.79
Total$3,544.44

Table with row selection

Card Table

NameEmailLocationStatusBalance
Bettye Welchnelle.sipes@gmail.comNorth GlennInactive$373.12
Bethel Davis PhDmaria34@gmail.comSanta ClaritaInactive$166.70
Crystel Rogahnxander.bogisich70@yahoo.comNew PeytonActive$894.21
Yolanda Armstrongayden30@gmail.comWhitneymouthActive$712.19
Glennie Dietrichayana.hauck63@yahoo.comNehachesterInactive$847.77
Total$2,993.99

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
Sigrid Pfeffervirgil.feest@hotmail.comBetsylandInactive$864.97
Kris Schiller-Quigleyaurelio.larson2@hotmail.comOremActive$753.33
Mr. Damon Wolfflola.hackett@hotmail.comIsraelviewActive$642.24
Miranda Ziemann Jr.ozella.heaney82@yahoo.comNew NinaportInactive$847.31
Fredy Christiansenleatha.hyatt7@hotmail.comPort DillonportInactive$52.88
Gage Labadieanastasia.dooley@hotmail.comBell GardensInactive$232.58
Enrique Stoltenberg-Adamsphil1@gmail.comSouth HeloisesteadActive$993.56
Lindsey VonRuedencamren12@gmail.comSouth MarciaActive$734.93
Ada Kihncassandra_konopelski67@gmail.comCarlottafieldActive$150.62
Kirsten Fisherelisa1@yahoo.comLehigh AcresActive$617.42
Branson Cristtiffany20@hotmail.comFort VernonInactive$448.15
Hazel Nikolaus MDayla_konopelski24@yahoo.comRoryviewActive$384.31
Kallie Hauckdarrel_cremin@yahoo.comVirginia BeachActive$869.00
Mr. Lorenzo Ryansusan.gerlach41@hotmail.comDeborahfortActive$578.08
Candice Hintz IIrosalie0@gmail.comEugeneInactive$535.07
Total$8,704.45

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.