Row Data Attributes

Overview

Data Attributes are great for passing extra information to DOM elements. This can be useful when you need to target a specific DOM element, for example, to style a particular row in a table.

Usage

You can use the dataAttributesForModel method on your Table class to provide data attributes for each row. This method accepts the Eloquent Model instance and the transformed data as arguments and should return an array. You don't have to prefix the keys with data-.

use Illuminate\Support\Str;

class Users extends Table
{
    public function dataAttributesForModel(Model $model, array $data): array
    {
        return [
            'user-type' => $model->is_admin ? 'admin' : 'user',
        ];
    }
}

The data attributes will be added to the row element in the HTML output.

<tr data-user-type="admin">
    <!-- data cells -->
</tr>

Targetting Rows with CSS

You can target rows with specific data attributes using CSS. For example, to style rows with the data-user-type="admin" attribute:

tr[data-user-type="admin"] {
    /* ... */
}

Data Attributes on Actions and Exports

Actions and Exports also support data attributes. You can use the dataAttributes method on the Action or Export class to provide data attributes for each row. Check the respective documentation for more information.