How to Customize View/Edit/Delete Buttons Column in AJAX Data Tables – Quick Admin Panel

One of the most common customization questions from our customers concerns action buttons on data tables. For each table, we generate three actions: Show, Modify and Delete.

How to personalize them? Examples:

• How to change button texts?
• How to add or remove one or more of these buttons?
• How to change this block for different CRUDs individually?

If your table is not AJAX and you are not using the AJAX Datatables module, then it’s simple: just go to resources/views/admin/[crud_folder]/index.blade.php of that particular CRUD and modify whatever you want.

But this article concerns the case where AJAX data tables are used, and for this we have a special inclusion: resources/views/partials/datatablesActions.blade.php:

@can($viewGate)
    <a class="btn btn-xs btn-primary" href=" route("admin.' . $crudRoutePart . '.show', $row->id) }}">
        {{ trans('global.view') }}
    </a>
@endcan
@can($editGate)
    <a class="btn btn-xs btn-info" href=" route("admin.' . $crudRoutePart . '.edit', $row->id) }}">
        {{ trans('global.edit') }}
    </a>
@endcan
@can($deleteGate)
    <form action=" route("admin.' . $crudRoutePart . '.destroy', $row->id) }}" method="POST" onsubmit="return confirm('{{ trans('global.areYouSure') }}');" style="display: inline-block;">
        <input type="hidden" name="_method" value="DELETE">
        <input type="hidden" name="_token" value="{{ csrf_token() }}">
        <input type="submit" class="btn btn-xs btn-danger" value="{{ trans('global.delete') }}">
    </form>
@endcan

Now let’s move on to an example of the customizations listed above.

Customization 1. How to change button texts?

This one is easy. You can change all labels like {{ trans(‘global.view’) }} directly in the same file. Keep in mind that this will then change for all projects in all tables.

You can also edit translations in resources/lang/global.php deposit:

Customization 2. Add or remove buttons.

This one is also simple. Simply add the HTML/Blade code for the desired button. Notice where the button is displayed and under which door/permission – to view/edit/delete.

For example, if you added another action called export() to your controller and routes you can add the button next to it See button:

@can($viewGate)
    <a class="btn btn-xs btn-primary" href=" route("admin.' . $crudRoutePart . '.export', $row->id) }}">
        {{ trans('global.export') }}
    </a>
    <a class="btn btn-xs btn-primary" href=" route("admin.' . $crudRoutePart . '.show', $row->id) }}">
        {{ trans('global.view') }}
    </a>
@endcan

Customization 3. Separate actions for specific CRUDs

This one is more complicated.

Step 1. Duplicate this resources/views/partials/datatablesActions.blade.php file and copy-paste its contents into the CRUD of your choice. For example, it will be resources/views/admin/books/datatablesActions.blade.php.

Step 2. Edit the contents of this new file as desired. For example, add an export button like in the example above.

Step 3. Go to these CRUD Controller and in hint() The method modifies the loaded blade file for actions.

class BooksController extends Controller
{
    public function index(Request $request)
    {
        if ($request->ajax()) {
            $query = Book::query();

            $table = Datatables::of($query->get());

            $table->addColumn('actions', ' ');

            $table->editColumn('actions', function ($row) {
                $viewGate="book_show";
                $editGate="book_edit";
                $deleteGate="book_delete";
                $crudRoutePart="books";

                // OLD WAY
                // return view('partials.datatablesActions', compact(
                // NEW WAY
                return view('admin.books.datatablesActions', compact(
                    'viewGate',
                    'editGate',
                    'deleteGate',
                    'crudRoutePart',
                    'row'
                ));
            });

And that’s it – your table will load a different view for that particular CRUD, other CRUDs will stay with the old dataActions inclusion.