diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue index e4d86c9f2..2b6a89d2a 100644 --- a/src/components/datatable/DataTable.vue +++ b/src/components/datatable/DataTable.vue @@ -983,6 +983,10 @@ export default { table-layout: auto; } +.p-datatable-hoverable-rows .p-datatable-tbody > tr.p-highlight { + cursor: pointer; +} + /* Sections */ .p-datatable-header, .p-datatable-footer { diff --git a/src/components/treetable/TreeTable.vue b/src/components/treetable/TreeTable.vue index f443225dd..f6d2930c8 100644 --- a/src/components/treetable/TreeTable.vue +++ b/src/components/treetable/TreeTable.vue @@ -36,7 +36,7 @@ @@ -231,6 +231,85 @@ export default { this.d_expandedKeys = {...this.d_expandedKeys}; this.$emit('update:expandedKeys', this.d_expandedKeys); }, + onNodeClick(event) { + if (this.selectionMode != null && event.node.selectable !== false) { + const metaSelection = event.nodeTouched ? false : this.metaKeySelection; + const _selectionKeys = metaSelection ? this.handleSelectionWithMetaKey(event) : this.handleSelectionWithoutMetaKey(event); + + this.$emit('update:selectionKeys', _selectionKeys); + } + }, + handleSelectionWithMetaKey(event) { + const originalEvent = event.originalEvent; + const node = event.node; + const metaKey = (originalEvent.metaKey||originalEvent.ctrlKey); + const selected = this.isNodeSelected(node); + let _selectionKeys; + + if (selected && metaKey) { + if (this.isSingleSelectionMode()) { + _selectionKeys = {}; + } + else { + _selectionKeys = {...this.selectionKeys}; + delete _selectionKeys[node.key]; + } + + this.$emit('node-unselect', node); + } + else { + if (this.isSingleSelectionMode()) { + _selectionKeys = {}; + } + else if (this.isMultipleSelectionMode()) { + _selectionKeys = !metaKey ? {} : (this.selectionKeys ? {...this.selectionKeys} : {}); + } + + _selectionKeys[node.key] = true; + this.$emit('node-select', node); + } + + return _selectionKeys; + }, + handleSelectionWithoutMetaKey(event) { + const node = event.node; + const selected = this.isNodeSelected(node); + let _selectionKeys; + + if (this.isSingleSelectionMode()) { + if (selected) { + _selectionKeys = {}; + this.$emit('node-unselect', node); + } + else { + _selectionKeys = {}; + _selectionKeys[node.key] = true; + this.$emit('node-select', node); + } + } + else { + if (selected) { + _selectionKeys = {...this.selectionKeys}; + delete _selectionKeys[node.key]; + + this.$emit('node-unselect', node); + } + else { + _selectionKeys = this.selectionKeys ? {...this.selectionKeys} : {}; + _selectionKeys[node.key] = true; + + this.$emit('node-select', node); + } + } + + return _selectionKeys; + }, + isSingleSelectionMode() { + return this.selectionMode === 'single'; + }, + isMultipleSelectionMode() { + return this.selectionMode === 'multiple'; + }, onPage(event) { this.d_first = event.first; this.d_rows = event.rows; @@ -655,6 +734,10 @@ export default { table-layout: auto; } +.p-treetable-hoverable-rows .p-treetable-tbody > tr.p-highlight { + cursor: pointer; +} + /* Sections */ .p-treetable-header, .p-treetable-footer { diff --git a/src/components/treetable/TreeTableRow.vue b/src/components/treetable/TreeTableRow.vue index e2d037288..ca4a6edad 100644 --- a/src/components/treetable/TreeTableRow.vue +++ b/src/components/treetable/TreeTableRow.vue @@ -1,5 +1,5 @@