I am new to Javascript. I am trying to use MDC Web in my project. I was able to successfully add components such as topappbar, menu, sidenav etc. But DataTable was a complete mess for me. The explanations on the DataTable GitHub page are not helpful at all for beginners in javascript. (https://github.com/material-components/material-components-web/tree/master/packages/mdc-data-table)
I did some research to find an example I could work on, but couldn't find a working example. (Here, Codepen, GitHub Issues etc.)
Exactly what i want;
- Pagination
- Sorting
- Progress Indicator for Pagination
I have to collect them all in one table. Here is the codepen link: https://codepen.io/lastofdead/pen/WNJXYRe
var tables = document.querySelectorAll('.mdc-data-table')
Array.prototype.forEach.call(tables, (table) => new mdc.dataTable.MDCDataTable(table));<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mdc-data-table">
<div class="mdc-data-table__table-container">
<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 mdc-data-table__header-cell--with-sort"
role="columnheader"
scope="col"
aria-sort="none"
data-column-id="dessert"
>
<div class="mdc-data-table__header-cell-wrapper">
<div class="mdc-data-table__header-cell-label">
Dessert
</div>
<button class="mdc-icon-button material-icons mdc-data-table__sort-icon-button"
aria-label="Sort by dessert" aria-describedby="dessert-status-label">arrow_upward</button>
<div class="mdc-data-table__sort-status-label" aria-hidden="true" id="dessert-status-label">
</div>
</div>
</th>
<th
class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric mdc-data-table__header-cell--with-sort mdc-data-table__header-cell--sorted"
role="columnheader"
scope="col"
aria-sort="ascending"
data-column-id="carbs"
>
<div class="mdc-data-table__header-cell-wrapper">
<button class="mdc-icon-button material-icons mdc-data-table__sort-icon-button"
aria-label="Sort by carbs" aria-describedby="carbs-status-label">arrow_upward</button>
<div class="mdc-data-table__header-cell-label">
Carbs (g)
</div>
<div class="mdc-data-table__sort-status-label" aria-hidden="true" id="carbs-status-label"></div>
</div>
</th>
<th
class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric mdc-data-table__header-cell--with-sort"
role="columnheader"
scope="col"
aria-sort="none"
data-column-id="protein"
>
<div class="mdc-data-table__header-cell-wrapper">
<button class="mdc-icon-button material-icons mdc-data-table__sort-icon-button"
aria-label="Sort by protein" aria-describedby="protein-status-label">arrow_upward</button>
<div class="mdc-data-table__header-cell-label">
Protein (g)
</div>
<div class="mdc-data-table__sort-status-label" aria-hidden="true" id="protein-status-label"></div>
</div>
</th>
<th
class="mdc-data-table__header-cell"
role="columnheader"
scope="col"
data-column-id="comments"
>
Comments
</th>
</tr>
</thead>
<tbody class="mdc-data-table__content">
<tr class="mdc-data-table__row">
<th class="mdc-data-table__cell" scope="row">Frozen yogurt</th>
<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">
<th class="mdc-data-table__cell" scope="row">Ice cream sandwich</th>
<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.33333333333</td>
<td class="mdc-data-table__cell">I like ice cream more</td>
</tr>
<tr class="mdc-data-table__row">
<th class="mdc-data-table__cell" scope="row">Ice cream sandwich</th>
<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.33333333333</td>
<td class="mdc-data-table__cell">I like ice cream more</td>
</tr>
<tr class="mdc-data-table__row">
<th class="mdc-data-table__cell" scope="row">Ice cream sandwich</th>
<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.33333333333</td>
<td class="mdc-data-table__cell">I like ice cream more</td>
</tr>
<tr class="mdc-data-table__row">
<th class="mdc-data-table__cell" scope="row">Frozen yogurt</th>
<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">
<th class="mdc-data-table__cell" scope="row">Ice cream sandwich</th>
<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.33333333333</td>
<td class="mdc-data-table__cell">I like ice cream more</td>
</tr>
<tr class="mdc-data-table__row">
<th class="mdc-data-table__cell" scope="row">Ice cream sandwich</th>
<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.33333333333</td>
<td class="mdc-data-table__cell">I like ice cream more</td>
</tr>
<tr class="mdc-data-table__row">
<th class="mdc-data-table__cell" scope="row">Ice cream sandwich</th>
<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.33333333333</td>
<td class="mdc-data-table__cell">I like ice cream more</td>
</tr>
<tr class="mdc-data-table__row">
<th class="mdc-data-table__cell" scope="row">Frozen yogurt</th>
<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">
<th class="mdc-data-table__cell" scope="row">Ice cream sandwich</th>
<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.33333333333</td>
<td class="mdc-data-table__cell">I like ice cream more</td>
</tr>
<tr class="mdc-data-table__row">
<th class="mdc-data-table__cell" scope="row">Ice cream sandwich</th>
<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.33333333333</td>
<td class="mdc-data-table__cell">I like ice cream more</td>
</tr>
<tr class="mdc-data-table__row">
<th class="mdc-data-table__cell" scope="row">Ice cream sandwich</th>
<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.33333333333</td>
<td class="mdc-data-table__cell">I like ice cream more</td>
</tr>
<tr class="mdc-data-table__row">
<th class="mdc-data-table__cell" scope="row">Frozen yogurt</th>
<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">
<th class="mdc-data-table__cell" scope="row">Ice cream sandwich</th>
<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.33333333333</td>
<td class="mdc-data-table__cell">I like ice cream more</td>
</tr>
<tr class="mdc-data-table__row">
<th class="mdc-data-table__cell" scope="row">Ice cream sandwich</th>
<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.33333333333</td>
<td class="mdc-data-table__cell">I like ice cream more</td>
</tr>
<tr class="mdc-data-table__row">
<th class="mdc-data-table__cell" scope="row">Ice cream sandwich</th>
<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.33333333333</td>
<td class="mdc-data-table__cell">I like ice cream more</td>
</tr>
<tr class="mdc-data-table__row">
<th class="mdc-data-table__cell" scope="row">Eclair</th>
<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>
<div class="mdc-data-table__pagination">
<div class="mdc-data-table__pagination-trailing">
<div class="mdc-data-table__pagination-rows-per-page">
<div class="mdc-data-table__pagination-rows-per-page-label">
Rows per page
</div>
<div class="mdc-select mdc-select--outlined mdc-select--no-label mdc-data-table__pagination-rows-per-page-select">
<div class="mdc-select__anchor" role="button" aria-haspopup="listbox"
aria-labelledby="demo-pagination-select" tabindex="0">
<span class="mdc-select__selected-text-container">
<span id="demo-pagination-select" class="mdc-select__selected-text">10</span>
</span>
<span class="mdc-select__dropdown-icon">
<svg
class="mdc-select__dropdown-icon-graphic"
viewBox="7 10 10 5">
<polygon
class="mdc-select__dropdown-icon-inactive"
stroke="none"
fill-rule="evenodd"
points="7 10 12 15 17 10">
</polygon>
<polygon
class="mdc-select__dropdown-icon-active"
stroke="none"
fill-rule="evenodd"
points="7 15 12 10 17 15">
</polygon>
</svg>
</span>
<span class="mdc-notched-outline mdc-notched-outline--notched">
<span class="mdc-notched-outline__leading"></span>
<span class="mdc-notched-outline__trailing"></span>
</span>
</div>
<div class="mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth" role="listbox">
<ul class="mdc-list">
<li class="mdc-select__option mdc-select__one-line-option mdc-list-item mdc-list-item--selected mdc-list-item--with-one-line"
aria-selected="true" role="option" data-value="10">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__content">
<span class="mdc-list-item__primary-text">10</span>
</span>
</li>
<li class="mdc-select__option mdc-select__one-line-option mdc-list-item mdc-list-item--with-one-line"
role="option" data-value="25">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__content">
<span class="mdc-list-item__primary-text">25</span>
</span>
</li>
<li class="mdc-select__option mdc-select__one-line-option mdc-list-item mdc-list-item--with-one-line"
role="option" data-value="100">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__content">
<span class="mdc-list-item__primary-text">100</span>
</span>
</li>
</ul>
</div>
</div>
</div>
<div class="mdc-data-table__pagination-navigation">
<div class="mdc-data-table__pagination-total">
1‑10 of 100
</div>
<button class="mdc-icon-button material-icons mdc-data-table__pagination-button" data-first-page="true" disabled>
<div class="mdc-button__icon">first_page</div>
</button>
<button class="mdc-icon-button material-icons mdc-data-table__pagination-button" data-prev-page="true" disabled>
<div class="mdc-button__icon">chevron_left</div>
</button>
<button class="mdc-icon-button material-icons mdc-data-table__pagination-button" data-next-page="true">
<div class="mdc-button__icon">chevron_right</div>
</button>
<button class="mdc-icon-button material-icons mdc-data-table__pagination-button" data-last-page="true">
<div class="mdc-button__icon">last_page</div>
</button>
</div>
</div>
</div>
<div class="mdc-data-table__progress-indicator">
<div class="mdc-data-table__scrim"></div>
<div class="mdc-linear-progress mdc-linear-progress--indeterminate mdc-data-table__linear-progress" role="progressbar" aria-label="Data is being loaded...">
<div class="mdc-linear-progress__buffer">
<div class="mdc-linear-progress__buffer-bar"></div>
<div class="mdc-linear-progress__buffer-dots"></div>
</div>
<div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
<span class="mdc-linear-progress__bar-inner"></span>
</div>
<div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
<span class="mdc-linear-progress__bar-inner"></span>
</div>
</div>
</div>
</div>