DEV Community

Cover image for How to Use DataTables in Laravel 10 Filament v3
saim
saim

Posted on • Originally published at larainfo.com

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()


Enter fullscreen mode Exit fullscreen mode

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



use Filament\Tables\Columns\TextColumn;

TextColumn::make('title')
    ->sortable()


Enter fullscreen mode Exit fullscreen mode

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



use Filament\Tables\Columns\TextColumn;

TextColumn::make('title')
    ->sortable()
    ->searchable()


Enter fullscreen mode Exit fullscreen mode

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'),
        ];
    }
}


Enter fullscreen mode Exit fullscreen mode

 filament v3 datatables

See Also

How to Use Searchable in Laravel 10 Filament v3
Laravel 10 Filament v3 Toggle Switch Example
Laravel 10 Filament v3 CRUD Operation Example
Laravel 10 Filamentphp v3 Multiple Images Example

Top comments (0)