Powergrid datatable checkbox issue

[twinkalmodi-kombee]

Livewire PowerGrid version

power-components/livewire-powergrid : "^5.10",

Livewire version

livewire/livewire : "^3.5",

Laravel version

laravel/framework: "^11.7",

Which PHP version are you using?

PHP 8.2

Which Theme are you using?

None

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

Yes

What is the problem?

"There seems to be an issue with the checkboxes. I selected three checkboxes on the first page, but when I navigated to the second page, three checkboxes appeared to be selected there as well."
Ideally, the checkboxes on the second page should not remain selected, and when returning to the first page, the originally selected checkboxes should still be retained."

Code snippets

final class Table extends PowerGridComponent
{
use RefreshDataTable;

public bool $deferLoading = true; // default false

public string $loadingComponent = 'components.my-custom-loading';

public string $primaryKey = 'users.id';

public string $sortField = 'users.id';

public string $sortDirection = 'desc';

//Custom per page
public int $perPage;

//Custom per page values
public array $perPageValues;

public $currentUser;
public $id;

public string $tableName = 'User';

public function __construct()
{
    if (!Gate::allows('index-users')) {
        abort(Response::HTTP_FORBIDDEN);
    }

    $this->currentUser = Auth::user();
    $urlParams = request()->query();
    $this->perPage = isset($urlParams['perPage']) ? (int) $urlParams['perPage'] : config('constants.webPerPage');
    $this->perPageValues = config('constants.webPerPageValues');
}

public function exportData()
{
    try {
        // Define export parameters
        $exportClass = ExportCustomerTable::class;
        $headingColumn = 'User ID, Name, Contact Number, City Name, Company Name, Status';
        $batchName = 'Export Customer Table';
        $downloadPrefixFileName = 'CustomerReports_';
        $extraParam = ['currentUser' => $this->currentUser];
        $index = 1;

        // Run export job and handle result
        $result = Helper::runExportJob($index, $this->total, $this->filters, $this->checkboxValues, $this->search, $headingColumn, $downloadPrefixFileName, $exportClass, $batchName, $extraParam);

        if (!$result['status']) {
            // Dispatch error alert if export fails
            $this->dispatch('alert', type: 'error', message: $result['message']);

            return false;
        }

        // Dispatch event to show export progress
        $this->dispatch('showExportProgressEvent', json_encode($result['data']))->to('common-code');
    } catch (Throwable $e) {
        // Log and dispatch error alert if exception occurs
        logger()->error('App\Livewire\Customer\Table: exportData: Throwable', ['Message' => $e->getMessage(), 'TraceAsString' => $e->getTraceAsString()]);
        $this->dispatch('alert', type: 'error', message: __('messages.user.messages.common_error_message'));

        return false;
    }
}

public function exportDataWithoutRecentOrder()
{
    try {
        // Define export parameters
        $exportClass = ExportWithoutRecentOrderCustomerTable::class;
        $headingColumn = 'User ID, Name, Contact Number, City Name, Company Name, Status';
        $batchName = 'Export Customer Table';
        $downloadPrefixFileName = 'CustomerReports_';
        $extraParam = ['currentUser' => $this->currentUser];
        $index = 1;

        // Run export job and handle result
        $result = Helper::runExportJob($index, $this->total, $this->filters, $this->checkboxValues, $this->search, $headingColumn, $downloadPrefixFileName, $exportClass, $batchName, $extraParam);

        if (!$result['status']) {
            // Dispatch error alert if export fails
            $this->dispatch('alert', type: 'error', message: $result['message']);

            return false;
        }

        // Dispatch event to show export progress
        $this->dispatch('showExportProgressEvent', json_encode($result['data']))->to('common-code');
    } catch (Throwable $e) {
        // Log and dispatch error alert if exception occurs
        logger()->error('App\Livewire\Customer\Table: exportData: Throwable', ['Message' => $e->getMessage(), 'TraceAsString' => $e->getTraceAsString()]);
        $this->dispatch('alert', type: 'error', message: __('messages.user.messages.common_error_message'));

        return false;
    }
}

/**
 * header
 *
 * @return array
 */
public function header(): array
{
    $headerArray = [];

    $headerArray[] = Button::add('export-data')
        ->render(function () {
            return Blade::render(
                <<<'HTML'
                <a href="javascript:void(0);" title="Export Data" class="btn btn-success btn-custom-class sp-p" wire:click="exportData">
                    <i class="las la-download fs-1"></i>
                    <span wire:loading wire:target="exportData"></span>
                </a>
            HTML
            );
        });

    $headerArray[] = Button::add('export-data-without-recent-order')
        ->render(function () {
            return Blade::render(
                <<<'HTML'
                      <a href="javascript:void(0);" title="Export Customers Without Recent Orders" class="btn btn-primary btn-custom-class sp-p" wire:click="exportDataWithoutRecentOrder"><i class="las la-file-export fs-1"></i>
                        <span wire:loading wire:target="exportDataWithoutRecentOrder"></span>
                      </a>
                    HTML
            );
        });


    return $headerArray;
}

/**
 * setUp
 *
 * @return array
 */
public function setUp(): array
{
    $this->showCheckBox();
    Responsive::make();

    return [
        // Header::make()->showSearchInput(),

        Footer::make()
            ->showPerPage($this->perPage, $this->perPageValues)
            ->showRecordCount(),
    ];
}

/**
 * datasource
 *
 * @return Builder
 */
public function datasource(): Builder
{
    return User::query()->select([
        'users.id',
        'users.name',
        'users.contact_number',
        'users.city',
        'users.company_name',
        'users.user_status',
        'users.device_number',
        'users.device_token',
    ])->where('users.role_id', config('constants.user.role_type_code.customer'));
}

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

/**
 * fields
 *
 * @return PowerGridFields
 */
public function fields(): PowerGridFields
{
    return PowerGrid::fields()
        ->add('id')
        ->add('name', function (User $model) {
            return ucfirst($model->name);
        })->add('user_status', function (User $model) {
            if ($model->user_status == config('constants.user.status_code.active')) {
                $statusText = '<span class="badge badge-success">' . config('constants.user.user_status_value.active') . '</span>';
            } else {
                $statusText = '<span class="badge badge-danger">' . config('constants.user.user_status_value.inactive') . '</span>';
            }
            return $statusText;
        });
}

/**
 * columns
 *
 * @return array
 */
public function columns(): array
{
    return [
        Column::make(__('messages.customer.listing.name'), 'name')
            ->sortable()
            ->searchable(),

        Column::make(__('messages.customer.listing.contact_number'), 'contact_number')
            ->sortable()
            ->searchable(),

        Column::make(__('messages.customer.listing.city'), 'city')
            ->sortable(),

        Column::make(__('messages.customer.listing.company_name'), 'company_name')
            ->sortable(),

        Column::make(__('messages.customer.listing.status'), 'user_status'),

        Column::action(__('messages.customer.listing.actions')),

    ];
}

/**
 * filters
 *
 * @return array
 */
public function filters(): array
{
    return [
        Filter::inputText('name', 'name')->operators(['contains']),
        Filter::inputText('city', 'city')->operators(['contains']),
        Filter::inputText('contact_number', 'contact_number')->operators(['contains']),
        Filter::inputText('company_name', 'company_name')->operators(['contains']),
        Filter::select('user_status', 'user_status')
            ->dataSource(User::status())
            ->optionLabel('label')
            ->optionValue('key'),
    ];
}

#[\Livewire\Attributes\On('edit')]
/**
 * edit
 *
 * @param  mixed $rowId
 * @return void
 */
public function edit($id,  $page, $perPage)
{
    return $this->redirect('customer/' . $id . '/edit?page=' . $page . '&perPage=' . $perPage, navigate: true); // redirect to edit component
}


public function updatedSetUpFooterPerPage($value)
{
    $queryParams = array_merge(request()->query(), ['page' => $this->paginators['page'], 'perPage' => $value]);

    // Update URL query parameters dynamically without reloading
    $this->js("window.history.pushState({}, '', '?' + '" . http_build_query($queryParams) . "')");
}

public function actions(User $row): array
{
    $actions = [];

    if ($row->user_status == config('constants.user.status_code.active')) {
        $actions[] = Button::add('deactive-user')
            ->slot('<i class="las la-user-times fs-1 me-1"></i>')
            ->class('btn btn-icon btn-light-secondary block-unblock-modal btn-color-danger')
            ->tooltip('Click here to deactive user')
            ->dispatchTo('customer.active-inactive-user', 'toggleUserStatus', ['customerID' => $row->id, 'status' => config('constants.user.status_code.inactive'), 'tableName' => $this->tableName]);
    } else if ($row->user_status == config('constants.user.status_code.inactive')) {
        $actions[] = Button::add('active-user')
            ->slot('<i class="las la-user-check fs-1 me-1"></i>')
            ->class('btn btn-icon btn-light-secondary block-unblock-modal btn-color-success')
            ->tooltip('Click here to active user')
            ->dispatchTo('customer.active-inactive-user', 'toggleUserStatus', ['customerID' => $row->id, 'status' => config('constants.user.status_code.active'), 'tableName' => $this->tableName]);
    }

    $actions[] = Button::add('edit')
        ->bladeComponent('table-edit-action', ['idValue' => $row->id, 'page' => $this->paginators['page'], 'perPage' => $this->setUp['footer']['perPage']]);

    if ($row->device_number !== null) {
        $actions[] = Button::add('reset-device')
            ->slot('<i class="las la-laptop fs-1"></i>') // Sync icon for reset
            ->class('btn btn-icon btn-light-secondary reset-device-modal btn-color-danger') // Warning button for reset action
            ->tooltip('Click here to Reset Device')
            ->dispatchTo('customer.active-inactive-user', 'resetDeviceToken', ['customerID' => $row->id, 'tableName' => $this->tableName]);
    }

    return $actions;
}

/**
 * actionRules
 *
 * @param  mixed $row
 * @return array
 */
public function actionRules($row): array
{
    return [];
}

/**
 * handlePageChange
 *
 * @return void
 */
public function handlePageChange()
{
    $this->checkboxAll = false;
    $this->checkboxValues = [];
}

#[\Livewire\Attributes\On('deSelectCheckBoxEvent')]
public function deSelectCheckBox(): bool
{
    $this->checkboxAll = false;
    $this->checkboxValues = [];

    return true;
}

}

How do you expect it to work?

I selected three checkboxes on the first page, but when I navigated to the second page, three checkboxes appeared to be not selected there as well."
Ideally, the checkboxes on the second page should not remain selected, and when returning to the first page, the originally selected checkboxes should still be retained."

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.