Column Control throws error on button press

[Th3Trig3rFac3]

When i press the bars in the footer to open the Column Control menu it throws an error, no filtering is being applied.

datatables.net-columncontrol-Bi0gMbEb.js:7  Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
    at U (datatables.net-columncontrol-Bi0gMbEb.js:7:3922)
    at T (datatables.net-columncontrol-Bi0gMbEb.js:7:4213)
    at datatables.net-columncontrol-Bi0gMbEb.js:7:5919
    at HTMLButtonElement.n (datatables.net-columncontrol-Bi0gMbEb.js:7:8427)

My code has a computed column, but removing this doesn't solve the issue. Here is how the Datatables file look like (it worked fine before i added the column control extention) :

<?php

namespace App\DataTables;

use App\Models\User;
use DB;
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\Html\Editor\Editor;
use Yajra\DataTables\Html\Editor\Fields;
use Yajra\DataTables\Services\DataTable;

class UsersDataTable extends DataTable
{
    protected bool $fastExcel = true;
    protected bool $fastExcelCallback = false;
    /**
     * Build the DataTable class.
     *
     * @param QueryBuilder $query Results from query() method.
     */
    public function dataTable(QueryBuilder $query): EloquentDataTable
    {
        $users = DB::table('users')->select('name', 'email');
        return (new EloquentDataTable($query))
            ->setRowId('id')
            ->searchPane(
                'name',
                static fn() => $users->select('name as value', 'name as label')->distinct('name')->get(),
                function (QueryBuilder $query, array $values) {
                    return $query
                        ->whereIn('name', $values);
                }
            )
            ->searchPane(
                'email',
                static fn() => $users->select('email as value', 'email as label')->get(),
                function (QueryBuilder $query, array $values) {
                    return $query
                        ->whereIn('email', $values);
                }
            )
            ->addColumn('action', static function ($data) {
                $detailUrl = route('users.details', $data->id);
                $editUrl = route('users.edit', $data->id);

                if($data->domain === 'local'){
                    return '<a href="' . $detailUrl . '" class="btn btn-sm btn-primary">
                        <i class="bi bi-ticket-detailed"></i>
                    </a>
                    <a href="' . $editUrl . '" class="btn btn-sm btn-warning">
                        <i class="bi bi-pen"></i>
                    </a>';
                }
                return
                    '<a href="' . $detailUrl . '" class="btn btn-sm btn-primary">
                        <i class="bi bi-ticket-detailed"></i>
                    </a>';
            })
            ;
    }

    /**
     * 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())
                    ->language([
                        'url' => asset('lang/hu.json'),
                    ])
                    ->addColumnDef([
                        'searchPanes' => [
                            'show' => true,
                        ],
                        'target' => [3,4]
                    ])
                    ->searchPanes([
                        'viewCount' => false,
                        'viewTotal' => false,
                        'columns' => [3,4]
                    ])
                    ->selectInfo(false)
                    ->stateSave()
                    ->serverSide()
                    ->minifiedAjax()
                    ->dom('PBfrtilp')
                    ->languageSearchPlaceholder('Kereső')
                    ->orderBy(1)
                    ->selectStyleSingle()
                    ->colReorderEnable()
                    ->columnControlFooterSearch()
                    ->buttons([
                        Button::make('add')
                            ->text('új')
                            ->titleAttr('új felhasználó hozzáadása')
                            ->action(
                                'function(){
                                    window.location.href = "' . route('users.create') . '"}'
                            ),
                        Button::make('colvis')
                            ->columns([1, 2, 3, 4])
                            ->titleAttr('Oszlopok láthatósága'),
                    ]);
    }

    /**
     * Get the dataTable columns definition.
     */
    public function getColumns(): array
    {
        return [
            Column::computed('action')
                ->width('100px')
                ->addClass('text-center')
                ->title('Műveletek')
                ->titleAttr('Műveletek')
                ->searchPanes(false)
                ->printable(false)
                ->exportable(false),
            Column::make('id')
                ->title('Azonosító')
                ->titleAttr('Azonosító'),
            Column::make('torzsszam')
                ->title('Törzsszám')
                ->titleAttr('Törzsszám'),
            Column::make('name')
                ->title('Teljes név')
                ->titleAttr('Teljes név'),
            Column::make('email')
                ->title('Email cím')
                ->titleAttr('Email cím'),
        ];
    }

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

No error log in the laravel.log file. Thanks for the help in advance.

[yajra]

Adjusted column footer search in https://github.com/yajra/laravel-datatables-html/releases/tag/v12.3.1. Please update and try again. Thanks for reporting!

[Th3Trig3rFac3]

On the console i don't see error or warning thrown, neither in the laravel.log but the fields still doesnt't get filtered. On the therminal if i run php artisan serve than i see the current route being called when i enter or modify a filter. Also, how can i exclude a column from column control? The action computed column doesn't need columncontrol and i didn't found documantation about it. Thanks in advance!

[yajra]

Not yet entirely familiar with the column control behaviour, and might be a conflict with searchPanes?

For a specific column, this is what I am currently using:

CheckboxColumn::make()->columnControlSpacer(),
ActionColumn::makeIfCan($this->permission)->columnControlTitle('-'),
Column::make('id')->columnControlSearch(['searchNumber']),
...

Output:

[Th3Trig3rFac3]

Adding ->columnControlSpacer() to my computed column breaks the front-end, it adds the spacer to the header and the columncontrol still be present in the footer.

i don't think it conflicts with searchpanes, it still won't work after i commented everything and removed the 'P' from the ->builder()->dom() too

[yajra]

Ah, right! Since you are using footer, you need to set the correct target like: ->columnControlSpacer('tfoot:0')

[Th3Trig3rFac3]

That helped worked, thanks. If i can help in any other way to fix the columncontrol, feel free to hit me up. I'll take a closer look at it later this week.