A Material Design 3 és Web Components alapú új mdui 2 már elérhető, tekintse meg az mdui 2 dokumentációját.

Táblázat

Használat

A táblázatok az oldal betöltése után automatikusan inicializálódnak. Dinamikusan létrehozott táblázatok esetén a mdui.mutation() metódust kell meghívni az inicializáláshoz.

Kapcsolódó olvasmányok

Material Design tervezési irányelvek: Komponensek – Adattáblázatok

Stílus

Alap táblázat

Adja hozzá az .mdui-table osztályt a table címkéhez az alapvető stílusok alkalmazásához.

Példa

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

Reszponzív

Ha a táblázat túl széles, vízszintes görgetősáv jelenhet meg az oldalon. Ha az .mdui-table elemet egy .mdui-table-fluid elembe csomagolja, a táblázat vízszintesen görgethetővé válik, ha szélessége meghaladja az oldal szélességét.

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

Egér rámutatás (Hover)

Az .mdui-table-hoverable osztály hozzáadása az .mdui-table elemhez lehetővé teszi, hogy a tbody minden sora reagáljon az egér rámutatásra.

Példa

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

Oszlopigazítás

A Material Design tervezési irányelvek szerint a szöveges oszlopokat balra, a számértékeket tartalmazó oszlopokat pedig jobbra kell igazítani.

Az mdui táblázataiban az oszlopok alapértelmezés szerint balra igazítottak. Adja hozzá a .mdui-table-col-numeric osztályt a numerikus oszlop <th> címkéjéhez, hogy jobbra igazítsa azt.

Példa

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

Sorválasztás

Az .mdui-table-selectable osztály hozzáadása az .mdui-table elemhez egy jelölőnégyzetet ad minden sor elé.

A jelölőnégyzet bejelölése után az .mdui-table-row-selected osztály hozzáadódik az adott sor <tr> eleméhez.

Előre is hozzáadhatja az .mdui-table-row-selected osztályt a <tr> elemhez, hogy a sor alapértelmezés szerint ki legyen választva.

Példa

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

Dinamikusan létrehozott táblázat

Ha a táblázat dinamikusan jön létre, hívni kell a mdui.mutation() metódust az inicializáláshoz.

Ha dinamikusan módosítja a táblázat attribútumait, hívja meg az mdui.updateTables() metódust a táblázatok újrainicializálásához. Ez a metódus elfogadhat egy CSS szelektort (a <table class="mdui-table"> elem kiválasztásához), egy DOM elemet vagy DOM elemek tömbjét paraméterként a megadott táblázatok újrainicializálásához. Ha nem ad meg paramétert, az oldal összes táblázata újrainicializálódik.

CSS osztályok listája

Osztálynév	Leírás
`.mdui-table`	Táblázat komponens meghatározása.
`.mdui-table-fluid`	Reszponzív táblázat meghatározása.
`.mdui-table-hoverable`	A táblázat sorai reagálnak az egér rámutatásra.
`.mdui-table-col-numeric`	Oszlop jobbra igazítása.
`.mdui-table-selectable`	Jelölőnégyzet hozzáadása minden sor elé.
`.mdui-table-row-selected`	A kiválasztott sorok rendelkeznek ezzel az osztállyal.

Snackbar

Párbeszédablak