diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue index c4a65f17e..f900fa68e 100644 --- a/src/components/datatable/DataTable.vue +++ b/src/components/datatable/DataTable.vue @@ -28,6 +28,7 @@ {{col.header}} + @@ -46,7 +47,8 @@ @@ -81,6 +83,8 @@ import FilterUtils from '../utils/FilterUtils'; import DomHandler from '../utils/DomHandler'; import Paginator from '../paginator/Paginator'; import RowRadioButton from './RowRadioButton'; +import RowCheckbox from './RowCheckbox.vue'; +import HeaderCheckbox from './HeaderCheckbox.vue'; const ColumnSlot = { functional: true, @@ -616,6 +620,33 @@ export default { this.$emit('row-select', {originalEvent: event, data: rowData, type: 'radiobutton'}); } }, + toggleRowWithCheckbox(event) { + const rowData = event.data; + + if (this.isSelected(rowData)) { + const selectionIndex = this.findIndexInSelection(rowData); + const _selection = this.selection.filter((val, i) => i != selectionIndex); + this.$emit('update:selection', _selection); + this.$emit('row-unselect', {originalEvent: event, data: rowData, type: 'checkbox'}); + } + else { + let _selection = this.selection ? [...this.selection] : []; + _selection = [..._selection, rowData]; + this.$emit('update:selection', _selection); + this.$emit('row-select', {originalEvent: event, data: rowData, type: 'checkbox'}); + } + }, + toggleRowsWithCheckbox(event) { + const processedData = this.processedData; + const checked = this.allRowsSelected; + const _selection = checked ? [] : (processedData ? [...processedData] : [...this.value]); + this.$emit('update:selection', _selection); + + if (checked) + this.$emit('row-unselect-all', {originalEvent: event}); + else + this.$emit('row-select-all', {originalEvent: event, data: _selection}); + }, isSingleSelectionMode() { return this.selectionMode === 'single'; }, @@ -698,10 +729,10 @@ export default { rangeEnd -= this.first; } - const filteredValue = this.processedData; + const value = this.processedData; let _selection = []; for(let i = rangeStart; i <= rangeEnd; i++) { - let rangeRowData = filteredValue ? filteredValue[i] : this.value[i]; + let rangeRowData = value[i]; _selection.push(rangeRowData); this.$emit('row-select', {originalEvent: event, data: rangeRowData, type: 'row'}); } @@ -760,7 +791,7 @@ export default { return this.totalRecords; } else { - const data = this.hasFilters ? this.processedData : this.value; + const data = this.processedData; return data ? data.length : 0; } }, @@ -796,12 +827,18 @@ export default { }, loadingIconClass() { return ['p-datatable-loading-icon pi-spin', this.loadingIcon]; + }, + allRowsSelected() { + const val = this.processedData; + return (this.value && this.value.length > 0 && this.selection && this.selection.length > 0 && this.selection.length === this.value.length); } }, components: { 'ColumnSlot': ColumnSlot, 'DTPaginator': Paginator, - 'DTRadioButton': RowRadioButton + 'DTRadioButton': RowRadioButton, + 'DTCheckbox': RowCheckbox, + 'DTHeaderCheckbox': HeaderCheckbox } } diff --git a/src/components/datatable/HeaderCheckbox.vue b/src/components/datatable/HeaderCheckbox.vue new file mode 100644 index 000000000..3401a9a35 --- /dev/null +++ b/src/components/datatable/HeaderCheckbox.vue @@ -0,0 +1,41 @@ + + + \ No newline at end of file diff --git a/src/components/datatable/RowCheckbox.vue b/src/components/datatable/RowCheckbox.vue new file mode 100644 index 000000000..b79bdc023 --- /dev/null +++ b/src/components/datatable/RowCheckbox.vue @@ -0,0 +1,46 @@ + + + \ No newline at end of file diff --git a/src/views/datatable/DataTableSelectionDemo.vue b/src/views/datatable/DataTableSelectionDemo.vue index 56aa49e9c..ed873374f 100644 --- a/src/views/datatable/DataTableSelectionDemo.vue +++ b/src/views/datatable/DataTableSelectionDemo.vue @@ -61,7 +61,16 @@ - {{selectedCar3 ? selectedCar3.vin : 'none'}} + +

Checkbox

+

Multiple selection can also be handled using checkboxes by enabling the selectionMode property of column as "multiple".

+ + + + + + +