DEV Community

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

Posted on • Originally published at larainfo.com

5

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

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay