Material как WebComponents

<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">

<div class="mdc-text-field">
   <input type="text" id="my-text-field" class="mdc-text-field__input">
   <label class="mdc-floating-label" for="my-text-field">Label</label>
   <div class="mdc-line-ripple"></div>
</div>
<div class="mdc-data-table">
   <table class="mdc-data-table__table" aria-label="Dessert calories">
       <thead>
       <tr class="mdc-data-table__header-row">
           <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Dessert</th>
           <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Carbs (g)</th>
           <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Protein (g)</th>
           <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Comments</th>
       </tr>
       </thead>
       <tbody class="mdc-data-table__content">
       <tr class="mdc-data-table__row">
           <td class="mdc-data-table__cell">Frozen yogurt</td>
           <td class="mdc-data-table__cell mdc-data-table__cell--numeric">24</td>
           <td class="mdc-data-table__cell mdc-data-table__cell--numeric">4.0</td>
           <td class="mdc-data-table__cell">Super tasty</td>
       </tr>
       <tr class="mdc-data-table__row">
           <td class="mdc-data-table__cell">Ice cream sandwich</td>
           <td class="mdc-data-table__cell mdc-data-table__cell--numeric">37</td>
           <td class="mdc-data-table__cell mdc-data-table__cell--numeric">4.3</td>
           <td class="mdc-data-table__cell">I like ice cream more</td>
       </tr>
       <tr class="mdc-data-table__row">
           <td class="mdc-data-table__cell">Eclair</td>
           <td class="mdc-data-table__cell mdc-data-table__cell--numeric">24</td>
           <td class="mdc-data-table__cell mdc-data-table__cell--numeric">6.0</td>
           <td class="mdc-data-table__cell">New filing flavor</td>
       </tr>
       </tbody>
   </table>
</div>

<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.js"></script>

<script type="module">
   let filterField = mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));

   const DATATABLE_COLUMNS_SELECTOR = `.mdc-data-table thead`,
       DATATABLE_DATA_SELECTOR = `tbody.mdc-data-table__content`,
       DATATABLE_SORTABLE_SELECTOR = `.mdc-data-table--sortable`,
       DATATABLE_COLUMNS_NUMERIC = `mdc-data-table--numeric`,
       DATATABLE_COLUMNS_SORTABLE = `mdc-data-table--sortable`,
       DATATABLE_COLUMNS_SORT_ASC = `mdc-data-table--sort-asc`,
       DATATABLE_COLUMNS_SORT_DESC = `mdc-data-table--sort-desc`;

   class MyDataTable extends mdc.dataTable.MDCDataTable {

       get data() {
           return this.foundation_.data;
       }

       set data(data) {
           if (Array.isArray(data)) {
               this.foundation_.setData(data);
           } else {
               throw new Error(`Expected an array`);
           }
       }

       layout() {
           if (this.foundation_.layout) {
               this.foundation_.layout();
           }
       }

       getDefaultFoundation() {

           const getHeaderRow = () => {
               let thead = this.root_.querySelector(DATATABLE_COLUMNS_SELECTOR),
                   row = thead.querySelector(`tr`);
               if (!row) {
                   row = document.createElement(`tr`);
                   row.setAttribute(`role`, `rowheader`);
                   thead.appendChild(row);
               }
               return row;
           },
           getHeaderColumns = () => {
               return getHeaderRow().querySelectorAll(`th`);
           },
           emptyHeaderColumns = () => {
               getHeaderRow().remove();
           },
           getData = () => {
               return this.root_.querySelector(DATATABLE_DATA_SELECTOR);
           },
           getDataRows = () => {
               return getData().querySelectorAll(`tr`);
           },
           emptyData = () => {
               Array.prototype.map.call(getDataRows(), row => {
                   row.remove();
               });
           };

           return new MyDataTableFoundation({
               registerSortClickHandler: (handler) => this.root_.addEventListener(`click`, handler),
               deregisterSortClickHandler: (handler) => this.root_.removeEventListener(`click`, handler),
               // Reads the columns list
               readColumns: () => {
                   var cols = getHeaderColumns();
                   return Array.prototype.map.call(cols, col => {
                       return {
                           text: col.textContent,
                           description: col.getAttribute(`aria-label`),
                           numeric: col.classList.contains(DATATABLE_COLUMNS_NUMERIC),
                           sortable: col.classList.contains(DATATABLE_COLUMNS_SORTABLE),
                           sort: col.classList.contains(DATATABLE_COLUMNS_SORT_ASC) ? 1 : col.classList.contains(DATATABLE_COLUMNS_SORT_DESC) ? -1 : 0
                       };
                   });
               },
               // Edit the columns
               setColumns: (cols) => {
                   emptyHeaderColumns();
                   let row = getHeaderRow();
                   cols.forEach(col => {
                       let column = document.createElement(`th`);
                       column.setAttribute(`role`, `columnheader`);
                       // Add text
                       column.textContent = col.text;
                       column.setAttribute(`aria-label`, col.description);
                       // Numeric
                       if (col.numeric) {
                           column.classList.add(DATATABLE_COLUMNS_NUMERIC);
                       }
                       // Sort
                       if (col.sortable) {
                           let ariaSort = `none`;
                           column.classList.add(DATATABLE_COLUMNS_SORTABLE);
                           if (col.sort === `asc` || col.sort === 1) {
                               ariaSort = `ascending`;
                               column.classList.add(DATATABLE_COLUMNS_SORT_ASC);
                           } else if (col.sort === `desc` || col.sort === -1) {
                               ariaSort = `descending`;
                               column.classList.add(DATATABLE_COLUMNS_SORT_DESC);
                           }
                           column.setAttribute(`aria-sort`, ariaSort);
                       }
                       // Add to cols
                       row.appendChild(column);
                   });
               },
               // Read data
               readData: () => {
                   var rows = getDataRows();
                   return Array.prototype.map.call(rows, row => {
                       let cells = row.querySelectorAll(`td`);
                       return Array.prototype.map.call(cells, cell => cell.textContent);
                   });
               },
               // Edit the data
               setData: (data) => {
                   emptyData();
                   let element = getData();
                   // Sorting data
                   let column = this.columns.find(el => el.sort);
                   if (column) {
                       let index = this.columns.indexOf(column);
                       if (column.sortable) {
                           let f = (params => {
                               if (params.sort === `desc` || params.sort === -1) {
                                   return params.numeric ? (a, b) => b[index] - a[index] : (a, b) => b[index].localeCompare(a[index]);
                               } else {
                                   return params.numeric ? (a, b) => a[index] - b[index] : (a, b) => a[index].localeCompare(b[index]);
                               }
                           })(column);
                           data.sort(f);
                       }
                   }
                   // For each data
                   data.forEach(d => {
                       // Create a new row
                       let row = document.createElement(`tr`);
                       row.setAttribute(`role`, `row`);
                       // For each values
                       d.forEach((val, i) => {
                           // Create a new cell
                           let cell = document.createElement(`td`);
                           cell.setAttribute(`role`, `gridcell`);
                           // Add numeric if needed
                           if (this.columns[i].numeric) {
                               cell.classList.add(DATATABLE_COLUMNS_NUMERIC);
                           }
                           // Add content
                           if (val instanceof Element) {
                               cell.appendChild(val);
                           } else {
                               cell.textContent = val;
                           }
                           row.appendChild(cell);
                       });
                       // Add to cols
                       element.appendChild(row);
                   });
               },
               // Redraw data table after edit
               redraw: () => {
                   this.foundation_.adapter_.setColumns(this.columns);
                   this.foundation_.adapter_.setData(this.data);
               }
           });
       }
   }

   mdc.autoInit.register(`MDCDataTable`, MyDataTable);

   class MyDataTableFoundation extends mdc.base.MDCFoundation {

       static get defaultAdapter() {
           return {
               registerSortClickHandler: ( /* handler: EventListener */ ) => {},
               deregisterSortClickHandler: ( /* handler: EventListener */ ) => {},
               readColumns: () => {},
               setColumns: () => {},
               readData: () => {},
               setData: () => {},
               redraw: () => {}
           };
       }

       constructor(adapter) {
           super(Object.assign(MyDataTableFoundation.defaultAdapter, adapter));
           // Attributes
           this.columns = [];
           this.data = [];
           // Methods
           // On sort
           this.sortClickHandler_ = (e) => {
               let target = e.target.closest(DATATABLE_SORTABLE_SELECTOR);
               if (target) {
                   let index = Array.prototype.indexOf.call(target.parentElement.children, target);
                   this.columns.forEach((col, i) => {
                       if (i !== index) {
                           col.sort = 0;
                       } else {
                           if (col.sort === `asc` || col.sort === 1) {
                               col.sort = `desc`;
                           } else {
                               col.sort = `asc`;
                           }
                       }
                   });
                   this.adapter_.redraw();
               }
           };
       }

       init() {
           // Read columns
           this.columns = this.adapter_.readColumns();
           // Read data
           this.data = this.adapter_.readData();
           // Click
           this.adapter_.registerSortClickHandler(this.sortClickHandler_);
       }

       destroy() {
           // Click
           this.adapter_.deregisterSortClickHandler(this.sortClickHandler_);
       }

       setColumns(cols) {
           this.adapter_.setColumns(cols);
       }

       setData(data) {
           this.adapter_.setData(data);
       }

   }

   let dataTable = new MyDataTable(document.querySelector('.mdc-data-table'));

</script>