To customize the columns and buttons in Yajra DataTables for Laravel 11, you can modify the DataTable class and the view. Here's how you can do it:
1. Customize Columns in the DataTable Class:
In your DataTable class (e.g., `UsersDataTable`), you can customize the columns using the `getColumns()` method. For example:
php
public function getColumns(): array
{
return [
Column::make('id')->title('ID'),
Column::make('name')->title('Name'),
Column::make('email')->title('Email'),
Column::make('created_at')->title('Created At'),
Column::make('updated_at')->title('Updated At'),
Column::computed('action')
->title('Action')
->exportable(false)
->printable(false)
->width(60)
->addClass('text-center'),
];
}
In this example, we're:
- Changing the column titles
- Excluding the `action` column from export and print
- Setting the width and adding a CSS class to the `action` column
2. Customize Buttons in the DataTable Class:
You can also customize the buttons in the DataTable class using the `html()` method. For example:
php
public function html(): HtmlBuilder
{
return $this->builder()
->setTableId('users-table')
->columns($this->getColumns())
->minifiedAjax()
->orderBy(1)
->selectStyleSingle()
->buttons([
Button::make('create'),
Button::make('export'),
Button::make('print'),
Button::make('reset'),
Button::make('reload'),
]);
}
In this example, we're:
- Adding a "Create" button
- Renaming the "Excel" button to "Export"
- Removing the "CSV" and "PDF" buttons
- Keeping the "Print", "Reset", and "Reload" buttons
3. Customize Buttons in the View:
In your view, you can add custom HTML for the buttons. For example:
html
<table class="table table-bordered data-table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Created At</th>
<th>Updated At</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
@push('scripts')
<script>
$(function () {
var table = $('.data-table').DataTable({
// ...
buttons: [
{
extend: 'create',
text: 'Custom Create',
className: 'btn-success',
action: function(e, dt, node, config) {
// Custom create button action
}
},
// ...
]
});
});
</script>
@endpush
In this example, we're:
- Customizing the text and CSS class of the "Create" button
- Adding a custom action for the "Create" button
By following these steps, you can customize the columns and buttons in Yajra DataTables for your Laravel 11 application. The package provides a flexible API for modifying the appearance and behavior of the DataTable.
Citations:[1] https://www.elegantlaravel.com/article/yajra-datatables-integration-in-laravel-step-by-step-guide
[2] https://itcodstuff.com/blog/laravel-yajra-datatables-tutorial/
[3] https://www.youtube.com/watch?v=fQDulbC3Smc
[4] https://yajrabox.com/docs/laravel-datatables/10.0/quick-starter
[5] https://www.itsolutionstuff.com/post/how-to-use-yajra-datatables-in-laravel-6example.html