Skip to content
YajraBox

Laravel DataTables

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