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$692.67
INV002PaidCredit Card$279.05
INV003PaidBank Transfer$946.37
INV004PaidCredit Card$151.82
INV005UnpaidBank Transfer$382.40
INV006PendingCredit Card$630.67
INV007PaidPayPal$551.40
Total$3,634.38

Simple

Users

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

NameTitleEmailRoleActions
Lucile ZboncakRegional Security Liaisonlucile.zboncak20@hotmail.comMember
Florence HirtheInternational Security Engineerflorence_hirthe21@hotmail.comAdmin
Marcelo O'Kon-MannLead Creative Managermarcelo_okon-mann28@hotmail.comMember
Maggie MitchellGlobal Directives Coordinatormaggie_mitchell@yahoo.comViewer
Cecil GislasonGlobal Implementation Officercecil.gislason@gmail.comMember
Cindy SchneiderCustomer Intranet Designercindy.schneider88@hotmail.comAdmin

Stacked on mobile

Users

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

NameRoleActions

Vella Nader

Internal Creative Orchestrator

vella_nader37@hotmail.com

Admin

Easter Yost

Lead Implementation Engineer

easter.yost12@gmail.com

Viewer

Jason Donnelly

Central Group Director

jason.donnelly3@yahoo.com

Admin

Horacio Langworth

District Solutions Producer

horacio_langworth@yahoo.com

Admin

Lillie Ryan-Blanda

Internal Directives Architect

lillie.ryan-blanda@hotmail.com

Member

Sheldon Hansen

Direct Group Associate

sheldon.hansen1@yahoo.com

Admin

Users

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

NameRoleActions

Christina White

Senior Quality Designer

christina_white24@yahoo.com

Admin

Dane Gutkowski

Regional Markets Supervisor

dane_gutkowski87@gmail.com

Viewer

Bianka Lueilwitz

Internal Marketing Officer

bianka.lueilwitz90@yahoo.com

Member

Rocio Corwin

National Marketing Supervisor

rocio_corwin@gmail.com

Member

Raoul McKenzie

Future Research Specialist

raoul.mckenzie23@hotmail.com

Viewer

Jettie Brakus

Global Intranet Executive

jettie.brakus@gmail.com

Viewer

Ray Schmeler

Global Mobility Technician

ray_schmeler45@yahoo.com

Viewer

Terence Corwin

Chief Quality Manager

terence.corwin1@gmail.com

Viewer

Rocky Huels

Corporate Data Administrator

rocky_huels@yahoo.com

Admin

Katharina Kuphal

Chief Web Officer

katharina_kuphal33@gmail.com

Admin

Torrey Nienow

Internal Response Director

torrey.nienow6@yahoo.com

Admin

Cloyd Hettinger

Future Integration Coordinator

cloyd_hettinger@gmail.com

Admin

Mara Schneider

Central Security Associate

mara_schneider@hotmail.com

Viewer

Cecilia Haag

Product Research Strategist

cecilia_haag@gmail.com

Viewer

Eusebio Ankunding

Lead Markets Architect

eusebio_ankunding82@yahoo.com

Viewer

Suzanne Schumm

Human Markets Specialist

suzanne.schumm66@gmail.com

Viewer

Nakia Fay

Central Usability Analyst

nakia.fay@gmail.com

Member

Peyton Bahringer

Internal Optimization Coordinator

peyton.bahringer16@gmail.com

Admin

Josiane Franey

Forward Functionality Consultant

josiane.franey@gmail.com

Member

Emile Hilpert

Chief Solutions Supervisor

emile.hilpert@gmail.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
Dr. Ismael Kilbackjustus.smith73@hotmail.comManhattanInactive$666.74
Sergio Gloverjohn_walsh28@gmail.comKendrickvilleActive$758.94
Janet Connellyfelicity88@hotmail.comWest BertramInactive$814.45
Misty Walshgerhard_cremin85@gmail.comZitafurtActive$791.46
Ashley Weimannraymundo_hintz-pacocha12@yahoo.comFremontInactive$763.74
Total$3,795.33

Basic table

Table with Images

NameEmailLocationStatusBalance
Robert Purdy
@christophe_ernser
rickey_purdy@gmail.comLittletonActive$471.96
Miss Jackie Quitzon
@nyah.terry
joey_predovic79@gmail.comWest LoyalInactive$359.65
Dr. Gregory Gusikowski
@anabelle63
ramiro57@yahoo.comWaltontonActive$491.65
Fred Jakubowski
@murphy24
edmond_runolfsson81@gmail.comBolingbrookActive$1,179.32
Mr. Jaime Crist
@ettie.koss
josephine.von@yahoo.comNew ZacksteadActive$702.74

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Marjorie Kingalessandra68@yahoo.comWest WeldonInactive$1,079.17
Diana Larkinreina6@hotmail.comKleinviewInactive$392.90
Muriel Dooley Iflorence_rippin-hartmann16@yahoo.comNorth GerrychesterActive$868.11
Shelly Baumbachjay_damore@hotmail.comFort SarahInactive$633.28
Woodrow Greenholtroberta54@gmail.comMcCulloughbergInactive$979.50
Total$3,952.96

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Bryant Webersusan.steuber-hauck61@hotmail.comAndersonActive$863.68
Sophia Mohrdexter.cummerata@gmail.comNew MuhammadInactive$532.06
Mable Muellermozell91@gmail.comWest EribertotownInactive$862.56
Rick Kozeydangelo.dickens@yahoo.comSanta MonicaActive$1,097.21
Terry Morissetteayden_kuvalis57@gmail.comWest DaishalandActive$745.09
Total$4,100.60

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Karl Runtemarco.leffler15@yahoo.comRathboroInactive$1,121.63
Salvador Keeblermurray_schoen49@hotmail.comBurdettebergActive$961.87
Fernando Kubjuwan66@hotmail.comFort RachelInactive$1,045.39
Randy Spenceremory_orn@yahoo.comSunnyvaleActive$1,014.07
Tasha Considineselena.ruecker87@gmail.comJonesshireActive$519.54
Total$4,662.50

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
Elsie Stehrrhoda59@yahoo.comSouth DahliaActive$389.98
Dr. Jared Denesikprecious64@yahoo.comWest DallinviewActive$128.41
Phil Keeling Vbernardo70@hotmail.comChanelboroActive$288.11
Marcella Hayesdena.heller38@hotmail.comFort GladycehavenInactive$557.45
Julian Hilpertdion61@hotmail.comFeltonboroughInactive$392.87
Total$1,756.82

Table with row selection

Card Table

NameEmailLocationStatusBalance
Dominic Goldnerchelsie.murphy-adams69@gmail.comSchmittportActive$872.92
Mattie Ziemannabbie17@yahoo.comLake NorwoodActive$925.01
Erin Collinsmichaela_mueller@gmail.comFort PriceboroInactive$631.33
Marion Boehmmarcos_walker71@hotmail.comEast DiannaActive$505.58
Emma Abernathyherminio_lebsack@gmail.comFort RoxanevilleInactive$537.97
Total$3,472.81

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
Joshua Kossceline_nitzsche70@yahoo.comKaylinmouthInactive$893.23
Cameron Hickledaren_bednar-kerluke18@gmail.comBergestadInactive$92.60
Elsie Volkman Vgriffin.lehner@yahoo.comLake MathewInactive$162.12
Gerald Senger PhDdelfina94@hotmail.comEast KameronActive$79.79
Mr. Simon Gorczanyed2@yahoo.comDeSotoActive$43.01
Patty Aufderharluciano_powlowski-blick@hotmail.comLeschbergActive$1,058.75
Blanca Cormierkailee_powlowski@hotmail.comWauwatosaActive$979.10
David Shieldsrandi_mueller@gmail.comSuffolkActive$770.68
Delia Trantowcortney_mitchell64@gmail.comWest EmeliaActive$233.86
Katrina Huelslenny82@yahoo.comWest EdmundburyActive$551.39
Jake Robelernestine15@hotmail.comStephonboroInactive$609.86
Beverly Stoltenbergagnes_crooks54@yahoo.comLos AngelesInactive$392.87
Sylvia Dare-Rowerhianna_rempel14@hotmail.comEast NameInactive$1,177.02
Horace Klein-Hoppealbertha48@yahoo.comHumbertolandActive$1,121.39
Mrs. Shelia Kertzmannadonis.king@gmail.comGreensboroInactive$416.61
Total$8,582.28

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