Material Design 3 ve Web Components tabanlı yeni mdui 2 yayınlandı, mdui 2 dokümantasyonuna gidin.

Tablo

Kullanım

Tablolar sayfa yüklendikten sonra otomatik olarak başlatılacaktır. Dinamik olarak oluşturulan tablolar için başlatma işlemi için mdui.mutation() çağrılması gerekir.

İlgili Okumalar

Material Design tasarım yönergeleri: Bileşenler - Veri Tabloları

Stil

Temel tablo

table etiketine .mdui-table sınıfını ekleyerek tabloya temel stilini verebilirsiniz.

Örnek

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

Duyarlı (Responsive)

Tablo genişliği çok fazlaysa, sayfada yatay kaydırma çubukları görünebilir. .mdui-table öğesini .mdui-table-fluid öğesi içine sararak, tablo genişliği sayfa genişliğini aştığında tablonun yatayda kaydırılabilmesini sağlayabilirsiniz.

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

Fare ile üzerine gelme

.mdui-table öğesine .mdui-table-hoverable sınıfını ekleyerek tbody içindeki her satırın fareyle üzerine gelindiğinde yanıt vermesini sağlayabilirsiniz.

Örnek

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

Sütun hizalama

Material Design yönergelerine göre, tablodaki metin sütunları sola hizalanmalı, sayısal sütunlar sağa hizalanmalıdır.

mdui tablolarında sütunlar varsayılan olarak sola hizalanır. Sayısal sütunların <th> etiketine .mdui-table-col-numeric sınıfını ekleyerek o sütunu sağa hizalayabilirsiniz.

Örnek

<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ütun seçimi

.mdui-table öğesine .mdui-table-selectable sınıfını ekleyerek her satırın başına bir onay kutusu (checkbox) ekleyebilirsiniz.

Onay kutusu seçildikten sonra, ilgili satırın <tr> öğesine .mdui-table-row-selected sınıfı eklenecektir.

İlgili satırın varsayılan olarak seçili gelmesi için <tr> öğesine önceden .mdui-table-row-selected sınıfını ekleyebilirsiniz.

Örnek

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

Dinamik olarak oluşturulan tablolar

Tablonuz dinamik olarak oluşturulmuşsa, başlatma işlemi için mdui.mutation() çağrılması gerekir.

Tablo özniteliklerini dinamik olarak değiştirdiyseniz, tabloları yeniden başlatmak için mdui.updateTables() yöntemini çağırmanız gerekir. Bu yöntem parametre olarak bir CSS seçicisi (<table class="mdui-table"> öğesini seçmek için), bir DOM öğesi veya bir DOM öğesi dizisi kabul edebilir; bu, yalnızca belirtilen tabloların yeniden başlatılacağı anlamına gelir. Eğer parametre girilmezse, sayfadaki tüm tablolar yeniden başlatılır.

CSS Sınıf Listesi

Sınıf Adı	Açıklama
`.mdui-table`	Tablo bileşenini tanımlar.
`.mdui-table-fluid`	Duyarlı tabloyu tanımlar.
`.mdui-table-hoverable`	Tablo satırlarının fareyle üzerine gelindiğinde yanıt vermesini sağlar.
`.mdui-table-col-numeric`	Sütunları sağa hizalar.
`.mdui-table-selectable`	Her satırın başına onay kutusu ekler.
`.mdui-table-row-selected`	Seçili satırlar bu sınıfa sahip olacaktır.

Snackbar

Diyalog