Filament テーブル画面の生成

前回からの続きとなります。

dev.10yro.co.jp

画面生成

Filamentでは、コマンド1つでテーブル画面を生成することができます。

php artisan make:filament-resource [モデル名]

あらかじめ用意しておいたDBを用いてモデルを作成し、画面を生成してみます。

テーブルの表示やレコードの作成/編集に関連するリソースが生成され、まっさらな画面が表示できるようになります。

// \app\Filament\Resources\[モデル名]Resource.php
// 今回はCompanyモデルを使用して生成したため、CompanyResource.php
<?php

namespace App\Filament\Resources;

use App\Filament\Resources\CompanyResource\Pages;
use App\Filament\Resources\CompanyResource\RelationManagers;
use App\Models\Company;
use Filament\Forms;
use Filament\Forms\Form;
use Filament\Resources\Resource;
use Filament\Tables;
use Filament\Tables\Table;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Database\Eloquent\SoftDeletingScope;

class CompanyResource extends Resource
{
    protected static ?string $model = Company::class;

    protected static ?string $navigationIcon = 'heroicon-o-rectangle-stack';

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                //
            ]);
    }

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                //
            ])
            ->filters([
                //
            ])
            ->actions([
                Tables\Actions\EditAction::make(),
            ])
            ->bulkActions([
                Tables\Actions\BulkActionGroup::make([
                    Tables\Actions\DeleteBulkAction::make(),
                ]),
            ]);
    }

    public static function getRelations(): array
    {
        return [
            //
        ];
    }

    public static function getPages(): array
    {
        return [
            'index' => Pages\ListCompanies::route('/'),
            'create' => Pages\CreateCompany::route('/create'),
            'edit' => Pages\EditCompany::route('/{record}/edit'),
        ];
    }
}

このリソースファイルを編集し、表示するカラムや実装するフィルター等を設定することができます。
生成時にデータベースの列に基づいて自動的にテーブルを設定することも可能です。

php artisan make:filament-resource [モデル名]  --generate

<?php

namespace App\Filament\Resources;

use App\Filament\Resources\CompanyResource\Pages;
use App\Filament\Resources\CompanyResource\RelationManagers;
use App\Models\Company;
use Filament\Forms;
use Filament\Forms\Form;
use Filament\Resources\Resource;
use Filament\Tables;
use Filament\Tables\Table;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Database\Eloquent\SoftDeletingScope;

class CompanyResource extends Resource
{
    protected static ?string $model = Company::class;

    protected static ?string $navigationIcon = 'heroicon-o-rectangle-stack';

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\TextInput::make('company_cd')
                    ->required()
                    ->maxLength(200),
                Forms\Components\Select::make('company_group_id')
                    ->relationship('companyGroup', 'name')
                    ->required(),
                Forms\Components\TextInput::make('name')
                    ->required()
                    ->maxLength(255),
            ]);
    }

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                Tables\Columns\TextColumn::make('company_cd')
                    ->searchable(),
                Tables\Columns\TextColumn::make('companyGroup.name')
                    ->numeric()
                    ->sortable(),
                Tables\Columns\TextColumn::make('name')
                    ->searchable(),
                Tables\Columns\TextColumn::make('created_at')
                    ->dateTime()
                    ->sortable()
                    ->toggleable(isToggledHiddenByDefault: true),
                Tables\Columns\TextColumn::make('updated_at')
                    ->dateTime()
                    ->sortable()
                    ->toggleable(isToggledHiddenByDefault: true),
            ])
            ->filters([
                //
            ])
            ->actions([
                Tables\Actions\EditAction::make(),
                Tables\Actions\DeleteAction::make(),
            ])
            ->bulkActions([
                Tables\Actions\BulkActionGroup::make([
                    Tables\Actions\DeleteBulkAction::make(),
                ]),
            ]);
    }

    public static function getPages(): array
    {
        return [
            'index' => Pages\ManageCompanies::route('/'),
        ];
    }
}

自動生成したものを雛形として、そこから手を加えていった方が楽できると思います。

また、通常の方法で作成した場合はレコードの作成/編集時に別のページに遷移する仕様になっていますが、これをモーダルで処理し1ページで完結させることもできます。

php artisan make:filament-resource [モデル名]  --generate --simple

クエリのカスタマイズ

tableメソッド内でmodifyQueryUsingメソッドを使用することで、生成したテーブルに表示するレコードをカスタマイズすることができます。

<?php

public static function table(Table $table): Table
{
    return $table
        ->modifyQueryUsing(CompanyResource::getSelectQuery())
        ->columns([
            //中略
        ]);
}

private static function getSelectQuery(): \Closure
{
    return function (Builder $query) {
        //表示したいレコードに合わせてクエリを記述
    };
}

テーブルを結合して表示したい場合等にはクエリをカスタマイズし、table()メソッド内で該当するカラムを設定することで表示できます。

最後に

Filamentを使えば、コマンド一つでテーブル画面を生成し、さらにカスタマイズも容易に行えます。自動生成されたリソースを基に、自分のニーズに合わせた細かい設定を施すことで、効率的に開発を進めることができます。
また、モーダルを活用することでユーザーエクスペリエンスを向上させ、スムーズな操作感を提供することが可能です。