Row Actions in Ginkelsoft DataTables

Overview

Ginkelsoft DataTables allows you to define row actions that enable users to perform specific operations on individual rows. These actions can include editing, deleting, viewing details, and more.

Actions are buttons or links that appear in a dedicated column of the DataTable.

Defining Row Actions

You can define actions by passing an array to the :actions attribute of the Livewire DataTable component:

<livewire:datatable
    model="App\Models\User"
    :columns="['id', 'name', 'email', 'created_at']"
    :actions="[
        ['name' => 'edit', 'label' => 'Edit', 'route' => 'users.edit'],
        ['name' => 'delete', 'label' => 'Delete', 'route' => 'users.destroy'],
        ['name' => 'view', 'label' => 'View Profile', 'url' => '/users/{id}']
    ]"
/>

Row Action Parameters

Each action consists of several optional parameters that control its behavior.

Parameter Type Description
name string The unique identifier of the action.
label string The text displayed on the button.
route string The named route used for the action (e.g., users.edit).
url string A custom URL pattern with placeholders (e.g., /users/{id}).
class string (Optional) Custom CSS classes for styling the button.

Route-Based Row Actions

If your action is linked to a named Laravel route, use the route parameter:

:actions="[
    ['name' => 'edit', 'label' => 'Edit', 'route' => 'users.edit']
]"

This will generate a button that navigates to the users.edit route.

URL-Based Row Actions

You can specify a direct URL instead of a route. Use {id} as a placeholder for dynamic values.

:actions="[
    ['name' => 'view', 'label' => 'View Profile', 'url' => '/users/{id}']
]"

This will generate a button linking to /users/{id}, dynamically replacing {id} with the row's primary key.

Customizing Row Action Appearance

You can style actions using the class parameter:

:actions="[
    ['name' => 'edit', 'label' => 'Edit', 'route' => 'users.edit', 'class' => 'bg-blue-500 text-white px-4 py-2 rounded']
]"

This applies TailwindCSS classes to customize the button's appearance.

Example: Full Row Action Configuration

:actions="[
    ['name' => 'edit', 'label' => 'Edit', 'route' => 'users.edit', 'class' => 'bg-green-500 text-white px-3 py-1 rounded'],
    ['name' => 'delete', 'label' => 'Delete', 'route' => 'users.destroy', 'class' => 'bg-red-500 text-white px-3 py-1 rounded', 'onclick' => 'return confirm(\'Are you sure?\')'],
    ['name' => 'view', 'label' => 'View Profile', 'url' => '/users/{id}', 'icon' => 'fa fa-user']
]"

This setup provides edit, delete, and view profile buttons with styling, icons, and confirmation prompts.

Summary

Actions allow row-level operations like edit, delete, and view.
You can use routes or direct URLs.
Styling can be applied.