From 772eb9e819cbf82686bbd9353ba0666dcabd4fd5 Mon Sep 17 00:00:00 2001 From: cagataycivici Date: Thu, 17 Oct 2019 17:12:49 +0300 Subject: [PATCH] Docs for new DataTable features and TypeScript support --- exports/columngroup.d.ts | 1 + exports/columngroup.js | 3 + src/components/column/Column.d.ts | 5 + src/components/column/Column.vue | 4 +- src/components/columngroup/ColumnGroup.d.ts | 5 + src/components/datatable/DataTable.d.ts | 3 + src/components/datatable/DataTable.vue | 7 +- src/views/datatable/DataTableDoc.vue | 149 +++++++++++++++++++ src/views/datatable/DataTableReorderDemo.vue | 4 +- 9 files changed, 174 insertions(+), 7 deletions(-) create mode 100644 exports/columngroup.d.ts create mode 100644 exports/columngroup.js create mode 100644 src/components/columngroup/ColumnGroup.d.ts diff --git a/exports/columngroup.d.ts b/exports/columngroup.d.ts new file mode 100644 index 000000000..bdb8af1f7 --- /dev/null +++ b/exports/columngroup.d.ts @@ -0,0 +1 @@ +export * from './components/columngroup/ColumnGroup'; \ No newline at end of file diff --git a/exports/columngroup.js b/exports/columngroup.js new file mode 100644 index 000000000..af1d61abc --- /dev/null +++ b/exports/columngroup.js @@ -0,0 +1,3 @@ +'use strict'; +module.exports = require('./components/columngroup/ColumnGroup.vue'); + \ No newline at end of file diff --git a/src/components/column/Column.d.ts b/src/components/column/Column.d.ts index cf252b7f6..37a2edfba 100644 --- a/src/components/column/Column.d.ts +++ b/src/components/column/Column.d.ts @@ -17,4 +17,9 @@ export declare class Column extends Vue { excludeGlobalFilter?: boolean; selectionMode?: string; expander?: boolean; + colspan?: number; + rowspan?: number; + rowReorder?: boolean; + rowReorderIcon?: string; + reorderableColumn?: boolean; } \ No newline at end of file diff --git a/src/components/column/Column.vue b/src/components/column/Column.vue index 38de5d24f..d09655ac3 100644 --- a/src/components/column/Column.vue +++ b/src/components/column/Column.vue @@ -77,8 +77,8 @@ export default { rowReorder: { type: Boolean, default: false - } - ,rowReorderIcon: { + }, + rowReorderIcon: { type: String, default: 'pi pi-bars' }, diff --git a/src/components/columngroup/ColumnGroup.d.ts b/src/components/columngroup/ColumnGroup.d.ts new file mode 100644 index 000000000..628f9d8e0 --- /dev/null +++ b/src/components/columngroup/ColumnGroup.d.ts @@ -0,0 +1,5 @@ +import Vue from 'vue'; + +export declare class ColumnGroup extends Vue { + type?: string; +} \ No newline at end of file diff --git a/src/components/datatable/DataTable.d.ts b/src/components/datatable/DataTable.d.ts index 5924f4246..59925dcf4 100644 --- a/src/components/datatable/DataTable.d.ts +++ b/src/components/datatable/DataTable.d.ts @@ -34,12 +34,15 @@ export declare class DataTable extends Vue { autoLayout?: boolean; resizableColumns?: boolean; columnResizeMode?: string; + reorderableColumns?: boolean; $emit(eventName: 'page', event: Event): this; $emit(eventName: 'sort', event: Event): this; $emit(eventName: 'filter', event: Event): this; $emit(eventName: 'row-select', event: Event): this; $emit(eventName: 'row-unselect', event: Event): this; $emit(eventName: 'column-resize-end', event: Event): this; + $emit(eventName: 'column-reorder', event: Event): this; + $emit(eventName: 'row-reorder', event: Event): this; $slots: { header: VNode[]; paginatorLeft: VNode[]; diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue index 68e1c5e60..11f232e54 100644 --- a/src/components/datatable/DataTable.vue +++ b/src/components/datatable/DataTable.vue @@ -1058,10 +1058,10 @@ export default { if (allowDrop) { ObjectUtils.reorderArray(this.columnOrder, dragIndex, dropIndex); - this.$emit('col-reorder', { + this.$emit('column-reorder', { + originalEvent: event, dragIndex: dragIndex, - dropIndex: dropIndex, - columns: this.columns + dropIndex: dropIndex }); } @@ -1163,6 +1163,7 @@ export default { ObjectUtils.reorderArray(processedData, this.draggedRowIndex, dropIndex); this.$emit('row-reorder', { + originalEvent: event, dragIndex: this.draggedRowIndex, dropIndex: dropIndex, value: processedData diff --git a/src/views/datatable/DataTableDoc.vue b/src/views/datatable/DataTableDoc.vue index 8fee3e421..fa723fb00 100644 --- a/src/views/datatable/DataTableDoc.vue +++ b/src/views/datatable/DataTableDoc.vue @@ -6,6 +6,7 @@ import DataTable from 'primevue/datatable'; import Column from 'primevue/column'; +import ColumnGroup from 'primevue/columngroup'; //optional for column grouping

Getting Started

@@ -219,6 +220,36 @@ export default { null Defines column based selection mode, options are "single" and "multiple". + + colspan + number + null + Number of columns to span for grouping. + + + rowspan + number + null + Number of rows to span for grouping. + + + rowReorder + boolean + false + Whether this column displays an icon to reorder the rows. + + + rowReorderIcon + string + pi pi-bars + Icon of the drag handle to reorder rows. + + + reorderableColumn + string + null + Defines if the column itself can be reordered with dragging. + @@ -261,6 +292,43 @@ export default { </template> </DataTable> + + +

Column Grouping

+

Columns can be grouped at header and footer sections by defining a ColumnGroup with nested rows and columns.

+ +

Pagination

@@ -559,6 +627,60 @@ data() { <Column field="color" header="Color" headerStyle="width: 20%"></Column> </DataTable> + + +

Column Reorder

+

Columns can be reordered using drag drop by setting the reorderableColumns to true. column-reorder is a callback that is invoked when a column is reordered. + DataTable keeps the column order state internally using keys that identifies a column using the field property. If the column has no field, use columnKey instead.

+ + + + +

Row Reorder

+

Data can be reordered using drag drop by adding a reorder column that will display an icon as a drag handle. + "row-reorder" is a mandatory callback that is invoked when a column is reordered, use this event to update the new order. Note that the reorder icon can be customized using rowReorderIcon of the column component.

+ + + + + +import CarService from '../../service/CarService'; + +export default { + data() { + return { + cars: null + } + }, + carService: null, + created() { + this.carService = new CarService(); + }, + mounted() { + this.carService.getCarsSmall().then(data => this.cars = data); + }, + methods: { + onRowReorder(event) { + //update new order + this.cars = event.value; + } + } +}

Data Export

@@ -957,6 +1079,12 @@ export default { fit Defines whether the overall table width should change on column resize,
valid values are "fit" and "expand". + + reorderableColumns + boolean + false + When enabled, columns can be reordered using drag and drop.. + @@ -1015,6 +1143,27 @@ export default { event.delta: Change in column width Callback to invoke when a column is resized. + + column-resize-end + event.element: DOM element of the resized column.
+ event.delta: Change in column width + Callback to invoke when a column is resized. + + + column-reorder + event.originalEvent: Browser event
+ event.dragIndex: Index of the dragged column
+ event.dropIndex: Index of the dropped column + Callback to invoke when a column is reordered. + + + row-reorder + event.originalEvent: Browser event
+ event.originalEvent: Browser event.
+ event.dragIndex: Index of the dragged row
+ value: Reordered value + Callback to invoke when a row is reordered. + diff --git a/src/views/datatable/DataTableReorderDemo.vue b/src/views/datatable/DataTableReorderDemo.vue index 23e0b0feb..76ce93823 100644 --- a/src/views/datatable/DataTableReorderDemo.vue +++ b/src/views/datatable/DataTableReorderDemo.vue @@ -10,7 +10,7 @@
- + @@ -21,7 +21,7 @@