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

Seçim Kontrolleri

Tablolar sayfa yüklendikten sonra otomatik olarak başlatılacaktır. Dinamik olarak oluşturulan tablolar için başlatma işlemi için <a href="/tr/docs/1/global#mutation"><code>mdui.mutation()</code></a> çağrılması gerekir.

Kullanım

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

Temel tablo

Duyarlı (Responsive)

İlgili Okumalar

Fare ile üzerine gelme

Stil

Sütun hizalama

Örnek

<label class="mdui-checkbox">
  <input type="checkbox"/>
  <i class="mdui-checkbox-icon"></i>
  <code>table</code> etiketine <code>.mdui-table</code> sınıfını ekleyerek tabloya temel stilini verebilirsiniz.
</label>

<label class="mdui-checkbox">
  <input type="checkbox" checked/>
  <i class="mdui-checkbox-icon"></i>
  Tablo genişliği çok fazlaysa, sayfada yatay kaydırma çubukları görünebilir. <code>.mdui-table</code> öğesini <code>.mdui-table-fluid</code> öğesi içine sararak, tablo genişliği sayfa genişliğini aştığında tablonun yatayda kaydırılabilmesini sağlayabilirsiniz.
</label>

<label class="mdui-checkbox">
  <input type="checkbox" disabled/>
  <i class="mdui-checkbox-icon"></i>
  <code>.mdui-table</code> öğesine <code>.mdui-table-hoverable</code> sınıfını ekleyerek <code>tbody</code> içindeki her satırın fareyle üzerine gelindiğinde yanıt vermesini sağlayabilirsiniz.
</label>

<label class="mdui-checkbox">
  <input type="checkbox" disabled checked/>
  <i class="mdui-checkbox-icon"></i>
  Material Design yönergelerine göre, tablodaki metin sütunları sola hizalanmalı, sayısal sütunlar sağa hizalanmalıdır.
</label>

<label class="mdui-checkbox">
  <input type="checkbox" id="indeterminate-demo1"/>
  <i class="mdui-checkbox-icon"></i>
  mdui tablolarında sütunlar varsayılan olarak sola hizalanır. Sayısal sütunların <code>&lt;th&gt;</code> etiketine <code>.mdui-table-col-numeric</code> sınıfını ekleyerek o sütunu sağa hizalayabilirsiniz.
</label>
<script>
  // Onay kutusu seçildikten sonra, ilgili satırın <code>&lt;tr&gt;</code> öğesine <code>.mdui-table-row-selected</code> sınıfı eklenecektir.
  document.getElementById('indeterminate-demo1').indeterminate = true;
</script>

<label class="mdui-checkbox">
  <input type="checkbox" disabled id="indeterminate-demo2"/>
  <i class="mdui-checkbox-icon"></i>
  <code>.mdui-table</code> öğesine <code>.mdui-table-selectable</code> sınıfını ekleyerek her satırın başına bir onay kutusu (checkbox) ekleyebilirsiniz.
</label>
<script>
  document.getElementById('indeterminate-demo2').indeterminate = true;
</script>

Sütun seçimi

Örnek

<form>

  <label class="mdui-radio">
    <input type="radio" name="group1"/>
    <i class="mdui-radio-icon"></i>
    <code>table</code> etiketine <code>.mdui-table</code> sınıfını ekleyerek tabloya temel stilini verebilirsiniz.
  </label>

  <label class="mdui-radio">
    <input type="radio" name="group1" checked/>
    <i class="mdui-radio-icon"></i>
    Tablo genişliği çok fazlaysa, sayfada yatay kaydırma çubukları görünebilir. <code>.mdui-table</code> öğesini <code>.mdui-table-fluid</code> öğesi içine sararak, tablo genişliği sayfa genişliğini aştığında tablonun yatayda kaydırılabilmesini sağlayabilirsiniz.
  </label>

  <label class="mdui-radio">
    <input type="radio" name="group1" disabled/>
    <i class="mdui-radio-icon"></i>
    <code>.mdui-table</code> öğesine <code>.mdui-table-hoverable</code> sınıfını ekleyerek <code>tbody</code> içindeki her satırın fareyle üzerine gelindiğinde yanıt vermesini sağlayabilirsiniz.
  </label>

</form>

<form>
  <label class="mdui-radio">
    <input type="radio" name="group1" disabled checked/>
    <i class="mdui-radio-icon"></i>
    Material Design yönergelerine göre, tablodaki metin sütunları sola hizalanmalı, sayısal sütunlar sağa hizalanmalıdır.
  </label>
</form>

Dinamik olarak oluşturulan tablolar

Örnek

<label class="mdui-switch">
  <input type="checkbox"/>
  <i class="mdui-switch-icon"></i>
</label>

<label class="mdui-switch">
  <input type="checkbox" checked/>
  <i class="mdui-switch-icon"></i>
</label>

<label class="mdui-switch">
  <input type="checkbox" disabled/>
  <i class="mdui-switch-icon"></i>
</label>

<label class="mdui-switch">
  <input type="checkbox" disabled checked/>
  <i class="mdui-switch-icon"></i>
</label>

CSS Sınıf Listesi

Sınıf Adı	Açıklama
`.mdui-checkbox`	İlgili satırın varsayılan olarak seçili gelmesi için <code><tr></code> öğesine önceden <code>.mdui-table-row-selected</code> sınıfını ekleyebilirsiniz.
`.mdui-checkbox-icon`	Tablonuz dinamik olarak oluşturulmuşsa, başlatma işlemi için <a href="/tr/docs/1/global#mutation"><code>mdui.mutation()</code></a> çağrılması gerekir.
`.mdui-radio`	Tablo özniteliklerini dinamik olarak değiştirdiyseniz, tabloları yeniden başlatmak için <code>mdui.updateTables()</code> yöntemini çağırmanız gerekir. Bu yöntem parametre olarak bir CSS seçicisi (<code><table class="mdui-table"></code> öğ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.
`.mdui-radio-icon`	Tablo bileşenini tanımlar.
`.mdui-switch`	Duyarlı tabloyu tanımlar.
`.mdui-switch-icon`	Tablo satırlarının fareyle üzerine gelindiğinde yanıt vermesini sağlar.

Metin Alanı

Kaydırıcı