How to Use DataTables in Laravel 10 Filament v3
Tags: laravel, filament, php, webdev
Published: 2023-09-21 06:50:34

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

```php
use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('title')
    ->searchable()
```
You can use sortable via **sortable()**.
```php
use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('title')
    ->sortable()
```
You can use both searchable  and sortable datatables.
```php
use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('title')
    ->sortable()
    ->searchable()
```

[Laravel 10 Filament v3 CRUD Operation Example
](https://larainfo.com/blogs/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
<?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'),
        ];
    }
}
```
![laravel 10 filament v3 datatables](https://larainfo.com/storage/canvas/images/CsrBZw9h0qulnfw94jfY08BU3jIFTSy4JNY6h0oI.png)

### Read Also
[How to Use Rich Editor in Laravel 10 Filament v3](https://larainfo.com/blogs/how-to-use-rich-editor-in-laravel-10-filament-v3)
[How to Upload Image in Laravel 10 Filament v3](https://larainfo.com/blogs/how-to-upload-image-in-laravel-10-filament-v3)
[Laravel 10 Filamentphp v3 Multiple Images Example](https://larainfo.com/blogs/laravel-10-filamentphp-v3-multiple-images-example)
[How to Use Searchable in Laravel 10 Filament v3](https://larainfo.com/blogs/how-to-use-searchable-in-laravel-10-filament-v3)
[Laravel 10 Filament v3 Toggle Switch Example](https://larainfo.com/blogs/laravel-10-filament-v3-toggle-switch-example)