Zcela nové mdui 2 založené na Material Design 3 a Web Components bylo vydáno, přejděte na dokumentaci mdui 2.

Tabulka

Způsob volání

Tabulka se po načtení stránky automaticky inicializuje. Pro dynamicky generované tabulky musíte pro inicializaci zavolat mdui.mutation().

Související čtení

Designové zásady Material Design: Komponenty - Datová tabulka

Styl

Základní tabulka

Přidejte třídu .mdui-table k tagu table, abyste tabulce přiřadili základní styl.

Příklad

<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>

Responzivní

Pokud je tabulka příliš široká, může se na stránce objevit vodorovný posuvník. Zabalte prvek .mdui-table do prvku .mdui-table-fluid, čímž umožníte vodorovné posouvání tabulky v případě, že její šířka překročí šířku stránky.

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

Přejetí myší

Přidáním třídy .mdui-table-hoverable k prvku .mdui-table zajistíte, že každý řádek v tbody bude reagovat na přejetí myší.

Příklad

<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>

Zarovnání sloupců

Podle Material Design Guidelines by měly být textové sloupce v tabulce zarovnány vlevo a číselné sloupce zarovnány vpravo.

V mdui jsou sloupce tabulky standardně zarovnány vlevo. Přidejte třídu .mdui-table-col-numeric k tagu <th> číselného sloupce, aby byl tento sloupec zarovnán vpravo.

Příklad

<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>

Výběr řádků

Přidáním třídy .mdui-table-selectable k prvku .mdui-table přidáte před každý řádek zaškrtávací políčko.

Po zaškrtnutí políčka bude k prvku <tr> přidána třída .mdui-table-row-selected.

Třídu .mdui-table-row-selected můžete k prvku <tr> přidat i předem, aby byl řádek ve výchozím nastavení vybrán.

Příklad

<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>

Dynamicky generovaná tabulka

Pokud je vaše tabulka dynamicky generovaná, musíte pro inicializaci zavolat mdui.mutation().

Pokud jste dynamicky změnili atributy tabulky, musíte zavolat metodu mdui.updateTables() pro opětovnou inicializaci tabulky. Tato metoda přijímá jako parametr CSS selektor (pro výběr prvku <table class="mdui-table">), DOM prvek nebo pole DOM prvků, což znamená, že se znovu inicializují pouze zadané tabulky. Pokud není předán žádný parametr, budou znovu inicializovány všechny tabulky na stránce.

Seznam CSS tříd

Název třídy	Popis
`.mdui-table`	Definuje tabulku.
`.mdui-table-fluid`	Definuje responzivní tabulku.
`.mdui-table-hoverable`	Zajistí, že řádky tabulky budou reagovat na přejetí myší.
`.mdui-table-col-numeric`	Zarovná sloupec vpravo.
`.mdui-table-selectable`	Přidá zaškrtávací políčko před každý řádek.
`.mdui-table-row-selected`	Vybrané řádky budou mít tuto třídu.

Snackbar

Dialog