From 3e9d598dbaba2cbb5d80cfca08a2a9d40df97ec4 Mon Sep 17 00:00:00 2001 From: cagataycivici Date: Thu, 17 Oct 2019 14:50:20 +0300 Subject: [PATCH 01/13] Implemented Column Reorder --- src/components/datatable/DataTable.vue | 157 ++++++++++++++++++- src/router.js | 5 + src/views/datatable/DataTableDemo.vue | 6 +- src/views/datatable/DataTableReorderDemo.vue | 72 +++++++++ src/views/datatable/DataTableSubMenu.vue | 3 +- 5 files changed, 233 insertions(+), 10 deletions(-) create mode 100644 src/views/datatable/DataTableReorderDemo.vue diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue index a2ce3eecb..a15be9f6a 100644 --- a/src/components/datatable/DataTable.vue +++ b/src/components/datatable/DataTable.vue @@ -23,7 +23,9 @@ - + + +

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 { + + + + + +
@@ -99,6 +101,8 @@ +
fit Defines whether the overall table width should change on column resize,
valid values are "fit" and "expand".
reorderableColumnsbooleanfalseWhen 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 @@