Mozaic

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>

DataTable

Introduction

Import

Usage

Variations

Header without active filters