DataTable
Introduction
The DataTable header is positioned at the top of the component table and contains two content areas:
-
The first area is the topbar area, in which you can insert different edit and/or action buttons.
-
The second area is the filters area, in which you should only insert filters that are active on 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-header'; // import when using the DataTable with a header
Usage
The creation of a DataTable with Header component is done using the following HTML structure:
<div class="mc-datatable"> <!-- DATATABLE HEADER --> <div class="mc-datatable__header"> <!-- Datatable Topbar --> <div class="mc-datatable__topbar"> <div class="mc-datatable__topbar-edition"> <!-- Insert here the "Edit selection" button and/or the "Download selection" button --> </div> <div class="mc-datatable__topbar-actions"> <!-- Insert here all your actions buttons --> </div> </div> <!-- Datatable Filters --> <div class="mc-datatable__filters"> <!-- Insert here all your active filters --> </div> </div> <!-- DATATABLE CONTENT --> <div class="mc-datatable__container"> <div class="mc-datatable__main"> <!-- Datatable table --> <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> </div></div>