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 will see how to use datatables in Laravel 10 with filamentphp v3. You can use datatables by using Filament v3 sortable and search.

You can use searchable via searchable().

use Filament\Tables\Columns\TextColumn;

TextColumn::make('title')
    ->searchable()
Enter fullscreen mode Exit fullscreen mode

You can use sortable via sortable().

use Filament\Tables\Columns\TextColumn;

TextColumn::make('title')
    ->sortable()
Enter fullscreen mode Exit fullscreen mode

You can use both searchable and sortable datatables.

use Filament\Tables\Columns\TextColumn;

TextColumn::make('title')
    ->sortable()
    ->searchable()
Enter fullscreen mode Exit fullscreen mode

Laravel 10 Filament v3 CRUD Operation Example

Also you can see we will add laravel 10 filament v3 crud app add datatables.

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

laravel 10 filament v3 datatables

Read Also

How to Use Rich Editor in Laravel 10 Filament v3
How to Upload Image in Laravel 10 Filament v3
Laravel 10 Filamentphp v3 Multiple Images Example
How to Use Searchable in Laravel 10 Filament v3
Laravel 10 Filament v3 Toggle Switch Example

Top comments (0)