Table Responsive Laravel 10, Bootstrap 5

[devlubinets]

Summary of problem or feature request

Generated datatables isn't responsive, I have followed for instruction from official documentation. I devote week, but I can't resolve that and make my user table reponsive. Help please.

repo with that code https://github.com/devlubinets/laravel-edu

Code snippet of problem

<?php

namespace App\DataTables;

use App\Models\User;
use Illuminate\Database\Eloquent\Builder as QueryBuilder;
use Yajra\DataTables\EloquentDataTable;
use Yajra\DataTables\Html\Builder as HtmlBuilder;
use Yajra\DataTables\Html\Button;
use Yajra\DataTables\Html\Column;
use Yajra\DataTables\Services\DataTable;

class UsersDataTable extends DataTable
{
    /**
     * Build the DataTable class.
     *
     * @param QueryBuilder $query Results from query() method.
     */
    public function dataTable(QueryBuilder $query): EloquentDataTable
    {
        return (new EloquentDataTable($query));
    }

    /**
     * Get the query source of dataTable.
     */
    public function query(User $model): QueryBuilder
    {
        return $model->newQuery();
    }

    /**
     * Optional method if you want to use the html builder.
     */
    public function html(): HtmlBuilder
    {
        return $this->builder()
            ->setTableAttribute("style", "width:100%")
            ->setTableId('users-table')
            ->columns($this->getColumns())
            ->responsive()
            ->parameters([
                "responsive" => true,
            ])
            ->minifiedAjax()
            ->orderBy(1)
            ->buttons([
                Button::make('add'),
                Button::make('excel'),
                Button::make('csv'),
                Button::make('pdf'),
                Button::make('print'),
                Button::make('reset'),
                Button::make('reload'),
            ]);
    }

    /**
     * Get the dataTable columns definition.
     */
    public function getColumns(): array
    {
        return [
            Column::make('id'),
            Column::make('name'),
            Column::make('email'),
            Column::make('created_at'),
            Column::make('updated_at'),
        ];
    }

    /**
     * Get the filename for export.
     */
    protected function filename(): string
    {
        return 'Users_' . date('YmdHis');
    }
}

System details

• Operating System
• PHP Version 8.2.12
• Laravel Version 10.30.1
• Laravel-Datatables Version ^10.1

[yajra]

Looks like a missing JS/CSS. Make sure to include the datatables.net-responsive assets.

[yajra]

See official JS docs download page https://datatables.net/download/

[devlubinets]

@yajra thx it help me, Maybe good idea add section to documentation about that?