Nowy mdui 2 oparty na Material Design 3 i Web Components jest już dostępny, przejdź do dokumentacji mdui 2.

Tabela

Sposób użycia

Tabele zostaną zainicjowane automatycznie po załadowaniu strony. W przypadku tabel generowanych dynamicznie należy wywołać mdui.mutation() w celu inicjalizacji.

Powiązane artykuły

Wytyczne projektowe Material Design: Komponenty - Tabele danych

Styl

Podstawowa tabela

Dodaj klasę .mdui-table do znacznika table, aby nadać tabeli podstawowy styl.

Przykład

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

Responsywność

Jeśli tabela jest zbyt szeroka, na stronie może pojawić się poziomy pasek przewijania. Umieszczenie elementu .mdui-table wewnątrz elementu .mdui-table-fluid umożliwi poziome przewijanie tabeli, gdy jej szerokość przekroczy szerokość strony.

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

Najechanie myszą

Dodanie klasy .mdui-table-hoverable do elementu .mdui-table sprawi, że każdy wiersz w tbody będzie reagował na najechanie myszą.

Przykład

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

Wyrównanie kolumn

Zgodnie z wytycznymi Material Design, kolumny tekstowe w tabelach powinny być wyrównane do lewej, a kolumny numeryczne do prawej.

W mdui kolumny tabeli są domyślnie wyrównane do lewej. Dodaj klasę .mdui-table-col-numeric do znacznika <th> w kolumnie numerycznej, aby wyrównać ją do prawej.

Przykład

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

Wybór kolumn

Dodaj klasę .mdui-table-selectable do elementu .mdui-table, aby dodać checkbox przed każdym wierszem.

Po zaznaczeniu checkboxa do elementu <tr> tego wiersza zostanie dodana klasa .mdui-table-row-selected.

Możesz również wcześniej dodać klasę .mdui-table-row-selected do elementu <tr>, aby wiersz był domyślnie zaznaczony.

Przykład

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

Tabele generowane dynamicznie

Jeśli tabela jest generowana dynamicznie, należy wywołać mdui.mutation() w celu inicjalizacji.

Jeśli dynamicznie zmodyfikujesz atrybuty tabeli, musisz wywołać metodę mdui.updateTables(), aby ponownie zainicjować tabelę. Metoda ta może przyjąć jako parametr selektor CSS (używany do wyboru elementu <table class="mdui-table">), element DOM lub tablicę elementów DOM, co oznacza ponowną inicjalizację tylko określonych tabel. Jeśli nie zostaną przekazane żadne parametry, wszystkie tabele na stronie zostaną ponownie zainicjowane.

Lista klas CSS

Nazwa klasy	Opis
`.mdui-table`	Definiuje komponent tabeli.
`.mdui-table-fluid`	Definiuje responsywną tabelę.
`.mdui-table-hoverable`	Sprawia, że wiersze tabeli reagują na najechanie myszą.
`.mdui-table-col-numeric`	Wyrównuje kolumnę do prawej.
`.mdui-table-selectable`	Dodaje checkbox przed każdym wierszem.
`.mdui-table-row-selected`	Zaznaczone wiersze będą miały tę klasę.

Snackbar

Okno dialogowe