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$811.38
INV002PendingBank Transfer$779.25
INV003UnpaidBank Transfer$721.27
INV004PendingCredit Card$805.62
INV005PendingCredit Card$144.40
INV006PaidPayPal$240.45
INV007UnpaidPayPal$910.97
Total$4,413.34

Simple

Users

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

NameTitleEmailRoleActions
Samir BartellInvestor Mobility Producersamir.bartell26@gmail.comAdmin
Julian KautzerLegacy Quality Producerjulian_kautzer@hotmail.comMember
Kyler HettingerForward Mobility Techniciankyler.hettinger@yahoo.comAdmin
Esteban FraneckiFuture Branding Manageresteban_franecki62@yahoo.comAdmin
Randi KrajcikFuture Identity Assistantrandi_krajcik@yahoo.comMember
Duncan ErdmanCorporate Identity Agentduncan.erdman@gmail.comMember

Stacked on mobile

Users

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

NameRoleActions

Melyssa Kris

Legacy Configuration Officer

melyssa_kris@gmail.com

Admin

Thad Hickle

Senior Assurance Specialist

thad.hickle@gmail.com

Admin

Armand Kuvalis

International Integration Manager

armand.kuvalis44@yahoo.com

Admin

Marlin Boyer

Central Functionality Analyst

marlin.boyer@yahoo.com

Viewer

Johnson Bednar

Customer Security Engineer

johnson_bednar47@hotmail.com

Member

Dorthy Kovacek

Corporate Accountability Liaison

dorthy.kovacek@gmail.com

Member

Users

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

NameRoleActions

Mitchell Kiehn

District Group Representative

mitchell_kiehn@yahoo.com

Admin

Ezekiel Wintheiser

Internal Communications Supervisor

ezekiel_wintheiser88@hotmail.com

Member

Angela Ondricka

Customer Data Administrator

angela.ondricka@gmail.com

Member

Delpha Cole

Senior Identity Consultant

delpha.cole42@gmail.com

Viewer

Eulalia Shanahan

Human Division Producer

eulalia_shanahan@yahoo.com

Admin

Aylin Bednar

Lead Interactions Coordinator

aylin.bednar74@gmail.com

Viewer

Evie Abshire

Human Identity Officer

evie_abshire14@yahoo.com

Member

Jordi Collins

Customer Configuration Supervisor

jordi.collins@yahoo.com

Member

Eugenia Sipes

Senior Response Technician

eugenia_sipes29@gmail.com

Member

Anais Kohler

Dynamic Marketing Engineer

anais_kohler68@gmail.com

Viewer

Jordyn Kerluke

International Optimization Agent

jordyn_kerluke@yahoo.com

Admin

Ernestina King

Internal Markets Planner

ernestina_king@hotmail.com

Admin

Edmond Padberg

Product Intranet Architect

edmond_padberg86@yahoo.com

Viewer

Mozelle Heaney

Legacy Tactics Assistant

mozelle_heaney@gmail.com

Viewer

Astrid Rice

Internal Response Analyst

astrid_rice@yahoo.com

Viewer

Raleigh Weber

Chief Marketing Engineer

raleigh_weber@gmail.com

Admin

Micheal Durgan

Dynamic Mobility Supervisor

micheal.durgan@gmail.com

Admin

Owen Cormier

Legacy Accountability Facilitator

owen.cormier@hotmail.com

Admin

Zander Sporer

Regional Functionality Technician

zander.sporer@yahoo.com

Member

Nelda Abbott

Senior Marketing Specialist

nelda.abbott84@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
Isabel Casper Iraheem71@hotmail.comDuanefieldInactive$975.20
Amos Ricesammie.ward@hotmail.comWest DevonInactive$617.12
Esther Crooksterrence.hansen10@hotmail.comEast FinnfurtActive$1,145.21
Charlene Gerlachwilly.mayert@yahoo.comWilsonActive$772.77
Elena Terryjacky_hand-dibbert@gmail.comBaileetonInactive$371.97
Total$3,882.27

Basic table

Table with Images

NameEmailLocationStatusBalance
Guadalupe Adams I
@rafaela_durgan
gerhard.lynch@hotmail.comCarrolltonActive$304.05
Dr. Meghan Sporer
@micaela_bartell
gregoria84@yahoo.comJacobihavenInactive$297.39
Sophia Wehner
@jermaine_kihn
shany8@gmail.comSouth DemarcusmouthActive$308.12
Gerald Bayer
@kenyon.kilback
cooper.kiehn@gmail.comEast ElnoraInactive$607.03
Tim Batz Sr.
@conrad.langworth86
richard.brakus@yahoo.comDouglaslandInactive$757.86

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Ben Conroy Sr.jocelyn_jerde83@gmail.comLake ChelseyActive$775.29
Hilda Rosenbaum IIbriana.schimmel@yahoo.comRueckersideActive$690.76
Kendra Schroedermonte47@hotmail.comSouth EmmyInactive$300.85
Boyd Croninelmer_kiehn54@gmail.comSt. Louis ParkActive$1,054.02
Julie Goyettejarvis_herzog@hotmail.comKoelpinworthInactive$71.87
Total$2,892.79

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Alex Kirlinadrian_marks95@gmail.comKreigersideActive$1,096.82
Mrs. Tasha Watsicaaaron.luettgen@gmail.comLake MaybelletownInactive$38.46
Andres Jerdecelestino.bednar@hotmail.comNitzscheburghActive$770.11
Winston Koeppdonnell38@gmail.comSchinnerboroughActive$1,057.37
Harvey DuBuquepauline_halvorson71@yahoo.comPort FreedafieldActive$650.02
Total$3,612.78

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Casey Muller DDSjimmie_kuhn75@gmail.comWaukeshaInactive$818.79
Preston Torprosanna19@gmail.comEast JessviewInactive$969.64
Kathleen Padbergjustus_kulas80@yahoo.comJersey CityInactive$1,128.54
Amos Goldnerraphaelle.okon@gmail.comNorth GenovevafieldInactive$954.82
Arnold Hettingereudora67@gmail.comThe HammocksInactive$1,179.20
Total$5,050.99

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
Daryl Kuhnnettie59@hotmail.comWest MeaganshireActive$486.74
Felicia Roobkallie65@hotmail.comEast LucasActive$1,179.12
Fernando Haleypinkie_dibbert@gmail.comElsefortInactive$1,016.91
Larry Klingfredy25@gmail.comStehrsteadInactive$453.08
Merle Gulgowskitiana_corkery13@gmail.comEast DamionlandInactive$1,118.31
Total$4,254.16

Table with row selection

Card Table

NameEmailLocationStatusBalance
Mitchell Schoen Sr.fanny45@hotmail.comMinervabergInactive$603.59
Garry Bogansonya.thompson28@hotmail.comLake JohnnieActive$1,011.51
Joan Heaneycleta59@gmail.comBroken ArrowActive$412.82
Anita Cassinalan22@gmail.comNorth DejonboroughActive$542.25
Sally Hilllsheridan24@yahoo.comChristopsideInactive$1,083.07
Total$3,653.24

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
Velma Walsh MDnorbert.hahn@gmail.comPlanoInactive$261.10
Rodney Welchrosalinda_stehr66@hotmail.comCristalfortInactive$109.22
Wilma Hegmannfelipa_borer91@hotmail.comDwightchesterActive$904.24
Roxanne Schowalterlilian.rolfson67@gmail.comNew VirginieActive$640.35
Dr. Kyle Jonesbrent.sawayn10@yahoo.comEdmundchesterInactive$339.20
Dallas Kemmermazie.heidenreich14@yahoo.comKemmerportActive$404.85
Luther Tremblaystella51@yahoo.comTiffanystadInactive$1,042.22
Ray Feestkiarra5@gmail.comJamieportInactive$440.69
Jeremiah Hettingerjazmyn_crona8@gmail.comMuellershireActive$549.83
Marilyn Simonisjordy.kunde@hotmail.comFlavievilleInactive$1,183.11
Ben Kutchraquel0@hotmail.comNorth AlvinafieldInactive$1,030.20
Darnell Stammotis.stiedemann6@gmail.comLake LauriesteadActive$322.09
Lola Beattywillard.schoen@hotmail.comCaesarmouthInactive$490.24
Lillie Gusikowskishanna63@hotmail.comSmithbergInactive$408.24
Bertha Littlemagdalen64@yahoo.comLake SteveActive$384.55
Total$8,510.13

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