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 @@
-
+
+
{{resolveFieldData(rowData, col.field)}}
|
@@ -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".
+
+
+
+
+
+
+