DataTable örnekleri

Bu sayfa DataTable'ın yedi kullanım şeklini çalışan kodla gösterir.

Her örnek bir tablo sınıfıdır ve demo panelde kendi sayfasında çalışır. Hepsi aynı sipariş verisini (Order, 5.000 kayıt) kullanır. Bir tabloyu sayfaya koymak için sınıfı Livewire bileşeni olarak yazın:

<livewire:tables.examples.basic-orders-table />

Adım adım anlatım için DataTable, bütün seçenekler için DataTable: tüm seçenekler sayfasına bakın.

Temel

Bir liste sayfasına hızlıca arama, sıralama ve sayfalama eklemek istediğinizde bu en küçük tabloyla başlayın.

use Acun\Ui\DataTable\Column;
use Acun\Ui\DataTable\DataTable;
use App\Models\Order;
use Illuminate\Database\Eloquent\Builder;

final class BasicOrdersTable extends DataTable
{
    public string $title = 'Siparişler';

    protected function query(): Builder
    {
        return Order::query();
    }

    protected function columns(): array
    {
        return [
            Column::make('Sipariş no', 'number')->searchable()->sortable()->nowrap(),
            Column::make('Müşteri', 'customer_name')->searchable('contains')->sortable(),
            Column::make('Ürün', 'product')->renderUsing(fn (Order $order) => $order->productName()),
            Column::make('Tutar', 'amount')
                ->renderUsing(fn (Order $order) => $order->formattedAmount())
                ->align('right')
                ->sortable(),
            Column::make('Sipariş tarihi', 'ordered_at')->dateTime()->sortable(),
        ];
    }
}

Yalnızca iki metot yazılır: query() hangi kayıtların, columns() hangi sütunların görüneceğini söyler. Üstte arama kutusu ve sayfa boyutu, başlıkta sıralama okları, altta sayfa numaraları çıkar. Telefonda tablo kendi kutusunda yana kayar, sayfa taşmaz.

Demo sayfası

Dar ekrana uyan tablo

Sütunu çok olan ve telefonda da okunması gereken tablolarda kullanın.

final class ResponsiveOrdersTable extends DataTable
{
    protected function query(): Builder
    {
        return Order::query();
    }

    protected function columns(): array
    {
        return [
            Column::make('Sipariş no', 'number')->searchable()->sortable()->nowrap(),
            Column::make('Müşteri', 'customer_name')->searchable('contains')->sortable(),
            Column::make('Tutar', 'amount')->renderUsing(fn (Order $order) => $order->formattedAmount())->align('right'),
            // Telefonda gizlenir (38rem altı).
            Column::make('Durum', 'status')->view('admin.tables.cells.order-status')->priority(3),
            Column::make('Sipariş tarihi', 'ordered_at')->dateTime()->priority(3),
            // Tablette ve dar pencerede gizlenir (52rem altı).
            Column::make('Ürün', 'product')->renderUsing(fn (Order $order) => $order->productName())->priority(4),
            Column::make('Şehir', 'city')->priority(4),
        ];
    }

    // (+) düğmesi yalnızca bir sütun ekran genişliği yüzünden gizliyken görünür.
    protected function rowDetails(): ?string
    {
        return 'responsive';
    }
}

priority() sütunun hangi genişlikte gizleneceğini söyler: priority(3) 38rem (608 px), priority(4) 52rem (832 px) altında gizlenir. Pencere daraldıkça önce Ürün ve Şehir, telefonda Durum ve Sipariş tarihi kaybolur. O anda satır başında (+) belirir; düğme gizli alanlar dahil satırın tamamını bir pencerede gösterir.

Demo sayfası

Kaydırmalı tablo

Çok sütunlu, çok satırlı bir tabloyu sabit bir yükseklikte göstermek için kullanın; ör. bir panelin içinde ya da bir özet sayfasında.

final class ScrollOrdersTable extends DataTable
{
    protected function query(): Builder
    {
        return Order::query();
    }

    protected function columns(): array
    {
        return [/* 14 sütun: no, müşteri, e-posta, ürün, birim fiyat, adet, tutar, KDV, … */];
    }

    protected function scrollX(): bool
    {
        return true;
    }

    protected function scrollY(): ?string
    {
        return '400px';   // herhangi bir CSS uzunluğu: '28rem', 'min(70vh, 42rem)'…
    }
}

scrollX() hücreleri tek satırda tutar; geniş tablo kendi kutusunda yana kayar. scrollY() kutuya bir yükseklik verir; tablo kutunun içinde aşağı kayar ve başlık satırı kutunun üstünde kalır. Telefonda kutu parmakla iki yöne kayar, sayfa taşmaz.

Uzun bir metin sütununun (not, adres) alt satıra geçmesi için o sütuna wrap() ekleyin: Column::make('Not', 'note')->wrap()->width('20rem').

Demo sayfası

Sunucu taraflı tablo

Her DataTable böyle çalışır; kayıt sayısı büyüdüğünde ayrıca bir şey yapmanız gerekmez. Bu örnek bunu filtreler ve varsayılan sırayla açıkça gösterir.

final class OrdersTable extends DataTable
{
    public string $title = 'Siparişler';

    protected function query(): Builder
    {
        return Order::query();
    }

    protected function columns(): array
    {
        return [
            Column::make('Sipariş no', 'number')->searchable()->sortable(),
            Column::make('Müşteri', 'customer_name')->searchable('contains')->sortable(),
            Column::make('Tutar', 'amount')->renderUsing(fn (Order $order) => $order->formattedAmount())->align('right')->sortable(),
            Column::make('Durum', 'status')->view('admin.tables.cells.order-status'),
        ];
    }

    protected function filters(): array
    {
        return [
            Filter::multiSelect('Durum', 'status')->options(OrderStatus::options())->inToolbar(),
            Filter::dateRange('Sipariş tarihi', 'ordered_at'),
        ];
    }

    protected function defaultSort(): ?array
    {
        return ['field' => 'ordered_at', 'direction' => 'desc'];
    }
}

Kullanıcı yazdığında, filtre seçtiğinde, sıraladığında ya da sayfa değiştirdiğinde tarayıcı sunucuya küçük bir Livewire isteği (Ajax) gönderir. Paket bu değişikliği query() sorgusuna ekler; sorgu veritabanında çalışır ve tarayıcıya yalnızca açık sayfanın satırları döner. Bu yüzden 5.000 kayıt da 5 milyon kayıt da aynı hızda açılır; yeter ki arama ve sıralama sütunlarında indeks olsun (Arama).

Arama, sıralama, filtre ve sayfa adres çubuğuna yazılır; sayfayı yenileyince ya da bağlantıyı paylaşınca aynı liste açılır. Demo sayfasının ikinci sekmesi aynı listeyi DataTable olmadan, WithListing ile elle kurar (Liste sayfası).

Demo sayfası

Sabit başlık

Uzun listelerde kullanın: sayfa aşağı kaydırılınca kullanıcı sütun adlarını görmeye devam eder ve yukarı dönmeden sıralamayı değiştirir.

final class FixedHeaderOrdersTable extends DataTable
{
    protected function query(): Builder
    {
        return Order::query();
    }

    protected function columns(): array
    {
        return [/* … */];
    }

    protected function fixedHeader(): bool
    {
        return true;
    }

    protected function defaultPerPage(): int
    {
        return 50;
    }
}

Başlık satırı üst çubuğun altına gelince orada kalır; tablonun sonuna gelince tabloyla birlikte yukarı çıkar. Kalan başlıktaki sıralama okları ve "tümünü seç" kutusu çalışır. Tam ekranda ve telefonda da çalışır. Bu özellik PRO JavaScript dosyasını ister (import '@acunsoft/acun-ui-pro' ya da @acunUiScripts).

Demo sayfası

Sabit sütunlar

Yana kayan geniş tablolarda kullanın: kullanıcı kaydırırken hangi satıra baktığını (ör. sipariş no) ve satırın işlemlerini kaybetmez.

use Acun\Ui\DataTable\Actions\RowAction;

final class FixedColumnsOrdersTable extends DataTable
{
    protected function query(): Builder
    {
        return Order::query();
    }

    protected function columns(): array
    {
        return [/* 14 sütun */];
    }

    protected function actions(): array
    {
        return [
            RowAction::make('detail')->label('Detay')->icon('eye')
                ->action(fn (Order $order) => $this->dispatch('show-order', id: $order->id)),
        ];
    }

    protected function scrollX(): bool
    {
        return true;
    }

    // start: seçim kutusu, (+) ve ilk 1 veri sütunu solda; end: işlemler sütunu sağda.
    protected function fixedColumns(): array
    {
        return ['start' => 1, 'end' => true];
    }

    // İsteğe bağlı: başlık da sayfada sabit kalsın.
    protected function fixedHeader(): bool
    {
        return true;
    }
}

Tablo yana kaydırılınca seçim, (+) ve Sipariş no sütunları solda, işlemler sağda durur; aradaki sütunlar onların altından geçer ve kenarda hafif bir gölge belirir. Telefonda (640 px altı) yalnızca soldaki sütunlar sabit kalır. Bu özellik de PRO JavaScript dosyasını ister.

Demo sayfası

Düğmeler ve dışa aktarma

Kullanıcının listeyi CSV ya da JSON olarak indirmesi, PDF olarak kaydetmesi, yazdırması ya da panoya kopyalaması için kullanın. PDF, yazdırma sayfasını açar; dosyayı tarayıcının "PDF olarak kaydet" seçeneği oluşturur.

use Acun\Ui\DataTable\Actions\ExportAction;
use Acun\Ui\DataTable\Actions\TableAction;
use Acun\Ui\DataTable\Actions\UtilityAction;

final class ButtonsOrdersTable extends DataTable
{
    protected function query(): Builder
    {
        return Order::query();
    }

    protected function columns(): array
    {
        return [/* … */];
    }

    protected function exportActions(): array
    {
        return [
            ExportAction::csv(),
            ExportAction::pdf(),
            ExportAction::json(),
            ExportAction::print(),
            ExportAction::copy(),
        ];
    }

    protected function utilityActions(): array
    {
        return [UtilityAction::refresh(), UtilityAction::columns()];
    }

    protected function headerActions(): array
    {
        return [
            TableAction::make('create')->label('Yeni sipariş')->icon('plus')->url(fn () => route('orders.create')),
        ];
    }
}

Araç çubuğunda Yenile, sütun menüsü ve "Dışa aktar" düğmeleri, en uçta "Yeni sipariş" düğmesi çıkar. "Dışa aktar" menüsünde önce kapsam seçilir: bu sayfa, filtreye uyan kayıtlar, seçilen satırlar ya da tümü. Dosya sunucuda, tablonun kendi sorgusuyla hazırlanır; arama, filtre ve sıralama dosyada da aynıdır. 5.000 satırı aşan dosyalar kuyrukta hazırlanır ve hazır olunca bir indirme bağlantısı gelir. Telefonda araçlar tek bir "İşlemler" düğmesinde toplanır.

Ayrıntılar: İşlemler ve Dışa aktarma.

Demo sayfası