DataTable
Introduction
The DataTable footer is placed at the bottom of the component table and contains the elements that allow you to manage the navigation and pagination of the table.
Import
Import the settings and the datatable scss
files.
@import 'settings-tools/all-settings';@import 'components/c.datatable'; // mandatory@import 'components/c.datatable-tools'; // mandatory@import 'components/c.datatable-footer'; // import when using the DataTable with a footer
Usage
The creation of a DataTable with Footer component is done using the following HTML structure:
<div class="mc-datatable"> <div class="mc-datatable__container"> <!-- DATATABLE MAIN --> <div class="mc-datatable__main"> <table class="mc-datatable__table"> <thead> <tr> <!-- Insert here all cells of your table head --> </tr> </thead> <tbody> <!-- Insert here all rows and cells of your table contents --> </tbody> </table> </div> <!-- DATATABLE FOOTER --> <div class="mc-datatable__footer"> <div class="mc-datatable__select"> <label for="selectRows" class="mc-datatable__select-label"> Rows per page </label> <select id="selectRows" class="mc-select mc-select--s"> <option value="option1">1</option> <option value="option2">10</option> <option value="option3">...</option> <option value="option4" selected>999</option> </select> </div> <div class="mc-datatable__count"> <strong>1-999</strong> of <strong>9999 items</strong> </div> <div class="mc-datatable__pagination"> <!-- Insert here the Pagination component --> </div> </div> </div></div>