Docs for new DataTable features and TypeScript support

exports/columngroup.d.ts

@@ -0,0 +1 @@
+export * from './components/columngroup/ColumnGroup';

exports/columngroup.js

@@ -0,0 +1,3 @@
+'use strict';
+module.exports = require('./components/columngroup/ColumnGroup.vue');
+            

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;
 }

src/components/column/Column.vue

@@ -77,8 +77,8 @@ export default {
         rowReorder: {
             type: Boolean,
             default: false
-        }
+        },
-        ,rowReorderIcon: {
+        rowReorderIcon: {
             type: String,
             default: 'pi pi-bars'
         },

src/components/columngroup/ColumnGroup.d.ts

@@ -0,0 +1,5 @@
+import Vue from 'vue';
+
+export declare class ColumnGroup extends Vue {
+    type?: string;
+}

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[];

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,
+                        dropIndex: dropIndex
-                        columns: this.columns
                     });
                 }
                 
@@ -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

src/views/datatable/DataTableDoc.vue

@@ -6,6 +6,7 @@
 				<CodeHighlight lang="javascript">
 import DataTable from 'primevue/datatable';
 import Column from 'primevue/column';
+import ColumnGroup from 'primevue/columngroup';     //optional for column grouping
 				</CodeHighlight>
 
                 <h3>Getting Started</h3>
@@ -219,6 +220,36 @@ export default {
                                 <td>null</td>
                                 <td>Defines column based selection mode, options are "single" and "multiple".</td>
                             </tr>
+                            <tr>
+                                <td>colspan</td>
+                                <td>number</td>
+                                <td>null</td>
+                                <td>Number of columns to span for grouping.</td>
+                            </tr>
+                            <tr>
+                                <td>rowspan</td>
+                                <td>number</td>
+                                <td>null</td>
+                                <td>Number of rows to span for grouping.</td>
+                            </tr>
+                            <tr>
+                                <td>rowReorder</td>
+                                <td>boolean</td>
+                                <td>false</td>
+                                <td>Whether this column displays an icon to reorder the rows.</td>
+                            </tr>
+                            <tr>
+                                <td>rowReorderIcon</td>
+                                <td>string</td>
+                                <td>pi pi-bars</td>
+                                <td>Icon of the drag handle to reorder rows.</td>
+                            </tr>
+                            <tr>
+                                <td>reorderableColumn</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Defines if the column itself can be reordered with dragging.</td>
+                            </tr>
                         </tbody>
                     </table>
                 </div>
@@ -261,6 +292,43 @@ export default {
     &lt;/template&gt;
 &lt;/DataTable&gt;
 </template>
+</CodeHighlight>
+
+                <h3>Column Grouping</h3>
+                <p>Columns can be grouped at header and footer sections by defining a ColumnGroup with nested rows and columns.</p>
+<CodeHighlight>
+<template v-pre>
+&lt;DataTable :value="sales"&gt;
+    &lt;ColumnGroup type="header"&gt;
+        &lt;Row&gt;
+            &lt;Column header="Brand" :rowspan="3" /&gt;
+            &lt;Column header="Sale Rate" :colspan="4" /&gt;
+        &lt;/Row&gt;
+        &lt;Row&gt;
+            &lt;Column header="Sales" :colspan="2" /&gt;
+            &lt;Column header="Profits" :colspan="2" /&gt;
+        &lt;/Row&gt;
+        &lt;Row&gt;
+            &lt;Column header="Last Year" /&gt;
+            &lt;Column header="This Year" /&gt;
+            &lt;Column header="Last Year" /&gt;
+            &lt;Column header="This Year" /&gt;
+        &lt;/Row&gt;
+    &lt;/ColumnGroup&gt;
+    &lt;Column field="brand" /&gt;
+    &lt;Column field="lastYearSale" /&gt;
+    &lt;Column field="thisYearSale" /&gt;
+    &lt;Column field="lastYearProfit" /&gt;
+    &lt;Column field="thisYearProfit" /&gt;
+    &lt;ColumnGroup type="footer"&gt;
+        &lt;Row&gt;
+            &lt;Column footer="Totals:" :colspan="3" /&gt;
+            &lt;Column footer="$506,202" /&gt;
+            &lt;Column footer="$531,020" /&gt;
+        &lt;/Row&gt;
+    &lt;/ColumnGroup&gt;
+&lt;/DataTable&gt;
+</template>
 </CodeHighlight>
 
                 <h3>Pagination</h3>
@@ -559,6 +627,60 @@ data() {
     &lt;Column field="color" header="Color" headerStyle="width: 20%"&gt;&lt;/Column&gt;
 &lt;/DataTable&gt;
 </template>
+</CodeHighlight>
+
+                <h3>Column Reorder</h3>
+                <p>Columns can be reordered using drag drop by setting the <i>reorderableColumns</i> to true. <i>column-reorder</i> 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.</p>
+<CodeHighlight>
+<template v-pre>
+&lt;DataTable :value="cars" :reorderableColumns="true"&gt;
+    &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
+    &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
+    &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
+    &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
+&lt;/DataTable&gt;
+</template>
+</CodeHighlight>
+
+                <h3>Row Reorder</h3>
+                <p>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 <i>rowReorderIcon</i> of the column component.</p>
+<CodeHighlight>
+<template v-pre>
+&lt;DataTable :value="cars" @row-reorder="onRowReorder"&gt;
+    &lt;Column :rowReorder="true" headerStyle="width: 3em" /&gt;
+    &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
+    &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
+    &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
+    &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
+&lt;/DataTable&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+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;
+        }
+    }
+}
 </CodeHighlight>
 
                 <h3>Data Export</h3>
@@ -957,6 +1079,12 @@ export default {
                                 <td>fit</td>
                                 <td>Defines whether the overall table width should change on column resize, <br/> valid values are "fit" and "expand".</td>
                             </tr>
+                            <tr>
+                                <td>reorderableColumns</td>
+                                <td>boolean</td>
+                                <td>false</td>
+                                <td>When enabled, columns can be reordered using drag and drop..</td>
+                            </tr>
                         </tbody>
                     </table>
                 </div>
@@ -1015,6 +1143,27 @@ export default {
                                     event.delta: Change in column width</td>
                                 <td>Callback to invoke when a column is resized.</td>
                             </tr>
+                            <tr>
+                                <td>column-resize-end</td>
+                                <td>event.element: DOM element of the resized column.<br />
+                                    event.delta: Change in column width</td>
+                                <td>Callback to invoke when a column is resized.</td>
+                            </tr>
+                            <tr>
+                                <td>column-reorder</td>
+                                <td>event.originalEvent: Browser event<br />
+                                    event.dragIndex: Index of the dragged column<br />
+                                    event.dropIndex: Index of the dropped column</td>
+                                <td>Callback to invoke when a column is reordered.</td>
+                            </tr>
+                            <tr>
+                                <td>row-reorder</td>
+                                <td>event.originalEvent: Browser event<br />
+                                    event.originalEvent: Browser event.<br />
+                                    event.dragIndex: Index of the dragged row<br />
+                                    value: Reordered value</td>
+                                <td>Callback to invoke when a row is reordered.</td>
+                            </tr>
                         </tbody>
                     </table>
                 </div>

src/views/datatable/DataTableReorderDemo.vue

@@ -10,7 +10,7 @@
 		</div>
 
 		<div class="content-section implementation">
-			<DataTable :value="cars" :reorderableColumns="true" @col-reorder="onColReorder" @row-reorder="onRowReorder">
+			<DataTable :value="cars" :reorderableColumns="true" @column-reorder="onColReorder" @row-reorder="onRowReorder">
                 <Column :rowReorder="true" headerStyle="width: 3em" :reorderableColumn="false" />
                 <Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
             </DataTable>
@@ -21,7 +21,7 @@
                 <TabPanel header="Source">
 <CodeHighlight>
 <template v-pre>
-&lt;DataTable :value="cars" :reorderableColumns="true" @col-reorder="onColReorder" @row-reorder="onRowReorder"&gt;
+&lt;DataTable :value="cars" :reorderableColumns="true" @column-reorder="onColReorder" @row-reorder="onRowReorder"&gt;
     &lt;Column :rowReorder="true" headerStyle="width: 3em" :reorderableColumn="false" /&gt;
     &lt;Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"&gt;&lt;/Column&gt;
 &lt;/DataTable&gt;