livewire-tables
livewire-tables copied to clipboard
Select rows/all rows with checkboxes
Overview
This pr provides traits that:
- Selecting of individual rows via checkbox
- Selecting all the rows on the current page
- When changing pages, deselect all rows.
- When selecting all rows then deselecting a single row also deselect the "select all" checkbox.
Example
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
-
On sort, some kind of hook is needed to reset the select all.
-
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. -
selectRow
method currently just clears the select All checkbox viaallRowsSelected
because we have model binding in place for theselected
array. Expect there is a better way to do this.
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
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.