livewire-tables icon indicating copy to clipboard operation
livewire-tables copied to clipboard

Select rows/all rows with checkboxes

Open booni3 opened this issue 4 years ago • 1 comments

Overview

This pr provides traits that:

  1. Selecting of individual rows via checkbox
  2. Selecting all the rows on the current page
  3. When changing pages, deselect all rows.
  4. When selecting all rows then deselecting a single row also deselect the "select all" checkbox.

Example

Kapture 2019-12-01 at 20 05 06

Blade

Header, Select All Checkbox

<input class="form-check-input"
   type="checkbox"
   wire:model="allRowsSelected"
   wire:change="selectAllRows($event.target.checked)"
>

Row Checkbox, Select Row

<input class="form-check-input"
       type="checkbox"
       value="{{ $row->id }}"
       wire:model="selected.{{ $row->id }}"
       wire:change="selectRow($event.target.checked, {{ $row->id }})"
>

Still needs work

  1. On sort, some kind of hook is needed to reset the select all.

  2. Having the additional pagination trait is not ideal. It would be best if we can hook into page updates to run the clearSelected method but I am not sure if this is possible within livewire.

  3. selectRow method currently just clears the select All checkbox via allRowsSelected because we have model binding in place for the selected array. Expect there is a better way to do this.

booni3 avatar Dec 01 '19 20:12 booni3

Hey @booni3 , this looks awesome! I'd love to have this feature added. Thanks for the work!

Are you open to collaborating? I'm working on another path for the

cells using a view component in order to detect sort status and such. See issue/discussion #10 for more detail.

I'd love to work together and get all of these features tied together.

If you're up for it, I'm on twitter @ https://twitter.com/coryrose, or let me know if there's a better way to reach out.

coryrose1 avatar Dec 05 '19 11:12 coryrose1