Yajra not making ajax call and not rendering any data

I am trying to implement Yajra datatables in my new Laravel 12 project but it is not rendering any data and I also don’t see any ajax call in network.

Here are my configurations.

composer.json "yajra/laravel-datatables": "^12"

package.json

"devDependencies": {
    "laravel-datatables-vite": "^0.6.1",
     ...
}

app.scss

// Fonts
@import url('https://fonts.bunny.net/css?family=Nunito');
// Variables
@import 'variables';

// Bootstrap
@import 'bootstrap/scss/bootstrap';

// DataTables
@import 'bootstrap-icons/font/bootstrap-icons.css';
@import "datatables.net-bs5/css/dataTables.bootstrap5.min.css";
@import "datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css";
@import 'datatables.net-select-bs5/css/select.bootstrap5.css';

app.js import 'laravel-datatables-vite';

controller

public function index(UsersDataTable $dataTable)
{
    return $dataTable->render('users.index');
} 

UsersDatatable.php

public function dataTable(QueryBuilder $query): EloquentDataTable
{
    return (new EloquentDataTable($query))
        ->setRowId('id');
}

public function query(User $model): QueryBuilder
{
    return $model->newQuery()->with('roles');
}

public function html(): HtmlBuilder
{
    return $this->builder()
        ->setTableId('users-table')
        ->columns($this->getColumns())
        ->minifiedAjax()
        ->orderBy(1)
        ->selectStyleSingle()
        ->buttons([
            Button::make('excel'),
            Button::make('csv'),
            Button::make('pdf'),
            Button::make('print'),
            Button::make('reset'),
            Button::make('reload')
        ]);
}

public function getColumns(): array
{
    return [
        Column::make('id')->title('ID'),
        Column::make('name')->title('Name'),
        Column::make('email')->title('Email'),
        Column::computed('roles')->title('Roles'),
        Column::make('created_at')->title('Created At'),
        Column::make('updated_at')->title('Updated At'),
    ];
}

index.blade.php

<x-layouts.app>
    <div class="container">
        <h2>User Management</h2>
        {{ $dataTable->table() }}
    </div>
</x-layouts.app>

@push('scripts')
    {{ $dataTable->scripts() }}
@endpush

Issue

The table is rendered with column names, but no data is displayed, and there are no AJAX calls in the network tab. Here’s what the table looks like:

What I’ve Tried

• Verified that the @stack(‘scripts’) directive is present in my layout.

• Checked for JavaScript errors in the console (none found).

• Cleared Laravel cache using php artisan cache:clear, php artisan view:clear, etc.