Inertia Table Documentation

Appearance

Row Data Attributes ​

You may attach arbitrary HTML data-* attributes to each <tr> element in an Inertia Table by implementing the dataAttributesForModel() method on your Table class. The attributes are computed per row from the Eloquent model and rendered into the markup, so you may target specific rows from CSS, JavaScript, or browser tests.

Overview ​

Data Attributes are useful for passing extra information to DOM elements, for example when targeting a specific row for styling.

Usage ​

Implement the dataAttributesForModel method on your Table class to return data attributes for each row. It receives the Eloquent model instance and the transformed data, and should return an array. Keys do not need a data- prefix.

php
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 are added to the row element in the rendered HTML:

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

Targeting Rows With CSS ​

You may target rows by their data attributes. For example, to style rows with the data-user-type="admin" attribute:

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

Data Attributes on Actions and Exports ​

Actions and Exports also support data attributes via the dataAttributes method on the Action or Export class. See the respective documentation for details.