Version

Using DataTables Editor

[!NOTE] This guide shows how to integrate your Editor class with routes and frontend.

Overview

DataTables Editor processes all actions (create, edit, remove) via POST requests. The Editor handles:

Validation
Database transactions
Response formatting

Complete Setup Flow

┌──────────────┐     POST      ┌─────────────────┐
│  Frontend    │ ───────────►  │  Laravel Route  │
│  DataTables  │               │  /editor        │
└──────────────┘               └────────┬────────┘
                                         │
                                         ▼
                                ┌─────────────────┐
                                │  Editor Class   │
                                │  process()      │
                                └────────┬────────┘
                                         │
                    ┌────────────────────┼────────────────────┐
                    ▼                    ▼                    ▼
            ┌──────────────┐    ┌──────────────┐    ┌──────────────┐
            │ createRules  │    │ editRules    │    │ removeRules  │
            └──────────────┘    └──────────────┘    └──────────────┘

Step 1: Create Your Editor

Generate using the artisan command:

php artisan datatables:editor Users --model

Or create manually:

<?php
// app/DataTables/UsersDataTableEditor.php
 
namespace App\DataTables;
 
use App\Models\User;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Validation\Rule;
use Yajra\DataTables\DataTablesEditor;
 
/** @extends DataTablesEditor<User> **/
class UsersDataTableEditor extends DataTablesEditor
{
    protected $model = User::class;
 
    public function createRules(): array
    {
        return [
            'name'  => 'required',
            'email' => 'required|email|unique:users',
        ];
    }
 
    public function editRules(Model $model): array
    {
        return [
            'email' => 'sometimes|required|email|' . Rule::unique('users')->ignore($model->getKey()),
        ];
    }
 
    public function removeRules(Model $model): array
    {
        return [];
    }
}

Step 2: Setup Editor Model

Configure your model with fillable attributes:

<?php
// app/Models/User.php
 
namespace App\Models;
 
use Illuminate\Database\Eloquent\Model;
 
class User extends Model
{
    protected $fillable = [
        'name',
        'email',
        'password',
    ];
}

[!TIP] See Editor Model for detailed configuration.

Step 3: Register Route

Add a POST route to handle all Editor actions:

<?php
// routes/web.php
 
use App\DataTables\UsersDataTable;
use App\DataTables\UsersDataTableEditor;
use Illuminate\Support\Facades\Route;
 
Route::get('/users', UsersDataTable::class)->name('users.index');
Route::post('/users', UsersDataTableEditor::class)->name('users.store');

[!TIP] For simple use cases with no additional transformations, you can pass the class directly to the route.

Or with a controller for more control:

<?php
// app/Http/Controllers/UserController.php
 
namespace App\Http\Controllers;
 
use App\DataTables\UsersDataTable;
use App\DataTables\UsersDataTableEditor;
 
class UserController extends Controller
{
    public function index(UsersDataTable $dataTable)
    {
        return $dataTable->render('users.index');
    }
 
    public function store(UsersDataTableEditor $editor)
    {
        return $editor->process(request());
    }
}

Step 4: CSRF Token

[!NOTE] CSRF token is automatically handled by $dataTable->scripts(), no additional configuration needed.

Step 5: Configure Editor Buttons

Update your DataTable HTML builder:

<?php
// app/DataTables/UsersDataTable.php
 
use Yajra\DataTables\Html\Builder as HtmlBuilder;
use Yajra\DataTables\Html\Button;
use Yajra\DataTables\Html\Editor;
 
public function html(): HtmlBuilder
{
    return $this->builder()
                ->setTableId('users-table')
                ->columns($this->getColumns())
                ->minifiedAjax()
                ->orderBy(1)
                ->selectStyleSingle()
                ->editors([
                    Editor::make()
                          ->fields([
                              Fields\Text::make('name'),
                              Fields\Text::make('email'),
                          ]),
                ])
                ->buttons([
                    Button::make('create')->editor('editor'),
                    Button::make('edit')->editor('editor'),
                    Button::make('remove')->editor('editor'),
                ]);
}

Step 6: Render in Blade

Add the DataTable to your Blade view:

@extends('layouts.app')
 
@section('content')
<div class="container">
    {{ $dataTable->table() }}
</div>
@endsection
 
@push('scripts')
{{ $dataTable->scripts(attributes: ['type' => 'module']) }}
@endpush

[!NOTE] The Editor initialization script is automatically included in $dataTable->scripts().

Frontend Generator

[!TIP] Use the DataTables Editor Generator to quickly generate frontend code.

Visit the Editor Generator
Configure your table fields
Copy the generated JavaScript
Paste into your Blade template

Guide	Description
Editor Installation	Install the Editor plugin
Editor Tutorial	Complete step-by-step tutorial
Editor Rules	Validation rules reference
Editor Events	Event hooks documentation
Editor Model	Model configuration
DataTables Editor	Official Editor documentation

Laravel DataTables