Version

Editor Fields

DataTables Editor provides a variety of field types for building forms. Each field type has specific configuration options.

Available Field Types

Type	Class	Description
Text	`Fields\Text`	Single-line text input
TextArea	`Fields\TextArea`	Multi-line text input
Password	`Fields\Password`	Password input
Select	`Fields\Select`	Dropdown select
Select2	`Fields\Select2`	Enhanced select with search
Radio	`Fields\Radio`	Radio button group
Checkbox	`Fields\Checkbox`	Checkbox group
Boolean	`Fields\Boolean`	True/false toggle
Date	`Fields\Date`	Date picker
DateTime	`Fields\DateTime`	Date and time picker
Time	`Fields\Time`	Time picker
Number	`Fields\Number`	Numeric input
Hidden	`Fields\Hidden`	Hidden field
ReadOnly	`Fields\ReadOnly`	Read-only display
File	`Fields\File`	File upload
Image	`Fields\Image`	Image upload
Tags	`Fields\Tags`	Tags input
BelongsTo	`Fields\BelongsTo`	BelongsTo relationship

Basic Field Configuration

use Yajra\DataTables\Html\Editor\Fields;
 
// Simple text field
Fields\Text::make('name')
 
// With label
Fields\Text::make('name', 'Full Name')
 
// With chained configuration
Fields\Text::make('name')
    ->label('Full Name')
    ->placeholder('Enter your name')
    ->required()

Common Field Options

Label

Set the field label:

Fields\Text::make('name')
    ->label('Full Name')

Placeholder

Set the input placeholder:

Fields\Text::make('name')
    ->placeholder('Enter your name')

Default Value

Set a default value:

Fields\Text::make('status')
    ->default('active')

Required

Add a required indicator to the field label:

Fields\Text::make('name')
    ->required()
 
// Or with explicit boolean
Fields\Text::make('name')
    ->required(true)

Null Default

Replace null values with a default when editing:

Fields\Text::make('description')
    ->nullDefault()
 
// With specific default value
Fields\Text::make('description')
    ->nullDefault(true)
    ->default('No description')

CSS Class

Add CSS classes to the field:

Fields\Text::make('name')
    ->className('form-control')
 
// Or via attribute
Fields\Text::make('name')
    ->attr('class', 'form-control')

Field Info

Add informational text below the field:

Fields\Text::make('email')
    ->fieldInfo('We will never share your email')

Label Info

Add info text next to the label:

Fields\Text::make('name')
    ->labelInfo('(required)')

Select Fields

Basic Select

Fields\Select::make('status')
    ->options([
        'active' => 'Active',
        'inactive' => 'Inactive',
        'pending' => 'Pending',
    ])

Model Options

Load options from a model:

Fields\Select::make('user_id')
    ->modelOptions(User::class, 'name', 'id')

Table Options

Load options from a database table:

Fields\Select::make('category_id')
    ->tableOptions('categories', 'name', 'id')

Enum Options

Load options from a PHP enum:

use App\Enums\StatusEnum;
 
Fields\Select::make('status')
    ->enumOptions(StatusEnum::cases())

Date Fields

Date Picker

Fields\Date::make('birth_date')
    ->format('YYYY-MM-DD')

DateTime Picker

Fields\DateTime::make('created_at')
    ->format('YYYY-MM-DD HH:mm:ss')

DateTime with Wire Format

For Livewire integration, specify a wire format:

Fields\DateTime::make('created_at')
    ->wireFormat('Y-m-d H:i:s')

Display Format

Set a separate display format:

Fields\DateTime::make('created_at')
    ->displayFormat('MMM D, YYYY h:mm A')

Key Input Control

Control whether users can type into the date input:

// Allow typing (default)
Fields\Date::make('birth_date')
    ->keyInput(true)
 
// Restrict to picker only
Fields\Date::make('birth_date')
    ->keyInput(false)

BelongsTo Field

The BelongsTo field automatically handles belongsTo relationships:

use Yajra\DataTables\Html\Editor\Fields\BelongsTo;
 
BelongsTo::make('user')
    ->label('Assigned User')

This field automatically:

Loads options from the related model
Sets the correct value for create/edit operations
Handles the relationship display

Boolean Fields

Fields\Boolean::make('is_active')
    ->label('Active Status')

With custom options:

use Yajra\DataTables\Html\Options;
 
Fields\Boolean::make('is_active')
    ->options([
        Options::yesNo(),
        Options::trueFalse(),
        Options::from([1 => 'Yes', 0 => 'No']),
    ])

Field Option Helpers

Yes/No

Options::yesNo()  // ['Yes', 'No']

True/False

Options::trueFalse()  // ['True', 'False']

Custom Options

Options::from(['active' => 'Active', 'inactive' => 'Inactive'])

Field Events

Multi-Editable

Allow editing multiple rows at once:

Fields\Text::make('status')
    ->multiEditable(true)

Submit on Change

Submit the form when the field changes:

Fields\Select::make('status')
    ->submit(true)

Compare Values

Enable value comparison in the form:

Fields\Text::make('name')
    ->compare(true)

Complete Example

<?php
 
namespace App\DataTables;
 
use App\Models\User;
use App\Enums\StatusEnum;
use Yajra\DataTables\Html\Builder;
use Yajra\DataTables\Html\Column;
use Yajra\DataTables\Html\Editor;
use Yajra\DataTables\Html\Editor\Fields;
use Yajra\DataTables\Html\Editor\Fields\BelongsTo;
use Yajra\DataTables\Services\DataTable;
 
class UsersDataTable extends DataTable
{
    public function html(): Builder
    {
        return $this->builder()
                    ->setTableId('users-table')
                    ->columns($this->getColumns())
                    ->minifiedAjax()
                    ->orderBy(1)
                    ->selectStyleSingle()
                    ->editors([
                        Editor::make()
                              ->fields($this->getFields()),
                    ])
                    ->buttons([
                        Button::make('create')->editor('editor'),
                        Button::make('edit')->editor('editor'),
                        Button::make('remove')->editor('editor'),
                    ]);
    }
 
    protected function getColumns(): array
    {
        return [
            Column::make('id'),
            Column::make('name'),
            Column::make('email'),
            Column::make('status'),
            Column::make('created_at'),
        ];
    }
 
    protected function getFields(): array
    {
        return [
            Fields\Text::make('name')
                ->label('Full Name')
                ->required(),
 
            Fields\Text::make('email')
                ->label('Email Address')
                ->required()
                ->fieldInfo('We will never share your email'),
 
            Fields\Select::make('status')
                ->options([
                    'active' => 'Active',
                    'inactive' => 'Inactive',
                    'pending' => 'Pending',
                ])
                ->default('active'),
 
            Fields\Select::make('role_id')
                ->label('Role')
                ->tableOptions('roles', 'name', 'id'),
 
            BelongsTo::make('department')
                ->label('Department'),
 
            Fields\Date::make('birth_date')
                ->label('Birth Date')
                ->format('YYYY-MM-DD'),
 
            Fields\DateTime::make('last_login')
                ->label('Last Login')
                ->displayFormat('MMM D, YYYY h:mm A')
                ->nullDefault(),
 
            Fields\Boolean::make('is_active')
                ->label('Active')
                ->default(true),
 
            Fields\TextArea::make('bio')
                ->label('Biography')
                ->rows(4),
 
            Fields\File::make('avatar')
                ->label('Profile Picture')
                ->uploadRules('image|max:2048'),
        ];
    }
}

Laravel DataTables