Move View/Edit/Delete Column from Right Side to Left – Quick Admin Panel

When creating a table in QuickAdminPanel, our final column is the column with links to View/Edit/Delete data. One of our customers asked: what if you want that column as The firstat first? The tricky part is how to do it with the AJAX Datatable module. Let’s see.

Step 1. Starting Point: Default AJAX Datatable Code

Here’s the default table:

To load it, we have code in several different sections.

First, the Blade files – resources/views/project/index.blade.php:

The table itself – without data, because it is loaded later with an AJAX call.


<table class=" table table-bordered table-striped table-hover ajaxTable datatable datatable-Project">
    <thead>
        <tr>
            <th width="10">

            </th>
            <th>
                {{ trans('cruds.project.fields.id') }}
            </th>
            <th>
                {{ trans('cruds.project.fields.name') }}
            </th>
            <th>
                {{ trans('cruds.project.fields.description') }}
            </th>
            <th>
                 
            </th>
        </tr>
    </thead>
</table>

And then the JavaScript part to load the Data Table:


@section('scripts')
    @parent

    <script>
      $(function () {
        let dtButtons = $.extend(true, [], $.fn.dataTable.defaults.buttons)
        let dtOverrideGlobals = {
            buttons: dtButtons,
            processing: true,
            serverSide: true,
            retrieve: true,
            aaSorting: [],
            ajax: "{{ route('admin.projects.index') }}",
            columns: [
              {data: 'placeholder', name: 'placeholder'},
              {data: 'id', name: 'id'},
              {data: 'name', name: 'name'},
              {data: 'description', name: 'description'},
              {data: 'actions', name: '{{ trans('global.actions') }}'}
            ],
            order: [[1, 'desc']],
            pageLength: 100
          }
        $('.datatable-Project').DataTable(dtOverrideGlobals)

        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
          $($.fn.dataTable.tables(true)).DataTable()
            .columns.adjust()
        })
      })

    </script>
@endsection

Data comes from the Controller index() method, with the help of the Laravel jQuery Datatables package.

Here he is app/Http/Controllers/Admin/ProjectsController.php:


$query = Project::query()->select(sprintf('%s.*', (new Project)->table));
$table = Datatables::of($query);

$table->addColumn('placeholder', ' ');
$table->addColumn('actions', ' ');

$table->editColumn('actions', function ($row) {
    $viewGate="project_show";
    $editGate="project_edit";
    $deleteGate="project_delete";
    $crudRoutePart="projects";

    return view('partials.datatablesActions', compact(
        'viewGate',
        'editGate',
        'deleteGate',
        'crudRoutePart',
        'row'
    ));
});

$table->editColumn('id', function ($row) {
    return $row->id ? $row->id : "";
});
$table->editColumn('name', function ($row) {
    return $row->name ? $row->name : "";
});
$table->editColumn('description', function ($row) {
    return $row->description ? $row->description : "";
});

$table->rawColumns(['actions', 'placeholder']);

return $table->make(true);

This may look a bit complicated, but what’s happening here is just getting the query from the database and substituting some logic for some columns, incl action columns we care about.

So how do I move it to the front?

Step 2. Change the Blade Column Order

To change the order of columns, generally just move

elements as desired, then maintain the same order in JavaScript column arrangement.

So, it changed resources/views/project/index.blade.php we have this.

1. We move the blank th element from the last position to the second. The first column is reserved for checkboxes for bulk delete operations.


<table class=" table table-bordered table-striped table-hover ajaxTable datatable datatable-Project">
    <thead>
        <tr>
            <th width="10">

            </th>
            <th>
                 
            </th>
            <th>
                {{ trans('cruds.project.fields.id') }}
            </th>
            <th>
                {{ trans('cruds.project.fields.name') }}
            </th>
            <th>
                {{ trans('cruds.project.fields.description') }}
            </th>
        </tr>
    </thead>
</table>

2. We changed the order column array of the same file:


ajax: "{{ route('admin.projects.index') }}",
columns: [
  {data: 'placeholder', name: 'placeholder'},
  {data: 'actions', name: '{{ trans('global.actions') }}'},
  {data: 'id', name: 'id'},
  {data: 'name', name: 'name'},
  {data: 'description', name: 'description'}
],

3. In the same file below, we need to change default orderbecause by default it is sorted by Dec 1 Column:


order: [[1, 'desc']],

And now Column 1 is the “action” column – the column counts starting from 0.

So we need to change the order to this:


order: [[2, 'desc']],

And here are the results:

According to our wishes, the button is on the left, right?

Not finished yet, there is one more thing we need to take care of.

Step 3. Make This New Column Unsearchable

The datatable will work now, but if we try to search in the top right, it will fail:

The reason is that it tried to search in the “action” column, and couldn’t find it in the database. And that’s right, it’s our custom column that doesn’t match any database column.

There is another file you should be aware of, which contains the main Datatables settings.
He resources/views/layout/admin.blade.phpand it contains this JavaScript:


  $.extend(true, $.fn.dataTable.defaults, {
    language: {
      url: languages['{{ app()->getLocale() }}']
    },
    columnDefs: [{
        orderable: false,
        className: 'select-checkbox',
        targets: 0
    }, {
        orderable: false,
        searchable: false,
        targets: -1
    }],
    select: {
      style:    'multi+shift',
      selector: 'td:first-child'
    },
    order: [],
    scrollX: true,
    pageLength: 100,
    dom: 'lBfrtip<"actions">',
    buttons: [
      {
        extend: 'copy',
        className: 'btn-default',
        text: copyButtonTrans,
        exportOptions: {
          columns: ':visible'
        }
      },
      // ... other buttons
    ]
  });

What we care about here is columnDefs parameters – contains an array of column settings that apply to all data tables.

In our case, by default column number 0 (targets: 0) is for checkboxes for multi-delete.

Then there is targets: -1 which means the LAST column is dedicated to the View/Edit/Delete button, so it should not be sorted and cannot be searched.

So what we need to change here is override the default settings in our JavaScript Projects CRUD itself.

Here’s our update resources/views/project/index.blade.php:


columns: [
  {data: 'placeholder', name: 'placeholder'},
  {data: 'actions', name: '{{ trans('global.actions') }}', orderable: false, searchable: false },
  {data: 'id', name: 'id'},
  {data: 'name', name: 'name'},
  {data: 'description', name: 'description', orderable: true, searchable: true }
],

That’s it, we have the final result – search works again!