Material Design Lite: Selectable Table

In this tutorial, I’m going to show you how-to create a selectable**data table using Material Design Lite.This is what we are trying to create:

See the Pen Material Design Lite: Table Selectable by Brandon Himpfen (@brandonhimpfen) on CodePen.


    <!-- Material Design Lite CSS -->
    <link rel="stylesheet" href="">
    <!-- Material Design Lite Font Icons -->
    <link rel="stylesheet" href="">

  <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
          <th class="mdl-data-table__cell--non-numeric">Material</th>
          <th>Unit price</th>
          <td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
          <td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
          <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
        <td class="mdl-data-table__cell--non-numeric" colspan="3">
          This is a footer. Add notes here.

    <!-- Material Design Lite JavaScript -->


body {
  background: #eee;
table {
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;