Material-WebComp-Grid in card

In this example below you will see how to do a Material-WebComp-Grid in card with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by ineedthekeyboard, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ineedthekeyboard ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Material-WebComp-Grid in card</title>
  
  
  <link rel='stylesheet prefetch' href='https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Lato:400italic,700italic,400,700'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body class="mdc-typography mdc-theme--dark">
  <header class="mdc-toolbar mdc-toolbar--fixed demo-toolbar">
    <div class="mdc-toolbar__row">
      <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
        <span class="mdc-toolbar__title">Fake Site</span>
      </section>
      <section class="mdc-toolbar__section mdc-toolbar__section--align-end" role="toolbar">
        <a href="#" class="material-icons mdc-toolbar__icon" aria-label="Download" alt="Download">file_download</a>
        <a href="#" class="material-icons mdc-toolbar__icon" aria-label="Print this page" alt="Print this page">print</a>
        <a href="#" class="material-icons mdc-toolbar__icon" aria-label="Bookmark this page" alt="Bookmark this page">bookmark</a>
      </section>
    </div>
  </header>
  <div class="mdc-card center">
    <section class="mdc-card__media mdc-theme--primary-bg">
      <h1 class="mdc-card__title mdc-card__title--large mdc-theme--text-primary-on-primary">Earth</h1>
      <h2 class="mdc-card__subtitle mdc-theme--text-primary-on-primary">A solid decision.</h2>
    </section>
    <section class="mdc-card__supporting-text mdc-theme--secondary-dark-bg">
      <div class="mat-table">
        <div class="mat-header-row">
          <div class="mat-header-cell">Name</div>
          <div class="mat-header-cell">Item Name</div>
          <div class="mat-header-cell">Item Location</div>
          <div class="mat-header-cell">Time Stamp</div>
          <div class="mat-header-cell">Last Known</div>
          <div class="mat-header-cell">Count</div>
          <div class="mat-header-cell">Inventory Count</div>
          <div class="mat-header-cell">Serial #</div>
          <div class="mat-header-cell">Boxing Location</div>
        </div>
        <div class="mat-row">
          <div class="mat-cell">Alvin</div>
          <div class="mat-cell">Eclair</div>
          <div class="mat-cell">$0.87</div>
          <div class="mat-cell">Alvin</div>
          <div class="mat-cell">Eclair</div>
          <div class="mat-cell">$0.87</div>
          <div class="mat-cell">Alvin</div>
          <div class="mat-cell">Eclair</div>
          <div class="mat-cell">$0.87</div>
        </div>
        <div class="mat-row">
          <div class="mat-cell">Alan</div>
          <div class="mat-cell">Jellybean</div>
          <div class="mat-cell">$3.76</div>
          <div class="mat-cell">Alan</div>
          <div class="mat-cell">Jellybean</div>
          <div class="mat-cell">$3.76</div>
          <div class="mat-cell">Alan</div>
          <div class="mat-cell">Jellybean</div>
          <div class="mat-cell">$3.76</div>
        </div>
        <div class="mat-row">
          <div class="mat-cell">Jonathan</div>
          <div class="mat-cell">Lollipop</div>
          <div class="mat-cell">$7.00</div>
          <div class="mat-cell">Jonathan</div>
          <div class="mat-cell">Lollipop</div>
          <div class="mat-cell">$7.00</div>
          <div class="mat-cell">Jonathan</div>
          <div class="mat-cell">Lollipop</div>
          <div class="mat-cell">$7.00</div>
        </div>
        <div class="mat-row">
          <div class="mat-cell">Jonathan</div>
          <div class="mat-cell">Lollipop</div>
          <div class="mat-cell">$7.00</div>
          <div class="mat-cell">Jonathan</div>
          <div class="mat-cell">Lollipop</div>
          <div class="mat-cell">$7.00</div>
          <div class="mat-cell">Jonathan</div>
          <div class="mat-cell">Lollipop</div>
          <div class="mat-cell">$7.00</div>
        </div>
        <div class="mat-row">
          <div class="mat-cell">Jonathan</div>
          <div class="mat-cell">Lollipop</div>
          <div class="mat-cell">$7.00</div>
          <div class="mat-cell">Jonathan</div>
          <div class="mat-cell">Lollipop</div>
          <div class="mat-cell">$7.00</div>
          <div class="mat-cell">Jonathan</div>
          <div class="mat-cell">Lollipop</div>
          <div class="mat-cell">$7.00</div>
        </div>
        <div class="mat-row">
          <div class="mat-cell">Jonathan</div>
          <div class="mat-cell">Lollipop</div>
          <div class="mat-cell">$7.00</div>
          <div class="mat-cell">Jonathan</div>
          <div class="mat-cell">Lollipop</div>
          <div class="mat-cell">$7.00</div>
          <div class="mat-cell">Jonathan</div>
          <div class="mat-cell">Lollipop</div>
          <div class="mat-cell">$7.00</div>
        </div>
        <div class="mat-row">
          <div class="mat-cell">Jonathan</div>
          <div class="mat-cell">Lollipop</div>
          <div class="mat-cell">$7.00</div>
          <div class="mat-cell">Jonathan</div>
          <div class="mat-cell">Lollipop</div>
          <div class="mat-cell">$7.00</div>
          <div class="mat-cell">Jonathan</div>
          <div class="mat-cell">Lollipop</div>
          <div class="mat-cell">$7.00</div>
        </div>
        <div class="mat-row">
          <div class="mat-cell">Jonathan</div>
          <div class="mat-cell">Lollipop</div>
          <div class="mat-cell">$7.00</div>
          <div class="mat-cell">Jonathan</div>
          <div class="mat-cell">Lollipop</div>
          <div class="mat-cell">$7.00</div>
          <div class="mat-cell">Jonathan</div>
          <div class="mat-cell">Lollipop</div>
          <div class="mat-cell">$7.00</div>
        </div>
        <div class="mat-row">
          <div class="mat-cell">Jonathan</div>
          <div class="mat-cell">Lollipop</div>
          <div class="mat-cell">$7.00</div>
          <div class="mat-cell">Jonathan</div>
          <div class="mat-cell">Lollipop</div>
          <div class="mat-cell">$7.00</div>
          <div class="mat-cell">Jonathan</div>
          <div class="mat-cell">Lollipop</div>
          <div class="mat-cell">$7.00</div>
        </div>
        <div class="mat-row">
          <div class="mat-cell">Jonathan</div>
          <div class="mat-cell">Lollipop</div>
          <div class="mat-cell">$7.00</div>
          <div class="mat-cell">Jonathan</div>
          <div class="mat-cell">Lollipop</div>
          <div class="mat-cell">$7.00</div>
          <div class="mat-cell">Jonathan</div>
          <div class="mat-cell">Lollipop</div>
          <div class="mat-cell">$7.00</div>
        </div>
      </div>

    </section>
  </div>
</body>
  <script src='https://unpkg.com/material-components-web@latest/dist/material-components-web.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/ineedthekeyboard/material-webcomp-grid-in-card-JpYWOb */
:root {
  --mdc-theme-primary: #0e4ead;  
}
html, body {
  background: black;
  font-family: 'Lato', Arial, sans-serif;
}
main {
  margin: 1rem auto;
  max-width: 400px;
}
.center {
  max-width: 1100px;
  margin: 80px auto 0 auto;
}

.mat-table {
  display: block;
  min-width:350px;
}
.mat-header-row {
 display: flex;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  align-items: center;
  min-height: 56px;
  padding: 0 24px;
}
.mat-row {
  display: flex;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  align-items: center;
  min-height: 48px;
  padding: 0 24px;
}
.mat-row:nth-child(odd) {
  background-color: rgba(155,155,155,.25)
}
.mat-row:last-of-type {
  min-height: 56px;
  border-bottom-style: none;
}
.mat-cell,
.mat-header-cell {
  flex: 1;
  overflow: hidden;
  word-wrap: break-word;
}

/* For Mobile */
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr, .mat-table, .mat-header-row, .mat-row, .mat-header-cell, .mat-cell { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr, .mat-header-row { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr, .mat-row { 
    border: 1px solid #ccc;
    padding: 10px
  }
  .mat-row:nth-child(odd) {
    background-color: transparent;
  }
	.mat-row:last-of-type {
    border-bottom-style: solid;
  }
	td, .mat-cell { 
		/* Behave  like a "row" */
		border: none;
		position: relative;
		padding-left: 50%; 
	}
  .mat-cell:nth-child(odd) {
    background-color: rgba(155,155,155,.25)
  }
  .mat-cell:last-of-type {
    border: none;
  }
	
	td:before, .mat-cell:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
    line-height:1;
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
	td:nth-of-type(1):before, .mat-cell:nth-of-type(1):before { content: "First Name:"; }
	td:nth-of-type(2):before, .mat-cell:nth-of-type(2):before  { content: "Last Name:"; }
	td:nth-of-type(3):before, .mat-cell:nth-of-type(3):before { content: "Job Title:"; }
	td:nth-of-type(4):before, .mat-cell:nth-of-type(4):before { content: "Favorite Color"; }
	td:nth-of-type(5):before, .mat-cell:nth-of-type(5):before { content: "Wars of Trek?"; }
	td:nth-of-type(6):before, .mat-cell:nth-of-type(6):before { content: "Alias Name"; }
	td:nth-of-type(7):before, .mat-cell:nth-of-type(7):before { content: "Date of Birth"; }
	td:nth-of-type(8):before, .mat-cell:nth-of-type(8):before { content: "Dream Vacation City"; }
	td:nth-of-type(9):before, .mat-cell:nth-of-type(9):before { content: "GPA"; }
	td:nth-of-type(10):before, .mat-cell:nth-of-type(10):before { content: "Arbitrary Data"; }
}

/*Downloaded from https://www.codeseek.co/ineedthekeyboard/material-webcomp-grid-in-card-JpYWOb */
window.mdc.autoInit();

Comments