TR
Türkçe English
Başlangıç
76 · Tablolar

Tablo

Veri tabloları için kart görünümlü, yatay kaydırılabilen kap ve hazır tablo stilleri. Kendi table etiketinizi yazarsınız; ui-table sınıfı başlık, hücre, satır ve toplam satırı görünümünü verir.

acun:table · acun:sortable-th
01

Temel kullanım

Tabloyu acun:table içine koyun ve table etiketine ui-table sınıfını verin. Kap tabloyu beyaz bir kart gibi çerçeveler ve sığmayan sütunlarda yatay kaydırma sağlar. Hücreler varsayılan olarak tek satırdır.

CANLI ÖRNEK 
<acun:table>
    <table class="ui-table">
        <thead>
            <tr><th>Müşteri</th><th>Şehir</th><th>Son sipariş</th></tr>
        </thead>
        <tbody>
            <tr><td>Ayşe Yılmaz</td><td>İstanbul</td><td>12.09.2026</td></tr>
            <tr><td>Mehmet Kaya</td><td>Ankara</td><td>10.09.2026</td></tr>
            <tr><td>Zeynep Arslan</td><td>İzmir</td><td>08.09.2026</td></tr>
        </tbody>
    </table>
</acun:table>
PropDeğerler
ui-tabletable etiketine verilen sınıf
02

Sayılar ve hizalama

Sayı sütunlarını text-right ile sağa yaslayın ve tabular-nums ile rakamları eşit genişlikte yazın; böylece basamaklar alt alta hizalanır. Kısa kod ve adetler için text-center da kullanılabilir.

CANLI ÖRNEK 
<acun:table>
    <table class="ui-table">
        <thead>
            <tr><th>Ürün</th><th class="text-center">Kod</th><th class="text-right">Satış</th><th class="text-right">Memnuniyet</th></tr>
        </thead>
        <tbody>
            <tr><td>Kablosuz kulaklık</td><td class="text-center">WH-01</td><td class="text-right tabular-nums">312</td><td class="text-right tabular-nums">%91,4</td></tr>
            <tr><td>Mekanik klavye</td><td class="text-center">MK-04</td><td class="text-right tabular-nums">148</td><td class="text-right tabular-nums">%75,7</td></tr>
            <tr><td>USB-C şarj aleti</td><td class="text-center">UC-02</td><td class="text-right tabular-nums">96</td><td class="text-right tabular-nums">%68,8</td></tr>
        </tbody>
    </table>
</acun:table>
PropDeğerler
text-right · text-centerHücre hizalama
tabular-numsEşit genişlikte rakamlar
03

Toplam satırı

tfoot içindeki satır kalın yazı, koyu bir üst çizgi ve gri zeminle toplam satırı olarak görünür.

CANLI ÖRNEK 
<acun:table>
    <table class="ui-table">
        <thead>
            <tr><th>Ay</th><th class="text-right">Sipariş</th><th class="text-right">İade</th></tr>
        </thead>
        <tbody>
            <tr><td>Eylül 2026</td><td class="text-right tabular-nums">1.248</td><td class="text-right tabular-nums">86</td></tr>
            <tr><td>Ağustos 2026</td><td class="text-right tabular-nums">1.192</td><td class="text-right tabular-nums">104</td></tr>
        </tbody>
        <tfoot>
            <tr><td>Toplam</td><td class="text-right tabular-nums">2.440</td><td class="text-right tabular-nums">190</td></tr>
        </tfoot>
    </table>
</acun:table>
PropDeğerler
tfootToplam satırı stili
04

Sıralanabilir başlıklar

acun:sortable-th sıradan bir th yerine kullanılır ve tıklanınca Livewire bileşeninin sortBy(field) metodunu çağırır (WithListing bu metodu sağlar). sort-field ile sort-direction o anki sıralamayı alır; eşleşen sütunun oku vurgulanır ve aria-sort eklenir. Başlık klavyeyle de kullanılabilen bir düğmedir.

CANLI ÖRNEK 
<acun:table>
    <table class="ui-table">
        <thead>
            <tr>
                <acun:sortable-th field="ad" sort-field="satis" sort-direction="desc">Ürün</acun:sortable-th>
                <acun:sortable-th field="satis" sort-field="satis" sort-direction="desc" class="text-right">Satış</acun:sortable-th>
            </tr>
        </thead>
        <tbody>
            <tr><td>Kablosuz kulaklık</td><td class="text-right tabular-nums">312</td></tr>
            <tr><td>Mekanik klavye</td><td class="text-right tabular-nums">148</td></tr>
        </tbody>
    </table>
</acun:table>
PropDeğerler
fieldBu sütunun alan adı
sort-fieldŞu anki sıralama alanı ($sortField)
sort-directionasc | desc ($sortDirection)
05

Durum ve işlemler

Durumu acun:badge ile, satır işlemlerini sağdaki ikon düğmeleriyle gösterin. İkon düğmelerine aria-label verin; uzun metinli hücrelerde tek satır kuralını whitespace-normal ile kaldırabilirsiniz.

CANLI ÖRNEK 
<acun:table>
    <table class="ui-table">
        <thead>
            <tr><th>Ürün</th><th>Not</th><th>Durum</th><th class="w-24"><span class="sr-only">İşlemler</span></th></tr>
        </thead>
        <tbody>
            <tr>
                <td class="font-medium text-gray-900 dark:text-zinc-100">Mekanik klavye</td>
                <td class="min-w-64 whitespace-normal">Tedarikçi kasımda fiyat artıracak; kampanya fiyatı ekim sonuna kadar geçerli olmalı.</td>
                <td><acun:badge variant="success">Aktif</acun:badge></td>
                <td class="text-right">
                    <acun:button variant="ghost" size="icon" aria-label="Düzenle"><acun:icon name="pencil-square" /></acun:button>
                    <acun:button variant="ghost" size="icon" aria-label="Sil" class="text-red-600"><acun:icon name="trash" /></acun:button>
                </td>
            </tr>
        </tbody>
    </table>
</acun:table>
06

Boş tablo

Kayıt yoksa başlık satırını koruyup tek bir hücreye acun:empty-state koyun; colspan sütun sayısı kadar olmalıdır.

CANLI ÖRNEK 
<acun:table>
    <table class="ui-table">
        <thead>
            <tr><th>Müşteri</th><th>Şehir</th><th>Son sipariş</th></tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="3" class="whitespace-normal">
                    <acun:empty-state title="Kayıt bulunamadı" description="Arama veya filtre kriterlerinizi değiştirmeyi deneyin." class="border-0" />
                </td>
            </tr>
        </tbody>
    </table>
</acun:table>
07

Parçalı tablo

table etiketini kendiniz yazmak yerine tabloyu parçalarla kurun: acun:table.columns › acun:table.column, acun:table.rows › acun:table.row › acun:table.cell. İçerik bir parçayla başlayınca bileşen <table class="ui-table"> etiketini kendisi çizer. align (start · center · end) kolonu ve hücreyi hizalar.

CANLI ÖRNEK 
<acun:table>
    <acun:table.columns>
        <acun:table.column>Proje</acun:table.column>
        <acun:table.column>Sorumlu</acun:table.column>
        <acun:table.column align="center">Durum</acun:table.column>
        <acun:table.column align="end">Görev</acun:table.column>
        <acun:table.column align="end">İlerleme</acun:table.column>
    </acun:table.columns>

    <acun:table.rows>
        <acun:table.row>
            <acun:table.cell class="font-medium text-gray-900 dark:text-zinc-100">Mobil uygulama</acun:table.cell>
            <acun:table.cell>Ahmet Yılmaz</acun:table.cell>
            <acun:table.cell align="center"><acun:badge variant="info">Devam ediyor</acun:badge></acun:table.cell>
            <acun:table.cell align="end" class="tabular-nums">42</acun:table.cell>
            <acun:table.cell align="end" class="tabular-nums">%64</acun:table.cell>
        </acun:table.row>
        <acun:table.row>
            <acun:table.cell class="font-medium text-gray-900 dark:text-zinc-100">Web sitesi</acun:table.cell>
            <acun:table.cell>Elif Kaya</acun:table.cell>
            <acun:table.cell align="center"><acun:badge variant="success">Tamamlandı</acun:badge></acun:table.cell>
            <acun:table.cell align="end" class="tabular-nums">37</acun:table.cell>
            <acun:table.cell align="end" class="tabular-nums">%100</acun:table.cell>
        </acun:table.row>
        <acun:table.row>
            <acun:table.cell class="font-medium text-gray-900 dark:text-zinc-100">Ödeme sayfası</acun:table.cell>
            <acun:table.cell>Murat Demir</acun:table.cell>
            <acun:table.cell align="center"><acun:badge variant="warning">Gecikmede</acun:badge></acun:table.cell>
            <acun:table.cell align="end" class="tabular-nums">51</acun:table.cell>
            <acun:table.cell align="end" class="tabular-nums">%38</acun:table.cell>
        </acun:table.row>
    </acun:table.rows>
</acun:table>
08

Parçalı tabloda sıralama (Livewire)

sortable ve field alan kolon, tıklanınca Livewire bileşeninizin sortBy(field) metodunu çağırır ve aria-sort ile yönü duyurur; sıralama durumunu bir kez acun:table'a verin. Bileşende $sortField, $sortDirection ve sortBy() bulunmalıdır (WithListing bunları hazır getirir).

BLADE 
<acun:table :sort-field="$sortField" :sort-direction="$sortDirection">
    <acun:table.columns>
        <acun:table.column sortable field="name">Proje</acun:table.column>
        <acun:table.column sortable field="owner">Sorumlu</acun:table.column>
        <acun:table.column sortable field="tasks" align="end">Görev</acun:table.column>
        <acun:table.column align="end">İşlemler</acun:table.column>
    </acun:table.columns>

    <acun:table.rows>
        @forelse ($projects as $project)
            <acun:table.row wire:key="project-{{ $project->id }}">
                <acun:table.cell class="font-medium text-gray-900 dark:text-zinc-100">{{ $project->name }}</acun:table.cell>
                <acun:table.cell>{{ $project->owner }}</acun:table.cell>
                <acun:table.cell align="end" class="tabular-nums">{{ $project->tasks }}</acun:table.cell>
                <acun:table.cell align="end">
                    <acun:button size="icon" variant="soft" wire:click="edit({{ $project->id }})" aria-label="Düzenle" title="Düzenle">
                        <acun:icon name="pencil-square" size="4" />
                    </acun:button>
                </acun:table.cell>
            </acun:table.row>
        @empty
            <acun:table.row>
                <acun:table.cell colspan="4" align="center" class="text-gray-500 dark:text-zinc-400">Bu filtrede proje yok.</acun:table.cell>
            </acun:table.row>
        @endforelse
    </acun:table.rows>
</acun:table>
API

Prop'lar ve slot'lar

Bileşenin kabul ettiği değerler.

PropVarsayılanAçıklama
acun:table — class gibi öznitelikler kaydırılabilir kaba eklenir
acun:table: sort-field · sort-directionnullParçalı kullanımda sıralanabilir kolonların ortak sıralama durumu
table.column: alignstartstart · center · end
table.column: sortable · fieldfalse · nullSıralanabilir başlık; field zorunlu, tıklanınca sortBy(field) çağrılır
table.cell: alignstartstart · center · end
ui-table (sınıf) — table etiketine: başlık, hücre, satır üzerine gelme ve tfoot stilleri
sortable-th: field — Zorunlu. Tıklanınca sortBy(field) çağrılır
sortable-th: sort-field — Zorunlu. O anki sıralama alanı
sortable-th: sort-direction — Zorunlu. asc · desc
Slot'lar: acun:table: varsayılan slot'a table etiketi ya da parçalar (acun:table.columns › acun:table.column, acun:table.rows › acun:table.row › acun:table.cell) · acun:sortable-th: başlık metni.
Acun UI · TabloDetaylı kullanım ve örnekler