mdui 2 est arrivé, basé sur Material Design 3 et les Web Components. Consultez la documentation de mdui 2 ici.

Tableau

Utilisation

Le tableau est automatiquement initialisé après le chargement de la page. Pour un tableau généré dynamiquement, appelez mdui.mutation() pour l’initialiser.

Lecture associée

Spécifications Material Design : Composants - Data Tables

Style

Tableau de base

Ajoutez la classe .mdui-table à la balise table pour donner au tableau un style de base.

Exemple

<div class="mdui-table-fluid">
  <table class="mdui-table">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Larry the Bird</td>
        <td></td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>

Réactif

Si le tableau est trop large, des barres de défilement horizontales peuvent apparaître. Placez l’élément .mdui-table dans un conteneur .mdui-table-fluid pour permettre au tableau de défiler horizontalement lorsqu’il dépasse la largeur de la page.

<div class="mdui-table-fluid">
  <table class="mdui-table">
    ...
  </table>
</div>

Survol

Ajoutez la classe .mdui-table-hoverable à l’élément .mdui-table pour que chaque ligne du tbody réagisse au survol de la souris.

Exemple

<div class="mdui-table-fluid">
  <table class="mdui-table mdui-table-hoverable">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Larry the Bird</td>
        <td></td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>

Alignement des colonnes

Selon les spécifications de Material Design, les colonnes de texte doivent être alignées à gauche et les colonnes numériques à droite.

Dans mdui, les colonnes de tableau sont alignées à gauche par défaut. Ajoutez la classe .mdui-table-col-numeric à la balise <th> d’une colonne numérique pour l’aligner à droite.

Exemple

<div class="mdui-table-fluid">
  <table class="mdui-table">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th class="mdui-table-col-numeric">age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>18</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>21</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Larry the Bird</td>
        <td></td>
        <td>9</td>
      </tr>
    </tbody>
  </table>
</div>

Sélection de colonnes

Ajoutez la classe .mdui-table-selectable à l’élément .mdui-table pour ajouter une case à cocher devant chaque ligne.

Après avoir coché une case, la ligne reçoit la classe .mdui-table-row-selected sur l’élément <tr>.

Vous pouvez également ajouter au préalable la classe .mdui-table-row-selected à l’élément <tr> pour que la ligne soit sélectionnée par défaut.

Exemple

<div class="mdui-table-fluid">
  <table class="mdui-table mdui-table-selectable">
    <thead>
      <tr>
        <th>Dessert (100g serving)</th>
        <th
          class="mdui-table-col-numeric"
          mdui-tooltip="{content: 'The total amount of food energy in the given serving size.'}"
        >
          Calories
        </th>
        <th class="mdui-table-col-numeric">Fat (g)</th>
        <th class="mdui-table-col-numeric">Carbs (g)</th>
        <th class="mdui-table-col-numeric">Protein (g)</th>
        <th class="mdui-table-col-numeric">Sodium (mg)</th>
        <th
          class="mdui-table-col-numeric"
          mdui-tooltip="{content: 'The amount of calcium as a percentage of the recommended daily amount.'}"
        >
          Calcium (%)
        </th>
        <th class="mdui-table-col-numeric">Iron (%)</th>
      </tr>
    </thead>
    <tbody>
      <tr class="mdui-table-row-selected">
        <td>Frozen yogurt</td>
        <td>159</td>
        <td>6.0</td>
        <td>24</td>
        <td>4.0</td>
        <td>87</td>
        <td>14%</td>
        <td>1%</td>
      </tr>
      <tr>
        <td>Ice cream sandwich</td>
        <td>237</td>
        <td>9.0</td>
        <td>37</td>
        <td>4.3</td>
        <td>129</td>
        <td>8%</td>
        <td>1%</td>
      </tr>
      <tr>
        <td>Eclair</td>
        <td>262</td>
        <td>16.0</td>
        <td>24</td>
        <td>6.0</td>
        <td>337</td>
        <td>6%</td>
        <td>7%</td>
      </tr>
    </tbody>
  </table>
</div>

Tableau généré dynamiquement

Si votre tableau est généré dynamiquement, vous devez appeler mdui.mutation() pour l’initialiser.

Si vous modifiez dynamiquement les attributs du tableau, vous devez appeler la méthode mdui.updateTables() pour réinitialiser le tableau. Cette méthode peut accepter un sélecteur CSS (pour sélectionner un élément <table class="mdui-table">), un élément DOM ou un tableau d’éléments DOM comme argument, afin de ne réinitialiser que les tableaux spécifiés. Si aucun argument n’est fourni, tous les tableaux de la page seront réinitialisés.

Classes CSS

Nom de classe	Description
`.mdui-table`	Définir un composant tableau.
`.mdui-table-fluid`	Définir un tableau réactif.
`.mdui-table-hoverable`	Faire réagir les lignes du tableau au survol de la souris.
`.mdui-table-col-numeric`	Aligne la colonne à droite.
`.mdui-table-selectable`	Ajoute une case à cocher devant chaque ligne.
`.mdui-table-row-selected`	La ligne sélectionnée aura cette classe.

Snackbar

Boîte de dialogue