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$989.64
INV002PaidBank Transfer$373.64
INV003UnpaidCredit Card$235.73
INV004PaidCredit Card$477.13
INV005PaidPayPal$109.09
INV006PendingBank Transfer$781.03
INV007PendingCredit Card$522.25
Total$3,488.51

Simple

Users

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

NameTitleEmailRoleActions
Blaze Weimann-AltenwerthRegional Division Facilitatorblaze_weimann-altenwerth23@gmail.comAdmin
Annamae DachDirect Identity Developerannamae.dach11@hotmail.comViewer
Narciso BradtkeInvestor Communications Administratornarciso.bradtke71@hotmail.comViewer
Laisha LubowitzRegional Program Engineerlaisha.lubowitz@hotmail.comMember
Heaven TurnerForward Security Agentheaven_turner14@gmail.comViewer
Howell Hegmann-DickinsonGlobal Paradigm Assistanthowell_hegmann-dickinson43@yahoo.comViewer

Stacked on mobile

Users

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

NameRoleActions

Ryder Hessel

Chief Intranet Executive

ryder_hessel26@yahoo.com

Member

Krystina Rosenbaum

District Web Analyst

krystina.rosenbaum24@yahoo.com

Admin

Bella Prohaska

Forward Creative Liaison

bella.prohaska@yahoo.com

Member

Kathlyn Koepp

Lead Research Manager

kathlyn.koepp@hotmail.com

Viewer

Derick DuBuque

Internal Solutions Liaison

derick_dubuque@gmail.com

Admin

Brice Cormier

Corporate Research Representative

brice.cormier@hotmail.com

Viewer

Users

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

NameRoleActions

Odessa Kihn

Chief Directives Strategist

odessa_kihn36@yahoo.com

Member

Jaylen Kozey

Direct Applications Specialist

jaylen.kozey@hotmail.com

Member

Aryanna Connelly

Investor Metrics Assistant

aryanna.connelly@gmail.com

Viewer

Gwen Corkery

Product Group Analyst

gwen_corkery@yahoo.com

Admin

Quentin Heidenreich

Global Metrics Analyst

quentin_heidenreich82@yahoo.com

Viewer

Woodrow Mayer

National Accountability Engineer

woodrow_mayer38@yahoo.com

Admin

Desiree Deckow

Central Group Technician

desiree.deckow@hotmail.com

Member

Jacey Leffler

Future Functionality Technician

jacey.leffler60@gmail.com

Admin

Maude McCullough

Internal Usability Agent

maude.mccullough12@hotmail.com

Viewer

Gloria Pfannerstill

International Paradigm Assistant

gloria.pfannerstill@gmail.com

Member

Eleazar Jakubowski

Lead Program Agent

eleazar.jakubowski75@yahoo.com

Admin

Jace Walker

Global Directives Designer

jace_walker36@yahoo.com

Viewer

Mayra Wiza

Dynamic Security Developer

mayra_wiza@gmail.com

Admin

Carolanne Hammes

Senior Program Assistant

carolanne_hammes@gmail.com

Member

Ezra Becker

Lead Intranet Developer

ezra.becker2@hotmail.com

Admin

Hipolito Anderson

Internal Operations Planner

hipolito_anderson@yahoo.com

Viewer

Pauline Pacocha-Hills

Corporate Operations Specialist

pauline_pacocha-hills@yahoo.com

Member

Garrett Wuckert

Direct Factors Agent

garrett.wuckert@gmail.com

Viewer

Jairo Mante

International Integration Architect

jairo_mante@gmail.com

Admin

America Ferry

District Web Specialist

america.ferry@yahoo.com

Admin

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
Courtney Leuschkejacques19@hotmail.comFridafortInactive$605.31
Blake Carteraileen_heathcote91@hotmail.comNew BennettshireInactive$661.65
Charles Wisokycandelario13@gmail.comHermanworthActive$98.95
Andy Wisokywinston.mohr@gmail.comFort VerlaworthActive$638.09
Eunice Boylemadaline93@gmail.comPfeffershireInactive$1,031.17
Total$3,035.17

Basic table

Table with Images

NameEmailLocationStatusBalance
Lorraine Lubowitz
@anahi.zulauf
orion_rodriguez99@yahoo.comEast StefanchesterActive$1,015.65
Everett Walker
@tate_hegmann
wendell_mraz@yahoo.comNorth FaybergInactive$593.85
Dallas Cruickshank
@theodora97
caterina7@hotmail.comLake AnaistonInactive$657.97
Dr. Dwayne Schroeder
@kyra.kuvalis
verdie.terry62@yahoo.comNew BreanaActive$631.82
Mr. Cary Luettgen
@nestor_gusikowski55
fannie61@hotmail.comBurkeActive$214.90

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Edgar Hicklevirginie97@hotmail.comKassulkechesterActive$564.50
Sharon Maggiodelbert_rath23@hotmail.comWarrenInactive$1,005.28
Mrs. Stacy Hand-Spinkacasandra.smith23@gmail.comWest ChristinehavenActive$927.25
Jonathan Okunevalaury_gorczany26@hotmail.comSouth CaitlynsteadInactive$717.76
Hubert Schummmarlin_rice@yahoo.comPort ShannaboroughInactive$283.10
Total$3,497.89

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Josh Waltercarmella_mills90@yahoo.comRomafortInactive$1,130.32
Martin Mohrnoah17@yahoo.comWilmingtonInactive$632.80
Dolores Herman Vtrisha12@yahoo.comAmarilloActive$1,067.22
Mrs. Terri Wilkinsongail_bogan@gmail.comNew TraceyActive$11.05
Kristy Carrolljaquelin.toy@hotmail.comFunksideActive$306.47
Total$3,147.86

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Mr. Lowell Bednarjessica_oberbrunner3@yahoo.comBranttonInactive$1,020.12
Ruby Treutelnina24@gmail.comLake EstellActive$303.63
Miguel Rath-Pauceklyla23@yahoo.comWest RickfurtInactive$30.32
Ms. Deanna Shanahanjohn47@gmail.comEast LeestadActive$319.61
Terence Brekkebraxton.fay8@yahoo.comLake TomasaActive$63.56
Total$1,737.24

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
Owen Sanfordduane.armstrong@hotmail.comPort CelineInactive$848.42
Suzanne Schroeder Jr.maybell.waelchi48@gmail.comNew MekhiburghInactive$471.62
Pam Kessler-Marvin IImoriah30@hotmail.comLake BrandynActive$390.33
Mr. Oscar Swaniawskimustafa_oconnell@gmail.comHowellburghActive$341.81
Jaime Abernathydangelo92@hotmail.comFort RogerActive$413.61
Total$2,465.79

Table with row selection

Card Table

NameEmailLocationStatusBalance
Lila Veumloyal_emmerich0@hotmail.comNew HavenInactive$246.78
Dr. Darren Rippindewayne47@gmail.comNew SheridanboroughInactive$610.68
Anita Douglasrocio.schaefer@gmail.comPort GideonburghInactive$727.38
Lucas Jacobsonmarc8@yahoo.comDuanefurtActive$857.47
Rosemarie Effertzpenelope_doyle@gmail.comGibsonfieldActive$964.13
Total$3,406.44

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
Grace McDermottcarmine.borer@gmail.comPort ToneyActive$17.86
Kelvin Sipeskeon.grady@hotmail.comPort AnitastadInactive$515.50
Christopher Croninearnest39@hotmail.comLake BonniesteadActive$1,075.62
Tricia Morissettejabari_corkery22@yahoo.comStreichstadActive$89.84
Glen Hintzdale_funk@yahoo.comRockvilleInactive$933.68
Mr. Vincent McKenzieleonardo.schmitt77@gmail.comStrosinfurtInactive$524.73
Emanuel Stehrjackson_heidenreich89@gmail.comOcalaInactive$1,021.30
Taylor Huelstimmy81@gmail.comDejahfurtActive$770.93
Mike Gorczany-Kochcamylle99@hotmail.comEast MalloryviewInactive$874.01
Joanne Boyer Jr.gregory77@hotmail.comPawtucketActive$1,168.76
Janet Jenkinsalan_hills82@gmail.comMckaylamouthActive$647.46
Mr. Alvin Starkelena_boehm@yahoo.comNorth AlbasteadInactive$310.36
Chad Watsicaflossie_reynolds31@yahoo.comFort LindsaysteadActive$1,032.35
Ms. Yvonne Bogisichstanton_zboncak56@hotmail.comNew EugenefortActive$563.23
Dennis Ernser Jr.fidel.hartmann@hotmail.comNorth BrentActive$304.91
Total$9,850.54

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