Filamentphp Dinamik Tablo Kolonları Oluşturma

Bir projemde müşterimin talebi doğrultusunda birden fazla ölçüde farklı farklı tablolar oluşturabileceği bir yapı kurmak istediğinden bahsetti.

Bu tablolar ürün ölçülerini ve diğer bilgilerini göstermek için kullanılacakmış. Bu aşamada her ürünün kendine ait olan tabloları farklı ölçülere sahip. Örneğin A ürünü 8 Kolon, B Ürünü 20 Kolon gibi.

FilamentPHP ile bu sorunu çözmeye çalışırken basit ve tekrar kullanılabilir bir yapı aklıma geldi ve sizinlede bunu paylaşmak istedim.

Öncelikle filamentphp kurulu olduğunu varsayarak;

FilamentPHP Eklentilerinden Table Repeater eklentisini projemize dahil ediyoruz bu bize statik bir yapı veriyor yani siz ilk etapta 2 kolon tanımladıysanız müşteriniz sürekli 2 kolon kullanabiliyor.

TableRepeater::make('items')
    ->label('Ölçü Tablosu')
    ->schema([
		 Forms\Components\TextInput::make('Olcu'),
         Forms\Components\TextInput::make('Agirlik'),
        ...
    ])
    ->addActionLabel('Yeni Ölçü Ekle')
->colStyles([
    'product' => 'color: #0000ff; width: 250px;',
]),

Yukarıdaki kod örneğinde panelimizde göreceğiniz içerik aşağıdaki resimdeki gibi olacaktır.

Bu aşamada eğer herşey sizin için tamam ise konu burada sonlanmıştır fakat biz daha fazlasını istiyoruz :)

Bu yapıyı dinamik (semi dinamik) hale nasıl getireceğiz; Önce sizinle kodu paylaşmak sonrasında açıklamak istiyorum;

\Filament\Forms\Components\Builder::make('items')
	->label('Ölçü Tablosu')
    ->maxItems(1) // Opsiyonel eklenebilir tablo sayısı
    ->blocks([
        ... self::generateTableFields()
    ])->columnSpan(2),

Builder Component'ı ile birden fazla tablo ekleyebileceğimiz bir yapı oluşturuyoruz işin aslı burada generateTableFields Metodumuzu kullanabilmek için ufak bir takla attırdığımız senaryomuz var. ->maxItems() kaç adet tablo ekleyebileceğimize karar verdiğimiz kısım bu alanı komple kaldırabilir birden fazlada tablo eklemeye imkan sağlayabilirsiniz.

Peki generateTableFields() ne içeriyor;

private static function generateTableFields()
    {
        $item = [];
//Burdaki döngü ile kullanıcıya 20 adete kadar kolon ekleme imkanı sunuyoruz burdaki range(1,20) kısmındaki 20 yi max kaç adet olmasını isteğiniz değere göre güncelleyebilirsiniz.
        foreach(range(1,20) as $field){
            $customField = [];
            for ($i = 1; $i<=$field; $i++){
                $customField[] = TextInput::make('field_'.$i)->label('');
            }

            $item[] = Block::make('table_' . $field)
                ->schema([
                    TextInput::make('pn')->label('PN')->columnSpan(2),
                    TableRepeater::make('part_list')
                        ->label('Tablo')
                        ->schema([
                            ...$customField,
                        ])->hint('Ölçü tablosunda ilk satır tablo başlığınız olacaktır.') // Bu alan tamamen view tarafında kullanacağınız bir özellik olacaktır.
                ])->label('Table #' . $field . ' Sütun');
        }
        return $item;
    }

Kod örneğinin içindede belirttiğim gibi bir for döngüsünde 20 adete kadar kullanıcıya kolon ekleme imkanı sağladık burdaki 20 değerini değiştirmeniz durumunda okadar adete kadar kolon eklenebilir olacaktır. ->hint() metodu table için ufak bir açıklama alanı yaratacaktır sizlere.

peki bu değerleri nasıl tutacağız databasede nasıl kaydedeceğiz kısmına gelicek olursak

migration dosyanızda bir json field oluşturmanız gerekli.

        Schema::create('data_tables', function (Blueprint $table) {
            $table->id();
            $table->string('title');
			...
            $table->json('dimensions');
            $table->timestamps();
            $table->softDeletes();
        });

Model dosyanızdada bu json field'i array olarak cast etmeniz gerekecek

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\SoftDeletes;

class DataTable extends Model
{
   	....

    protected function casts()
    {
        return [
            'dimensions' => 'array',
        ];
    }
}

Sonuç olarak elde edeceğiniz yapı örneğini aşağıdaki görselde görebilirsiniz.