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
INV001UnpaidPayPal$836.68
INV002PendingCredit Card$680.74
INV003PendingCredit Card$603.69
INV004UnpaidPayPal$913.66
INV005UnpaidPayPal$712.86
INV006PendingBank Transfer$995.08
INV007PaidCredit Card$635.91
Total$5,378.62

Simple

Users

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

NameTitleEmailRoleActions
Michele BradtkeCustomer Markets Consultantmichele.bradtke@gmail.comAdmin
Agnes YundtLegacy Response Strategistagnes.yundt82@gmail.comMember
Lurline MurrayInvestor Accounts Liaisonlurline.murray45@gmail.comMember
Vera CorwinCorporate Factors Designervera_corwin@hotmail.comViewer
Cleo RogahnLegacy Group Associatecleo.rogahn@yahoo.comAdmin
Ena WillmsCustomer Group Engineerena.willms@yahoo.comViewer

Stacked on mobile

Users

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

NameRoleActions

Bobbie Beahan

Regional Communications Analyst

bobbie_beahan@hotmail.com

Viewer

Keith Powlowski

Investor Operations Supervisor

keith_powlowski46@hotmail.com

Viewer

Brandon Kessler

Lead Tactics Executive

brandon_kessler@gmail.com

Member

Jarvis Hammes

Forward Integration Strategist

jarvis_hammes78@hotmail.com

Member

Orpha Metz

National Implementation Manager

orpha_metz@gmail.com

Admin

Hope Kertzmann

Lead Functionality Developer

hope.kertzmann@hotmail.com

Viewer

Users

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

NameRoleActions

Victoria Treutel

Corporate Quality Developer

victoria_treutel@gmail.com

Member

Grant Hermann

Senior Implementation Director

grant_hermann45@gmail.com

Member

Tabitha Gerhold

Corporate Usability Designer

tabitha_gerhold14@hotmail.com

Viewer

Vern Kuhic-Hermiston

Forward Factors Analyst

vern_kuhic-hermiston40@gmail.com

Admin

Delia Herzog

Dynamic Accountability Assistant

delia.herzog26@yahoo.com

Member

Nelson Walter

Legacy Branding Administrator

nelson_walter2@yahoo.com

Admin

Bulah Moen

International Infrastructure Planner

bulah_moen33@gmail.com

Admin

Kevin Wilkinson-Blanda

Human Functionality Supervisor

kevin_wilkinson-blanda@hotmail.com

Viewer

Eunice MacGyver

Chief Integration Coordinator

eunice_macgyver87@hotmail.com

Member

George Monahan

Lead Accounts Facilitator

george_monahan@yahoo.com

Admin

Lyle Leuschke

Regional Data Strategist

lyle_leuschke43@gmail.com

Member

Mona Hauck

Human Web Analyst

mona.hauck46@hotmail.com

Viewer

Julie Kovacek

Corporate Implementation Associate

julie.kovacek3@gmail.com

Member

Ahmad Williamson

Internal Infrastructure Manager

ahmad_williamson37@gmail.com

Viewer

Irma Auer

National Marketing Manager

irma_auer81@gmail.com

Member

Lulu Zulauf

International Applications Director

lulu.zulauf@gmail.com

Admin

Esta Schamberger

Principal Infrastructure Planner

esta_schamberger@yahoo.com

Admin

Clare White-Smitham

Future Operations Producer

clare.white-smitham@hotmail.com

Viewer

Lila Rowe

International Accountability Representative

lila.rowe@gmail.com

Member

Everette Rolfson

Direct Creative Coordinator

everette.rolfson26@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
Dominic Schmeler-Gleichner IIItrisha70@gmail.comRedondo BeachActive$1.97
Dr. Maude Bradtke-Erdman IVvera_senger60@gmail.comSatterfieldstadActive$1,004.24
Stacy Hudsonalta.gulgowski12@yahoo.comLake AraceliActive$54.54
Brandy Runolfsdottirflossie.nikolaus@yahoo.comBradtkelandInactive$137.61
Patti Gradyterry_franecki@gmail.comBrookestadActive$279.17
Total$1,477.53

Basic table

Table with Images

NameEmailLocationStatusBalance
Quinton Thompson
@elaine79
ruby.murazik@yahoo.comRowechesterInactive$1,164.96
Carla Huel
@lori_metz-jenkins
maria_steuber0@gmail.comMurray-GibsonbergInactive$1,149.13
Lilyan Ratke V
@tyree11
danny.wolff@yahoo.comGreenholtburyInactive$116.89
Franklin Turner
@jakayla_connelly
felipe_schowalter32@gmail.comJaydeboroActive$332.01
Reta Schultz
@carey14
garrett_beier@gmail.comPort LucieInactive$225.42

Table with images

Table No Horizontal Lines

NameEmailLocationStatusBalance
Carole Connlaurianne41@gmail.comCatherineburghInactive$92.09
Timmy Kuhneaston.haag@hotmail.comLake BobbieActive$556.87
Rosemary Flatleyamie.rodriguez7@hotmail.comRyleystadInactive$1,135.19
Stefan Hintzsandra14@yahoo.comRathburyInactive$350.48
Virginie Glover-Leannonbobbie.blanda@yahoo.comKshlerincesterActive$1,065.22
Total$3,199.85

Table without horizontal dividers

Striped Tabled

NameEmailLocationStatusBalance
Cristina Cassinjudith_fay@hotmail.comSchroederburyInactive$518.60
Mr. Don Dietrichbethany_ryan@gmail.comEast EstelleInactive$176.69
Miguel Spencer IIIsadie.denesik70@hotmail.comFort MichaelInactive$513.30
Dr. Sherman Harberdylan_legros-anderson77@gmail.comWest MadisynInactive$601.34
Saul Klockodena.herman58@hotmail.comMaggiotownInactive$169.73
Total$1,979.66

Striped table

Vertical Lines

NameEmailLocationStatusBalance
Betty Colegeorgia_roob@hotmail.comPort MattInactive$482.91
Damon Ziemerene_volkman21@yahoo.comNorth DomenicoActive$177.70
Maegan Kuvalisterrence47@yahoo.comNew AddieburyActive$260.39
Hugh Powlowskijayde_kertzmann37@hotmail.comWhitelandInactive$1,130.55
Walter Dibberteverett_braun@gmail.comWinifredboroughActive$1,176.31
Total$3,227.86

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
Milton Wymanlessie.blick-krajcik64@gmail.comRockfordInactive$120.10
Elias Lowemandy.jacobs@yahoo.comSalinasInactive$1,117.76
Ada Feestdayne.rohan71@hotmail.comMohrtonInactive$974.62
Orlo Wintheiserapril_cronin@hotmail.comLake RosalieActive$24.87
Branson Renner-Brekkelamar7@gmail.comO'ConnertonActive$1,055.06
Total$3,292.41

Table with row selection

Card Table

NameEmailLocationStatusBalance
Darlene Jacobitressa92@yahoo.comSparksInactive$802.49
Lauryn Schaeferkorbin89@gmail.comPontiacInactive$1,094.44
Nelda Koss Icelestine50@gmail.comFort SueInactive$242.48
Alexane Beattymiranda_grimes@yahoo.comSouth KirstinActive$318.66
Tyreek Runolfssonloretta.barrows@yahoo.comWest EusebioboroActive$880.55
Total$3,338.62

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
Shelly Kihnfannie_bashirian34@hotmail.comLake JoshuahavenActive$353.03
Garrett Nicolasdouglas_cummerata32@gmail.comGutkowskiworthInactive$1,027.27
Emilio Dickensted73@yahoo.comMiddletownInactive$36.11
Carlee Spinkabetty.balistreri@yahoo.comMaxinefurtActive$810.97
Jaden Dickens PhDmargaret5@yahoo.comLake WilhelmActive$998.24
Sister Wisoky PhDalessandra.beier@yahoo.comJohanfurtActive$1,031.64
Norman Larkin-Dickensonie.rath@hotmail.comAppletonInactive$298.58
Ottilie Batznoel.schuster@hotmail.comNorfolkInactive$843.08
Barney Trompaudrey.rohan@hotmail.comNew EphraimstadInactive$480.94
Dallas Emmerichmelody.sanford@gmail.comAntonettatonActive$210.94
Lindsay Grimes IIIscott_lowe@hotmail.comMilfordInactive$814.31
Bertha Heidenreichleanna0@yahoo.comNorth BretInactive$557.22
Sarina Baileykristine98@yahoo.comEdavilleActive$781.76
Cary Kutchnorbert_maggio72@gmail.comPort RaulActive$1,085.08
Clare Murraygaston48@gmail.comNew MarioActive$675.89
Total$10,005.06

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