DataTable

Usage
Code
DataTable header
DataTable footer
Expanded 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>

Variations