İçerik · Sortable table

Sıralanabilir tablo

Başlığa basınca sütuna göre sıralanan tablo. Sayı sütunları sayı olarak sıralanır.

CSS: kararlı
JavaScript: sütun sıralama
React: kararlı
Vue: kararlı

Örnekler

Üç sütun Canlı örnek

Sosyal güvenlik il müdürlükleri

İzmir	28	1.940
Ankara	31	2.310
Çanakkale	7	312
İstanbul	52	4.120

HTML kodunu göster

<div class="trds-tablo-kap">
  <table class="trds-tablo trds-tablo--siralanabilir" data-trds="sirala">
    <caption>Sosyal güvenlik il müdürlükleri</caption>
    <thead><tr><th scope="col" aria-sort="none"><button type="button">İl <svg class="trds-simge" aria-hidden="true"><use href="#edk-sort-up-down"/></svg></button></th><th scope="col" aria-sort="none"><button type="button">Merkez sayısı <svg class="trds-simge" aria-hidden="true"><use href="#edk-sort-up-down"/></svg></button></th><th scope="col" aria-sort="none"><button type="button">Çalışan <svg class="trds-simge" aria-hidden="true"><use href="#edk-sort-up-down"/></svg></button></th></tr></thead>
    <tbody><tr><td>İzmir</td><td>28</td><td>1.940</td></tr><tr><td>Ankara</td><td>31</td><td>2.310</td></tr><tr><td>Çanakkale</td><td>7</td><td>312</td></tr><tr><td>İstanbul</td><td>52</td><td>4.120</td></tr></tbody>
  </table>
</div>

Ne zaman kullanılır

10 satırdan uzun veri tablosunda kullanın.
Sunucudan sayfalanan veride sıralamayı sunucu yapar. Bu bileşen sayfadaki satırları sıralar.

Erişilebilirlik

Başlıklar aria-sort taşır ve düğmedir. Sıralama sonucu canlı bölgeden duyurulur.
Sıralama yönü ok simgesiyle ve metinle belli olur.

Karşılanan WCAG 2.2 ölçütleri 1.3.1 4.1.3

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: IE, JP.