Basic example Table alignment Striped rows Bordered table Hover rows Condensed table Contextual classes Data table Data table with custom search bar Data table with filter tags Data table with row grouping Table with no data to display

UI Organisms

Table

1.1 Basic example

Column 1 Column 2
Row 1 Data 1 Row 1 Data 2
Row 1 Data 1 Row 1 Data 2
Row 1 Data 1 Row 1 Data 2
Row 2 Data 1 Row 2 Data 2 
<div class="amui-l-table-responsive table-responsive">
  <table class="amui-o-table table responsive-card-table">
    <caption class="amui-o-table__caption">

    </caption>
    <thead class="amui-o-table__header">
      <tr class="amui-o-table__header-row is--align-middle">
        <th scope="col" class="amui-o-table__header-col">Column 1</th>
        <th scope="col" class="amui-o-table__header-col">Column 2</th>
      </tr>
    </thead>
    <tbody class="amui-o-table__body">
      <tr class="amui-o-table__body-row is--align-middle">
        <th scope="row" class="amui-o-table__body-col" data-label="title">Row 1 Data 1</th>
        <td class="amui-o-table__body-col" data-label="title">Row 1 Data 2</td>
      </tr>
      <tr class="amui-o-table__body-row is--align-middle">
        <th scope="row" class="amui-o-table__body-col" data-label="title">Row 1 Data 1</th>
        <td class="amui-o-table__body-col" data-label="title">Row 1 Data 2</td>
      </tr>
      <tr class="amui-o-table__body-row is--align-middle">
        <th scope="row" class="amui-o-table__body-col" data-label="title">Row 1 Data 1</th>
        <td class="amui-o-table__body-col" data-label="title">Row 1 Data 2</td>
      </tr>
      <tr class="amui-o-table__body-row is--align-middle">
        <th scope="row" class="amui-o-table__body-col" data-label="title">Row 2 Data 1</th>
        <td class="amui-o-table__body-col" data-label="title">Row 2 Data 2</td>
      </tr>
    </tbody>
    <tfoot class="amui-o-table__footer">
      <tr class="amui-o-table__footer-row is--align-middle"></tr>
    </tfoot>
  </table>  <!-- Organism Table -->
</div>

1.2 Table alignment

Column 1 Column 2
Row 1 Data 1
Row 1 Data 2		 Top alignment
Row 1 Data 1
Row 1 Data 2		 Middle alignment
Row 1 Data 1
Row 1 Data 2		 Bottom alignment 
<div class="amui-l-table-responsive table-responsive">
  <table class="amui-o-table table responsive-card-table">
    <caption class="amui-o-table__caption">

    </caption>
    <thead class="amui-o-table__header">
      <tr class="amui-o-table__header__row">
        <th scope="col" class="amui-o-table__header-col">Column 1</th>
        <th scope="col" class="amui-o-table__header-col">Column 2</th>
      </tr>
    </thead>
    <tbody class="amui-o-table__body">
      <tr class="amui-o-table__body-row is--align-top">
        <th scope="row" class="amui-o-table__body-col" data-label="title">Row 1 Data 1<br>Row 1 Data 2</th>
        <td class="amui-o-table__body-col" data-label="title">Top alignment</td>
      </tr>
      <tr class="amui-o-table__body-row is--align-middle">
        <th scope="row"class="amui-o-table__body-col" data-label="title">Row 1 Data 1<br>Row 1 Data 2</th>
        <td class="amui-o-table__body-col" data-label="title">Middle alignment</td>
      </tr>
      <tr class="amui-o-table__body-row is--align-bottom">
        <th scope="row" class="amui-o-table__body-col" data-label="title">Row 1 Data 1<br>Row 1 Data 2</th>
        <td class="amui-o-table__body-col" data-label="title">Bottom alignment</td>
      </tr>
    </tbody>
    <tfoot class="amui-o-table__footer">
      <tr class="amui-o-table__footer-row"></tr>
    </tfoot>
  </table>  <!-- Organism table -->
</div>

1.3 Striped rows

Column 1 Column 2
Row 1 Data 1 Row 1 Data 2
Row 1 Data 1 Row 1 Data 2
Row 1 Data 1 Row 1 Data 2
Row 2 Data 1 Row 2 Data 2 
<div class="amui-l-table-responsive table-responsive">
  <table class="amui-o-table table is--striped responsive-card-table">
    <caption class="amui-o-table__caption">

    </caption>
    <thead class="amui-o-table__header">
    <tr class="amui-o-table__header-row is--align-middle">
      <th scope="col" class="amui-o-table__header-col">Column 1</th>
      <th scope="col" class="amui-o-table__header-col">Column 2</th>
    </tr>
    </thead>
    <tbody class="amui-o-table__body">
    <tr class="amui-o-table__body-row is--align-middle">
      <th scope="row" class="amui-o-table__body-col" data-label="title">Row 1 Data 1</th>
      <td class="amui-o-table__body-col" data-label="title">Row 1 Data 2</td>
    </tr>
    <tr class="amui-o-table__body-row is--align-middle">
      <th scope="row" class="amui-o-table__body-col" data-label="title">Row 1 Data 1</th>
      <td class="amui-o-table__body-col" data-label="title">Row 1 Data 2</td>
    </tr>
    <tr class="amui-o-table__body-row is--align-middle">
      <th scope="row" class="amui-o-table__body-col" data-label="title">Row 1 Data 1</th>
      <td class="amui-o-table__body-col" data-label="title">Row 1 Data 2</td>
    </tr>
    <tr class="amui-o-table__body-row is--align-middle">
      <th scope="row" class="amui-o-table__body-col" data-label="title">Row 2 Data 1</th>
      <td class="amui-o-table__body-col" data-label="title">Row 2 Data 2</td>
    </tr>
    </tbody>
    <tfoot class="amui-o-table__footer">
    <tr class="amui-o-table__footer-row is--align-middle"></tr>
    </tfoot>
  </table>  <!-- Organism table -->
</div>

1.4 Bordered table

Column 1 Column 2
Row 1 Data 1 Row 1 Data 2
Row 1 Data 1 Row 1 Data 2
Row 1 Data 1 Row 1 Data 2
Row 2 Data 1 Row 2 Data 2 
<div class="amui-l-table-responsive table-responsive">
  <table class="amui-o-table table is--bordered responsive-card-table">
    <caption class="amui-o-table__caption">

    </caption>
    <thead class="amui-o-table__header">
      <tr class="amui-o-table__header-row is--align-middle">
        <th scope="col" class="amui-o-table__header-col">Column 1</th>
        <th scope="col" class="amui-o-table__header-col">Column 2</th>
      </tr>
    </thead>
    <tbody class="amui-o-table__body">
      <tr class="amui-o-table__body__row is--align-middle">
        <th scope="row" class="amui-o-table__body-col" data-label="title">Row 1 Data 1</th>
        <td class="amui-o-table__body-col" data-label="title">Row 1 Data 2</td>
      </tr>
      <tr class="amui-o-table__body__row is--align-middle">
        <th scope="row" class="amui-o-table__body-col" data-label="title">Row 1 Data 1</th>
        <td class="amui-o-table__body-col" data-label="title">Row 1 Data 2</td>
      </tr>
      <tr class="amui-o-table__body__row is--align-middle">
        <th scope="row" class="amui-o-table__body-col" data-label="title">Row 1 Data 1</th>
        <td class="amui-o-table__body-col" data-label="title">Row 1 Data 2</td>
      </tr>
      <tr class="amui-o-table__body__row is--align-middle">
        <th scope="row" class="amui-o-table__body-col" data-label="title">Row 2 Data 1</th>
        <td class="amui-o-table__body-col" data-label="title">Row 2 Data 2</td>
      </tr>
    </tbody>
    <tfoot class="amui-o-table__footer">
      <tr class="amui-o-table__footer-row is--align-middle"></tr>
    </tfoot>
  </table>  <!-- Organism table -->
</div>

1.5 Hover rows

Column 1 Column 2
Row 1 Data 1 Row 1 Data 2
Row 1 Data 1 Row 1 Data 2
Row 1 Data 1 Row 1 Data 2
Row 2 Data 1 Row 2 Data 2 
<div class="amui-l-table-responsive table-responsive">
  <table class="amui-o-table table is--hover responsive-card-table">
    <caption class="amui-o-table__caption">

    </caption>
    <thead class="amui-o-table__header">
    <tr class="amui-o-table__header-row is--align-middle">
      <th scope="col" class="amui-o-table__header-col">Column 1</th>
      <th scope="col" class="amui-o-table__header-col">Column 2</th>
    </tr>
    </thead>
    <tbody class="amui-o-table__body">
    <tr class="amui-o-table__body-row is--align-middle">
      <th scope="row" class="amui-o-table__body-col" data-label="title">Row 1 Data 1</th>
      <td class="amui-o-table__body-col" data-label="title">Row 1 Data 2</td>
    </tr>
    <tr class="amui-o-table__body-row is--align-middle">
      <th scope="row" class="amui-o-table__body-col" data-label="title">Row 1 Data 1</th>
      <td class="amui-o-table__body-col" data-label="title">Row 1 Data 2</td>
    </tr>
    <tr class="amui-o-table__body-row is--align-middle">
      <th scope="row" class="amui-o-table__body-col" data-label="title">Row 1 Data 1</th>
      <td class="amui-o-table__body-col" data-label="title">Row 1 Data 2</td>
    </tr>
    <tr class="amui-o-table__body-row is--align-middle">
      <th scope="row" class="amui-o-table__body-col" data-label="title">Row 2 Data 1</th>
      <td class="amui-o-table__body-col" data-label="title">Row 2 Data 2</td>
    </tr>
    </tbody>
    <tfoot class="amui-o-table__footer">
    <tr class="amui-o-table__footer-row is--align-middle"></tr>
    </tfoot>
  </table>  <!-- Organism table -->
</div>

1.6 Condensed table

Column 1 Column 2
Row 1 Data 1 Row 1 Data 2
Row 1 Data 1 Row 1 Data 2
Row 1 Data 1 Row 1 Data 2
Row 2 Data 1 Row 2 Data 2 
<div class="amui-l-table-responsive table-responsive">
  <table class="amui-o-table table is--condensed responsive-card-table">
    <caption class="amui-o-table__caption">

    </caption>
    <thead class="amui-o-table__header">
      <tr class="amui-o-table__header__row is--align-middle">
        <th scope="col" class="amui-o-table__header-col">Column 1</th>
        <th scope="col" class="amui-o-table__header-col">Column 2</th>
      </tr>
    </thead>
    <tbody class="amui-o-table__body">
      <tr class="amui-o-table__body__row is--align-middle">
        <th scope="row" class="amui-o-table__body-col" data-label="title">Row 1 Data 1</th>
        <td class="amui-o-table__body-col" data-label="title">Row 1 Data 2</td>
      </tr>
      <tr class="amui-o-table__body__row is--align-middle">
        <th scope="row" class="amui-o-table__body-col" data-label="title">Row 1 Data 1</th>
        <td class="amui-o-table__body-col" data-label="title">Row 1 Data 2</td>
      </tr>
      <tr class="amui-o-table__body__row is--align-middle">
        <th scope="row" class="amui-o-table__body-col" data-label="title">Row 1 Data 1</th>
        <td class="amui-o-table__body-col" data-label="title">Row 1 Data 2</td>
      </tr>
      <tr class="amui-o-table__body__row is--align-middle">
        <th scope="row" class="amui-o-table__body-col" data-label="title">Row 2 Data 1</th>
        <td class="amui-o-table__body-col" data-label="title">Row 2 Data 2</td>
      </tr>
    </tbody>
    <tfoot class="amui-o-table__footer">
      <tr class="amui-o-table__footer-row is--align-middle"></tr>
    </tfoot>
  </table>  <!-- Organism table -->
</div>

1.7 Contextual classes

Column 1 Column 2
Row 1 Data 1 Row 1 Data 2
Row 1 Data 1 Row 1 Data 2
Row 1 Data 1 Row 1 Data 2
Row 2 Data 1 Row 2 Data 2 
<div class="amui-l-table-responsive table-responsive">
  <table class="amui-o-table table responsive-card-table">
    <caption class="amui-o-table__caption">

    </caption>
    <thead class="amui-o-table__header">
      <tr class="amui-o-table__header__row is--align-middle">
        <th scope="col" class="amui-o-table__header-col">Column 1</th>
        <th scope="col" class="amui-o-table__header-col">Column 2</th>
      </tr>
    </thead>
    <tbody class="amui-o-table__body">
      <tr class="amui-o-table__body-row is--align-middle is--success">
        <th scope="row" class="amui-o-table__body-col" data-label="title">Row 1 Data 1</th>
        <td class="amui-o-table__body-col" data-label="title">Row 1 Data 2</td>
      </tr>
      <tr class="amui-o-table__body-row is--align-middle is--warning">
        <th scope="row" class="amui-o-table__body-col" data-label="title">Row 1 Data 1</th>
        <td class="amui-o-table__body-col" data-label="title">Row 1 Data 2</td>
      </tr>
      <tr class="amui-o-table__body-row is--align-middle is--danger">
        <th scope="row" class="amui-o-table__body-col" data-label="title">Row 1 Data 1</th>
        <td class="amui-o-table__body-col" data-label="title">Row 1 Data 2</td>
      </tr>
      <tr class="amui-o-table__body-row is--align-middle is--highlight">
        <th scope="row" class="amui-o-table__body-col" data-label="title">Row 2 Data 1</th>
        <td class="amui-o-table__body-col" data-label="title">Row 2 Data 2</td>
      </tr>
    </tbody>
    <tfoot class="amui-o-table__footer">
      <tr class="amui-o-table__footer-row is--align-middle"></tr>
    </tfoot>
  </table>  <!-- Organism table -->
</div>

1.8 Data table

Voir la documentation DataTables pour configurer les fonctionnalités de vos tableaux DataTables.

Column 1 Column 2
Row 1 Data 1 Row 1 Data 2
Row 2 Data 1 Row 2 Data 2
Row 3 Data 1 Row 3 Data 2
Row 4 Data 1 Row 4 Data 2
Row 5 Data 1 Row 5 Data 2
Row 6 Data 1 Row 6 Data 2
Row 7 Data 1 Row 7 Data 2
Row 8 Data 1 Row 8 Data 2
Row 9 Data 1 Row 9 Data 2
Row 10 Data 1 Row 10 Data 2
Row 11 Data 1 Row 11 Data 2 
<div class="amui-l-table-responsive table-responsive">
  <table id="myTable" class="amui-o-table table responsive-card-table">
    <!-- <caption class="amui-o-table__caption"></caption> -->
    <thead class="amui-o-table__header">
      <tr class="amui-o-table__header__row is--align-middle">
        <th scope="col" class="amui-o-table__header-col">
          Column 1
          <i class="material-icons"></i>
        </th>
        <th scope="col" class="amui-o-table__header-col">
          Column 2
          <i class="material-icons"></i>
        </th>
      </tr>
    </thead>
    <tbody class="amui-o-table__body">
      <tr class="amui-o-table__body-row is--align-middle">
        <th scope="row" class="amui-o-table__body-col" data-label="title">Row 1 Data 1</th>
        <td class="amui-o-table__body-col" data-label="title">Row 1 Data 2</td>
      </tr>
      <tr class="amui-o-table__body-row is--align-middle">
        <th scope="row" class="amui-o-table__body-col" data-label="title">Row 2 Data 1</th>
        <td class="amui-o-table__body-col" data-label="title">Row 2 Data 2</td>
      </tr>
      <tr class="amui-o-table__body-row is--align-middle">
        <th scope="row" class="amui-o-table__body-col" data-label="title">Row 3 Data 1</th>
        <td class="amui-o-table__body-col" data-label="title">Row 3 Data 2</td>
      </tr>
      <tr class="amui-o-table__body-row is--align-middle">
        <th scope="row" class="amui-o-table__body-col" data-label="title">Row 4 Data 1</th>
        <td class="amui-o-table__body-col" data-label="title">Row 4 Data 2</td>
      </tr>
      <tr class="amui-o-table__body-row is--align-middle">
        <th scope="row" class="amui-o-table__body-col" data-label="title">Row 5 Data 1</th>
        <td class="amui-o-table__body-col" data-label="title">Row 5 Data 2</td>
      </tr>
      <tr class="amui-o-table__body-row is--align-middle">
        <th scope="row" class="amui-o-table__body-col" data-label="title">Row 6 Data 1</th>
        <td class="amui-o-table__body-col" data-label="title">Row 6 Data 2</td>
      </tr>
      <tr class="amui-o-table__body-row is--align-middle">
        <th scope="row" class="amui-o-table__body-col" data-label="title">Row 7 Data 1</th>
        <td class="amui-o-table__body-col" data-label="title">Row 7 Data 2</td>
      </tr>
      <tr class="amui-o-table__body-row is--align-middle">
        <th scope="row" class="amui-o-table__body-col" data-label="title">Row 8 Data 1</th>
        <td class="amui-o-table__body-col" data-label="title">Row 8 Data 2</td>
      </tr>
      <tr class="amui-o-table__body-row is--align-middle">
        <th scope="row" class="amui-o-table__body-col" data-label="title">Row 9 Data 1</th>
        <td class="amui-o-table__body-col" data-label="title">Row 9 Data 2</td>
      </tr>
      <tr class="amui-o-table__body-row is--align-middle">
        <th scope="row" class="amui-o-table__body-col" data-label="title">Row 10 Data 1</th>
        <td class="amui-o-table__body-col" data-label="title">Row 10 Data 2</td>
      </tr>
      <tr class="amui-o-table__body-row is--align-middle">
        <th scope="row" class="amui-o-table__body-col" data-label="title">Row 11 Data 1</th>
        <td class="amui-o-table__body-col" data-label="title">Row 11 Data 2</td>
      </tr>
    </tbody>
    <tfoot class="amui-o-table__footer">
      <tr class="amui-o-table__footer-row is--align-middle"></tr>
    </tfoot>
  </table>  <!-- Organism Table -->
</div>

1.9 Data Table with custom search bar

  • 1. Désactiver la barre de recherche de DataTable en affichant uniquement le tableau par exemple : dom
  • 2. Rechercher dans le tableau en utilisant une barre de recherche personnalisée : search()

Code JS :
$(document).ready( function () {

var table = $('#customTable').DataTable({
"dom": "t"
});

$('#search').keyup(function() {
table.search($(this).val()).draw();
});

});

Nom Etat Description
Row 1 Data 1 Row 1 Data 2 Row 1 Data 2
Row 1 Data 1 Row 1 Data 2 Row 1 Data 2
Row 1 Data 1 Row 1 Data 2 Row 1 Data 2
Row 2 Data 1 Row 2 Data 2 Row 2 Data 2 
<div class="amui-g-grid row">
  <div class="amui-g-grid__item col-xs-12">
    <form class="amui-o-form-group clearfix amui-h-mt-sm amui-h-mr-ms amui-h-mb-xxxs amui-h-ml-sm">
      <div class="amui-g-grid row">
        <div class="amui-g-grid__item col-xs-12">
          <div class="amui-m-form-group form-group">
            <label class="sr-only">Rechercher</label>
            <input id="search" type="search" class="amui-a-form-control form-control amui-h-mb-md amui-h-mt-xs" placeholder="Recherche" aria-controls="">
          </div>
        </div>
      </div>
    </form>
  </div>
</div>

<div class="amui-g-grid row">
  <div class="amui-g-grid__item col-xs-12">
    <div class="amui-l-table-responsive table-responsive">
      <table id="customTable" class="amui-o-table table responsive-card-table">
        <thead class="amui-o-table__header">
          <tr class="amui-o-table__header-row is--align-middle">
            <th scope="col" class="amui-o-table__header-col">Nom</th>
            <th scope="col" class="amui-o-table__header-col">Etat</th>
            <th scope="col" class="amui-o-table__header-col">Description</th>
            <th scope="col" class="amui-o-table__header-col"></th>
          </tr>
        </thead>
        <tbody class="amui-o-table__body">
          <tr class="amui-o-table__body-row is--align-middle">
            <th scope="row" class="amui-o-table__body-col" data-label="title">Row 1 Data 1</th>
            <td class="amui-o-table__body-col" data-label="title">Row 1 Data 2</td>
            <td class="amui-o-table__body-col" data-label="title">Row 1 Data 2</td>
            <td class="amui-o-table__body-col amui-h-text-right" data-label="title">
              <div class="amui-m-btn-dropdown dropdown">
                <button type="button" id="dropdownMenu1" class="amui-a-btn is--hollow is--sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Action <span class="caret"></span>
                </button>
                <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">
                  <li><a href="#">Modifier</a></li>
                  <li><a href="#">Supprimer</a></li>
                </ul>
              </div>
            </td>
          </tr>
          <tr class="amui-o-table__body-row is--align-middle">
            <th scope="row" class="amui-o-table__body-col" data-label="title">Row 1 Data 1</th>
            <td class="amui-o-table__body-col" data-label="title">Row 1 Data 2</td>
            <td class="amui-o-table__body-col" data-label="title">Row 1 Data 2</td>
            <td class="amui-o-table__body-col amui-h-text-right" data-label="title">
              <div class="amui-m-btn-dropdown dropdown">
                <button type="button" id="dropdownMenu1" class="amui-a-btn is--hollow is--sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Action <span class="caret"></span>
                </button>
                <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">
                  <li><a href="#">Modifier</a></li>
                  <li><a href="#">Supprimer</a></li>
                </ul>
              </div>
            </td>
          </tr>
          <tr class="amui-o-table__body-row is--align-middle">
            <th scope="row" class="amui-o-table__body-col" data-label="title">Row 1 Data 1</th>
            <td class="amui-o-table__body-col" data-label="title">Row 1 Data 2</td>
            <td class="amui-o-table__body-col" data-label="title">Row 1 Data 2</td>
            <td class="amui-o-table__body-col amui-h-text-right" data-label="title">
              <div class="amui-m-btn-dropdown dropdown">
                <button type="button" id="dropdownMenu1" class="amui-a-btn is--hollow is--sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Action <span class="caret"></span>
                </button>
                <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">
                  <li><a href="#">Modifier</a></li>
                  <li><a href="#">Supprimer</a></li>
                </ul>
              </div>
            </td>
          </tr>
          <tr class="amui-o-table__body-row is--align-middle">
            <th scope="row" class="amui-o-table__body-col" data-label="title">Row 2 Data 1</th>
            <td class="amui-o-table__body-col" data-label="title">Row 2 Data 2</td>
            <td class="amui-o-table__body-col" data-label="title">Row 2 Data 2</td>
            <td class="amui-o-table__body-col amui-h-text-right" data-label="title">
              <div class="amui-m-btn-dropdown dropdown">
                <button type="button" id="dropdownMenu1" class="amui-a-btn is--hollow is--sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Action <span class="caret"></span>
                </button>
                <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">
                  <li><a href="#">Modifier</a></li>
                  <li><a href="#">Supprimer</a></li>
                </ul>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

1.10 Data Table with filter tags

  • Title
  • Title
  • Title
  • Select All Clear all
Filtres : Item 1close Item 2close Item 3close Item 4close Item 5close Item 6close Item 7close Item 8close Item 9close Item 10close Effacer tous les filtres
Table heading Table heading Table heading Table heading Table heading
Table cell Table cell Table cell Item 10 Table cell
Table cell Table cell Table cell Item 1 Table cell
Table cell Table cell Table cell Item 10 Table cell
Table cell Table cell Table cell Item 3 Table cell
Table cell Table cell Table cell Item 1 Table cell
Table cell Table cell Table cell Item 5 Table cell
Table cell Table cell Table cell Item 6 Table cell
Table cell Table cell Table cell Item 8 Table cell
Table cell Table cell Table cell Item 9 Table cell
Table cell Table cell Table cell Item 8 Table cell
Table cell Table cell Table cell Item 1 Table cell
Table cell Table cell Table cell Item 2 Table cell
Table cell Table cell Table cell Item 4 Table cell
Table cell Table cell Table cell Item 7 Table cell
Table cell Table cell Table cell Item 6 Table cell 
<div class="amui-g-grid row">
  <div class="amui-g-grid__item col-xs-12">
    <div class="amui-m-panel is--fluid">
      <div class="amui-m-panel__body">
        <div class="amui-g-grid row">
          <div class="amui-g-grid__item col-xs-12">
            <form class="amui-o-form-group clearfix amui-h-mt-sm amui-h-mr-ms amui-h-ml-sm">
              <div class="amui-g-grid row">
                <div class="amui-g-grid__item col-xs-10 col-sm-11">
                  <div class="amui-m-form-group form-group">
                    <label class="sr-only">Rechercher</label>
                    <input id="search-table-filter-tags" type="search" class="amui-a-form-control form-control" placeholder="Recherche" aria-controls="">
                  </div>
                </div>
                <div class="amui-g-grid__item col-xs-2 col-sm-1">
                  <div class="amui-m-btn-dropdown dropdown amui-h-text-right">
                    <button type="button" id="dropdownMenuDivider" class="amui-a-btn is--default is--sm btn is--hollow is--icon-only btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <i class="material-icons md-24">filter_list</i>
                    </button>
                    <ul class="amui-m-btn-dropdown__items dropdown-menu dropdown-menu-right add" aria-labelledby="dropdownMenuDivider">
                      <li class="amui-m-btn-dropdown__item dropdown-header">Title</li>
                      <li class="amui-m-btn-dropdown__item">
                        <label class="amui-a-form-check">
                          <input type="checkbox" id="item-1" name="item-1" value="Item 1" checked>
                          <span class="amui-a-form-check__indicator"></span>
                          <span class="amui-a-form-check__label">Item 1</span>
                        </label>
                      </li>
                      <li class="amui-m-btn-dropdown__item">
                        <label class="amui-a-form-check">
                          <input type="checkbox" id="item-2" name="item-2" value="Item 2" checked>
                          <span class="amui-a-form-check__indicator"></span>
                          <span class="amui-a-form-check__label">Item 2</span>
                        </label>
                      </li>
                      <li class="amui-m-btn-dropdown__item">
                        <label class="amui-a-form-check">
                          <input type="checkbox" id="item-3" name="item-3" value="Item 3" checked>
                          <span class="amui-a-form-check__indicator"></span>
                          <span class="amui-a-form-check__label">Item 3</span>
                        </label>
                      </li>
                      <li class="amui-m-btn-dropdown__item">
                        <label class="amui-a-form-check">
                          <input type="checkbox" id="item-4" name="item-4" value="Item 4" checked>
                          <span class="amui-a-form-check__indicator"></span>
                          <span class="amui-a-form-check__label">Item 4</span>
                        </label>
                      </li>
                      <li class="amui-m-btn-dropdown__item">
                        <label class="amui-a-form-check">
                          <input type="checkbox" id="item-5" name="item-5" value="Item 5" checked>
                          <span class="amui-a-form-check__indicator"></span>
                          <span class="amui-a-form-check__label">Item 5</span>
                        </label>
                      </li>
                      <li class="amui-m-btn-dropdown__item dropdown-header">Title</li>
                      <li class="amui-m-btn-dropdown__item">
                        <label class="amui-a-form-check">
                          <input type="checkbox" id="item-6" name="item-6" value="Item 6" checked>
                          <span class="amui-a-form-check__indicator"></span>
                          <span class="amui-a-form-check__label">Item 6</span>
                        </label>
                      </li>
                      <li class="amui-m-btn-dropdown__item">
                        <label class="amui-a-form-check">
                          <input type="checkbox" id="item-7" name="item-7" value="Item 7" checked>
                          <span class="amui-a-form-check__indicator"></span>
                          <span class="amui-a-form-check__label">Item 7</span>
                        </label>
                      </li>
                      <li class="amui-m-btn-dropdown__item">
                        <label class="amui-a-form-check">
                          <input type="checkbox" id="item-8" name="item-8" value="Item 8" checked>
                          <span class="amui-a-form-check__indicator"></span>
                          <span class="amui-a-form-check__label">Item 8</span>
                        </label>
                      </li>
                      <li class="amui-m-btn-dropdown__item dropdown-header">Title</li>
                      <li class="amui-m-btn-dropdown__item">
                        <label class="amui-a-form-check">
                          <input type="checkbox" id="item-9" name="item-9" value="Item 9" checked>
                          <span class="amui-a-form-check__indicator"></span>
                          <span class="amui-a-form-check__label">Item 9</span>
                        </label>
                      </li>
                      <li class="amui-m-btn-dropdown__item">
                        <label class="amui-a-form-check">
                          <input type="checkbox" id="item-10" name="item-10" value="Item 10" checked>
                          <span class="amui-a-form-check__indicator"></span>
                          <span class="amui-a-form-check__label">Item 10</span>
                        </label>
                      </li>
                      <li class="amui-m-btn-dropdown__item amui-h-mb-ms amui-h-mt-ms">
                        <a id="btn-dropdown-select-all-filters" href="#" class="amui-a-btn is--link btn amui-h-text-lowercase">Select All</a>
                        <a id="btn-dropdown-clear-filters" href="#" class="amui-a-btn is--link btn amui-h-text-lowercase pull-right">Clear all</a>
                      </li>
                      <li role="separator" class="divider"></li>
                      <li class="amui-m-btn-dropdown__item">
                        <button id="btn-dropdown-apply-filters" type="button" class="amui-a-btn is--primary btn amui-h-mr-sm">Apply</button>
                        <button id="btn-dropdown-cancel" type="button" class="amui-a-btn is--link btn pull-right">Cancel</button>
                      </li>
                    </ul>
                  </div>  <!-- Dropdown Btn -->
                </div>
              </div>
            </form>  <!-- Form -->
            <div class="amui-g-grid row">
              <div class="amui-g-grid__item col-xs-12">
                <div class="amui-m-tags-filter amui-h-pt-sm amui-h-pr-ms amui-h-pb-sm amui-h-pl-ms">
                  <div class="amui-m-tags-filter__items">
                    <span class="amui-m-tags-filter__title amui-h-mr-xxxs">Filtres :</span>
                    <span data-tag="item-1" class="amui-m-tags-filter__item amui-a-label is--rounded is--icon-right is--filter-1 amui-h-mb-sm">Item 1<i class="material-icons md-16">close</i></span>
                    <span data-tag="item-2" class="amui-m-tags-filter__item amui-a-label is--rounded is--icon-right is--filter-2 amui-h-mb-sm">Item 2<i class="material-icons md-16">close</i></span>
                    <span data-tag="item-3" class="amui-m-tags-filter__item amui-a-label is--rounded is--icon-right is--filter-3 amui-h-mb-sm">Item 3<i class="material-icons md-16">close</i></span>
                    <span data-tag="item-4" class="amui-m-tags-filter__item amui-a-label is--rounded is--icon-right is--filter-4 amui-h-mb-sm">Item 4<i class="material-icons md-16">close</i></span>
                    <span data-tag="item-5" class="amui-m-tags-filter__item amui-a-label is--rounded is--icon-right is--filter-5 amui-h-mb-sm">Item 5<i class="material-icons md-16">close</i></span>
                    <span data-tag="item-6" class="amui-m-tags-filter__item amui-a-label is--rounded is--icon-right is--filter-6 amui-h-mb-sm">Item 6<i class="material-icons md-16">close</i></span>
                    <span data-tag="item-7" class="amui-m-tags-filter__item amui-a-label is--rounded is--icon-right is--filter-7 amui-h-mb-sm">Item 7<i class="material-icons md-16">close</i></span>
                    <span data-tag="item-8" class="amui-m-tags-filter__item amui-a-label is--rounded is--icon-right is--filter-8 amui-h-mb-sm">Item 8<i class="material-icons md-16">close</i></span>
                    <span data-tag="item-9" class="amui-m-tags-filter__item amui-a-label is--rounded is--icon-right is--filter-9 amui-h-mb-sm">Item 9<i class="material-icons md-16">close</i></span>
                    <span data-tag="item-10" class="amui-m-tags-filter__item amui-a-label is--rounded is--icon-right is--filter-10 amui-h-mb-sm">Item 10<i class="material-icons md-16">close</i></span>
                    <a id="btn-tags-filter-delete-filters" href="#" class="amui-h-ml-xs amui-h-vertical-align-middle">Effacer tous les filtres</a>
                  </div>
                </div>  <!-- Tags filter -->
              </div>
            </div>
            <div class="amui-g-grid row">
              <div class="amui-g-grid__item col-xs-12">
                <div class="amui-l-table-responsive table-responsive">
                  <table id="table-filter-tags" class="amui-o-table table responsive-card-table">
                    <thead class="amui-o-table__header">
                    <tr class="amui-o-table__header-row is--align-middle">
                      <th scope="col" class="amui-o-table__header-col">Table heading<i class="material-icons"></i></th>
                      <th scope="col" class="amui-o-table__header-col">Table heading<i class="material-icons"></i></th>
                      <th scope="col" class="amui-o-table__header-col">Table heading<i class="material-icons"></i></th>
                      <th scope="col" class="amui-o-table__header-col">Table heading<i class="material-icons"></i></th>
                      <th scope="col" class="amui-o-table__header-col">Table heading<i class="material-icons"></i></th>
                      <th scope="col" class="amui-o-table__header-col"></th>
                    </tr>
                    </thead>
                    <tbody class="amui-o-table__body">
                    <tr class="amui-o-table__body-row is--align-middle is--item-10">
                      <th scope="row" class="amui-o-table__body-col" data-label="title">Table cell</th>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col" data-label="title">
                        <span class="amui-a-label is--rounded is--filter-10">Item 10</span>
                      </td>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col amui-h-text-right" data-label="title">
                        <div class="amui-m-btn-dropdown dropdown">
                          <button type="button" id="dropdownMenu1" class="amui-a-btn is--hollow is--sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Action <span class="caret"></span>
                          </button>
                          <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">
                            <li><a href="#">Modifier</a></li>
                            <li><a href="#">Supprimer</a></li>
                          </ul>
                        </div>
                      </td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle is--item-1">
                      <th scope="row" class="amui-o-table__body-col" data-label="title">Table cell</th>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col" data-label="title">
                        <span class="amui-a-label is--rounded is--filter-1">Item 1</span>
                      </td>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col amui-h-text-right" data-label="title">
                        <div class="amui-m-btn-dropdown dropdown">
                          <button type="button" id="dropdownMenu2" class="amui-a-btn is--hollow is--sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Action <span class="caret"></span>
                          </button>
                          <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu2">
                            <li><a href="#">Modifier</a></li>
                            <li><a href="#">Supprimer</a></li>
                          </ul>
                        </div>
                      </td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle is--item-10">
                      <th scope="row" class="amui-o-table__body-col" data-label="title">Table cell</th>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col" data-label="title">
                        <span class="amui-a-label is--rounded is--filter-10">Item 10</span>
                      </td>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col amui-h-text-right" data-label="title">
                        <div class="amui-m-btn-dropdown dropdown">
                          <button type="button" id="dropdownMenu3" class="amui-a-btn is--hollow is--sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Action <span class="caret"></span>
                          </button>
                          <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu3">
                            <li><a href="#">Modifier</a></li>
                            <li><a href="#">Supprimer</a></li>
                          </ul>
                        </div>
                      </td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle is--item-3">
                      <th scope="row" class="amui-o-table__body-col" data-label="title">Table cell</th>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col" data-label="title">
                        <span class="amui-a-label is--rounded is--filter-3">Item 3</span>
                      </td>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col amui-h-text-right" data-label="title">
                        <div class="amui-m-btn-dropdown dropdown">
                          <button type="button" id="dropdownMenu4" class="amui-a-btn is--hollow is--sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Action <span class="caret"></span>
                          </button>
                          <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu4">
                            <li><a href="#">Modifier</a></li>
                            <li><a href="#">Supprimer</a></li>
                          </ul>
                        </div>
                      </td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle is--item-1">
                      <th scope="row" class="amui-o-table__body-col" data-label="title">Table cell</th>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col" data-label="title">
                        <span class="amui-a-label is--rounded is--filter-1">Item 1</span>
                      </td>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col amui-h-text-right" data-label="title">
                        <div class="amui-m-btn-dropdown dropdown">
                          <button type="button" id="dropdownMenu5" class="amui-a-btn is--hollow is--sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Action <span class="caret"></span>
                          </button>
                          <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu5">
                            <li><a href="#">Modifier</a></li>
                            <li><a href="#">Supprimer</a></li>
                          </ul>
                        </div>
                      </td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle is--item-5">
                      <th scope="row" class="amui-o-table__body-col" data-label="title">Table cell</th>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col" data-label="title">
                        <span class="amui-a-label is--rounded is--filter-5">Item 5</span>
                      </td>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col amui-h-text-right" data-label="title">
                        <div class="amui-m-btn-dropdown dropdown">
                          <button type="button" id="dropdownMenu6" class="amui-a-btn is--hollow is--sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Action <span class="caret"></span>
                          </button>
                          <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu6">
                            <li><a href="#">Modifier</a></li>
                            <li><a href="#">Supprimer</a></li>
                          </ul>
                        </div>
                      </td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle is--item-6">
                      <th scope="row" class="amui-o-table__body-col" data-label="title">Table cell</th>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col" data-label="title">
                        <span class="amui-a-label is--rounded is--filter-6">Item 6</span>
                      </td>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col amui-h-text-right" data-label="title">
                        <div class="amui-m-btn-dropdown dropdown">
                          <button type="button" id="dropdownMenu7" class="amui-a-btn is--hollow is--sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Action <span class="caret"></span>
                          </button>
                          <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu7">
                            <li><a href="#">Modifier</a></li>
                            <li><a href="#">Supprimer</a></li>
                          </ul>
                        </div>
                      </td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle is--item-8">
                      <th scope="row" class="amui-o-table__body-col" data-label="title">Table cell</th>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col" data-label="title">
                        <span class="amui-a-label is--rounded is--filter-8">Item 8</span>
                      </td>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col amui-h-text-right" data-label="title">
                        <div class="amui-m-btn-dropdown dropdown">
                          <button type="button" id="dropdownMenu8" class="amui-a-btn is--hollow is--sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Action <span class="caret"></span>
                          </button>
                          <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu8">
                            <li><a href="#">Modifier</a></li>
                            <li><a href="#">Supprimer</a></li>
                          </ul>
                        </div>
                      </td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle is--item-9">
                      <th scope="row" class="amui-o-table__body-col" data-label="title">Table cell</th>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col" data-label="title">
                        <span class="amui-a-label is--rounded is--filter-9">Item 9</span>
                      </td>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col amui-h-text-right" data-label="title">
                        <div class="amui-m-btn-dropdown dropdown">
                          <button type="button" id="dropdownMenu9" class="amui-a-btn is--hollow is--sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Action <span class="caret"></span>
                          </button>
                          <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu9">
                            <li><a href="#">Modifier</a></li>
                            <li><a href="#">Supprimer</a></li>
                          </ul>
                        </div>
                      </td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle is--item-8">
                      <th scope="row" class="amui-o-table__body-col" data-label="title">Table cell</th>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col" data-label="title">
                        <span class="amui-a-label is--rounded is--filter-8">Item 8</span>
                      </td>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col amui-h-text-right" data-label="title">
                        <div class="amui-m-btn-dropdown dropdown">
                          <button type="button" id="dropdownMenu10" class="amui-a-btn is--hollow is--sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Action <span class="caret"></span>
                          </button>
                          <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu10">
                            <li><a href="#">Modifier</a></li>
                            <li><a href="#">Supprimer</a></li>
                          </ul>
                        </div>
                      </td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle is--item-1">
                      <th scope="row" class="amui-o-table__body-col" data-label="title">Table cell</th>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col" data-label="title">
                        <span class="amui-a-label is--rounded is--filter-1">Item 1</span>
                      </td>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col amui-h-text-right" data-label="title">
                        <div class="amui-m-btn-dropdown dropdown">
                          <button type="button" id="dropdownMenu11" class="amui-a-btn is--hollow is--sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Action <span class="caret"></span>
                          </button>
                          <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu11">
                            <li><a href="#">Modifier</a></li>
                            <li><a href="#">Supprimer</a></li>
                          </ul>
                        </div>
                      </td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle is--item-2">
                      <th scope="row" class="amui-o-table__body-col" data-label="title">Table cell</th>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col" data-label="title">
                        <span class="amui-a-label is--rounded is--filter-2">Item 2</span>
                      </td>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col amui-h-text-right" data-label="title">
                        <div class="amui-m-btn-dropdown dropdown">
                          <button type="button" id="dropdownMenu12" class="amui-a-btn is--hollow is--sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Action <span class="caret"></span>
                          </button>
                          <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu12">
                            <li><a href="#">Modifier</a></li>
                            <li><a href="#">Supprimer</a></li>
                          </ul>
                        </div>
                      </td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle is--item-4">
                      <th scope="row" class="amui-o-table__body-col" data-label="title">Table cell</th>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col" data-label="title">
                        <span class="amui-a-label is--rounded is--filter-4">Item 4</span>
                      </td>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col amui-h-text-right" data-label="title">
                        <div class="amui-m-btn-dropdown dropdown">
                          <button type="button" id="dropdownMenu13" class="amui-a-btn is--hollow is--sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Action <span class="caret"></span>
                          </button>
                          <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu13">
                            <li><a href="#">Modifier</a></li>
                            <li><a href="#">Supprimer</a></li>
                          </ul>
                        </div>
                      </td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle is--item-7">
                      <th scope="row" class="amui-o-table__body-col" data-label="title">Table cell</th>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col" data-label="title">
                        <span class="amui-a-label is--rounded is--filter-7">Item 7</span>
                      </td>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col amui-h-text-right" data-label="title">
                        <div class="amui-m-btn-dropdown dropup">
                          <button type="button" id="dropdownMenu14" class="amui-a-btn is--hollow is--sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Action <span class="caret"></span>
                          </button>
                          <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu14">
                            <li><a href="#">Modifier</a></li>
                            <li><a href="#">Supprimer</a></li>
                          </ul>
                        </div>
                      </td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle is--filter-6">
                      <th scope="row" class="amui-o-table__body-col" data-label="title">Table cell</th>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col" data-label="title">
                        <span class="amui-a-label is--rounded is--filter-6">Item 6</span>
                      </td>
                      <td class="amui-o-table__body-col" data-label="title">Table cell</td>
                      <td class="amui-o-table__body-col amui-h-text-right" data-label="title">
                        <div class="amui-m-btn-dropdown dropup">
                          <button type="button" id="dropdownMenu15" class="amui-a-btn is--hollow is--sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Action <span class="caret"></span>
                          </button>
                          <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu15">
                            <li><a href="#">Modifier</a></li>
                            <li><a href="#">Supprimer</a></li>
                          </ul>
                        </div>
                      </td>
                    </tr>
                    </tbody>
                  </table>  <!-- Table -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>  <!-- Panel Body -->
    </div>  <!-- Panel -->
  </div>
</div>  <!-- Grid row -->

<script type="text/javascript">
  $(document).ready( function () {
    // Filter data : data-attribute, class, value
    var mappingTagFilters = {
      "item-1":[ "item-1", "filter-1", "Item 1" ],
      "item-2":[ "item-2", "filter-2", "Item 2" ],
      "item-3":[ "item-3", "filter-3", "Item 3" ],
      "item-4":[ "item-4", "filter-4", "Item 4" ],
      "item-5":[ "item-5", "filter-5", "Item 5" ],
      "item-6":[ "item-6", "filter-6", "Item 6" ],
      "item-7":[ "item-7", "filter-7", "Item 7" ],
      "item-8":[ "item-8", "filter-8", "Item 8" ],
      "item-9":[ "item-9", "filter-9", "Item 9" ],
      "item-10":[ "item-10", "filter-10", "Item 10"]
    };

    // DataTable parameters
    var table = $('#table-filter-tags').DataTable({
      "dom": "t",
      "scrollY": "600px",
      "scrollCollapse": true,
      "pageLength": 20,
      "columnDefs": [{
        "orderable": false,
        "targets": 5
      }]
    });

    // Search bar
    var SearchFilterBar = $("#search-table-filter-tags");

    // Dropdown Btn
    var DropdownBtnContent = $(".amui-m-btn-dropdown__items");
    var DropdownBtnCheckbox = $(".amui-m-btn-dropdown__item input[type='checkbox']");
    var DropdownBtnSelectAllFilters = $("#btn-dropdown-select-all-filters");
    var DropdownBtnCancelAllFilters = $("#btn-dropdown-cancel");
    var DropdownBtnDeleteAllFilters = $("#btn-dropdown-clear-filters");
    var DropdownBtnApplyAllFilters = $("#btn-dropdown-apply-filters");

    // Tags
    var TagsContent = $(".amui-m-tags-filter");
    var TagsItem = $(".amui-m-tags-filter__item");
    var TagsItems = $('.amui-m-tags-filter__items');
    var TagsDeleteAllFilters = $("#btn-tags-filter-delete-filters");

    // Table
    var TableRow = $("table tbody tr");

    // Checkbox filter function
    function CheckBoxFiltering() {
      $(DropdownBtnContent).find('input:checkbox').is(':checked');
      $(TableRow).hide();

      // Display table row depending on checkboxes selection from the dropdown filter menu
      $(DropdownBtnContent).find('input:checked').each(function () {
        $('table tbody tr.is--' + $(this).attr('id')).show();
      });
    }
    // End Checkboxfilter function

    // Tags filter function
    function TagsFiltering() {
      // Clear all tags
      $(".amui-m-tags-filter__items .amui-m-tags-filter__item").remove();
      $('.amui-m-btn-dropdown__items input[type=checkbox]:checked').each(function () {

        var switche = $( this ).attr('id');
        $(".amui-m-tags-filter__items").append(' <span class="amui-a-label amui-m-tags-filter__item is--rounded is--'+ mappingTagFilters[switche][1] +' amui-h-mb-sm" data-tag="'+ mappingTagFilters[switche][0] + '">' + mappingTagFilters[switche][2] + '<i class="material-icons md-16">close</i></span> ');
        $(TagsDeleteAllFilters).show().appendTo($(".amui-m-tags-filter__items"));
        // Reverse tags order in order to have correct items ordered after adding action
        $(".amui-m-tags-filter__items .amui-m-tags-filter__item").get().reverse();
      });
    }
    // End tags filtering function

    // Function to display table row depending on tags selection
    function Tags(){
      $(DropdownBtnContent).find(".amui-m-btn-dropdown__item");
      table.$('tr').hide();
      $(".amui-m-tags-filter__items .amui-m-tags-filter__item").each(function () {
        table.$('tr.is--' + $(this).attr("data-tag")).show();
      });
    }
    // End tags function

    // Custom search bar for DataTable filtering
    $(SearchFilterBar).keyup(function() {
      table.search($(this).val()).draw();
    });

    // Dropdown Btn Apply all filter function
    $(DropdownBtnApplyAllFilters).click(function(e) {
      CheckBoxFiltering();
      TagsFiltering();
      // If Checkbox is checked : Display tags filter content and table
      if ( $(DropdownBtnContent).find('input:checkbox').is(':checked')) {

        $(TagsContent).parent().parent().show();
        $('table').show();
        // If Checkbox is unchecked : Hide tags filter content and table
      } else {
        $(TagsContent).parent().parent().hide();
        $('table').hide();
      }
      // Remove 'open' class and  set 'aria-expanded' to 'false' in order to close the dropdown filter menu
      $(".amui-m-btn-dropdown.dropdown.open").removeClass("open");
      $("#dropdownMenuDivider").attr("aria-expanded","false");
    });
    // End of Apply all filters function

    // Stop propagation inside Dropdown menu
    $(DropdownBtnContent).click(function(e) {
      e.preventDefault();
      e.stopPropagation();
      $(".amui-m-btn-dropdown__item").click(function(e) {
        e.stopPropagation();
      });
    });

    // Stop propagation inside Dropdown menu and the default action of the event will not be triggered
    $(DropdownBtnDeleteAllFilters).click(function(e) {
      $(DropdownBtnCheckbox).prop('checked', false);
      e.preventDefault();
      e.stopPropagation();
    });

    // Remove a previously-attached event handler from the cancel btn
    $(DropdownBtnCancelAllFilters).on('click', function(e) {
      $(".amui-m-btn-dropdown.dropdown.open").removeClass("open");
      $("#dropdownMenuDivider").attr("aria-expanded","false");
    });

    // Select all filters will set filter checkboxes to true
    $(DropdownBtnSelectAllFilters).click(function(e) {
      $(DropdownBtnCheckbox).prop('checked', true);
      // Stop propagation inside Dropdown menu and the default action of the event will not be triggered
      e.preventDefault();
      e.stopPropagation();
    });

    // Molecule tags filter : Click to remove a tag from the filter tags area
    $(".amui-m-tags-filter__items").delegate(".amui-m-tags-filter__item" , "click", function(e) {

      var TagsNumber = $(".amui-m-tags-filter__item").length;
      // Remove tags
      $( this ).remove();
      // Function to display table row depending on tags selection
      Tags();

      var TagsNumberUpdated = $(".amui-m-tags-filter__items .amui-m-tags-filter__item").length;
      var switche = $( this ).attr('data-tag');
      // If tags is deleted, checkboxe from the dropdown filter menu will be unchecked
      if ( $(this).attr("data-tag") == mappingTagFilters[switche][0]) {
        $('.amui-m-btn-dropdown__items .amui-m-btn-dropdown__item input#'+switche).prop('checked',false);
      }
      // If all tags are delted then the filter tags content and table will be hidden
      if ( TagsNumberUpdated === 0) {
        $(TagsContent).parent().parent().hide();
        $('table').hide();
      }
    });

    // Delete all filters will hide tag filter content, table element and set filter checkboxes to false
    $(TagsDeleteAllFilters).click(function(e) {
      $(TagsContent).parent().parent().hide();
      $('table').hide();

      $(DropdownBtnContent).find('input:checkbox').prop('checked',false);
      e.preventDefault();
    });
  });
</script>

1.11 Table data row grouping

Pour incrémenter une colonne veuillez ajouter la classe : is--sub-group-[n] (où [n] est une valeur de 1 à 10) dans la première colonne de vos rangées (amui-o-table__body-row)
Ex : <td class="amui-o-table__body-col is--sub-group-1">Row 1 Data 1</td>

Pour supprimer l'indentation des premières columns des row grouping veuillez retirer le script de Subgroup que vous trouverez en bas de la configuration du DataTable ainsi que les Classes : is--sub-group-[n]

Voir ici : DataTable pour plus de détails sur la configuration des row grouping du DataTable.

Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600
Jena Gaines Office Manager London 30 2008/12/19 $90,560
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750
Michael Silva Marketing Designer London 66 2012/11/27 $198,500
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000
Yuri Berry Chief Marketing Officer (CMO) New York 40 2009/06/25 $675,000
Doris Wilder Sales Assistant Sidney 23 2010/09/20 $85,600
Jennifer Chang Regional Director Singapore 28 2010/11/14 $357,650
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850
Shou Itou Regional Marketing Tokyo 20 2011/08/14 $163,000
Michelle House Integration Specialist Sidney 37 2011/06/02 $95,400
Vivian Harrell Financial Controller San Francisco 62 2009/02/14 $452,500
Olivia Liang Support Engineer Singapore 64 2011/02/03 $234,500
Sakura Yamamoto Support Engineer Tokyo 37 2009/08/19 $139,575
Finn Camacho Support Engineer San Francisco 47 2009/07/07 $87,500
Serge Baldwin Data Coordinator Singapore 64 2012/04/09 $138,575
Zorita Serrano Software Engineer San Francisco 56 2012/06/01 $115,000
Jonas Alexander Developer San Francisco 30 2010/07/14 $86,500
Michael Bruce Javascript Developer Singapore 29 2011/06/27 $183,000 
<div class="amui-g-grid row">
  <div class="amui-g-grid__item col-xs-12">
    <div class="amui-m-panel is--fluid">
      <div class="amui-m-panel__body">
        <div class="amui-g-grid row">
          <div class="amui-g-grid__item col-xs-12">
            <div class="amui-g-grid row">
              <div class="amui-g-grid__item col-xs-12">
                <div class="amui-l-table-responsive table-responsive">
                  <table id="row-grouping" class="amui-o-table table responsive-card-table">
                    <thead class="amui-o-table__header">
                    <tr class="amui-o-table__header-row is--align-middle">
                      <th class="amui-o-table__header-col">Name</th>
                      <th class="amui-o-table__header-col">Position</th>
                      <th class="amui-o-table__header-col">Office</th>
                      <th class="amui-o-table__header-col">Age</th>
                      <th class="amui-o-table__header-col">Start date</th>
                      <th class="amui-o-table__header-col">Salary</th>
                    </tr>
                    </thead>
                    <tbody class="amui-o-table__body">
                    <tr class="amui-o-table__body-row is--align-middle">
                      <th scope="row" class="amui-o-table__body-col is--sub-group-4">Tiger Nixon</th>
                      <td class="amui-o-table__body-col">System Architect</td>
                      <td class="amui-o-table__body-col">Edinburgh</td>
                      <td class="amui-o-table__body-col">61</td>
                      <td class="amui-o-table__body-col">2011/04/25</td>
                      <td class="amui-o-table__body-col">$320,800</td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle">
                      <th scope="row" class="amui-o-table__body-col is--sub-group-2">Garrett Winters</th>
                      <td class="amui-o-table__body-col">Accountant</td>
                      <td class="amui-o-table__body-col">Tokyo</td>
                      <td class="amui-o-table__body-col">63</td>
                      <td class="amui-o-table__body-col">2011/07/25</td>
                      <td class="amui-o-table__body-col">$170,750</td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle">
                      <th scope="row" class="amui-o-table__body-col is--sub-group-1">Ashton Cox</th>
                      <td class="amui-o-table__body-col">Junior Technical Author</td>
                      <td class="amui-o-table__body-col">San Francisco</td>
                      <td class="amui-o-table__body-col">66</td>
                      <td class="amui-o-table__body-col">2009/01/12</td>
                      <td class="amui-o-table__body-col">$86,000</td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle">
                      <th scope="row" class="amui-o-table__body-col is--sub-group-1">Cedric Kelly</th>
                      <td class="amui-o-table__body-col">Senior Javascript Developer</td>
                      <td class="amui-o-table__body-col">Edinburgh</td>
                      <td class="amui-o-table__body-col">22</td>
                      <td class="amui-o-table__body-col">2012/03/29</td>
                      <td class="amui-o-table__body-col">$433,060</td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle">
                      <th scope="row" class="amui-o-table__body-col is--sub-group-1">Airi Satou</th>
                      <td class="amui-o-table__body-col">Accountant</td>
                      <td class="amui-o-table__body-col">Tokyo</td>
                      <td class="amui-o-table__body-col">33</td>
                      <td class="amui-o-table__body-col">2008/11/28</td>
                      <td class="amui-o-table__body-col">$162,700</td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle">
                      <th scope="row" class="amui-o-table__body-col is--sub-group-1">Brielle Williamson</th>
                      <td class="amui-o-table__body-col">Integration Specialist</td>
                      <td class="amui-o-table__body-col">New York</td>
                      <td class="amui-o-table__body-col">61</td>
                      <td class="amui-o-table__body-col">2012/12/02</td>
                      <td class="amui-o-table__body-col">$372,000</td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle">
                      <th scope="row" class="amui-o-table__body-col is--sub-group-3">Herrod Chandler</th>
                      <td class="amui-o-table__body-col">Sales Assistant</td>
                      <td class="amui-o-table__body-col">San Francisco</td>
                      <td class="amui-o-table__body-col">59</td>
                      <td class="amui-o-table__body-col">2012/08/06</td>
                      <td class="amui-o-table__body-col">$137,500</td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle">
                      <th scope="row" class="amui-o-table__body-col  is--sub-group-1">Rhona Davidson</th>
                      <td class="amui-o-table__body-col">Integration Specialist</td>
                      <td class="amui-o-table__body-col">Tokyo</td>
                      <td class="amui-o-table__body-col">55</td>
                      <td class="amui-o-table__body-col">2010/10/14</td>
                      <td class="amui-o-table__body-col">$327,900</td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle">
                      <th scope="row" class="amui-o-table__body-col is--sub-group-3">Colleen Hurst</th>
                      <td class="amui-o-table__body-col">Javascript Developer</td>
                      <td class="amui-o-table__body-col">San Francisco</td>
                      <td class="amui-o-table__body-col">39</td>
                      <td class="amui-o-table__body-col">2009/09/15</td>
                      <td class="amui-o-table__body-col">$205,500</td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle">
                      <th scope="row" class="amui-o-table__body-col  is--sub-group-3">Sonya Frost</th>
                      <td class="amui-o-table__body-col">Software Engineer</td>
                      <td class="amui-o-table__body-col">Edinburgh</td>
                      <td class="amui-o-table__body-col">23</td>
                      <td class="amui-o-table__body-col">2008/12/13</td>
                      <td class="amui-o-table__body-col">$103,600</td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle">
                      <th scope="row" class="amui-o-table__body-col  is--sub-group-2">Jena Gaines</th>
                      <td class="amui-o-table__body-col">Office Manager</td>
                      <td class="amui-o-table__body-col">London</td>
                      <td class="amui-o-table__body-col">30</td>
                      <td class="amui-o-table__body-col">2008/12/19</td>
                      <td class="amui-o-table__body-col">$90,560</td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle">
                      <th scope="row" class="amui-o-table__body-col  is--sub-group-2">Quinn Flynn</td>
                      <td class="amui-o-table__body-col">Support Lead</td>
                      <td class="amui-o-table__body-col">Edinburgh</td>
                      <td class="amui-o-table__body-col">22</td>
                      <td class="amui-o-table__body-col">2013/03/03</td>
                      <td class="amui-o-table__body-col">$342,000</td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle">
                      <th scope="row" class="amui-o-table__body-col  is--sub-group-2">Charde Marshall</th>
                      <td class="amui-o-table__body-col">Regional Director</td>
                      <td class="amui-o-table__body-col">San Francisco</td>
                      <td class="amui-o-table__body-col">36</td>
                      <td class="amui-o-table__body-col">2008/10/16</td>
                      <td class="amui-o-table__body-col">$470,600</td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle">
                      <th scope="row" class="amui-o-table__body-col is--sub-group-2">Haley Kennedy</th>
                      <td class="amui-o-table__body-col">Senior Marketing Designer</td>
                      <td class="amui-o-table__body-col">London</td>
                      <td class="amui-o-table__body-col">43</td>
                      <td class="amui-o-table__body-col">2012/12/18</td>
                      <td class="amui-o-table__body-col">$313,500</td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle">
                      <th scope="row" class="amui-o-table__body-col  is--sub-group-4">Tatyana Fitzpatrick</th>
                      <td class="amui-o-table__body-col">Regional Director</td>
                      <td class="amui-o-table__body-col">London</td>
                      <td class="amui-o-table__body-col">19</td>
                      <td class="amui-o-table__body-col">2010/03/17</td>
                      <td class="amui-o-table__body-col">$385,750</td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle">
                      <th scope="row" class="amui-o-table__body-col is--sub-group-3">Michael Silva</th>
                      <td class="amui-o-table__body-col">Marketing Designer</td>
                      <td class="amui-o-table__body-col">London</td>
                      <td class="amui-o-table__body-col">66</td>
                      <td class="amui-o-table__body-col">2012/11/27</td>
                      <td class="amui-o-table__body-col">$198,500</td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle">
                      <th scope="row" class="amui-o-table__body-col is--sub-group-4">Paul Byrd</th>
                      <td class="amui-o-table__body-col">Chief Financial Officer (CFO)</td>
                      <td class="amui-o-table__body-col">New York</td>
                      <td class="amui-o-table__body-col">64</td>
                      <td class="amui-o-table__body-col">2010/06/09</td>
                      <td class="amui-o-table__body-col">$725,000</td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle">
                      <th scope="row" class="amui-o-table__body-col is--sub-group-2">Gloria Little</th>
                      <td class="amui-o-table__body-col">Systems Administrator</td>
                      <td class="amui-o-table__body-col">New York</td>
                      <td class="amui-o-table__body-col">59</td>
                      <td class="amui-o-table__body-col">2009/04/10</td>
                      <td class="amui-o-table__body-col">$237,500</td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle">
                      <th scope="row" class="amui-o-table__body-col is--sub-group-1">Bradley Greer</th>
                      <td class="amui-o-table__body-col">Software Engineer</td>
                      <td class="amui-o-table__body-col">London</td>
                      <td class="amui-o-table__body-col">41</td>
                      <td class="amui-o-table__body-col">2012/10/13</td>
                      <td class="amui-o-table__body-col">$132,000</td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle">
                      <th scope="row" class="amui-o-table__body-col is--sub-group-2">Dai Rios</th>
                      <td class="amui-o-table__body-col">Personnel Lead</td>
                      <td class="amui-o-table__body-col">Edinburgh</td>
                      <td class="amui-o-table__body-col">35</td>
                      <td class="amui-o-table__body-col">2012/09/26</td>
                      <td class="amui-o-table__body-col">$217,500</td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle">
                      <th scope="row" class="amui-o-table__body-col is--sub-group-3">Jenette Caldwell</th>
                      <td class="amui-o-table__body-col">Development Lead</td>
                      <td class="amui-o-table__body-col">New York</td>
                      <td class="amui-o-table__body-col">30</td>
                      <td class="amui-o-table__body-col">2011/09/03</td>
                      <td class="amui-o-table__body-col">$345,000</td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle">
                      <th scope="row" class="amui-o-table__body-col is--sub-group-4">Yuri Berry</th>
                      <td class="amui-o-table__body-col">Chief Marketing Officer (CMO)</td>
                      <td class="amui-o-table__body-col">New York</td>
                      <td class="amui-o-table__body-col">40</td>
                      <td class="amui-o-table__body-col">2009/06/25</td>
                      <td class="amui-o-table__body-col">$675,000</td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle">
                      <th scope="row" class="amui-o-table__body-col">Doris Wilder</th>
                      <td class="amui-o-table__body-col">Sales Assistant</td>
                      <td class="amui-o-table__body-col">Sidney</td>
                      <td class="amui-o-table__body-col">23</td>
                      <td class="amui-o-table__body-col">2010/09/20</td>
                      <td class="amui-o-table__body-col">$85,600</td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle">
                      <th scope="row" class="amui-o-table__body-col is--sub-group-1">Jennifer Chang</th>
                      <td class="amui-o-table__body-col">Regional Director</td>
                      <td class="amui-o-table__body-col">Singapore</td>
                      <td class="amui-o-table__body-col">28</td>
                      <td class="amui-o-table__body-col">2010/11/14</td>
                      <td class="amui-o-table__body-col">$357,650</td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle">
                      <th scope="row" class="amui-o-table__body-col is--sub-group-1">Brenden Wagner</th>
                      <td class="amui-o-table__body-col">Software Engineer</td>
                      <td class="amui-o-table__body-col">San Francisco</td>
                      <td class="amui-o-table__body-col">28</td>
                      <td class="amui-o-table__body-col">2011/06/07</td>
                      <td class="amui-o-table__body-col">$206,850</td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle">
                      <th scope="row" class="amui-o-table__body-col">Shou Itou</th>
                      <td class="amui-o-table__body-col">Regional Marketing</td>
                      <td class="amui-o-table__body-col">Tokyo</td>
                      <td class="amui-o-table__body-col">20</td>
                      <td class="amui-o-table__body-col">2011/08/14</td>
                      <td class="amui-o-table__body-col">$163,000</td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle">
                      <th scope="row" class="amui-o-table__body-col">Michelle House</th>
                      <td class="amui-o-table__body-col">Integration Specialist</td>
                      <td class="amui-o-table__body-col">Sidney</td>
                      <td class="amui-o-table__body-col">37</td>
                      <td class="amui-o-table__body-col">2011/06/02</td>
                      <td class="amui-o-table__body-col">$95,400</td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle">
                      <th scope="row" class="amui-o-table__body-col is--sub-group-1">Vivian Harrell</th>
                      <td class="amui-o-table__body-col">Financial Controller</td>
                      <td class="amui-o-table__body-col">San Francisco</td>
                      <td class="amui-o-table__body-col">62</td>
                      <td class="amui-o-table__body-col">2009/02/14</td>
                      <td class="amui-o-table__body-col">$452,500</td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle">
                      <th scope="row" class="amui-o-table__body-col is--sub-group-3">Olivia Liang</th>
                      <td class="amui-o-table__body-col">Support Engineer</td>
                      <td class="amui-o-table__body-col">Singapore</td>
                      <td class="amui-o-table__body-col">64</td>
                      <td class="amui-o-table__body-col">2011/02/03</td>
                      <td class="amui-o-table__body-col">$234,500</td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle">
                      <th scope="row" class="amui-o-table__body-col">Sakura Yamamoto</th>
                      <td class="amui-o-table__body-col">Support Engineer</td>
                      <td class="amui-o-table__body-col">Tokyo</td>
                      <td class="amui-o-table__body-col">37</td>
                      <td class="amui-o-table__body-col">2009/08/19</td>
                      <td class="amui-o-table__body-col">$139,575</td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle">
                      <th scope="row" class="amui-o-table__body-col is--sub-group-3">Finn Camacho</th>
                      <td class="amui-o-table__body-col">Support Engineer</td>
                      <td class="amui-o-table__body-col">San Francisco</td>
                      <td class="amui-o-table__body-col">47</td>
                      <td class="amui-o-table__body-col">2009/07/07</td>
                      <td class="amui-o-table__body-col">$87,500</td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle">
                      <th scope="row" class="amui-o-table__body-col">Serge Baldwin</th>
                      <td class="amui-o-table__body-col">Data Coordinator</td>
                      <td class="amui-o-table__body-col">Singapore</td>
                      <td class="amui-o-table__body-col">64</td>
                      <td class="amui-o-table__body-col">2012/04/09</td>
                      <td class="amui-o-table__body-col">$138,575</td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle">
                      <th scope="row" class="amui-o-table__body-col is--sub-group-1">Zorita Serrano</th>
                      <td class="amui-o-table__body-col">Software Engineer</td>
                      <td class="amui-o-table__body-col">San Francisco</td>
                      <td class="amui-o-table__body-col">56</td>
                      <td class="amui-o-table__body-col">2012/06/01</td>
                      <td class="amui-o-table__body-col">$115,000</td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle">
                      <th scope="row" class="amui-o-table__body-col is--sub-group-2">Jonas Alexander</th>
                      <td class="amui-o-table__body-col">Developer</td>
                      <td class="amui-o-table__body-col">San Francisco</td>
                      <td class="amui-o-table__body-col">30</td>
                      <td class="amui-o-table__body-col">2010/07/14</td>
                      <td class="amui-o-table__body-col">$86,500</td>
                    </tr>
                    <tr class="amui-o-table__body-row is--align-middle">
                      <th scope="row" class="amui-o-table__body-col is--sub-group-1">Michael Bruce</th>
                      <td class="amui-o-table__body-col">Javascript Developer</td>
                      <td class="amui-o-table__body-col">Singapore</td>
                      <td class="amui-o-table__body-col">29</td>
                      <td class="amui-o-table__body-col">2011/06/27</td>
                      <td class="amui-o-table__body-col">$183,000</td>
                    </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>  <!-- Panel Body -->
    </div>  <!--  Panel -->
  </div>
</div>  <!-- Grid row -->

<script type="text/javascript">
  $(document).ready(function() {

    var groupColumn = 2;
    var table = $('#example').DataTable({

      dom: 't',

      "columnDefs": [
        { "visible": false, "targets": groupColumn }
      ],

      // The third column will always be sorted upon first:
      "orderFixed": [ 2, 'asc' ],
      "displayLength": 25,
      "searching": false,

      rowGroup: {
        className: 'table-group'
      },

      "createdRow": function ( row, data, index ) {
        $(row).addClass('amui-o-table__body-row');
        // $(row).attr('class', 'priority');
        // $('td', row).eq(0).addClass('priority');
      },

      "drawCallback": function ( settings ) {
        var api = this.api();
        var rows = api.rows( {page:'current'} ).nodes();
        var last=null;

        api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
          if ( last !== group ) {
            $(rows).eq( i ).before(
              '<tr class="amui-o-table__body-row is--group is--align-middle"><td class="amui-o-table__body-col" colspan="6">'+group+'</td></tr>'
            );
            last = group;
          }

          // Add and increment a number for every is--group class
          var groups = $('.amui-o-table__body-row.is--group');
          for (var i = 0; i < groups.length; i++) {
            var group = $(groups[i]).addClass('is--group-'+i);
          }

          // Subgroup: Add "is--sub-group" class to row grouping class
          var subgroups = $(".amui-o-table__body").find('tr.is--group-0').nextUntil("tr.is--group-1");
          for (var i = 0; i < subgroups.length; i++) {
            var subgroup = $(subgroups[i]).addClass('is--sub-group');
          }
        });
      }
    });
  });
</script>

1.12 Table with no data to display

Column 1 Column 2
visibility_off

Aucune donnée à afficher

 
<div class="amui-g-grid row amui-l-page">
  <div class="amui-g-grid__item col-xs-12">
    <div class="amui-m-panel is--fluid">
      <div class="amui-m-panel__body">
        <div class="amui-g-grid row">
          <div class="amui-g-grid__item col-xs-12">
            <ul class="amui-m-nav-tabs nav nav-tabs">
              <li role="presentation" class="amui-m-nav-tabs__item active"><a data-toggle="tab" href="#menu1">Title 1</a></li>
              <li role="presentation" class="amui-m-nav-tabs__item"><a data-toggle="tab" href="#menu2">Title 2</a></li>
            </ul>
            <div class="tab-content">
              <div id="menu1" class="tab-pane fade in active">
                <div class="amui-g-grid row is--center">
                  <div class="amui-g-grid__item col-xs-12">
                    <div class="amui-l-table-responsive table-responsive is--no-data">
                      <span class="amui-h-text-center">
                        <i class="material-icons is--lg">visibility_off</i>
                        <p>Aucune donnée à afficher</p>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              <div id="menu2" class="tab-pane fade">
                <div class="amui-g-grid row is--center">
                  <div class="amui-g-grid__item col-xs-12">
                    <div class="amui-l-table-responsive table-responsive is--no-data">
                      <span class="amui-h-text-center">
                        <i class="material-icons is--lg">visibility_off</i>
                        <p>Aucune donnée à afficher</p>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="amui-l-table-responsive table-responsive is--no-data">
  <table class="amui-o-table table responsive-card-table">
    <thead class="amui-o-table__header">
    <tr class="amui-o-table__header-row is--align-middle">
      <th scope="col" class="amui-o-table__header-col">Column 1</th>
      <th scope="col" class="amui-o-table__header-col">Column 2</th>
    </tr>
    </thead>
    <tbody class="amui-o-table__body">
    <tr class="amui-o-table__body-row">
      <th scope="row" colspan="2" class="amui-o-table__body-col" data-label="title">
        <span class="amui-h-text-center">
          <i class="material-icons is--lg">visibility_off</i>
          <p>Aucune donnée à afficher</p>
        </span>
      </th>
    </tr>
    </tbody>
  </table>  <!-- Organism Table -->
</div>
← Side bar navigation Top bar →