Merge branch 'master' of https://github.com/primefaces/primevue

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');
+            

package.json

@@ -1,6 +1,6 @@
 {
   "name": "primevue",
-  "version": "1.0.0-beta.11-SNAPSHOT",
+  "version": "1.0.0-beta.12-SNAPSHOT",
   "repository": {
     "type": "git",
     "url": "https://github.com/primefaces/primevue.git"
@@ -35,7 +35,7 @@
     "gulp-rename": "^1.2.2",
     "gulp-uglify": "^1.5.3",
     "gulp-uglifycss": "^1.0.6",
-    "primeflex": "1.0.0-rc.1",
+    "primeflex": "1.0.0",
     "primeicons": "2.0.0",
     "prismjs": "^1.15.0",
     "quill": "1.3.3",

src/AppFooter.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="content-section layout-footer clearfix">
-        <span>PrimeVUE 1.0.0-beta.11</span>
+        <span>PrimeVUE 1.0.0-beta.12</span>
         <div class="footer-links">
             <a href="https://github.com/primefaces/primevue"><i class=" icon-github fa fa-github-square"></i></a>
             <a href="https://twitter.com/primevue"><i class="icon-twitter fa fa-twitter-square"></i></a>

src/components/accordion/Accordion.vue

@@ -44,11 +44,11 @@ export default {
     },
     data() {
         return {
-            tabs: []
+            d_children: []
         };
     },
     mounted() {
-        this.tabs = this.$children.filter(child => child.$options._componentTag.indexOf('AccordionTab')===0);
+        this.d_children = this.$children;
     },
     methods: {
         onTabClick(event, tab) {
@@ -76,6 +76,11 @@ export default {
             return this.props.multiple ? (this.d_activeTabIndex && this.d_activeTabIndex.indexOf(index) >= 0) : this.d_activeTabIndex === index;
         }
     },
+    computed: {
+        tabs() {
+            return this.d_children.filter(child => child.$vnode.tag.indexOf('accordiontab') !== -1);
+        }
+    },
     components: {
         'AccordionTabSlot': AccordionTabSlot
     }

src/components/accordiontab/AccordionTab.vue

@@ -1,5 +1,6 @@
 <script>
 export default {
+    name: 'accordiontab',
     props: {
         header: null,
         active: Boolean,

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

@@ -73,6 +73,18 @@ export default {
         rowspan: {
             type: Number,
             default: null
+        },
+        rowReorder: {
+            type: Boolean,
+            default: false
+        },
+        rowReorderIcon: {
+            type: String,
+            default: 'pi pi-bars'
+        },
+        reorderableColumn: {
+            type: Boolean,
+            default: true
         }
     },
     render() {

src/components/columngroup/ColumnGroup.d.ts

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

src/components/columngroup/ColumnGroup.vue

@@ -15,15 +15,15 @@ export default {
     },
     data() {
         return {
-            _rows: null
+            children: null
         };
     },
     mounted() {
-        this._rows = this.$children;
+        this.children = this.$children;
     },
     computed: {
         rows() {
-            return this._rows;
+            return this.children;
         }
     }
 }

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

@@ -23,7 +23,9 @@
             <table ref="table">
                 <thead class="p-datatable-thead">
                     <tr v-if="!headerColumnGroup">
-                        <th v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" :class="getColumnHeaderClass(col)" @click="onColumnHeaderClick($event, col)"
+                        <th v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" :class="getColumnHeaderClass(col)"
+                            @click="onColumnHeaderClick($event, col)" @mousedown="onColumnHeaderMouseDown($event, col)"
+                            @dragstart="onColumnHeaderDragStart($event)" @dragover="onColumnHeaderDragOver($event)" @dragleave="onColumnHeaderDragLeave($event)" @drop="onColumnHeaderDrop($event)"
                             :colspan="col.colspan" :rowspan="col.rowspan">
                             <span class="p-column-resizer p-clickable" @mousedown="onColumnResizeStart" v-if="resizableColumns"></span>
                             <ColumnSlot :column="col" type="header" v-if="col.$scopedSlots.header" />
@@ -35,7 +37,8 @@
                     </tr>
                     <template v-else>
                         <tr v-for="(row,i) of headerColumnGroup.rows" :key="i">
-                            <th v-for="(col,i) of row.columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" :class="getColumnHeaderClass(col)" @click="onColumnHeaderClick($event, col)"
+                            <th v-for="(col,i) of row.columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" :class="getColumnHeaderClass(col)"
+                            @dragstart="onColumnHeaderDragStart($event)" @dragover="onColumnHeaderDragOver($event)" @dragleave="onColumnHeaderDragLeave($event)" @drop="onColumnHeaderDrop($event)"
                                 :colspan="col.colspan" :rowspan="col.rowspan">
                                 <ColumnSlot :column="col" type="header" v-if="col.$scopedSlots.header" />
                                 <span class="p-column-title" v-if="col.header">{{col.header}}</span>
@@ -49,13 +52,17 @@
                 <tbody class="p-datatable-tbody">
                     <template v-if="!empty">
                         <tr :class="getRowClass(rowData)" v-for="(rowData, index) of dataToRender" :key="getRowKey(rowData, index)"
-                            @click="onRowClick($event, rowData, index)" @touchend="onRowTouchEnd($event)" @keydown="onRowKeyDown($event, rowData, index)" :tabindex="selectionMode ? '0' : null">
+                            @click="onRowClick($event, rowData, index)" @touchend="onRowTouchEnd($event)" @keydown="onRowKeyDown($event, rowData, index)" :tabindex="selectionMode ? '0' : null"
+                            @mousedown="onRowMouseDown($event)" @dragstart="onRowDragStart($event, index)" @dragover="onRowDragOver($event,index)" @dragleave="onRowDragLeave($event)" @dragend="onRowDragEnd($event)" @drop="onRowDrop($event)">
                             <td v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.bodyStyle" :class="col.bodyClass">
                                 <ColumnSlot :data="rowData" :column="col" type="body" v-if="col.$scopedSlots.body" />
                                 <template v-else-if="col.selectionMode">
                                     <DTRadioButton :value="rowData" :checked="isSelected(rowData)" @change="toggleRowWithRadio" v-if="col.selectionMode === 'single'" />
                                     <DTCheckbox :value="rowData" :checked="isSelected(rowData)" @change="toggleRowWithCheckbox" v-else-if="col.selectionMode ==='multiple'" />
                                 </template>
+                                <template v-else-if="col.rowReorder">
+                                    <i :class="['p-datatable-reorderablerow-handle', col.rowReorderIcon]"></i>
+                                </template>
                                 <template v-else>{{resolveFieldData(rowData, col.field)}}</template>
                             </td>
                         </tr>
@@ -99,6 +106,8 @@
             </div>
         </div>
         <div ref="resizeHelper" class="p-column-resizer-helper p-highlight" style="display: none"></div>
+        <span ref="reorderIndicatorUp" class="pi pi-arrow-down p-datatable-reorder-indicator-up" style="position: absolute; display: none" v-if="reorderableColumns" />
+        <span ref="reorderIndicatorDown" class="pi pi-arrow-up p-datatable-reorder-indicator-down" style="position: absolute; display: none" v-if="reorderableColumns" />
     </div>
 </template>
 
@@ -261,6 +270,10 @@ export default {
         columnResizeMode: {
             type: String,
             default: 'fit'
+        },
+        reorderableColumns: {
+            type: Boolean,
+            default: false
         }
     },
     data() {
@@ -271,7 +284,8 @@ export default {
             d_sortField: this.sortField,
             d_sortOrder: this.sortOrder,
             d_multiSortMeta: this.multiSortMeta ? [...this.multiSortMeta] : [],
-            d_selectionKeys: null
+            d_selectionKeys: null,
+            columnOrder: null
         };
     },
     rowTouched: false,
@@ -281,6 +295,13 @@ export default {
     documentColumnResizeEndListener: null,
     lastResizeHelperX: null,
     resizeColumnElement: null,
+    columnResizing: false,
+    colReorderIconWidth: null,
+    colReorderIconHeight: null,
+    draggedColumn: null,
+    draggedRowIndex: null,
+    droppedRowIndex: null,
+    rowDragging: null,
     watch: {
         first(newValue) {
             this.d_first = newValue;
@@ -305,6 +326,16 @@ export default {
     },
     mounted() {
         this.allChildren = this.$children;
+
+        if (this.reorderableColumns) {
+            let columnOrder = [];
+            for (let child of this.allChildren) {
+                if (child.$options._propKeys.indexOf('columnKey') !== -1) {
+                    columnOrder.push(child.columnKey||child.field);
+                }
+            }
+            this.columnOrder = columnOrder;
+        }
     },
     beforeDestroy() {
         this.unbindColumnResizeEvents();
@@ -956,6 +987,191 @@ export default {
                 document.removeEventListener('document', this.documentColumnResizeEndListener);
                  this.documentColumnResizeEndListener = null;
             }
+        },
+        onColumnHeaderMouseDown(event, col) {
+            if (this.reorderableColumns && col.reorderableColumn) {
+                if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA' || DomHandler.hasClass(event.target, 'p-column-resizer'))
+                    event.currentTarget.draggable = false;
+                else
+                    event.currentTarget.draggable = true;
+            }
+        },
+        onColumnHeaderDragStart(event) {
+            if(this.columnResizing) {
+                event.preventDefault();
+                return;
+            }
+
+            this.colReorderIconWidth = DomHandler.getHiddenElementOuterWidth(this.$refs.reorderIndicatorUp);
+            this.colReorderIconHeight = DomHandler.getHiddenElementOuterHeight(this.$refs.reorderIndicatorUp);
+
+            this.draggedColumn = this.findParentHeader(event.target);
+            event.dataTransfer.setData('text', 'b'); // Firefox requires this to make dragging possible
+        },
+        onColumnHeaderDragOver(event) {
+            let dropHeader = this.findParentHeader(event.target);
+            if(this.reorderableColumns && this.draggedColumn && dropHeader) {
+                event.preventDefault();
+                let containerOffset = DomHandler.getOffset(this.$el);
+                let dropHeaderOffset = DomHandler.getOffset(dropHeader);
+
+                if (this.draggedColumn !== dropHeader) {
+                    let targetLeft =  dropHeaderOffset.left - containerOffset.left;
+                    let columnCenter = dropHeaderOffset.left + dropHeader.offsetWidth / 2;
+
+                    this.$refs.reorderIndicatorUp.style.top = dropHeaderOffset.top - containerOffset.top - (this.colReorderIconHeight - 1) + 'px';
+                    this.$refs.reorderIndicatorDown.style.top = dropHeaderOffset.top - containerOffset.top + dropHeader.offsetHeight + 'px';
+
+                    if(event.pageX > columnCenter) {
+                        this.$refs.reorderIndicatorUp.style.left = (targetLeft + dropHeader.offsetWidth - Math.ceil(this.colReorderIconWidth / 2)) + 'px';
+                        this.$refs.reorderIndicatorDown.style.left = (targetLeft + dropHeader.offsetWidth - Math.ceil(this.colReorderIconWidth / 2))+ 'px';
+                        this.dropPosition = 1;
+                    }
+                    else {
+                        this.$refs.reorderIndicatorUp.style.left = (targetLeft - Math.ceil(this.colReorderIconWidth / 2)) + 'px';
+                        this.$refs.reorderIndicatorDown.style.left = (targetLeft - Math.ceil(this.colReorderIconWidth / 2))+ 'px';
+                        this.dropPosition = -1;
+                    }
+
+                    this.$refs.reorderIndicatorUp.style.display = 'block';
+                    this.$refs.reorderIndicatorDown.style.display = 'block';
+                }
+            }
+        },
+        onColumnHeaderDragLeave(event) {
+            if(this.reorderableColumns && this.draggedColumn) {
+                event.preventDefault();
+                this.$refs.reorderIndicatorUp.style.display = 'none';
+                this.$refs.reorderIndicatorDown.style.display = 'none';
+            }
+        },
+        onColumnHeaderDrop(event) {
+            event.preventDefault();
+            if (this.draggedColumn) {
+                let dragIndex = DomHandler.index(this.draggedColumn);
+                let dropIndex = DomHandler.index(this.findParentHeader(event.target));
+                let allowDrop = (dragIndex !== dropIndex);
+                if (allowDrop && ((dropIndex - dragIndex === 1 && this.dropPosition === -1) || (dragIndex - dropIndex === 1 && this.dropPosition === 1))) {
+                    allowDrop = false;
+                }
+
+                if (allowDrop) {
+                    ObjectUtils.reorderArray(this.columnOrder, dragIndex, dropIndex);
+
+                    this.$emit('column-reorder', {
+                        originalEvent: event,
+                        dragIndex: dragIndex,
+                        dropIndex: dropIndex
+                    });
+                }
+
+                this.$refs.reorderIndicatorUp.style.display = 'none';
+                this.$refs.reorderIndicatorDown.style.display = 'none';
+                this.draggedColumn.draggable = false;
+                this.draggedColumn = null;
+                this.dropPosition = null;
+            }
+        },
+        findParentHeader(element) {
+            if(element.nodeName === 'TH') {
+                return element;
+            }
+            else {
+                let parent = element.parentElement;
+                while(parent.nodeName !== 'TH') {
+                    parent = parent.parentElement;
+                    if (!parent) break;
+                }
+                return parent;
+            }
+        },
+        findColumnByKey(columns, key) {
+            if(columns && columns.length) {
+                for(let i = 0; i < columns.length; i++) {
+                    let child = columns[i];
+                    if(child.columnKey === key || child.field === key) {
+                        return child;
+                    }
+                }
+            }
+
+            return null;
+        },
+        onRowMouseDown(event) {
+            if (DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle'))
+                event.currentTarget.draggable = true;
+            else
+                event.currentTarget.draggable = false;
+        },
+        onRowDragStart(event, index) {
+            this.rowDragging = true;
+            this.draggedRowIndex = index;
+            event.dataTransfer.setData('text', 'b');    // For firefox
+        },
+        onRowDragOver(event, index) {
+            if (this.rowDragging && this.draggedRowIndex !== index) {
+                let rowElement = event.currentTarget;
+                let rowY = DomHandler.getOffset(rowElement).top + DomHandler.getWindowScrollTop();
+                let pageY = event.pageY;
+                let rowMidY = rowY + DomHandler.getOuterHeight(rowElement) / 2;
+                let prevRowElement = rowElement.previousElementSibling;
+
+                if (pageY < rowMidY) {
+                    DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
+
+                    this.droppedRowIndex = index;
+                    if (prevRowElement)
+                        DomHandler.addClass(prevRowElement, 'p-datatable-dragpoint-bottom');
+                    else
+                        DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
+                }
+                else {
+                    if (prevRowElement)
+                        DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
+                    else
+                        DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
+
+                    this.droppedRowIndex = index + 1;
+                    DomHandler.addClass(rowElement, 'p-datatable-dragpoint-bottom');
+                }
+
+                event.preventDefault();
+            }
+        },
+        onRowDragLeave(event) {
+            let rowElement = event.currentTarget;
+            let prevRowElement = rowElement.previousElementSibling;
+            if (prevRowElement) {
+                DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
+            }
+
+            DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
+            DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-top');
+        },
+        onRowDragEnd(event) {
+            this.rowDragging = false;
+            this.draggedRowIndex = null;
+            this.droppedRowIndex = null;
+            event.currentTarget.draggable = false;
+        },
+        onRowDrop(event) {
+            if (this.droppedRowIndex != null) {
+                let dropIndex = (this.draggedRowIndex > this.droppedRowIndex) ? this.droppedRowIndex : (this.droppedRowIndex === 0) ? 0 : this.droppedRowIndex - 1;
+                let processedData = [...this.processedData];
+                ObjectUtils.reorderArray(processedData, this.draggedRowIndex, dropIndex);
+
+                this.$emit('row-reorder', {
+                    originalEvent: event,
+                    dragIndex: this.draggedRowIndex,
+                    dropIndex: dropIndex,
+                    value: processedData
+                });
+            }
+
+            //cleanup
+            this.onRowDragLeave(event);
+            this.onRowDragEnd(event);
+            event.preventDefault();
         }
     },
     computed: {
@@ -970,10 +1186,26 @@ export default {
             ];
         },
         columns() {
+            let columns = [];
+
             if (this.allChildren) {
-                return this.allChildren.filter(child => child.$options._propKeys.indexOf('columnKey') !== -1);
+                columns = this.allChildren.filter(child => child.$options._propKeys.indexOf('columnKey') !== -1);
+
+                if (this.reorderableColumns && this.columnOrder) {
+                    let orderedColumns = [];
+                    for (let columnKey of this.columnOrder) {
+                        let column = this.findColumnByKey(columns, columnKey);
+                        if (column) {
+                            orderedColumns.push(column);
                         }
-            return [];
+                    }
+
+                    return [...orderedColumns, ...columns.filter((item) => {
+                        return orderedColumns.indexOf(item) < 0;
+                    })];
+                }
+            }
+            return columns;
         },
         headerColumnGroup() {
             if (this.allChildren) {

src/components/tabpanel/TabPanel.vue

@@ -6,6 +6,7 @@
 
 <script>
 export default {
+    name: 'tabpanel',
     props: {
         header: null,
         active: Boolean,

src/components/tabview/TabView.vue

@@ -31,16 +31,11 @@ const TabPanelHeaderSlot = {
 export default {
     data() {
         return {
-            tabs: []
+            d_children: []
         };
     },
     mounted() {
-        this.tabs = this.$children;
+        this.d_children = this.$children;
-
-        let activeTab = this.findActiveTab();
-        if (!activeTab && this.tabs.length) {
-            this.tabs[0].d_active = true;
-        }
     },
     methods: {
         onTabClick(event, tab) {
@@ -78,6 +73,17 @@ export default {
             return activeTab;
         }
     },
+    updated() {
+        let activeTab = this.findActiveTab();
+        if (!activeTab && this.tabs.length) {
+            this.tabs[0].d_active = true;
+        }
+    },
+    computed: {
+        tabs() {
+            return this.d_children.filter(child => child.$vnode.tag.indexOf('tabpanel') !== -1);
+        }
+    },
     components: {
         'TabPanelHeaderSlot': TabPanelHeaderSlot
     }

src/router.js

@@ -146,6 +146,11 @@ export default new Router({
 			name: 'datatablecoltoggle',
 			component: () => import('./views/datatable/DataTableColToggleDemo.vue')
         },
+        {
+			path: '/datatable/reorder',
+			name: 'datatablereorder',
+			component: () => import('./views/datatable/DataTableReorderDemo.vue')
+        },
         {
 			path: '/datatable/responsive',
 			name: 'datatableresponsive',

src/views/datatable/DataTableDemo.vue

@@ -60,7 +60,3 @@ export default {
     }
 }
 </script>
-
-<style lang="scss">
-
-</style>

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>boolean</td>
+                                <td>true</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,58 @@ 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 along with the <i>row-order</i> event which is <b>mandatory</b> 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 +1077,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 +1141,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

@@ -0,0 +1,110 @@
+<template>
+	<div>
+        <DataTableSubMenu />
+
+		<div class="content-section introduction">
+			<div class="feature-intro">
+				<h1>DataTable - Reorder</h1>
+				<p>Order of the columns and rows can be changed using drag and drop.</p>
+			</div>
+		</div>
+
+		<div class="content-section implementation">
+			<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>
+		</div>
+
+        <div class="content-section documentation">
+            <TabView>
+                <TabPanel header="Source">
+<CodeHighlight>
+<template v-pre>
+&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;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+import CarService from '../../service/CarService';
+
+export default {
+    data() {
+        return {
+            columns: null,
+            cars: null
+        }
+    },
+    carService: null,
+    created() {
+        this.carService = new CarService();
+
+        this.columns = [
+            {field: 'vin', header: 'Vin'},
+            {field: 'year', header: 'Year'},
+            {field: 'brand', header: 'Brand'},
+            {field: 'color', header: 'Color'}
+        ];
+    },
+    mounted() {
+        this.carService.getCarsSmall().then(data => this.cars = data);
+    },
+    methods: {
+        onColReorder(event) {
+            this.$toast.add({severity:'success', summary: 'Column Reordered', life: 3000});
+        },
+        onRowReorder(event) {
+            this.cars = event.value;
+            this.$toast.add({severity:'success', summary: 'Rows Reordered', life: 3000});
+        }
+    }
+}
+</CodeHighlight>
+                </TabPanel>
+            </TabView>
+        </div>
+	</div>
+</template>
+
+<script>
+import CarService from '../../service/CarService';
+import DataTableSubMenu from './DataTableSubMenu';
+
+export default {
+    data() {
+        return {
+            columns: null,
+            cars: null
+        }
+    },
+    carService: null,
+    created() {
+        this.carService = new CarService();
+
+        this.columns = [
+            {field: 'vin', header: 'Vin'},
+            {field: 'year', header: 'Year'},
+            {field: 'brand', header: 'Brand'},
+            {field: 'color', header: 'Color'}
+        ];
+    },
+    mounted() {
+        this.carService.getCarsSmall().then(data => this.cars = data);
+    },
+    methods: {
+        onColReorder() {
+            this.$toast.add({severity:'success', summary: 'Column Reordered', life: 3000});
+        },
+        onRowReorder(event) {
+            this.cars = event.value;
+            this.$toast.add({severity:'success', summary: 'Rows Reordered', life: 3000});
+        }
+    },
+    components: {
+        'DataTableSubMenu': DataTableSubMenu
+    }
+}
+</script>

src/views/datatable/DataTableSubMenu.vue

@@ -11,8 +11,9 @@
             <li><router-link to="/datatable/colgroup">&#9679; ColGroup</router-link></li>
             <li><router-link to="/datatable/coltoggle">&#9679; ColToggle</router-link></li>
             <li><router-link to="/datatable/responsive">&#9679; Responsive</router-link></li>
-            <li><router-link to="/datatable/export">&#9679; Export</router-link></li>
+            <li><router-link to="/datatable/reorder">&#9679; Reorder</router-link></li>
             <li><router-link to="/datatable/colresize">&#9679; ColResize</router-link></li>
+            <li><router-link to="/datatable/export">&#9679; Export</router-link></li>
             <li><router-link to="/datatable/crud">&#9679; Crud</router-link></li>
         </ul>
     </div>

src/views/dataview/DataViewDemo.vue

@@ -7,7 +7,7 @@
 			</div>
 		</div>
 
-		<div class="content-section implementation dataview-demo">
+		<div class="content-section implementation">
 			<DataView :value="cars" :layout="layout" paginatorPosition="both" :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField">
 				<template #header>
 					<div class="p-grid p-nogutter">
@@ -20,27 +20,20 @@
 					</div>
 				</template>
 				<template #list="slotProps" >
-					<div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9">
+					<div class="p-col-12">
-						<div class="p-grid">
+                        <div class="car-details">
-							<div class="p-col-12 p-md-3">
+                            <div>
                                 <img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
-							</div>
-							<div class="p-col-12 p-md-8 car-details">
                                 <div class="p-grid">
                                     <div class="p-col-12">Vin: <b>{{slotProps.data.vin}}</b></div>
-
                                     <div class="p-col-12">Year: <b>{{slotProps.data.year}}</b></div>
-
                                     <div class="p-col-12">Brand: <b>{{slotProps.data.brand}}</b></div>
-
                                     <div class="p-col-12">Color: <b>{{slotProps.data.color}}</b></div>
                                 </div>
                             </div>
-							<div class="p-col-12 p-md-1 search-icon" style="margin-top: 40px">
                             <Button icon="pi pi-search"></Button>
                         </div>
                     </div>
-					</div>
 				</template>
 				<template #grid="slotProps">
 					<div style="padding: .5em" class="p-col-12 p-md-3">
@@ -108,36 +101,37 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
-.dataview-demo {
+.p-dropdown {
-	.ui-button {
-		margin-top: 3em;
-	}
-
-	.filter-container {
-		text-align: center;
-	}
-
-	.car-data > div {
-		padding: .429em;
-    }
-
-    .p-dropdown {
     width: 12em;
-    }
 }
 
-@media (max-width: 767px) {
+.p-dataview {
-	.dataview-demo {
+    .car-details {
-		.car-details, .search-icon {
+        display: flex;
-			text-align: center;
+        justify-content: space-between;
-			margin-top: 0;
+        align-items: center;
-		}
+        padding: 2em;
+        border-bottom: 1px solid #d9dad9;
 
-		.filter-container {
+        & > div {
-			text-align: left;
+            display: flex;
+            align-items: center;
+
+            img {
+                margin-right: 14px;
+            }
         }
     }
 }
+@media (max-width: 1024px) {
+	.p-dataview {
+        .car-details {
 
+            img {
+                width: 75px;
+            }
+        }
+    }
+}
 </style>

src/views/dataview/DataViewDoc.vue

@@ -37,24 +37,21 @@ export default {
 				<p>Note that there is no restriction to use both layouts at the same time, you may configure only one layout using the layout property with the corresponding template.</p>
 <CodeHighlight>
 <template v-pre>
-&lt;template #list="slotProps" &gt;
+&lt;template #list="slotProps"&gt;
-	&lt;div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9"&gt;
+	&lt;div class="p-col-12"&gt;
-		&lt;div class="p-grid"&gt;
+        &lt;div class="car-details"&gt;
-			&lt;div class="p-col-12 p-md-3"&gt;
+            &lt;div&gt;
                 &lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
+                &lt;div class="p-grid"&gt;
+                    &lt;div class="p-col-12"&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
+                    &lt;div class="p-col-12"&gt;Year: &lt;b&gt;&#123;&#123;slotProps.data.year&#125;&#125;&lt;/b&gt;&lt;/div&gt;
+                    &lt;div class="p-col-12"&gt;Brand: &lt;b&gt;&#123;&#123;slotProps.data.brand&#125;&#125;&lt;/b&gt;&lt;/div&gt;
+                    &lt;div class="p-col-12"&gt;Color: &lt;b&gt;&#123;&#123;slotProps.data.color&#125;&#125;&lt;/b&gt;&lt;/div&gt;
                 &lt;/div&gt;
-			&lt;div class="p-col-12 p-md-8 car-data"&gt;
-				&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
-				&lt;div&gt;Year: &lt;b&gt;{{slotProps.data.year}}&lt;/b&gt;&lt;/div&gt;
-				&lt;div&gt;Brand: &lt;b&gt;{{slotProps.data.brand}}&lt;/b&gt;&lt;/div&gt;
-				&lt;div&gt;Color: &lt;b&gt;{{slotProps.data.color}}&lt;/b&gt;&lt;/div&gt;
             &lt;/div&gt;
-
-			&lt;div class="p-col-12 p-md-1 search-icon" style="margin-top: 40px"&gt;
             &lt;Button icon="pi pi-search"&gt;&lt;/Button&gt;
         &lt;/div&gt;
     &lt;/div&gt;
-	&lt;/div&gt;
 &lt;/template&gt;
 &lt;template #grid="slotProps"&gt;
 	&lt;div style="padding: .5em" class="p-col-12 p-md-3"&gt;
@@ -426,28 +423,21 @@ export default {
             &lt;/div&gt;
         &lt;/div&gt;
     &lt;/template&gt;
-    &lt;template #list="slotProps" &gt;
+    &lt;template #list="slotProps"&gt;
-        &lt;div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9"&gt;
+        &lt;div class="p-col-12"&gt;
-            &lt;div class="p-grid"&gt;
+            &lt;div class="car-details"&gt;
-                &lt;div class="p-col-12 p-md-3"&gt;
+                &lt;div&gt;
                     &lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
-                &lt;/div&gt;
-                &lt;div class="p-col-12 p-md-8 car-details"&gt;
                     &lt;div class="p-grid"&gt;
-                        &lt;div class="p-col-12"&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
+                        &lt;div class="p-col-12"&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
-
+                        &lt;div class="p-col-12"&gt;Year: &lt;b&gt;&#123;&#123;slotProps.data.year&#125;&#125;&lt;/b&gt;&lt;/div&gt;
-                        &lt;div class="p-col-12"&gt;Year: &lt;b&gt;{{slotProps.data.year}}&lt;/b&gt;&lt;/div&gt;
+                        &lt;div class="p-col-12"&gt;Brand: &lt;b&gt;&#123;&#123;slotProps.data.brand&#125;&#125;&lt;/b&gt;&lt;/div&gt;
-
+                        &lt;div class="p-col-12"&gt;Color: &lt;b&gt;&#123;&#123;slotProps.data.color&#125;&#125;&lt;/b&gt;&lt;/div&gt;
-                        &lt;div class="p-col-12"&gt;Brand: &lt;b&gt;{{slotProps.data.brand}}&lt;/b&gt;&lt;/div&gt;
-
-                        &lt;div class="p-col-12"&gt;Color: &lt;b&gt;{{slotProps.data.color}}&lt;/b&gt;&lt;/div&gt;
                     &lt;/div&gt;
                 &lt;/div&gt;
-                &lt;div class="p-col-12 p-md-1 search-icon" style="margin-top: 40px"&gt;
                 &lt;Button icon="pi pi-search"&gt;&lt;/Button&gt;
             &lt;/div&gt;
         &lt;/div&gt;
-        &lt;/div&gt;
     &lt;/template&gt;
     &lt;template #grid="slotProps"&gt;
         &lt;div style="padding: .5em" class="p-col-12 p-md-3"&gt;
@@ -512,6 +502,36 @@ export default {
 .p-dropdown {
     width: 12em;
 }
+
+.p-dataview {
+    .car-details {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 2em;
+        border-bottom: 1px solid #d9dad9;
+
+        &amp; > div {
+            display: flex;
+            align-items: center;
+
+            img {
+                margin-right: 14px;
+            }
+        }
+    }
+}
+
+@media (max-width: 1024px) {
+	.p-dataview {
+        .car-details {
+
+            img {
+                width: 75px;
+            }
+        }
+    }
+}
 </CodeHighlight>
 			</TabPanel>
 		</TabView>