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
INV001PendingPayPal$423.96
INV002PendingCredit Card$361.17
INV003UnpaidCredit Card$935.37
INV004PaidPayPal$204.55
INV005PaidCredit Card$256.58
INV006PaidBank Transfer$627.37
INV007PendingPayPal$829.67
Total$3,638.67

Simple

Users

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

NameTitleEmailRoleActions
Gary HauckSenior Tactics Liaisongary.hauck@hotmail.comMember
Tristin YostGlobal Interactions Liaisontristin.yost59@yahoo.comViewer
Lennie SipesDynamic Usability Designerlennie.sipes65@hotmail.comViewer
Michael SawaynCustomer Group Technicianmichael_sawayn@hotmail.comAdmin
Cindy MrazGlobal Mobility Strategistcindy.mraz20@gmail.comAdmin
Alton RobertsDistrict Data Specialistalton.roberts@gmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Toni Kassulke

National Mobility Consultant

toni_kassulke@yahoo.com

Member

Domingo Carter

Future Integration Designer

domingo_carter@gmail.com

Member

Golden Kreiger

Central Infrastructure Assistant

golden_kreiger@gmail.com

Member

Duncan Ritchie

International Quality Coordinator

duncan.ritchie@gmail.com

Viewer

Alphonso Feil

Principal Communications Analyst

alphonso.feil@gmail.com

Member

Viola Hintz

Product Integration Developer

viola.hintz@gmail.com

Admin

Users

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

NameRoleActions

Delpha Bernier

Investor Usability Coordinator

delpha_bernier63@yahoo.com

Viewer

Luther Stracke

Chief Marketing Supervisor

luther.stracke53@yahoo.com

Viewer

Stephen VonRueden

International Identity Technician

stephen_vonrueden82@yahoo.com

Admin

Dusty Skiles

District Brand Executive

dusty_skiles@hotmail.com

Admin

Lauren Blick

Forward Response Manager

lauren_blick80@yahoo.com

Admin

Robin Hilpert

Investor Integration Executive

robin.hilpert70@gmail.com

Admin

Marianne Murray

Dynamic Intranet Facilitator

marianne_murray@gmail.com

Member

Michael Harris

Chief Infrastructure Facilitator

michael.harris64@gmail.com

Member

Nash Willms

Lead Mobility Representative

nash_willms52@hotmail.com

Admin

Cortez Zboncak

Product Research Coordinator

cortez.zboncak94@hotmail.com

Member

George Connelly

Legacy Web Officer

george_connelly20@yahoo.com

Member

Maybelle Bechtelar-Larson

Customer Functionality Consultant

maybelle_bechtelar-larson@yahoo.com

Member

Jeanette Waelchi

Customer Interactions Officer

jeanette_waelchi53@gmail.com

Viewer

Brennan Deckow

Future Identity Administrator

brennan.deckow87@yahoo.com

Member

Jim Fritsch

National Brand Agent

jim_fritsch@gmail.com

Viewer

Claud Bogisich

District Optimization Coordinator

claud.bogisich0@gmail.com

Admin

Caleb Cole

Human Usability Developer

caleb_cole@yahoo.com

Member

Etha Kerluke

Lead Branding Assistant

etha.kerluke89@gmail.com

Viewer

Veronica Dicki

Global Division Architect

veronica_dicki@hotmail.com

Admin

Marty Farrell

Investor Implementation Associate

marty_farrell@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
Mrs. Melyssa Rempelferne_fahey64@hotmail.comNorth KarleeActive$14.71
Beverly Bergnaum Jr.derek.marvin@yahoo.comCamrenchesterInactive$182.00
Jack Hillstanya19@gmail.comSouth LedachesterInactive$509.41
Clarabelle Cummeratajoann_jerde84@yahoo.comEast FredActive$548.35
Dr. Melissa Bradtke Jr.cristopher_skiles@hotmail.comSouth KeonActive$212.68
Total$1,467.15

Basic table

Table with Images

NameEmailLocationStatusBalance
Peyton Schoen
@frederick82
nora.reichert56@yahoo.comWittingtonActive$651.96
Vito McCullough II
@randal85
kaelyn_hirthe43@yahoo.comLandenshireActive$548.57
Olivia Rolfson-Dibbert
@jess_gerlach99
magdalen21@hotmail.comWest CovinaInactive$14.46
Adrien Shanahan I
@latoya44
andreane_dubuque@yahoo.comHowellfortInactive$101.89
Cody Haley-Lesch DDS
@miguel_kovacek73
alan0@yahoo.comLenoratownActive$1,036.20

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Emily Marquardtalba81@yahoo.comFort SierratownActive$1,115.21
Phil Runolfsdottiralejandro.veum55@hotmail.comKobylandInactive$763.45
Freda Wunschjohanna.corkery@hotmail.comBergeworthActive$41.14
Gerardo Moorekara6@hotmail.comEast Los AngelesInactive$541.32
Imogene Bins IVkendrick80@hotmail.comMitchellsideInactive$699.54
Total$3,160.66

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Yazmin O'Harashane.hilll9@hotmail.comEast AdriannaActive$756.40
Alicia Mraztheresa67@gmail.comNorth TaylorfieldInactive$938.32
Davon Rippinvladimir85@gmail.comHartmannvilleInactive$664.79
Dr. Lenora Swaniawskioctavia_wintheiser87@hotmail.comRicemouthActive$378.31
Mindy Crooksvan_sipes18@hotmail.comNorth JoancesterActive$546.04
Total$3,283.86

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Nash Greenholtmathilde_schaefer@yahoo.comMylesshireActive$702.46
Janie Goyettefernando.christiansen@hotmail.comRunolfsdottirboroughActive$625.21
Marco Heathcoteted_beer11@hotmail.comBaltimoreInactive$1,011.84
Mr. Savannah Legrosalessandra89@hotmail.comPort NathanialInactive$443.37
Kristin Runolfssonorville.bartoletti34@gmail.comBodebergActive$457.59
Total$3,240.47

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
Lemuel Klingzackary_ohara@hotmail.comPort DonavonsideInactive$767.87
Angel Hyattfredrick.spencer7@hotmail.comMcAllenInactive$22.49
Meaghan Botsford-Mohrjovani.windler93@gmail.comEast BrendonvilleInactive$414.39
Gene Greenbert_stehr@yahoo.comEast GabriellemouthInactive$464.33
Rufus McGlynntravis_hauck@hotmail.comFort LottieInactive$1,191.63
Total$2,860.71

Table with row selection

Card Table

NameEmailLocationStatusBalance
Kraig Kulas IIIkristin23@gmail.comAshevilleInactive$995.41
Laurel Kihnhaleigh.heller@hotmail.comDeerfield BeachInactive$916.83
Candace Jerdebecky_nikolaus55@hotmail.comEast ColemancesterInactive$950.02
Mrs. Hunter Reillyines.wintheiser41@yahoo.comGabeburghInactive$914.17
Wilfred Friesenalma88@yahoo.comWest IdellaInactive$364.31
Total$4,140.74

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
Gerardo Jenkinsgeoffrey_jerde@yahoo.comBruenburyInactive$372.43
Kaylee Mills DDSlydia.abernathy@gmail.comPort WinifredburghActive$1,112.87
Percy Schoenmadeline.goyette@gmail.comReadingActive$547.52
Miss Dortha Willmsmateo_jakubowski@yahoo.comKenoshaInactive$480.13
Cleo Krajciktraci17@gmail.comLake RandisteadActive$1,055.06
Keara Robertsmya_mcclure50@hotmail.comChesleyportInactive$635.30
Eunice Andersonernest_johnston23@gmail.comKirstinvilleInactive$1,182.94
Miss Marta Frieseneveline.towne@hotmail.comKearacesterInactive$344.27
Traci Strackejaime97@hotmail.comNovatoActive$144.57
Else Murazikestelle.schroeder@yahoo.comEast AsaviewInactive$923.63
Mr. Tobin Trantowvena_glover81@hotmail.comSouth LeopoldoActive$306.44
Louise Bodemalcolm17@gmail.comCaldwellInactive$219.89
Efren Herzoglauretta_swift@yahoo.comLake ElinorActive$1,102.46
Earnest Klingbrooks_quitzon@gmail.comShanahanmouthActive$1,129.45
Eusebio Zemlak-Stehrmyles_smith@gmail.comPort KarsonInactive$552.93
Total$10,109.89

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