"PowerGrid hangs with >13 columns using defer loading and custom loading component (Uncaught SyntaxError: Unexpected token '<')"

[sukronsabari]

When creating more than 13 columns (including action columns) in Livewire PowerGrid with defer loading and a custom loading component, the table fails to load and continues showing a loading state. The browser console reports the following error:

Uncaught (in promise) SyntaxError: Unexpected token '<', "<br />
<b>"... is not valid JSON
   at JSON.parse (<anonymous>)
   at sendRequest (livewire.js?id=cc800bf4:4321:52)
   at async RequestPool.send (livewire.js?id=cc800bf4:4041:7)

This issue causes the datatable rows to fail loading correctly.

Steps to Reproduce:

1. Create a PowerGrid with more than 13 columns (including actions).
2. Enable defer loading.
3. Use a custom loading component (E.g: public string $loadingComponent = 'components.loading.datatable-loading';).
4. Load the grid and check the browser console for the error.
5. Expected Behavior: The table should load all rows without error and stop showing the loading state.

Actual Behavior: The table hangs in a loading state, and the console shows a JSON parse error.

Environment:

1. Livewire Version: 3.5.6
2. PowerGrid Version: 5.10.6
3. PHP Version: 8.3.8
4. Laravel Version: 11.21.0
5. Browser: (e.g., Chrome, Firefox)

Additional Context:
The issue seems to arise specifically when using more than 13 columns.
Other tables with fewer columns work as expected.

Would appreciate any insights or solutions! Thanks in advance.

[johannesMEGABAD]

Can not reproduce this bug.

I tested it myself. I created 14 Columns and one Action column. I set defer loading true aswell as provided it with a loading component.
For me it works just fine and loads in all the data.

Maybe something with your data is wrong. The table just works fine.
Tested this on version 5.10.6 aswell