Datatable Default rendering button group not properly rendered

[M. Husni Thamrin]

Summary of problem or feature request

did i missed something, i followed the instructions here

but it not rendered as i expected like the tutorials

the buttons not rendering text,
the position of search box and pagination not the same like on the quick starter

maybe i'm mising on the css/js file or something?

Code snippet of problem

i didn't change much but this is the controller that generated

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))
            ->addColumn('action', '<button class="btn btn-info">Show</button>')
            ->setRowId('id');
    }

    /**
     * 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()
                    ->setTableId('users-table')
                    ->columns($this->getColumns())
                    // ->minifiedAjax()
                    // ->dom('Bfrtip')
                    ->orderBy(1)
                    ->selectStyleSingle()
                    ->buttons([
                        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('created_at'),
            Column::make('updated_at'),
            Column::computed('action')
                  ->exportable(false)
                  ->printable(false)
                  ->width(60)
                  ->addClass('text-center'),
        ];
    }

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

this is blade

usercontroller

i'm using adminlte theme

• Operating System
• PHP Version : 8.3.3
• Laravel Version 11
• Laravel-Datatables Version 11
• yajra/laravel-datatables-buttons :11.0

[Arjay Angeles]

I think you are missing the bootstrap-icons CSS part, make sure it's loaded in your app.css or scss.

[M. Husni Thamrin]

solved with adding bootstrap icon cdn the head.

and style the search bar and pagination with dom and bootstrap classes

->dom('<"row"<"col-6"B><"col-6 d-flex flex-row-reverse"fr>>t<"row"<"col-6"i><"col-6 d-flex flex-row-reverse"p>>')

i thought it was a text. thanks Arjay