Column Width and Page Size Broken When Using Responsive Table

[jtbrown2-bsu]

trafficstars

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?

Yes. I will describe below.

PHP Version

8.3.6

PowerGrid

5.7.1

Laravel

11.7.0

Livewire

3.4.12

Alpine JS

3.14.0

Theme

Tailwind 3.x with tailwind/forms

Describe the bug.

I have a simple Responsive PowerGrid Table with four columns, a bulk checkbox column, and an actions column. Whenever I have responsive mode on (just using Responsive::make()), multiple parts are messed up. One, the Actions column will become hidden in the details box no matter whether I specify Responsive::ACTIONS_COLUMN_NAME in the fixedColumns section or not. If I resize the page, it will disappear, and on sizing it back to normal, it remains hidden. Strangely enough, this also occurs when sorting. Here are two examples using images.

Here is the table before I sort anything.

Upon sorting the Number column, the Actions column disappears despite there being space for it. Sorting again causes it to remain hidden still.

The amount of rows per page is also affected. If I were to select All, then sort, causing the Actions column to collapse, it resets back to the default of 10 rows per page despite it displaying "Showing 1 to 26 of 26 Results".

Both the issue of the disappearing Actions column and the page size issue results in the following console error every time I click a header to sort:

livewire.js?id=770f7738:8348 Uncaught TypeError: Cannot read properties of undefined (reading 'before') at Block.appendChild (livewire.js?id=770f7738:8348:23) at patchChildren (livewire.js?id=770f7738:8176:21) at patchChildren (livewire.js?id=770f7738:8218:11) at patchChildren (livewire.js?id=770f7738:8218:11) at patchChildren (livewire.js?id=770f7738:8218:11) at patchChildren (livewire.js?id=770f7738:8218:11) at patch (livewire.js?id=770f7738:8113:7) at patchChildren (livewire.js?id=770f7738:8265:9) at patch (livewire.js?id=770f7738:8113:7) at patchChildren (livewire.js?id=770f7738:8265:9)

These issues are fixed if I remove the Responsive part from the setUp function.

To Reproduce...

These issues are present on the Demo site as well.

First, if you sort by In Stock, you will see that the In Stock option disappears into the details dropdown.

Also, if you resize the page until the details dropdown happens, and then size the page back up, you will still see the dropdown even though there was space before resizing the window. This only happens to me on my desktop, even though it and my laptop are both running Chrome 125.0.6422.142 at 1920x1080. If there is any extra information needed for this bug particularly, then let me know.

Lastly, if you set the page size to be All, it will say "Showing 1 to 192 of 192 Results" at the bottom right. If you then sort by any column, you will see the row count shrink down despite the selector still displaying "All" and the text at the bottom right still saying there are 192 results. Changing the page size afterwards does nothing.

There will be console errors as well when trying to sort.

Extra information

No response