Basic example Table alignment Striped rows Bordered table Hover rows Condensed table Contextual classes Data table Data table with custom search bar

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>
← Side bar navigation Top bar →