diff --git a/src/components/datatable/DataTable.d.ts b/src/components/datatable/DataTable.d.ts index 293c8bcd7..a0f2822be 100644 --- a/src/components/datatable/DataTable.d.ts +++ b/src/components/datatable/DataTable.d.ts @@ -21,6 +21,7 @@ export declare class DataTable extends Vue { defaultSortOrder?: number; multiSortMeta?: any[]; sortMode?: string; + removableSort?: boolean; filters?: { [s: string]: any; }; diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue index 8d2c3c9b7..2207d9a5e 100644 --- a/src/components/datatable/DataTable.vue +++ b/src/components/datatable/DataTable.vue @@ -222,6 +222,10 @@ export default { type: String, default: 'single' }, + removableSort: { + type: Boolean, + default: false + }, filters: { type: Object, default: null @@ -475,24 +479,35 @@ export default { || DomHandler.hasClass(targetNode, 'p-sortable-column-icon') || DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')) { DomHandler.clearSelection(); - this.d_sortOrder = (this.d_sortField === columnField) ? this.d_sortOrder * -1 : this.defaultSortOrder; - this.d_sortField = columnField; - - if(this.sortMode === 'multiple') { - let metaKey = event.metaKey || event.ctrlKey; - if (!metaKey) { - this.d_multiSortMeta = []; + if (this.sortMode === 'single') { + if (this.d_sortField === columnField) { + if (this.removableSort && (this.d_sortOrder * -1 === this.defaultSortOrder)) { + this.d_sortOrder = null; + this.d_sortField = null; + } + else { + this.d_sortOrder = this.d_sortOrder * -1 + } + } + else { + this.d_sortOrder = this.defaultSortOrder; + this.d_sortField = columnField; } - this.addSortMeta({field: this.d_sortField, order: this.d_sortOrder}); + this.$emit('update:sortField', this.d_sortField); + this.$emit('update:sortOrder', this.d_sortOrder); + } + else if (this.sortMode === 'multiple') { + let metaKey = event.metaKey || event.ctrlKey; + if (!metaKey) { + this.d_multiSortMeta = this.d_multiSortMeta.filter(meta => meta.field === columnField); + } + + this.addMultiSortField(columnField); + this.$emit('update:multiSortMeta', this.d_multiSortMeta); } - this.$emit('update:sortField', this.d_sortField); - this.$emit('update:sortOrder', this.d_sortOrder); - this.$emit('update:multiSortMeta', this.d_multiSortMeta); - this.$emit('sort', this.createLazyLoadEvent(event)); - this.resetPage(); } } @@ -551,19 +566,18 @@ export default { return (this.d_multiSortMeta[index].order * result); }, - addSortMeta(meta) { - let index = -1; - for (let i = 0; i < this.d_multiSortMeta.length; i++) { - if (this.d_multiSortMeta[i].field === meta.field) { - index = i; - break; - } + addMultiSortField(field, metaKey) { + let index = this.d_multiSortMeta.findIndex(meta => meta.field === field); + + if (index >= 0) { + if (this.removableSort && (this.d_multiSortMeta[index].order * -1 === this.defaultSortOrder)) + this.d_multiSortMeta.splice(index, 1); + else + this.d_multiSortMeta[index] = {field: field, order: this.d_multiSortMeta[index].order * -1}; + } + else { + this.d_multiSortMeta.push({field: field, order: this.defaultSortOrder}); } - - if(index >= 0) - this.d_multiSortMeta[index] = meta; - else - this.d_multiSortMeta.push(meta); this.d_multiSortMeta = [...this.d_multiSortMeta]; }, diff --git a/src/views/datatable/DataTableDoc.vue b/src/views/datatable/DataTableDoc.vue index 2a8e54d5d..d433ab65f 100644 --- a/src/views/datatable/DataTableDoc.vue +++ b/src/views/datatable/DataTableDoc.vue @@ -1819,6 +1819,12 @@ export default { single Defines whether sorting works on single column or on multiple columns. + + removableSort + boolean + false + When enabled, columns can have an un-sorted state. + filters object diff --git a/src/views/datatable/DataTableSortDemo.vue b/src/views/datatable/DataTableSortDemo.vue index d48fb2b04..b4f90bb6a 100644 --- a/src/views/datatable/DataTableSortDemo.vue +++ b/src/views/datatable/DataTableSortDemo.vue @@ -33,6 +33,14 @@ + +

Removable Sort

+ + + + + +
@@ -63,6 +71,14 @@ <Column field="brand" header="Brand" :sortable="true"></Column> <Column field="color" header="Color" :sortable="true"></Column> </DataTable> + +<h3>Removable Sort</h3> +<DataTable :value="cars" removableSort> + <Column field="vin" header="Vin" :sortable="true"></Column> + <Column field="year" header="Year" :sortable="true"></Column> + <Column field="brand" header="Brand" :sortable="true"></Column> + <Column field="color" header="Color" :sortable="true"></Column> +</DataTable>