Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon How can I customize the columns and buttons in Yajra DataTables for Laravel 11


How can I customize the columns and buttons in Yajra DataTables for Laravel 11


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