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

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

Cloudinary image

Video API: manage, encode, and optimize for any device, channel or network condition. Deliver branded video experiences in minutes and get deep engagement insights.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay