Resize window broke the detail row + responsive

[Simone4e]

Livewire PowerGrid version

6.4

Livewire version

6.4

Laravel version

12.0

Which PHP version are you using?

PHP 8.4

Which Theme are you using?

Tailwind

Have you published the resource files and customized them? (php artisan vendor:publish)

Yes

What is the problem?

Hello,

If i resize the window like a phone or < you will see an error:

powergrid.js:20 Uncaught TypeError: Cannot read properties of null (reading 'textContent')
at Ye (powergrid.js:20:2908)
at Ge (powergrid.js:23:151)
at Proxy.handleResize (powergrid.js:23:515)
at powergrid.js:23:863
at Array.forEach ()
at ResizeObserver. (powergrid.js:23:710)

And the detail of row doesnt exist that's why the error appear.

Code snippets

<?php

namespace App\Livewire;

use App\Models\Room;
use Illuminate\Support\Number;
use Illuminate\Database\Eloquent\Builder;
use PowerComponents\LivewirePowerGrid\Button;
use PowerComponents\LivewirePowerGrid\Column;
use PowerComponents\LivewirePowerGrid\Facades\Filter;
use PowerComponents\LivewirePowerGrid\PowerGridFields;
use PowerComponents\LivewirePowerGrid\Facades\PowerGrid;
use PowerComponents\LivewirePowerGrid\PowerGridComponent;

final class RoomTable extends PowerGridComponent
{
    public string $tableName = 'room-table-wj2ae9-table';

    public string $sortField = 'rooms.id';

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

        return [
            PowerGrid::header()
                ->showToggleColumns()
                ->showSearchInput(),
            PowerGrid::footer()
                ->showPerPage()
                ->showRecordCount(),
            PowerGrid::responsive()
                ->fixedColumns('name', 'actions', 'actived'),
        ];
    }

    public function header(): array
    {
        return [
            Button::add('bulk-delete')
                ->slot('Bulk delete (<span x-text="window.pgBulkActions.count(\'' . $this->tableName . '\')"></span>)')
                ->class('btn btn-soft btn-sm')
                ->dispatch('bulkDelete.' . $this->tableName, []),
        ];
    }

    public function datasource(): Builder
    {
        return Room::query();
    }

    public function relationSearch(): array
    {
        return [];
    }

    public function fields(): PowerGridFields
    {
        return PowerGrid::fields()
            ->add('name')
            ->add('description')
            ->add('price')
            ->add('price_formatted', function ($row) {
                return Number::currency($row->price, in: 'EUR', locale: 'it_IT');
            })
            ->add('beds')
            ->add('meters')
            ->add('preview',  fn($room) => '<img class="w-15 h-15 shrink-0 grow-0 rounded-full" src="' . asset("storage/{$room->preview}") . '">')
            ->add('actived');
    }

    public function columns(): array
    {
        return [
            Column::action('Action'),
            Column::make('Preview', 'preview')
                ->sortable()
                ->searchable(),
            Column::make('Name', 'name')
                ->sortable()
                ->searchable(),

            Column::make('Description', 'description')
                ->sortable()
                ->searchable(),

            Column::make('Price', 'price_formatted', 'price')
                ->sortable(fn($builder, $dir) => $builder->orderBy('price', $dir))
                ->searchable(),

            Column::make('Beds', 'beds')
                ->sortable()
                ->searchable(),

            Column::make('Meters', 'meters')
                ->sortable()
                ->searchable(),

            Column::make('Actived', 'actived')
                ->sortable()
                ->searchable()
                ->toggleable(
                    hasPermission: true,
                    trueLabel: 'Active',
                    falseLabel: 'Disabled'
                )
        ];
    }

    public function filters(): array
    {
        return [];
    }

    #[\Livewire\Attributes\On('deleteRoom')]
    public function edit($rowId): void
    {
        $this->js('alert(delete ' . $rowId . ')');
    }

    public function actions(Room $row): array
    {
        return [
            Button::add('edit')
                ->slot('✏️') // matita
                ->id()
                ->class('text-blue-600 hover:text-blue-800 text-lg')
                ->route('admin.rooms.edit', ['room' => $row->id]),

            Button::add('delete')
                ->slot('🗑️') // cestino
                ->id()
                ->class('text-red-600 hover:text-red-800 text-lg')
                ->dispatch('edit', ['rowId' => $row->id]),
        ];
    }

    public function onUpdatedToggleable(string|int $id, string $field, string $value): void
    {
        Room::query()->find($id)->update([
            $field => e($value),
        ]);
    }

    /*
    public function actionRules($row): array
    {
       return [
            // Hide button edit for ID 1
            Rule::button('edit')
                ->when(fn($row) => $row->id === 1)
                ->hide(),
        ];
    }
    */
}

How do you expect it to work?

Ofcourse the detail need to appear always to avoid the error.

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be removed if I haven't met the criteria above.