Skip to content
YajraBox

Laravel DataTables
Icon

WARNING You're browsing the documentation for an upcoming version of Laravel DataTables. The documentation and features of this release are subject to change.

Row Options

Row options allow you to customize HTML attributes on table rows (<tr> elements). This is useful for:

  • Styling rows dynamically based on data (e.g., highlight active vs inactive users)
  • Enabling JavaScript interactions via data-* attributes
  • Facilitating row selection by setting unique IDs

Value Types

All row methods accept three value types:

Type Example Description
String 'my-class' A static value
Column name 'id' Uses the column's value from the row
Closure function($row) { } Custom logic returning a value

Setting the Row ID (setRowId)

Use setRowId to set the id attribute on each <tr> element. Each row ID should be unique.

Using a Column Name

$dataTable->setRowId('id');

Result:

<tr id="1">...</tr>

Using a Closure

$dataTable->setRowId(function (User $row) {
    return 'user_' . $row->id;
});

Result:

<tr id="user_1">...</tr>

Using Blade String

$dataTable->setRowId('{{$id}}');

Setting the Row Class (setRowClass)

Use setRowClass to add CSS classes to each row. Great for conditional styling based on row data.

Static Class

$dataTable->setRowClass('my-custom-class');

Dynamic Class with Closure

$dataTable->setRowClass(function (User $row) {
    return match($row->status) {
        'active'   => 'table-success',
        'inactive' => 'table-secondary',
        'banned'   => 'table-danger',
        default    => '',
    };
});

Result:

<tr class="table-success">...</tr>

Using Blade String

$dataTable->setRowClass('{{ $id % 2 == 0 ? "alert-success" : "alert-warning" }}');

Setting Row Data Attributes (setRowData)

Use setRowData to set multiple data-* attributes for each row. These are useful for passing data to JavaScript.

Multiple Data Attributes

$dataTable->setRowData([
    'user-id'    => 'id',
    'user-name'  => 'name',
    'user-email' => 'email',
]);

Result:

<tr data-user-id="1" data-user-name="John" data-user-email="[email protected]">...</tr>

Using Closures for Dynamic Values

$dataTable->setRowData([
    'user-id' => 'id',
    'role'    => function($row) { return $row->role->name ?? 'guest'; },
]);

Adding Single Data Attributes

$dataTable->addRowData('foo', 'bar');
$dataTable->addRowData('dynamic', function($row) { return $row->some_value; });

Setting Row Attributes (setRowAttr)

Use setRowAttr to set custom HTML attributes (not starting with data-).

Multiple Attributes

$dataTable->setRowAttr([
    'color'      => 'blue',
    'data-custom' => function($row) { return $row->custom_value; },
]);

Adding Single Attributes

$dataTable->addRowAttr('foo', 'bar');
$dataTable->addRowAttr('dynamic', function($row) { return $row->some_value; });

Complete Example

Here's a DataTable class combining multiple row options:

use App\Models\User;
use Yajra\DataTables\Html\Builder as HtmlBuilder;
use Yajra\DataTables\Services\DataTable;
 
class UsersDataTable extends DataTable
{
    public function html(): HtmlBuilder
    {
        return $this->builder()
            ->setTableId('users-table')
            ->columns($this->getColumns())
            ->setRowId('id')
            ->setRowClass(function (User $row) {
                return $row->is_active ? 'table-success' : 'table-secondary';
            })
            ->setRowData([
                'user-id'   => 'id',
                'user-name' => 'name',
                'role'      => fn(User $row) => $row->role?->name ?? 'guest',
            ])
            ->setRowAttr([
                'color' => fn(User $row) => $row->preference_color,
            ]);
    }
}

Using Data Attributes in JavaScript

Once you've set data-* attributes, you can access them in JavaScript:

$('#users-table tbody').on('click', 'tr', function() {
    const userId = $(this).data('user-id');
    const userName = $(this).data('user-name');
    const role = $(this).data('role');
 
    console.log(`Clicked user: ${userName} (ID: ${userId}, Role: ${role})`);
});

How It Works

These methods set templates that are compiled for each row. You can use column names or closures for dynamic values.

Example Result:

<tr id="1" class="table-success" data-user-id="1" data-user-name="John" data-role="admin" color="blue">
    <td>1</td>
    <td>John</td>
    <td>[email protected]</td>
</tr>

Summary Table

Method Purpose Example
setRowId Set <tr id="..."> $dt->setRowId('id')
setRowClass Set <tr class="..."> $dt->setRowClass('active')
setRowData Set data-* attributes $dt->setRowData(['key' => 'value'])
addRowData Add single data-* $dt->addRowData('key', 'value')
setRowAttr Set custom attributes $dt->setRowAttr(['attr' => 'value'])
addRowAttr Add single attribute $dt->addRowAttr('attr', 'value')

See Also

Edit this page on GitHub