DataTable

Introduction

The Expanded DataTable allows you to insert nested tables into your main table.

Rules for use

The Expanded DataTable can only be used in accordance with the following rules:

A column containing an expand button must always be present in the rows of your table
The icon of the expand button should always reflect the open or closed status of the line concerned
Nested tables must never contain checkbox elements.

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-subtable'; // import when using the Expanded DataTable

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">
    <div class="mc-datatable__main">
      <table class="mc-datatable__table">
        <thead>
          <tr>
            <!-- Insert here all cells of your table head  -->
          </tr>
        </thead>
        <tbody>
          <tr class="mc-datatable__row-parent">
            <!-- 
              Insert inside the "parent row" all cells needed.
              A cell containing an expand button must always be present in the row
            -->
          </tr>
          <tr
            class="mc-datatable__row-expandable mc-datatable__row-expandable--offset-2"
          >
            <td colspan="10">
              <div class="mc-datatable__row-inner">
                <table class="mc-datatable__subtable">
                  <thead>
                    <tr>
                      <!-- Insert here all cells of your nested table head  -->
                    </tr>
                  </thead>
                  <tbody>
                    <!-- Insert here all rows and cells of your nested table contents  -->
                  </tbody>
                </table>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>