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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more