DataTable

DataTable aranabilir, sıralanabilir bir tablo hazırlar. Siz yalnızca hangi kayıtların listeleneceğini ve hangi sütunların görüneceğini yazarsınız; arama kutusunu, filtreleri ve sayfalamayı DataTable çizer.

DataTable PRO paketindedir. Paketi ve JavaScript dosyasını Mevcut projeye ekleme sayfasındaki PRO adımlarıyla ekleyin.

En kısa örnek

Tablo bir Livewire sınıfıdır: query() hangi kayıtların listeleneceğini, columns() hangi sütunların görüneceğini söyler. app/Livewire/OrdersTable.php dosyasını oluşturun:

namespace App\Livewire;

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

final class OrdersTable extends DataTable
{
    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('Sipariş tarihi', 'ordered_at')->dateTime()->sortable(),
        ];
    }
}

Tabloyu bir sayfaya koyun, resources/views/admin/orders/index.blade.php:

@extends('layouts.admin.vertical')

@section('title', __('Siparişler'))

@section('content')
    <acun:page-header :title="__('Siparişler')" />

    <livewire:orders-table />
@endsection

Sayfayı routes/web.php dosyasında bir rotaya bağlayın: Route::view('/orders', 'admin.orders.index')->name('orders.index');. Sayfayı açtığınızda arama kutusu, sıralama okları ve sayfa numaraları hazırdır.

Sütunlar

Her sütun Column::make('Başlık', 'alan') ile başlar. Biçimini arkasına eklediğiniz metotlar verir, ör. Column::make('Sipariş no', 'number')->searchable()->sortable(). Sık kullanılanlar aşağıdadır; hepsi ve hücre örnekleri için Sütunlar.

Arama

searchable() işaretli bir sütun varsa tablonun üstünde arama kutusu çıkar. Arama, veritabanındaki ayrı bir arama sütununda yapılır. Bu sütunu bir migration ile ekleyin:

Schema::table('orders', function (Blueprint $table) {
    $table->searchColumn('number');          // number_search sütunu ve indeksi
    $table->searchColumn('customer_name');   // customer_name_search
});

Türkçe harfler ve büyük/küçük harf fark etmez: "ayse" yazınca "Ayşe" bulunur. Varsayılan olarak değerin başı aranır; herhangi bir yerinde aramak için searchable('contains') yazın. Arama türleri ve sütun olarak gösterilmeyen alanlarda arama: Arama. Arama altyapısı ve büyük tablolar için: Arama kılavuzu.

Filtreler

Filtreleri filters() metodunda listeleyin:

use Acun\Ui\DataTable\Filter;

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

inToolbar() verilen filtre arama kutusunun altında hep görünür. Diğerleri "Filtreler" düğmesinin açtığı çekmecededir (drawer). Filtre türleri: text, select, multiSelect, boolean, date, dateRange, number, numberRange. Hepsi ve kendi koşulunuzu yazmak: Filtreler.

Sıralama

sortable() sütunun başlığını tıklanabilir yapar. Kullanıcı bir sütun seçene kadar geçerli olacak sırayı defaultSort() verir (ayrıntılar):

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

Satır işlemleri

Her satırın sonuna düğme koymak için actions() metodunu yazın:

use Acun\Ui\DataTable\Actions\RowAction;

protected function actions(): array
{
    return [
        RowAction::view(fn (Order $order) => route('orders.show', $order)),
        RowAction::edit(fn (Order $order) => route('orders.edit', $order))->can('update'),
        RowAction::make('ship')->label('Kargoya ver')->icon('truck')
            ->action(fn (Order $order) => $order->update(['status' => OrderStatus::Shipped])),
        RowAction::delete()->can('delete'),
    ];
}

view() ve edit() bağlantıdır. delete() önce onay sorar, sonra kaydı siler. make() kendi işleminizdir. can('update') düğmeyi yalnızca yetkisi olan kullanıcıya gösterir. Tüm seçenekler: İşlemler.

Toplu işlemler

Kullanıcı satır seçince tablonun üstünde seçim çubuğu açılır. Toplu işlemler bu çubuktadır:

use Acun\Ui\DataTable\Actions\BulkAction;
use Illuminate\Database\Eloquent\Builder;

protected function bulkActions(): array
{
    return [
        BulkAction::make('ship')->label('Kargoya ver')->icon('truck')
            ->action(fn (Builder $query) => $query->update(['status' => OrderStatus::Shipped]))
            ->successMessage(':count sipariş kargoya verildi.'),
        BulkAction::delete()->authorizeRow(fn (Order $order) => auth()->user()->can('delete', $order)),
    ];
}

$query yalnızca seçili kayıtları kapsar. Her toplu işlem çalışmadan önce onay sorar. Başlıktaki onay kutusu aramaya uyan bütün kayıtları, bütün sayfalarda seçer. Seçim kuralları ve hazır işlemler: Toplu işlemler.

Dışa aktarma

Kullanıcının listeyi indirebilmesi için exportActions() metodunu yazın:

use Acun\Ui\DataTable\Actions\ExportAction;

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

Araç çubuğunda "Dışa aktar" düğmesi çıkar. Kullanıcı önce kapsamı seçer: bu sayfa, filtreye uyanlar, seçilenler ya da tüm kayıtlar. Dosyadaki arama, filtre ve sıralama tablodakiyle aynıdır. Biçimler, kapsamlar ve kuyruk ayarları: Dışa aktarma.

Not

PDF düğmesi yazdırma sayfasını açar; kullanıcı tarayıcının yazdırma penceresinde "PDF olarak kaydet"i seçer. Ek bir paket gerekmez. 5.000 satırdan büyük dosyalar kuyrukta hazırlanır, bunun için bir kuyruk işçisi (php artisan queue:work) çalışmalıdır.

Sayfalama

Sayfalama kendiliğinden gelir: kullanıcı 10, 25, 50 ya da 100 satır seçer, sayfa 25 satırla açılır. Seçenekleri perPageOptions(), çok büyük tablolarda sayfalama türünü paginationMode() değiştirir (Sayfalama). Bir tabloda açılış boyutunu değiştirmek için defaultPerPage() yazın:

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

Yetki

Tabloyu kimin açabileceğini authorizeTable(), hangi kayıtları göreceğini query() belirler:

protected function authorizeTable(): void
{
    $this->authorize('viewAny', Order::class);
}

authorizeTable() sayfa açılırken ve sonraki her istekte çalışır. Kullanıcı yalnızca kendi kayıtlarını görecekse koşulu query() içine yazın. Satır ve toplu işlemler de yalnızca bu kayıtlarda çalışır.

İşlemlerde can() kullanın. Gizli ya da yetkisiz bir işlem çizilmez; tarayıcıdan çağrılsa bile sunucu reddeder. Satır işleminin yetki kuralını toplu işleme de authorizeRow() ile verin (yukarıdaki toplu silme örneği). Seçilen kayıtlardan biri bile kuraldan geçmezse işlem hiç çalışmaz. Bütün kurallar: Yetki ve güvenlik.

Daha fazlası

• DataTable örnekleri: yedi çalışan örnek (kaydırmalı tablo, sabit başlık, dışa aktarma…).
• DataTable: tüm seçenekler: bütün metotlar, araç çubuğu, görünüm ve yapılandırma.
• Liste sayfası: tabloyu kendi bileşenlerinizle elle kurmak.
• Arama: arama sütunları ve büyük tablolarda indeksler.