-
diff --git a/src/components/cv-data-table/cv-data-table-notes.md b/src/components/cv-data-table/cv-data-table-notes.md
index 6e71a9be3..d2cbbbaab 100644
--- a/src/components/cv-data-table/cv-data-table-notes.md
+++ b/src/components/cv-data-table/cv-data-table-notes.md
@@ -78,6 +78,7 @@ Like sorting and filtering it is the users responsibility to deal with edited da
- a headingStyle object to be applied to the column headings.
- a dataStyle object to be applied to the data in the column.
- data: Two dimensional array of strings.
+- rows-selected: An array containing the selected row values. Supports v-model via the row-select-changes event.
- auto-width: (optional) table will size use auto sizing
- borderless: (optional) table will have no border
@@ -99,6 +100,8 @@ Like sorting and filtering it is the users responsibility to deal with edited da
## Events
- pagination: re-raises CvPageination change event.
+- row-select-change: Supplies { value: rowValue, selected: rowSelected }. Raised on row select/deselect
+- row-select-changes: Supplies array of selected row values.
- search: supplies the string being search for. NOTE: Only shown if search is listened for.
- sort({ index, order: 'ascending' or 'descending' or 'none' or ''})
@@ -106,4 +109,4 @@ As per note sort and filter behviours are delegated to the component user.
### Additional
-N/A
+Rows are not automatically deselected after when a batch action is executed. The selected row checks can be cleared either by calling the method deselect which will deselect all or by use of v-model with the rows-selected property.
diff --git a/src/components/cv-data-table/cv-data-table-story.js b/src/components/cv-data-table/cv-data-table-story.js
index 98cb51ad4..8b1e2aaff 100644
--- a/src/components/cv-data-table/cv-data-table-story.js
+++ b/src/components/cv-data-table/cv-data-table-story.js
@@ -207,6 +207,10 @@ const preKnobs = {
value:
':pagination="{ numberOfItems: internalData.length }" @pagination="actionOnPagination"',
},
+ rowSelects: {
+ group: 'attr',
+ value: 'v-model="rowSelects" @row-select-change="actionRowSelectChange"',
+ },
actions: {
group: 'slots',
slot: {
@@ -366,6 +370,7 @@ for (const story of storySet) {
const templateViewString = `
@@ -389,6 +394,7 @@ for (const story of storySet) {
return {
internalData: this.data,
filterValue: '',
+ rowSelects: [],
sortBy: null,
sampleOverflowMenu: ['Start', 'Stop', 'Delete 3'],
};
@@ -444,18 +450,21 @@ for (const story of storySet) {
this.batchAction1(
`selected items: [${this.$refs.table.selectedRows}]`
);
+ this.rowSelects = [];
},
batchAction2: action('batch action 2'),
onBatchAction2() {
this.batchAction2(
`selected items: [${this.$refs.table.selectedRows}]`
);
+ this.rowSelects = [];
},
batchAction3: action('batch action 3'),
onBatchAction3() {
this.batchAction3(
`selected items: [${this.$refs.table.selectedRows}]`
);
+ this.$refs.table.deselect();
},
action1: action('action 1'),
action2: action('action 2'),
@@ -463,6 +472,7 @@ for (const story of storySet) {
actionNew: action('add new'),
actionOnPagination: action('pagination change'),
onOverflowMenuClick: action('overflow menu click'),
+ actionRowSelectChange: action('row selected'),
},
};
},
diff --git a/src/components/cv-data-table/cv-data-table.vue b/src/components/cv-data-table/cv-data-table.vue
index ef9e1939a..c53546dd2 100644
--- a/src/components/cv-data-table/cv-data-table.vue
+++ b/src/components/cv-data-table/cv-data-table.vue
@@ -16,8 +16,8 @@