Dynamic Data Table Google Material #mdl

dynamic-data-table-google-material-mdl.markdown

Dynamic Data Table Google Material #mdl

Add or remove data table rows dynamically in html view.

A Pen by DHCS on CodePen.

License.

index.html

<div class="mdl-grid" style="width:1000px;margin-top:100px;">
  <div id="products" class="mdl-data-tabledynamic mdl-shadow--2dp">
    <div class="mdl-data-tabledynamic__title">
      <h2 class="mdl-data-tabledynamic__title-text">Products</h2>
      <div class="mdl-data-tabledynamic__actions">
        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect add-row">
                                            ADD
                                        </a>
        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect remove-row">
                                            REMOVE
                                        </a>
      </div>

    </div>

    <div class="mdl-data-tabledynamic__content">
      <table class="mdl-data-table mdl-data-dynamictable mdl-js-data-table mdl-shadow--2dp mdl-cell--6-col mdl-data-table__row--selectable">
        <thead>

          <tr>
            <th>
              <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select" for="checkbox-all">
                                                        <input type="checkbox" id="checkbox-all" class="mdl-checkbox__input">
                                                    </label>
            </th>
            <th class="mdl-data-table__cell--non-numeric">Barcode</th>
            <th class="mdl-data-table__cell--non-numeric">Product Name</th>
            <th class="mdl-data-table__cell--non-numeric">Brand</th>
            <th class="mdl-data-table__cell--non-numeric">Details</th>
            <th>Quantity</th>
            <th>Price</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select" for="checkbox-1">

                                                        <input type="checkbox" id="checkbox-1" class="mdl-checkbox__input">
                                                    </label>
            </td>
            <td style="text-align:left;"><span class="mdl-data-table__label add-table-content" title="barcode">Add barcode</span></td>
            <td class="mdl-data-table__cell--non-numeric"><span class="mdl-data-table__label add-table-content" title="product name">Add product name</span></td>
            <td class="mdl-data-table__cell--non-numeric"><span class="mdl-data-table__label add-table-content" title="brand">Add brand</span></td>
            <td class="mdl-data-table__cell--non-numeric"><span class="mdl-data-table__label add-table-content" title="details">Add details</span></td>
            <td><span class="mdl-data-table__label add-table-content" title="quantity">Add Quantity</span></td>
            <td class="price"><span class="mdl-data-table__label add-table-content" title="price">Add Price</span></td>
          </tr>

        </tbody>
      </table>
    </div>


  </div>
</div>
<dialog class="mdl-dialog">
  <h4 class="mdl-dialog__title">Remove Products</h4>
  <div class="mdl-dialog__content">
    <p>
      Selected products will be removed. Are you sure?
    </p>
  </div>
  <div class="mdl-dialog__actions">
    <button type="button" class="mdl-button remove">Yes</button>
    <button type="button" class="mdl-button close">Cancel</button>
  </div>
</dialog>
<script type="text/template" id="addContentDialogTemplate">
  <div class="mdl-dialog__addContent mdl-shadow--2dp">
    <h3 class="mdl-dialog__title">Add {{title}}</h3>
    <div class="mdl-dialog__content">
      <div class="mdl-textfield mdl-js-textfield">
        <input class="mdl-textfield__input" type="text" id="content" {{pattern}}>
        <label class="mdl-textfield__label" for="content"></label>
        <span class="mdl-textfield__error">{{error}} </span>
      </div>
    </div>
    <div class="mdl-dialog__actions">
      <button type="button" class="save mdl-button mdl-button--colored mdl-color-text--red-500">Save</button>
      <button type="button" class="close mdl-button mdl-button--colored mdl-color-text--red-500">Cancel</button>
    </div>
  </div>
</script>

<script type="text/template" id="basketItemTemplate">
  <tr>
    <td>
      <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select" for="{{id}}">
                        <input type="checkbox" id="{{id}}" class="mdl-checkbox__input">
                    </label>
    </td>
    <td style="text-align:left;"><span class="mdl-data-table__label add-table-content" title="barcode">Add barcode</span></td>
    <td class="mdl-data-table__cell--non-numeric"><span class="mdl-data-table__label add-table-content" title="product name">Add product name</span></td>
    <td class="mdl-data-table__cell--non-numeric"><span class="mdl-data-table__label add-table-content" title="brand">Add brand</span></td>
    <td class="mdl-data-table__cell--non-numeric"><span class="mdl-data-table__label add-table-content" title="details">Add details</span></td>
    <td><span class="mdl-data-table__label add-table-content" title="quantity">Add quantity</span></td>
    <td class="price"><span class="mdl-data-table__label add-table-content" title="price">Add price</span></td>
  </tr>
</script>

script.js

function addNewRow() {

  var _row = $(".mdl-data-dynamictable tbody").find('tr');
  var template = $('#basketItemTemplate').html();
  var _newRow = template.replace(/{{id}}/gi, 'checkbox-' + new Date().getTime());

  $(".mdl-data-dynamictable tbody").append(_newRow);
  componentHandler.upgradeAllRegistered();
}

var _isinvalid = false;
$(".add-row").on("click", function() {
  $(".mdl-dialog__addContent").remove();
  addNewRow();
});
var dialog = document.querySelector('dialog');
$(".remove-row").on("click", function() {
  $(".mdl-dialog__addContent").remove();
  
  if ($(".mdl-data-dynamictable tbody").find('tr.is-selected').length != 0)
    {
      dialog.showModal();
    }
   
 

});
$(document).on("click", ".mdl-checkbox", function() {
  var _tableRow = $(this).parents("tr:first");
  if ($(this).hasClass("is-checked") === false) {
    _tableRow.addClass("is-selected");
  } else {
    _tableRow.removeClass("is-selected");
  }

});
$(document).on("click", "#checkbox-all", function() {
  _isChecked = $(this).parent("label").hasClass("is-checked");
  if (_isChecked === false) {
    $(".mdl-data-dynamictable").find('tr').addClass("is-selected");
    $(".mdl-data-dynamictable").find('tr td label').addClass("is-checked");
  } else {
    $(".mdl-data-dynamictable").find('tr').removeClass("is-selected");
    $(".mdl-data-dynamictable").find('tr td label').removeClass("is-checked");
  }

});
$(document).on("click", "span.mdl-data-table__label.add-table-content", function() {
  var _modal, _pattern, _error = "";

  $(".mdl-dialog__addContent").remove();
  if ($(this).parents("td:first").hasClass("mdl-data-table__cell--non-numeric") === false) {
    _pattern = 'pattern="-?[0-9]*(\.[0-9]+)?"';
    _error = "Please, add a numeric value.";
  }

  var template = $('#addContentDialogTemplate').html();
  _modal = template.replace(/{{title}}/, $(this).attr("title")).replace(/{{pattern}}/, _pattern).replace(/{{error}}/, _error);
  $(this).parent().prepend(_modal);
  componentHandler.upgradeDom();
  $(".mdl-textfield__input").focus();
});

$(document).on("click", ".close", function() {
  $(this).parents(".mdl-dialog__addContent").remove();
});

$(document).on("keydown", ".mdl-dialog__addContent", function(e) {
  var code = (e.keyCode ? e.keyCode : e.which);
  switch (code) {
    case 13:
      $(".save.mdl-button").click();
      break;
    case 27:
      $(".close.mdl-button").click();
      break;
    default:
  }
});

$(document).on("click", ".save", function() {
  var _textfield = $(this).parents("td").find(".mdl-textfield");
  var _input = $(this).parents("td").find("input");
  if (_textfield.hasClass("is-invalid") === false && $.trim(_input.val()) !== "") {
    var _col = $(this).parents("td:first");
    var value = _col.hasClass("price") ? "₺ " : "";
    _col.html(value + _input.val());
  }
});

 dialog.querySelector('.close').addEventListener('click', function() {
      dialog.close();
    });
dialog.querySelector('.remove').addEventListener('click', function() {
       $(".mdl-data-dynamictable tbody").find('tr.is-selected').remove();
  $(".mdl-data-dynamictable thead tr").removeClass("is-selected");
  $(".mdl-data-dynamictable thead tr th label").removeClass("is-checked");
  componentHandler.upgradeDom();
  var _row = $(".mdl-data-dynamictable tbody").find('tr');
  console.log("_row.length", _row.length);
  if (_row.length < 1) {
    addNewRow();
  } dialog.close();
    });

scripts

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://code.getmdl.io/1.1.3/material.min.js"></script>

style.css

#products.mdl-data-tabledynamic {
  width: 100%;
}

.mdl-data-tabledynamic {
  overflow: visible !important;
}

.mdl-data-tabledynamic__title {
  width: 100%;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  color: #000;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: stretch;
  -ms-flex-pack: stretch;
  justify-content: stretch;
  line-height: normal;
  -webkit-perspective-origin: 165px 56px;
  perspective-origin: 165px 56px;
  -webkit-transform-origin: 165px 56px;
  transform-origin: 165px 56px;
  box-sizing: border-box;
  display: block;
  padding-left: 25px;
  padding-bottom: 10px;
  padding-top: 30px;
}

.mdl-data-tabledynamic {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  font-size: 16px;
  font-weight: 400;
  overflow: hidden;
  width: 330px;
  z-index: 1;
  position: relative;
  background: #fff;
  border-radius: 2px;
  box-sizing: border-box;
}

.mdl-data-tabledynamic__title-text,
.h2.mdl-data-tabledynamic__title-text {
  float: left;
  font-weight: 400 !important;
}

.mdl-data-tabledynamic__title-text {
  -webkit-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end;
  color: inherit;
  display: block;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  font-size: 24px;
  font-weight: 300;
  line-height: normal;
  overflow: hidden;
  -webkit-transform-origin: 149px 48px;
  transform-origin: 149px 48px;
  margin: 0;
}

.mdl-data-tabledynamic__actions {
  float: right;
  margin-right: 12px;
}

.mdl-data-tabledynamic__actions .mdl-button {
  min-width: 45px;
  padding: 0 10px;
}

.mdl-data-tabledynamic__content {
  overflow: visible !important;
  color: rgba(0, 0, 0, .54);
  font-size: 1rem;
  line-height: 18px;
  padding: 0;
  width: 100%;
}

.mdl-data-tabledynamic__content .mdl-data-table {
  width: 100%;
  border-left: 0;
  border-right: 0;
}

.mdl-data-tabledynamic__content .mdl-data-table {
  box-shadow: none !important;
}

.mdl-data-table .mdl-data-table__label {
  font-weight: 500;
  color: #AFAFAF;
}

.mdl-data-table tr.is-selected .mdl-data-table__label {
  font-weight: 500;
  color: rgba(0, 0, 0, .45) !important;
}

.mdl-data-table__row--selectable tr:hover,
.mdl-data-table__row--selectable tr:active,
.mdl-data-table__row--selectable tr.active {
  background: #f5f5f5;
}

.mdl-dialog__addContent .mdl-dialog__actions {
  padding-top: 0;
}

.mdl-dialog__addContent {
  text-align: left;
  width: 320px;
  height: 180px;
  display: block;
  position: absolute;
  background: #fafafa;
  margin-top: -14px;
  z-index: 99;
}

.mdl-dialog__addContent .mdl-dialog__title {
  color: #1f1f1f !important;
  font-size: 22px !important;
  font-weight: 500;
}

.mdl-dialog__addContent .mdl-dialog__content {
  padding-top: 0;
  padding-bottom: 0;
}

.add-table-content:hover {
  color: #60c7cd;
  cursor: pointer;
}

main#ty-container > .mdl-grid:first-child {
  width: 1000px !important;
  max-width: inherit;
}

main#ty-container #addCustomerAction {
  width: 100% !important;
  max-width: inherit;
}

styles

<link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel="stylesheet" />
<link href="https://code.getmdl.io/1.1.3/material.cyan-light_blue.min.css" rel="stylesheet" />