Error with Column Limit and DeferLoading in PowerGrid

[sukronsabari]

Have you searched through other issues to see if your problem is already reported or has been fixed?

Yes, I did not find it.

Did you read the documentation?

Yes, I did not find it.

Have you tried to publish the views?

Yes - I didn't work.

Is there an error in the console?

PHP Version

8.3.8

PowerGrid

5.10.6

Laravel

11.21.0

Livewire

3,5,6

Alpine JS

3.4.2

Theme

Tailwind 3.x

Describe the bug.

When attempting to use more than a specific number of columns in the columns() function of PowerGrid, a critical issue arises. Un-commenting certain columns consistently causes a JSON parsing error, which prevents the table from rendering correctly and results in deferred loading (wire:loading) not completing.

Error Details: When the total number of columns exceeds a certain threshold, the following error appears in the console: Uncaught (in promise) SyntaxError: Unexpected token '<', "
"... is not valid JSON at JSON.parse () at sendRequest (livewire.js?id=cc800bf4:4321:52) at async RequestPool.send (livewire.js?id=cc800bf4:4041:7) The deferred loading state never ends for the PowerGrid table when this error occurs.

To Reproduce...

1. Define multiple columns in the PowerGrid columns() method (example below).
2. Un-comment additional columns (e.g., created_at, updated_at).
3. Attempt to load the table in the browser.
4. Observe the JSON parsing error in the browser console and deferred loading not completing.

Extra information

public function setUp(): array
    {
        $this->showCheckBox();

        return [
            Exportable::make('export')
                ->striped()
                ->type(Exportable::TYPE_XLS, Exportable::TYPE_CSV),
            Header::make()
                ->showSearchInput()
                ->showToggleColumns(),
            Footer::make()
                ->showPerPage(perPage: 10, perPageValues: [0, 4, 10, 50, 100, 500])
                ->showRecordCount('full'),
            Detail::make()
                ->view('components.datatables.detail-column')
                ->showCollapseIcon()
                ->params(['keys' => [
                    ['label' => 'Description', 'value' => 'description'],
                ]]),
        ];
    }

public function columns(): array
{
    return [
        Column::make('Id', 'id'),
        Column::make('Image', 'main_image'),
        Column::make('Name', 'name')
            ->searchable(),
        Column::make('Description', 'description'),
        Column::make('Is active', 'is_active')
            ->toggleable(
                hasPermission: Auth::user()->role === UserRole::Admin,
                trueLabel: 'Yes',
                falseLabel: 'No'
            )
            ->sortable(),
        Column::make('Currency code', 'currency_code'),
        Column::make('Price', 'price')
            ->sortable(),
        Column::make('Stock', 'stock')
            ->sortable(),
        Column::make('Weight', 'weight')
            ->sortable(),
        Column::make('Sku', 'sku')
            ->searchable(),
        Column::make('Has variation', 'has_variation')
            ->sortable(),
        // Uncommenting the following columns triggers the issue
        // Column::make('Created at', 'created_at')->sortable(),
        // Column::make('Updated at', 'updated_at')->sortable(),
        Column::action('Action'),
    ];
}

[sukronsabari]

This is field function:

public bool $deferLoading = true; public string $loadingComponent = 'components.loading.datatable-loading';

public function fields(): PowerGridFields { return PowerGrid::fields() ->add('id') ->add('main_image', function(Product $row) { $mainImage = $row->images->where('is_main', true)->first();

            if ($mainImage) {
                return '<img src="' . asset('storage/' . $mainImage->image) . '" alt="Main Image" class="h-20 object-cover rounded">';
            }

            return 'No Image';
        })
        ->add('name')
        ->add('description')
        ->add('is_active')
        ->add('currency_code')
        ->add('price', fn(Product $row) => Number::currency($row->price, 'IDR', 'id_ID'))
        ->add('stock')
        ->add('weight', fn(Product $row) => (int) $row->weight)
        ->add('sku')
        ->add('has_variation')
        ->add('created_at')
        ->add('updated_at');
}