How to Use DataTables in Laravel 10 Filament v3

In this section, we’ll explore how to integrate datatables into Laravel 10 using FilamentPHP v3. By leveraging Filament v3’s sortable and search capabilities, we can easily implement datatables in our Laravel applications.

You can enable search functionality by using the searchable() method.

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('title')
    ->searchable()

You can enable sorting functionality by using the sortable() method.

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('title')
    ->sortable()

You can utilize both searchable and sortable functionalities in your datatables.

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('title')
    ->sortable()
    ->searchable()

Additionally, we will demonstrate how to integrate datatables into a Laravel 10 Filament v3 CRUD application.

Laravel 10 Filament v3 CRUD Operation Example

Filament/Resources/BlogResource.php

<?php

namespace App\Filament\Resources;

use App\Filament\Resources\BlogResource\Pages;
use App\Filament\Resources\BlogResource\RelationManagers;
use App\Models\Blog;
use Filament\Forms;
use Filament\Forms\Form;
use Filament\Resources\Resource;
use Filament\Tables;
use Filament\Tables\Table;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\Textarea;
use Filament\Tables\Columns\TextColumn;
use Filament\Forms\Components\Section;
use Filament\Forms\Components\RichEditor;
use Filament\Tables\Columns\ImageColumn;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Database\Eloquent\SoftDeletingScope;

class BlogResource extends Resource
{
    protected static ?string $model = Blog::class;

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

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Section::make()
                    ->schema([
                        TextInput::make('title')->required(),
                        RichEditor::make('content')->required(),
                    ])
            ]);
    }

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                TextColumn::make('id')->sortable(),
                TextColumn::make('title')->searchable()->sortable(),
                TextColumn::make('created_at')->searchable()->sortable(),
                TextColumn::make('content')->limit(20)->markdown()->sortable()->searchable(),
            ])
            ->filters([
                //
            ])
            ->actions([
                Tables\Actions\EditAction::make(),
            ])
            ->bulkActions([
                Tables\Actions\BulkActionGroup::make([
                    Tables\Actions\DeleteBulkAction::make(),
                ]),
            ])
            ->emptyStateActions([
                Tables\Actions\CreateAction::make(),
            ]);
    }

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

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

saim ansari