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

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</td>
        <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</td>
        <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</td>
        <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</td>
        <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</td>
        <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</td>
        <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</td>
        <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</td>
        <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</td>
        <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</td>
        <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</td>
        <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</td>
        <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</td>
        <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</td>
        <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</td>
        <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</td>
        <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</td>
        <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</td>
        <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</td>
        <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</td>
        <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</td>
        <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</td>
        <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</td>
        <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</td>
        <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</td>
        <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</td>
        <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</td>
        <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</td>
        <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</td>
        <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</td>
        <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</td>
        <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</td>
        <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</td>
        <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</td>
        <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</td>
        <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</td>
        <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</td>
        <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</td>
        <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 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" 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" 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" 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" 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" 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" 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-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="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" 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-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="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" 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-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="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" 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-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="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" 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-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="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" 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-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="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" 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-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 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" 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--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 dropdown">
                          <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" aria-labelledby="dropdownMenu14">
                            <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>
← Side bar navigation Top bar →