The data table has a number of methods to help you edit the data directly in the table.
Note: For each column edit setting, you need to have a corresponding field in the form.
With the editable
method, you can click on the data in the table and edit the saved data in the pop-up dialog box.
$grid->column('title')->editable();
$grid->column('title')->editable('textarea');
The second parameter is the option selected by select
$grid->column('title')->editable('select', [1 => 'option1', 2 => 'option2', 3 => 'option3']);
$grid->column('birth')->editable('date');
$grid->column('published_at')->editable('datetime');
$grid->column('year')->editable('year');
$grid->column('month')->editable('month');
$grid->column('day')->editable('day');
Note: In the
grid
, set aswitch
for a field, and you need to set the sameswitch
for the field inform
.
Quickly turn the column into a switch component, using the following:
$grid->column('status')->switch();
// set text, color, and stored values
$states = [
'on' => ['value' => 1, 'text' => 'open', 'color' => 'primary'],
'off' => ['value' => 2, 'text' => 'close', 'color' => 'default'],
];
$grid->column('status')->switch($states);
Note:
switch
is set for some fields ingrid
, and the sameswitch
should be set for these fields inform
.
Quickly turn the column into a switch component group, using the following:
$states = [
'on' => ['text' => 'YES'],
'off' => ['text' => 'NO'],
];
$grid->column('switch_group')->switchGroup([
'hot' => 'hot',
'new' => 'latest'
'recommend' => 'recommended',
], $states);
Set the column to the radio
component and set the same radio
for these fields in the form
method.
$grid->column('options')->radio([
1 => 'Sed ut perspiciatis unde omni',
2 => 'voluptatem accusantium doloremque',
3 => 'dicta sunt explicabo',
4 => 'laudantium, totam rem aperiam',
]);
Set this column to the checkbox
component and also set the same checkbox
for these fields in the form
method.
$grid->column('options')->checkbox([
1 => 'Sed ut perspiciatis unde omni',
2 => 'voluptatem accusantium doloremque',
3 => 'dicta sunt explicabo',
4 => 'laudantium, totam rem aperiam',
]);