Skip to content
Icon

WARNING You're browsing the documentation for an old version of LARAVEL-DATATABLES. Consider upgrading your project to laravel-datatables 11.0.

Laravel 10 CRUD with DataTables Editor.

Before we begin, please be reminded that the Editor library that we are going to use here requires a paid license. See DataTables Editor for details.

Pre-requisites

This tutorial requires https://yajrabox.com/docs/laravel-datatables/10.0/quick-starter.

Editor License

Copy and rename your Editor.XX.zip to Editor.zip and move it to project folder.

Register postinstall script to package.json

"scripts": {
"dev": "vite",
"build": "vite build",
"postinstall": "node node_modules/datatables.net-editor/install.js ./Editor.zip"
},

Install DataTables Editor assets.

npm i datatables.net-editor datatables.net-editor-bs5

Register editor script on resources/js/app.js

import './bootstrap';
import 'laravel-datatables-vite';
 
import "datatables.net-editor";
import Editor from "datatables.net-editor-bs5";
Editor(window, $);

Add editor styles on resources/sass/app.scss.

// Fonts
@import url('https://fonts.bunny.net/css?family=Nunito');
 
// Variables
@import 'variables';
 
// Bootstrap
@import 'bootstrap/scss/bootstrap';
 
// DataTables
@import 'bootstrap-icons/font/bootstrap-icons.css';
@import "datatables.net-bs5/css/dataTables.bootstrap5.css";
@import "datatables.net-buttons-bs5/css/buttons.bootstrap5.css";
@import "datatables.net-editor-bs5/css/editor.bootstrap5.css";
@import 'datatables.net-select-bs5/css/select.bootstrap5.css';

Recompile assets.

npm run dev

UsersDataTable.php

Create a new editor instance and add some fields for name and email.

namespace App\DataTables;
 
use App\Models\User;
use Illuminate\Database\Eloquent\Builder as QueryBuilder;
use Yajra\DataTables\EloquentDataTable;
use Yajra\DataTables\Html\Builder as HtmlBuilder;
use Yajra\DataTables\Html\Button;
use Yajra\DataTables\Html\Column;
use Yajra\DataTables\Html\Editor\Editor;
use Yajra\DataTables\Html\Editor\Fields;
use Yajra\DataTables\Services\DataTable;
 
class UsersDataTable extends DataTable
{
/**
* Build DataTable class.
*
* @param QueryBuilder $query Results from query() method.
* @return \Yajra\DataTables\EloquentDataTable
*/
public function dataTable(QueryBuilder $query): EloquentDataTable
{
return (new EloquentDataTable($query))->setRowId('id');
}
 
/**
* Get query source of dataTable.
*
* @param \App\Models\User $model
* @return \Illuminate\Database\Eloquent\Builder
*/
public function query(User $model): QueryBuilder
{
return $model->newQuery();
}
 
/**
* Optional method if you want to use html builder.
*
* @return \Yajra\DataTables\Html\Builder
*/
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'),
Button::make('excel'),
Button::make('csv'),
Button::make('pdf'),
Button::make('print'),
Button::make('reset'),
Button::make('reload'),
]);
}
 
/**
* Get the dataTable columns definition.
*
* @return array
*/
public function getColumns(): array
{
return [
Column::make('id'),
Column::make('name'),
Column::make('email'),
Column::make('created_at'),
Column::make('updated_at'),
];
}
 
/**
* Get filename for export.
*
* @return string
*/
protected function filename(): string
{
return 'Users_'.date('YmdHis');
}
}

Create Editor Class to handle CRUD actions.

php artisan datatables:editor Users

Register Editor Route

Edit routes/web.php and register the store user route.

Route::get('/users', [App\Http\Controllers\UsersController::class, 'index'])->name('users.index');
Route::post('/users', [App\Http\Controllers\UsersController::class, 'store'])->name('users.store');

Update users controller

namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use App\DataTables\UsersDataTable;
use App\DataTables\UsersDataTableEditor;
 
class UsersController extends Controller
{
public function index(UsersDataTable $dataTable)
{
return $dataTable->render('users.index');
}
 
public function store(UsersDataTableEditor $editor)
{
return $editor->process(request());
}
}

See your editor in action.