primevue 3.16.2 → 3.18.0

package/datatable/DataTable.vue

@@ -1,19 +1,30 @@
 <template>
     <div :class="containerClass" data-scrollselectors=".p-datatable-wrapper">
         <slot></slot>
-        <div class="p-datatable-loading-overlay p-component-overlay" v-if="loading">
-			<slot v-if="$slots.loading" name="loading"></slot>
-			<i v-else :class="loadingIconClass"></i>
+        <div v-if="loading" class="p-datatable-loading-overlay p-component-overlay">
+            <slot v-if="$slots.loading" name="loading"></slot>
+            <i v-else :class="loadingIconClass"></i>
         </div>
-        <div class="p-datatable-header" v-if="$slots.header">
+        <div v-if="$slots.header" class="p-datatable-header">
             <slot name="header"></slot>
         </div>
-        <DTPaginator v-if="paginatorTop" :rows="d_rows" :first="d_first" :totalRecords="totalRecordsLength" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
-                :currentPageReportTemplate="currentPageReportTemplate" class="p-paginator-top" @page="onPage($event)" :alwaysShow="alwaysShowPaginator">
-            <template #start v-if="$slots.paginatorstart">
+        <DTPaginator
+            v-if="paginatorTop"
+            :rows="d_rows"
+            :first="d_first"
+            :totalRecords="totalRecordsLength"
+            :pageLinkSize="pageLinkSize"
+            :template="paginatorTemplate"
+            :rowsPerPageOptions="rowsPerPageOptions"
+            :currentPageReportTemplate="currentPageReportTemplate"
+            class="p-paginator-top"
+            @page="onPage($event)"
+            :alwaysShow="alwaysShowPaginator"
+        >
+            <template v-if="$slots.paginatorstart" #start>
                 <slot name="paginatorstart"></slot>
             </template>
-            <template #end v-if="$slots.paginatorend">
+            <template v-if="$slots.paginatorend" #end>
                 <slot name="paginatorend"></slot>
             </template>
         </DTPaginator>
@@ -21,72 +32,229 @@
             <DTVirtualScroller ref="virtualScroller" v-bind="virtualScrollerOptions" :items="processedData" :columns="columns" :style="{ height: scrollHeight }" :disabled="virtualScrollerDisabled" loaderDisabled :showSpacer="false">
                 <template #content="slotProps">
                     <table ref="table" role="table" :class="[tableClass, 'p-datatable-table']" :style="[tableStyle, slotProps.spacerStyle]">
-                        <DTTableHeader :columnGroup="headerColumnGroup" :columns="slotProps.columns" :rowGroupMode="rowGroupMode"
-                                :groupRowsBy="groupRowsBy" :groupRowSortField="groupRowSortField" :reorderableColumns="reorderableColumns" :resizableColumns="resizableColumns" :allRowsSelected="allRowsSelected" :empty="empty"
-                                :sortMode="sortMode" :sortField="d_sortField" :sortOrder="d_sortOrder" :multiSortMeta="d_multiSortMeta" :filters="d_filters" :filtersStore="filters" :filterDisplay="filterDisplay"
-                                @column-click="onColumnHeaderClick($event)" @column-mousedown="onColumnHeaderMouseDown($event)" @filter-change="onFilterChange" @filter-apply="onFilterApply"
-                                @column-dragstart="onColumnHeaderDragStart($event)" @column-dragover="onColumnHeaderDragOver($event)" @column-dragleave="onColumnHeaderDragLeave($event)" @column-drop="onColumnHeaderDrop($event)"
-                                @column-resizestart="onColumnResizeStart($event)" @checkbox-change="toggleRowsWithCheckbox($event)" />
-                        <DTTableBody ref="frozenBodyRef" v-if="frozenValue" :value="frozenValue" :frozenRow="true" class="p-datatable-frozen-tbody" :columns="slotProps.columns" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenu="contextMenu" :contextMenuSelection="contextMenuSelection"
-                            :rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :rowStyle="rowStyle" :editMode="editMode" :compareSelectionBy="compareSelectionBy" :scrollable="scrollable"
-                            :expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
-                            :editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$slots" :responsiveLayout="responsiveLayout"
-                            @rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-dblclick="onRowDblClick($event)" @row-rightclick="onRowRightClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
-                            @row-mousedown="onRowMouseDown" @row-dragstart="onRowDragStart($event)" @row-dragover="onRowDragOver($event)" @row-dragleave="onRowDragLeave($event)" @row-dragend="onRowDragEnd($event)" @row-drop="onRowDrop($event)"
-                            @row-toggle="toggleRow($event)" @radio-change="toggleRowWithRadio($event)" @checkbox-change="toggleRowWithCheckbox($event)"
-                            @cell-edit-init="onCellEditInit($event)" @cell-edit-complete="onCellEditComplete($event)" @cell-edit-cancel="onCellEditCancel($event)"
-                            @row-edit-init="onRowEditInit($event)" @row-edit-save="onRowEditSave($event)" @row-edit-cancel="onRowEditCancel($event)"
-                            :editingMeta="d_editingMeta" @editing-meta-change="onEditingMetaChange" :isVirtualScrollerDisabled="true"  />
-                        <DTTableBody ref="bodyRef" :value="dataToRender(slotProps.rows)" :class="slotProps.styleClass" :columns="slotProps.columns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenu="contextMenu" :contextMenuSelection="contextMenuSelection"
-                            :rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :rowStyle="rowStyle" :editMode="editMode" :compareSelectionBy="compareSelectionBy" :scrollable="scrollable"
-                            :expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
-                            :editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$slots" :responsiveLayout="responsiveLayout"
-                            @rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-dblclick="onRowDblClick($event)" @row-rightclick="onRowRightClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
-                            @row-mousedown="onRowMouseDown" @row-dragstart="onRowDragStart($event)" @row-dragover="onRowDragOver($event)" @row-dragleave="onRowDragLeave($event)" @row-dragend="onRowDragEnd($event)" @row-drop="onRowDrop($event)"
-                            @row-toggle="toggleRow($event)" @radio-change="toggleRowWithRadio($event)" @checkbox-change="toggleRowWithCheckbox($event)"
-                            @cell-edit-init="onCellEditInit($event)" @cell-edit-complete="onCellEditComplete($event)" @cell-edit-cancel="onCellEditCancel($event)"
-                            @row-edit-init="onRowEditInit($event)" @row-edit-save="onRowEditSave($event)" @row-edit-cancel="onRowEditCancel($event)"
-                            :editingMeta="d_editingMeta" @editing-meta-change="onEditingMetaChange"
-                            :virtualScrollerContentProps="slotProps" :isVirtualScrollerDisabled="virtualScrollerDisabled" />
+                        <DTTableHeader
+                            :columnGroup="headerColumnGroup"
+                            :columns="slotProps.columns"
+                            :rowGroupMode="rowGroupMode"
+                            :groupRowsBy="groupRowsBy"
+                            :groupRowSortField="groupRowSortField"
+                            :reorderableColumns="reorderableColumns"
+                            :resizableColumns="resizableColumns"
+                            :allRowsSelected="allRowsSelected"
+                            :empty="empty"
+                            :sortMode="sortMode"
+                            :sortField="d_sortField"
+                            :sortOrder="d_sortOrder"
+                            :multiSortMeta="d_multiSortMeta"
+                            :filters="d_filters"
+                            :filtersStore="filters"
+                            :filterDisplay="filterDisplay"
+                            @column-click="onColumnHeaderClick($event)"
+                            @column-mousedown="onColumnHeaderMouseDown($event)"
+                            @filter-change="onFilterChange"
+                            @filter-apply="onFilterApply"
+                            @column-dragstart="onColumnHeaderDragStart($event)"
+                            @column-dragover="onColumnHeaderDragOver($event)"
+                            @column-dragleave="onColumnHeaderDragLeave($event)"
+                            @column-drop="onColumnHeaderDrop($event)"
+                            @column-resizestart="onColumnResizeStart($event)"
+                            @checkbox-change="toggleRowsWithCheckbox($event)"
+                        />
+                        <DTTableBody
+                            v-if="frozenValue"
+                            ref="frozenBodyRef"
+                            :value="frozenValue"
+                            :frozenRow="true"
+                            class="p-datatable-frozen-tbody"
+                            :columns="slotProps.columns"
+                            :dataKey="dataKey"
+                            :selection="selection"
+                            :selectionKeys="d_selectionKeys"
+                            :selectionMode="selectionMode"
+                            :contextMenu="contextMenu"
+                            :contextMenuSelection="contextMenuSelection"
+                            :rowGroupMode="rowGroupMode"
+                            :groupRowsBy="groupRowsBy"
+                            :expandableRowGroups="expandableRowGroups"
+                            :rowClass="rowClass"
+                            :rowStyle="rowStyle"
+                            :editMode="editMode"
+                            :compareSelectionBy="compareSelectionBy"
+                            :scrollable="scrollable"
+                            :expandedRowIcon="expandedRowIcon"
+                            :collapsedRowIcon="collapsedRowIcon"
+                            :expandedRows="expandedRows"
+                            :expandedRowKeys="d_expandedRowKeys"
+                            :expandedRowGroups="expandedRowGroups"
+                            :editingRows="editingRows"
+                            :editingRowKeys="d_editingRowKeys"
+                            :templates="$slots"
+                            :responsiveLayout="responsiveLayout"
+                            @rowgroup-toggle="toggleRowGroup"
+                            @row-click="onRowClick($event)"
+                            @row-dblclick="onRowDblClick($event)"
+                            @row-rightclick="onRowRightClick($event)"
+                            @row-touchend="onRowTouchEnd"
+                            @row-keydown="onRowKeyDown"
+                            @row-mousedown="onRowMouseDown"
+                            @row-dragstart="onRowDragStart($event)"
+                            @row-dragover="onRowDragOver($event)"
+                            @row-dragleave="onRowDragLeave($event)"
+                            @row-dragend="onRowDragEnd($event)"
+                            @row-drop="onRowDrop($event)"
+                            @row-toggle="toggleRow($event)"
+                            @radio-change="toggleRowWithRadio($event)"
+                            @checkbox-change="toggleRowWithCheckbox($event)"
+                            @cell-edit-init="onCellEditInit($event)"
+                            @cell-edit-complete="onCellEditComplete($event)"
+                            @cell-edit-cancel="onCellEditCancel($event)"
+                            @row-edit-init="onRowEditInit($event)"
+                            @row-edit-save="onRowEditSave($event)"
+                            @row-edit-cancel="onRowEditCancel($event)"
+                            :editingMeta="d_editingMeta"
+                            @editing-meta-change="onEditingMetaChange"
+                            :isVirtualScrollerDisabled="true"
+                        />
+                        <DTTableBody
+                            ref="bodyRef"
+                            :value="dataToRender(slotProps.rows)"
+                            :class="slotProps.styleClass"
+                            :columns="slotProps.columns"
+                            :empty="empty"
+                            :dataKey="dataKey"
+                            :selection="selection"
+                            :selectionKeys="d_selectionKeys"
+                            :selectionMode="selectionMode"
+                            :contextMenu="contextMenu"
+                            :contextMenuSelection="contextMenuSelection"
+                            :rowGroupMode="rowGroupMode"
+                            :groupRowsBy="groupRowsBy"
+                            :expandableRowGroups="expandableRowGroups"
+                            :rowClass="rowClass"
+                            :rowStyle="rowStyle"
+                            :editMode="editMode"
+                            :compareSelectionBy="compareSelectionBy"
+                            :scrollable="scrollable"
+                            :expandedRowIcon="expandedRowIcon"
+                            :collapsedRowIcon="collapsedRowIcon"
+                            :expandedRows="expandedRows"
+                            :expandedRowKeys="d_expandedRowKeys"
+                            :expandedRowGroups="expandedRowGroups"
+                            :editingRows="editingRows"
+                            :editingRowKeys="d_editingRowKeys"
+                            :templates="$slots"
+                            :responsiveLayout="responsiveLayout"
+                            @rowgroup-toggle="toggleRowGroup"
+                            @row-click="onRowClick($event)"
+                            @row-dblclick="onRowDblClick($event)"
+                            @row-rightclick="onRowRightClick($event)"
+                            @row-touchend="onRowTouchEnd"
+                            @row-keydown="onRowKeyDown"
+                            @row-mousedown="onRowMouseDown"
+                            @row-dragstart="onRowDragStart($event)"
+                            @row-dragover="onRowDragOver($event)"
+                            @row-dragleave="onRowDragLeave($event)"
+                            @row-dragend="onRowDragEnd($event)"
+                            @row-drop="onRowDrop($event)"
+                            @row-toggle="toggleRow($event)"
+                            @radio-change="toggleRowWithRadio($event)"
+                            @checkbox-change="toggleRowWithCheckbox($event)"
+                            @cell-edit-init="onCellEditInit($event)"
+                            @cell-edit-complete="onCellEditComplete($event)"
+                            @cell-edit-cancel="onCellEditCancel($event)"
+                            @row-edit-init="onRowEditInit($event)"
+                            @row-edit-save="onRowEditSave($event)"
+                            @row-edit-cancel="onRowEditCancel($event)"
+                            :editingMeta="d_editingMeta"
+                            @editing-meta-change="onEditingMetaChange"
+                            :virtualScrollerContentProps="slotProps"
+                            :isVirtualScrollerDisabled="virtualScrollerDisabled"
+                        />
                         <DTTableFooter :columnGroup="footerColumnGroup" :columns="slotProps.columns" />
                     </table>
                 </template>
             </DTVirtualScroller>
         </div>
-        <DTPaginator v-if="paginatorBottom" :rows="d_rows" :first="d_first" :totalRecords="totalRecordsLength" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
-                :currentPageReportTemplate="currentPageReportTemplate" class="p-paginator-bottom" @page="onPage($event)" :alwaysShow="alwaysShowPaginator">
-            <template #start v-if="$slots.paginatorstart">
+        <DTPaginator
+            v-if="paginatorBottom"
+            :rows="d_rows"
+            :first="d_first"
+            :totalRecords="totalRecordsLength"
+            :pageLinkSize="pageLinkSize"
+            :template="paginatorTemplate"
+            :rowsPerPageOptions="rowsPerPageOptions"
+            :currentPageReportTemplate="currentPageReportTemplate"
+            class="p-paginator-bottom"
+            @page="onPage($event)"
+            :alwaysShow="alwaysShowPaginator"
+        >
+            <template v-if="$slots.paginatorstart" #start>
                 <slot name="paginatorstart"></slot>
             </template>
-            <template #end v-if="$slots.paginatorend">
+            <template v-if="$slots.paginatorend" #end>
                 <slot name="paginatorend"></slot>
             </template>
         </DTPaginator>
-        <div class="p-datatable-footer" v-if="$slots.footer">
+        <div v-if="$slots.footer" class="p-datatable-footer">
             <slot name="footer"></slot>
         </div>
         <div ref="resizeHelper" class="p-column-resizer-helper" 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" />
+        <span v-if="reorderableColumns" ref="reorderIndicatorUp" class="pi pi-arrow-down p-datatable-reorder-indicator-up" style="position: absolute; display: none" />
+        <span v-if="reorderableColumns" ref="reorderIndicatorDown" class="pi pi-arrow-up p-datatable-reorder-indicator-down" style="position: absolute; display: none" />
     </div>
 </template>
 
 <script>
-import {ObjectUtils,DomHandler,UniqueComponentId} from 'primevue/utils';
-import {FilterMatchMode,FilterOperator,FilterService} from 'primevue/api';
+import { FilterMatchMode, FilterOperator, FilterService } from 'primevue/api';
 import Paginator from 'primevue/paginator';
+import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
 import VirtualScroller from 'primevue/virtualscroller';
-import TableHeader from './TableHeader.vue';
 import TableBody from './TableBody.vue';
 import TableFooter from './TableFooter.vue';
+import TableHeader from './TableHeader.vue';
 
 export default {
     name: 'DataTable',
-    emits: ['value-change', 'update:first', 'update:rows', 'page', 'update:sortField', 'update:sortOrder', 'update:multiSortMeta', 'sort', 'filter', 'row-click', 'row-dblclick',
-        'update:selection', 'row-select', 'row-unselect', 'update:contextMenuSelection', 'row-contextmenu', 'row-unselect-all', 'row-select-all', 'select-all-change',
-        'column-resize-end', 'column-reorder', 'row-reorder', 'update:expandedRows', 'row-collapse', 'row-expand',
-        'update:expandedRowGroups', 'rowgroup-collapse', 'rowgroup-expand', 'update:filters', 'state-restore', 'state-save',
-        'cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel', 'update:editingRows', 'row-edit-init', 'row-edit-save', 'row-edit-cancel'],
+    emits: [
+        'value-change',
+        'update:first',
+        'update:rows',
+        'page',
+        'update:sortField',
+        'update:sortOrder',
+        'update:multiSortMeta',
+        'sort',
+        'filter',
+        'row-click',
+        'row-dblclick',
+        'update:selection',
+        'row-select',
+        'row-unselect',
+        'update:contextMenuSelection',
+        'row-contextmenu',
+        'row-unselect-all',
+        'row-select-all',
+        'select-all-change',
+        'column-resize-end',
+        'column-reorder',
+        'row-reorder',
+        'update:expandedRows',
+        'row-collapse',
+        'row-expand',
+        'update:expandedRowGroups',
+        'rowgroup-collapse',
+        'rowgroup-expand',
+        'update:filters',
+        'state-restore',
+        'state-save',
+        'cell-edit-init',
+        'cell-edit-complete',
+        'cell-edit-cancel',
+        'update:editingRows',
+        'row-edit-init',
+        'row-edit-save',
+        'row-edit-cancel'
+    ],
     props: {
         value: {
             type: Array,
@@ -121,7 +289,7 @@ export default {
             default: true
         },
         paginatorTemplate: {
-            type: String,
+            type: [Object, String],
             default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown'
         },
         pageLinkSize: {
@@ -189,7 +357,7 @@ export default {
             default: undefined
         },
         selection: {
-            type: [Array,Object],
+            type: [Array, Object],
             default: null
         },
         selectionMode: {
@@ -265,7 +433,7 @@ export default {
             default: null
         },
         groupRowsBy: {
-            type: [Array,String],
+            type: [Array, String],
             default: null
         },
         expandableRowGroups: {
@@ -306,7 +474,7 @@ export default {
         },
         scrollDirection: {
             type: String,
-            default: "vertical"
+            default: 'vertical'
         },
         virtualScrollerOptions: {
             type: Object,
@@ -414,7 +582,7 @@ export default {
         },
         filters: {
             deep: true,
-            handler: function(newValue) {
+            handler: function (newValue) {
                 this.d_filters = this.cloneFilters(newValue);
             }
         }
@@ -464,6 +632,7 @@ export default {
             this.d_rows = event.rows;
 
             let pageEvent = this.createLazyLoadEvent(event);
+
             pageEvent.pageCount = event.pageCount;
             pageEvent.page = event.page;
 
@@ -480,21 +649,24 @@ export default {
                 const targetNode = event.target;
                 const columnField = this.columnProp(column, 'sortField') || this.columnProp(column, 'field');
 
-                if (DomHandler.hasClass(targetNode, 'p-sortable-column') || DomHandler.hasClass(targetNode, 'p-column-title') || DomHandler.hasClass(targetNode, 'p-column-header-content')
-                    || DomHandler.hasClass(targetNode, 'p-sortable-column-icon') || DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')) {
+                if (
+                    DomHandler.hasClass(targetNode, 'p-sortable-column') ||
+                    DomHandler.hasClass(targetNode, 'p-column-title') ||
+                    DomHandler.hasClass(targetNode, 'p-column-header-content') ||
+                    DomHandler.hasClass(targetNode, 'p-sortable-column-icon') ||
+                    DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')
+                ) {
                     DomHandler.clearSelection();
 
                     if (this.sortMode === 'single') {
                         if (this.d_sortField === columnField) {
-                            if (this.removableSort && (this.d_sortOrder * -1 === this.defaultSortOrder)) {
+                            if (this.removableSort && this.d_sortOrder * -1 === this.defaultSortOrder) {
                                 this.d_sortOrder = null;
                                 this.d_sortField = null;
-                            }
-                            else {
+                            } else {
                                 this.d_sortOrder = this.d_sortOrder * -1;
                             }
-                        }
-                        else {
+                        } else {
                             this.d_sortOrder = this.defaultSortOrder;
                             this.d_sortField = columnField;
                         }
@@ -502,11 +674,11 @@ export default {
                         this.$emit('update:sortField', this.d_sortField);
                         this.$emit('update:sortOrder', this.d_sortOrder);
                         this.resetPage();
-                    }
-                    else if (this.sortMode === 'multiple') {
+                    } 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.d_multiSortMeta = this.d_multiSortMeta.filter((meta) => meta.field === columnField);
                         }
 
                         this.addMultiSortField(columnField);
@@ -523,8 +695,8 @@ export default {
 
             if (this.groupRowsBy && this.groupRowsBy === this.sortField) {
                 this.d_multiSortMeta = [
-                    {field: this.sortField, order: this.sortOrder || this.defaultSortOrder},
-                    {field: this.d_sortField, order: this.d_sortOrder}
+                    { field: this.sortField, order: this.sortOrder || this.defaultSortOrder },
+                    { field: this.d_sortField, order: this.d_sortOrder }
                 ];
 
                 return this.sortMultiple(value);
@@ -538,18 +710,13 @@ export default {
 
                 let result = null;
 
-                if (value1 == null && value2 != null)
-                    result = -1;
-                else if (value1 != null && value2 == null)
-                    result = 1;
-                else if (value1 == null && value2 == null)
-                    result = 0;
-                else if (typeof value1 === 'string' && typeof value2 === 'string')
-                    result = value1.localeCompare(value2, undefined, { numeric: true });
-                else
-                    result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;
-
-                return (this.d_sortOrder * result);
+                if (value1 == null && value2 != null) result = -1;
+                else if (value1 != null && value2 == null) result = 1;
+                else if (value1 == null && value2 == null) result = 0;
+                else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2, undefined, { numeric: true });
+                else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
+
+                return this.d_sortOrder * result;
             });
 
             return data;
@@ -559,6 +726,7 @@ export default {
 
             if (this.groupRowsBy && (this.d_groupRowsSortMeta || (this.d_multiSortMeta.length && this.groupRowsBy === this.d_multiSortMeta[0].field))) {
                 const firstSortMeta = this.d_multiSortMeta[0];
+
                 !this.d_groupRowsSortMeta && (this.d_groupRowsSortMeta = firstSortMeta);
 
                 if (firstSortMeta.field !== this.d_groupRowsSortMeta.field) {
@@ -580,31 +748,27 @@ export default {
             let result = null;
 
             if (typeof value1 === 'string' || value1 instanceof String) {
-                if (value1.localeCompare && (value1 !== value2)) {
-                    return (this.d_multiSortMeta[index].order * value1.localeCompare(value2, undefined, { numeric: true }));
+                if (value1.localeCompare && value1 !== value2) {
+                    return this.d_multiSortMeta[index].order * value1.localeCompare(value2, undefined, { numeric: true });
                 }
-            }
-            else {
-                result = (value1 < value2) ? -1 : 1;
+            } else {
+                result = value1 < value2 ? -1 : 1;
             }
 
-            if (value1 === value2)  {
-                return (this.d_multiSortMeta.length - 1) > (index) ? (this.multisortField(data1, data2, index + 1)) : 0;
+            if (value1 === value2) {
+                return this.d_multiSortMeta.length - 1 > index ? this.multisortField(data1, data2, index + 1) : 0;
             }
 
-            return (this.d_multiSortMeta[index].order * result);
+            return this.d_multiSortMeta[index].order * result;
         },
         addMultiSortField(field) {
-            let index =  this.d_multiSortMeta.findIndex(meta => meta.field === field);
+            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 (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 });
             }
 
             this.d_multiSortMeta = [...this.d_multiSortMeta];
@@ -617,8 +781,9 @@ export default {
             this.clearEditingMetaData();
 
             let globalFilterFieldsArray;
+
             if (this.filters['global']) {
-                globalFilterFieldsArray = this.globalFilterFields|| this.columns.map(col => this.columnProp(col, 'filterField') || this.columnProp(col, 'field'));
+                globalFilterFieldsArray = this.globalFilterFields || this.columns.map((col) => this.columnProp(col, 'filterField') || this.columnProp(col, 'field'));
             }
 
             let filteredValue = [];
@@ -642,8 +807,7 @@ export default {
                                     break;
                                 }
                             }
-                        }
-                        else {
+                        } else {
                             localMatch = this.executeLocalFilter(filterField, data[i], filterMeta);
                         }
 
@@ -654,8 +818,9 @@ export default {
                 }
 
                 if (this.filters['global'] && !globalMatch && globalFilterFieldsArray) {
-                    for(let j = 0; j < globalFilterFieldsArray.length; j++) {
+                    for (let j = 0; j < globalFilterFieldsArray.length; j++) {
                         let globalFilterField = globalFilterFieldsArray[j];
+
                         globalMatch = FilterService.filters[this.filters['global'].matchMode || FilterMatchMode.CONTAINS](ObjectUtils.resolveFieldData(data[i], globalFilterField), this.filters['global'].value, this.filterLocale);
 
                         if (globalMatch) {
@@ -665,10 +830,10 @@ export default {
                 }
 
                 let matches;
+
                 if (this.filters['global']) {
-                    matches = localFiltered ? (localFiltered && localMatch && globalMatch) : globalMatch;
-                }
-                else {
+                    matches = localFiltered ? localFiltered && localMatch && globalMatch : globalMatch;
+                } else {
                     matches = localFiltered && localMatch;
                 }
 
@@ -682,6 +847,7 @@ export default {
             }
 
             let filterEvent = this.createLazyLoadEvent();
+
             filterEvent.filteredValue = filteredValue;
             this.$emit('filter', filterEvent);
             this.$emit('value-change', filteredValue);
@@ -698,6 +864,7 @@ export default {
         },
         onRowClick(e) {
             const event = e.originalEvent;
+
             if (DomHandler.isClickable(event.target)) {
                 return;
             }
@@ -712,10 +879,10 @@ export default {
                     DomHandler.clearSelection();
                     this.rangeRowIndex = rowIndex;
                     this.selectRange(event);
-                }
-                else {
+                } else {
                     const selected = this.isSelected(rowData);
                     const metaSelection = this.rowTouched ? false : this.metaKeySelection;
+
                     this.anchorRowIndex = rowIndex;
                     this.rangeRowIndex = rowIndex;
 
@@ -723,52 +890,49 @@ export default {
                         let metaKey = event.metaKey || event.ctrlKey;
 
                         if (selected && metaKey) {
-                            if(this.isSingleSelectionMode()) {
+                            if (this.isSingleSelectionMode()) {
                                 this.$emit('update:selection', null);
-                            }
-                            else {
+                            } else {
                                 const selectionIndex = this.findIndexInSelection(rowData);
-                                const _selection = this.selection.filter((val,i) => i != selectionIndex);
+                                const _selection = this.selection.filter((val, i) => i != selectionIndex);
+
                                 this.$emit('update:selection', _selection);
                             }
 
-                            this.$emit('row-unselect', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
-                        }
-                        else {
-                            if(this.isSingleSelectionMode()) {
+                            this.$emit('row-unselect', { originalEvent: event, data: rowData, index: rowIndex, type: 'row' });
+                        } else {
+                            if (this.isSingleSelectionMode()) {
                                 this.$emit('update:selection', rowData);
-                            }
-                            else if (this.isMultipleSelectionMode()) {
-                                let _selection = metaKey ? (this.selection || []) : [];
+                            } else if (this.isMultipleSelectionMode()) {
+                                let _selection = metaKey ? this.selection || [] : [];
+
                                 _selection = [..._selection, rowData];
                                 this.$emit('update:selection', _selection);
                             }
 
-                            this.$emit('row-select', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
+                            this.$emit('row-select', { originalEvent: event, data: rowData, index: rowIndex, type: 'row' });
                         }
-                    }
-                    else {
+                    } else {
                         if (this.selectionMode === 'single') {
                             if (selected) {
                                 this.$emit('update:selection', null);
-                                this.$emit('row-unselect', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
-                            }
-                            else {
+                                this.$emit('row-unselect', { originalEvent: event, data: rowData, index: rowIndex, type: 'row' });
+                            } else {
                                 this.$emit('update:selection', rowData);
-                                this.$emit('row-select', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
+                                this.$emit('row-select', { originalEvent: event, data: rowData, index: rowIndex, type: 'row' });
                             }
-                        }
-                        else if (this.selectionMode === 'multiple') {
+                        } else if (this.selectionMode === 'multiple') {
                             if (selected) {
                                 const selectionIndex = this.findIndexInSelection(rowData);
                                 const _selection = this.selection.filter((val, i) => i != selectionIndex);
+
                                 this.$emit('update:selection', _selection);
-                                this.$emit('row-unselect', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
-                            }
-                            else {
+                                this.$emit('row-unselect', { originalEvent: event, data: rowData, index: rowIndex, type: 'row' });
+                            } else {
                                 const _selection = this.selection ? [...this.selection, rowData] : [rowData];
+
                                 this.$emit('update:selection', _selection);
-                                this.$emit('row-select', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
+                                this.$emit('row-select', { originalEvent: event, data: rowData, index: rowIndex, type: 'row' });
                             }
                         }
                     }
@@ -779,6 +943,7 @@ export default {
         },
         onRowDblClick(e) {
             const event = e.originalEvent;
+
             if (DomHandler.isClickable(event.target)) {
                 return;
             }
@@ -807,55 +972,53 @@ export default {
                     //down arrow
                     case 40:
                         var nextRow = this.findNextSelectableRow(row);
+
                         if (nextRow) {
                             nextRow.focus();
                         }
 
                         event.preventDefault();
-                    break;
+                        break;
 
                     //up arrow
                     case 38:
                         var prevRow = this.findPrevSelectableRow(row);
+
                         if (prevRow) {
                             prevRow.focus();
                         }
 
                         event.preventDefault();
-                    break;
+                        break;
 
                     //enter
                     case 13:
-                        this.onRowClick({originalEvent: event, data: rowData, index: rowIndex});
-                    break;
+                        this.onRowClick({ originalEvent: event, data: rowData, index: rowIndex });
+                        break;
 
                     default:
                         //no op
-                    break;
+                        break;
                 }
             }
         },
         findNextSelectableRow(row) {
             let nextRow = row.nextElementSibling;
+
             if (nextRow) {
-                if (DomHandler.hasClass(nextRow, 'p-selectable-row'))
-                    return nextRow;
-                else
-                    return this.findNextSelectableRow(nextRow);
-            }
-            else {
+                if (DomHandler.hasClass(nextRow, 'p-selectable-row')) return nextRow;
+                else return this.findNextSelectableRow(nextRow);
+            } else {
                 return null;
             }
         },
         findPrevSelectableRow(row) {
             let prevRow = row.previousElementSibling;
+
             if (prevRow) {
-                if (DomHandler.hasClass(prevRow, 'p-selectable-row'))
-                    return prevRow;
-                else
-                    return this.findPrevSelectableRow(prevRow);
-            }
-            else {
+                if (DomHandler.hasClass(prevRow, 'p-selectable-row')) return prevRow;
+                else return this.findPrevSelectableRow(prevRow);
+            } else {
                 return null;
             }
         },
@@ -865,8 +1028,7 @@ export default {
             if (this.isSelected(rowData)) {
                 this.$emit('update:selection', null);
                 this.$emit('row-unselect', { originalEvent: event.originalEvent, data: rowData, index: event.index, type: 'radiobutton' });
-            }
-            else {
+            } else {
                 this.$emit('update:selection', rowData);
                 this.$emit('row-select', { originalEvent: event.originalEvent, data: rowData, index: event.index, type: 'radiobutton' });
             }
@@ -877,11 +1039,12 @@ export default {
             if (this.isSelected(rowData)) {
                 const selectionIndex = this.findIndexInSelection(rowData);
                 const _selection = this.selection.filter((val, i) => i != selectionIndex);
+
                 this.$emit('update:selection', _selection);
                 this.$emit('row-unselect', { originalEvent: event.originalEvent, data: rowData, index: event.index, type: 'checkbox' });
-            }
-            else {
+            } else {
                 let _selection = this.selection ? [...this.selection] : [];
+
                 _selection = [..._selection, rowData];
                 this.$emit('update:selection', _selection);
                 this.$emit('row-select', { originalEvent: event.originalEvent, data: rowData, index: event.index, type: 'checkbox' });
@@ -890,21 +1053,18 @@ export default {
         toggleRowsWithCheckbox(event) {
             if (this.selectAll !== null) {
                 this.$emit('select-all-change', event);
-            }
-            else {
+            } else {
                 const { originalEvent, checked } = event;
                 let _selection = [];
 
                 if (checked) {
                     _selection = this.frozenValue ? [...this.frozenValue, ...this.processedData] : this.processedData;
-                    this.$emit('row-select-all', {originalEvent, data: _selection});
-                }
-                else {
-                    this.$emit('row-unselect-all', {originalEvent});
+                    this.$emit('row-select-all', { originalEvent, data: _selection });
+                } else {
+                    this.$emit('row-unselect-all', { originalEvent });
                 }
 
                 this.$emit('update:selection', _selection);
-
             }
         },
         isSingleSelectionMode() {
@@ -917,12 +1077,9 @@ export default {
             if (rowData && this.selection) {
                 if (this.dataKey) {
                     return this.d_selectionKeys ? this.d_selectionKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;
-                }
-                else {
-                    if (this.selection instanceof Array)
-                        return this.findIndexInSelection(rowData) > -1;
-                    else
-                        return this.equals(rowData, this.selection);
+                } else {
+                    if (this.selection instanceof Array) return this.findIndexInSelection(rowData) > -1;
+                    else return this.equals(rowData, this.selection);
                 }
             }
 
@@ -933,6 +1090,7 @@ export default {
         },
         findIndex(rowData, collection) {
             let index = -1;
+
             if (collection && collection.length) {
                 for (let i = 0; i < collection.length; i++) {
                     if (this.equals(rowData, collection[i])) {
@@ -946,39 +1104,39 @@ export default {
         },
         updateSelectionKeys(selection) {
             this.d_selectionKeys = {};
+
             if (Array.isArray(selection)) {
                 for (let data of selection) {
                     this.d_selectionKeys[String(ObjectUtils.resolveFieldData(data, this.dataKey))] = 1;
                 }
-            }
-            else {
+            } else {
                 this.d_selectionKeys[String(ObjectUtils.resolveFieldData(selection, this.dataKey))] = 1;
             }
         },
         updateExpandedRowKeys(expandedRows) {
             if (expandedRows && expandedRows.length) {
                 this.d_expandedRowKeys = {};
+
                 for (let data of expandedRows) {
                     this.d_expandedRowKeys[String(ObjectUtils.resolveFieldData(data, this.dataKey))] = 1;
                 }
-            }
-            else {
+            } else {
                 this.d_expandedRowKeys = null;
             }
         },
         updateEditingRowKeys(editingRows) {
             if (editingRows && editingRows.length) {
                 this.d_editingRowKeys = {};
+
                 for (let data of editingRows) {
                     this.d_editingRowKeys[String(ObjectUtils.resolveFieldData(data, this.dataKey))] = 1;
                 }
-            }
-            else {
+            } else {
                 this.d_editingRowKeys = null;
             }
         },
         equals(data1, data2) {
-            return this.compareSelectionBy === 'equals' ? (data1 === data2) : ObjectUtils.equals(data1, data2, this.dataKey);
+            return this.compareSelectionBy === 'equals' ? data1 === data2 : ObjectUtils.equals(data1, data2, this.dataKey);
         },
         selectRange(event) {
             let rangeStart, rangeEnd;
@@ -986,12 +1144,10 @@ export default {
             if (this.rangeRowIndex > this.anchorRowIndex) {
                 rangeStart = this.anchorRowIndex;
                 rangeEnd = this.rangeRowIndex;
-            }
-            else if(this.rangeRowIndex < this.anchorRowIndex) {
+            } else if (this.rangeRowIndex < this.anchorRowIndex) {
                 rangeStart = this.rangeRowIndex;
                 rangeEnd = this.anchorRowIndex;
-            }
-            else {
+            } else {
                 rangeStart = this.rangeRowIndex;
                 rangeEnd = this.rangeRowIndex;
             }
@@ -1003,10 +1159,12 @@ export default {
 
             const value = this.processedData;
             let _selection = [];
-            for(let i = rangeStart; i <= rangeEnd; i++) {
+
+            for (let i = rangeStart; i <= rangeEnd; i++) {
                 let rangeRowData = value[i];
+
                 _selection.push(rangeRowData);
-                this.$emit('row-select', {originalEvent: event, data: rangeRowData, type: 'row'});
+                this.$emit('row-select', { originalEvent: event, data: rangeRowData, type: 'row' });
             }
 
             this.$emit('update:selection', _selection);
@@ -1017,22 +1175,19 @@ export default {
             if (!data) {
                 data = this.processedData;
 
-                if (options && options.selectionOnly)
-                    data = this.selection || [];
-                else if (this.frozenValue)
-                    data = data ? [...this.frozenValue, ...data] : this.frozenValue;
+                if (options && options.selectionOnly) data = this.selection || [];
+                else if (this.frozenValue) data = data ? [...this.frozenValue, ...data] : this.frozenValue;
             }
 
             //headers
             let headerInitiated = false;
+
             for (let i = 0; i < this.columns.length; i++) {
                 let column = this.columns[i];
 
                 if (this.columnProp(column, 'exportable') !== false && this.columnProp(column, 'field')) {
-                    if (headerInitiated)
-                        csv += this.csvSeparator;
-                    else
-                        headerInitiated = true;
+                    if (headerInitiated) csv += this.csvSeparator;
+                    else headerInitiated = true;
 
                     csv += '"' + (this.columnProp(column, 'exportHeader') || this.columnProp(column, 'header') || this.columnProp(column, 'field')) + '"';
                 }
@@ -1040,16 +1195,16 @@ export default {
 
             //body
             if (data) {
-                data.forEach(record => {
+                data.forEach((record) => {
                     csv += '\n';
                     let rowInitiated = false;
+
                     for (let i = 0; i < this.columns.length; i++) {
                         let column = this.columns[i];
+
                         if (this.columnProp(column, 'exportable') !== false && this.columnProp(column, 'field')) {
-                            if (rowInitiated)
-                                csv += this.csvSeparator;
-                            else
-                                rowInitiated = true;
+                            if (rowInitiated) csv += this.csvSeparator;
+                            else rowInitiated = true;
 
                             let cellData = ObjectUtils.resolveFieldData(record, this.columnProp(column, 'field'));
 
@@ -1059,12 +1214,8 @@ export default {
                                         data: cellData,
                                         field: this.columnProp(column, 'field')
                                     });
-                                }
-                                else
-                                    cellData = String(cellData).replace(/"/g, '""');
-                            }
-                            else
-                                cellData = '';
+                                } else cellData = String(cellData).replace(/"/g, '""');
+                            } else cellData = '';
 
                             csv += '"' + cellData + '"';
                         }
@@ -1072,19 +1223,17 @@ export default {
                 });
             }
 
-
             //footers
             let footerInitiated = false;
+
             for (let i = 0; i < this.columns.length; i++) {
                 let column = this.columns[i];
 
                 if (i === 0) csv += '\n';
 
                 if (this.columnProp(column, 'exportable') !== false && this.columnProp(column, 'field')) {
-                    if (footerInitiated)
-                        csv += this.csvSeparator;
-                    else
-                        footerInitiated = true;
+                    if (footerInitiated) csv += this.csvSeparator;
+                    else footerInitiated = true;
 
                     csv += '"' + (this.columnProp(column, 'exportFooter') || this.columnProp(column, 'footer') || this.columnProp(column, 'field')) + '"';
                 }
@@ -1098,18 +1247,20 @@ export default {
         },
         onColumnResizeStart(event) {
             let containerLeft = DomHandler.getOffset(this.$el).left;
+
             this.resizeColumnElement = event.target.parentElement;
             this.columnResizing = true;
-            this.lastResizeHelperX = (event.pageX - containerLeft + this.$el.scrollLeft);
+            this.lastResizeHelperX = event.pageX - containerLeft + this.$el.scrollLeft;
 
             this.bindColumnResizeEvents();
         },
         onColumnResize(event) {
             let containerLeft = DomHandler.getOffset(this.$el).left;
+
             DomHandler.addClass(this.$el, 'p-unselectable-text');
             this.$refs.resizeHelper.style.height = this.$el.offsetHeight + 'px';
             this.$refs.resizeHelper.style.top = 0 + 'px';
-            this.$refs.resizeHelper.style.left = (event.pageX - containerLeft + this.$el.scrollLeft) + 'px';
+            this.$refs.resizeHelper.style.left = event.pageX - containerLeft + this.$el.scrollLeft + 'px';
 
             this.$refs.resizeHelper.style.display = 'block';
         },
@@ -1117,7 +1268,7 @@ export default {
             let delta = this.$refs.resizeHelper.offsetLeft - this.lastResizeHelperX;
             let columnWidth = this.resizeColumnElement.offsetWidth;
             let newColumnWidth = columnWidth + delta;
-            let minWidth = this.resizeColumnElement.style.minWidth||15;
+            let minWidth = this.resizeColumnElement.style.minWidth || 15;
 
             if (columnWidth + delta > parseInt(minWidth, 10)) {
                 if (this.columnResizeMode === 'fit') {
@@ -1127,12 +1278,12 @@ export default {
                     if (newColumnWidth > 15 && nextColumnWidth > 15) {
                         this.resizeTableCells(newColumnWidth, nextColumnWidth);
                     }
-                }
-                else if (this.columnResizeMode === 'expand') {
+                } else if (this.columnResizeMode === 'expand') {
                     const tableWidth = this.$refs.table.offsetWidth + delta + 'px';
+
                     const updateTableWidth = (el) => {
                         !!el && (el.style.width = el.style.minWidth = tableWidth);
-                    }
+                    };
 
                     updateTableWidth(this.$refs.table);
 
@@ -1167,22 +1318,25 @@ export default {
             let colIndex = DomHandler.index(this.resizeColumnElement);
             let widths = [];
             let headers = DomHandler.find(this.$refs.table, '.p-datatable-thead > tr > th');
-            headers.forEach(header => widths.push(DomHandler.getOuterWidth(header)));
+
+            headers.forEach((header) => widths.push(DomHandler.getOuterWidth(header)));
 
             this.destroyStyleElement();
             this.createStyleElement();
 
             let innerHTML = '';
+
             widths.forEach((width, index) => {
-                let colWidth = index === colIndex ? newColumnWidth : (nextColumnWidth && index === colIndex + 1) ? nextColumnWidth : width;
+                let colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width;
                 let style = this.scrollable ? `flex: 1 1 ${colWidth}px !important` : `width: ${colWidth}px !important`;
+
                 innerHTML += `
                     .p-datatable[${this.attributeSelector}] .p-datatable-thead > tr > th:nth-child(${index + 1}),
                     .p-datatable[${this.attributeSelector}] .p-datatable-tbody > tr > td:nth-child(${index + 1}),
                     .p-datatable[${this.attributeSelector}] .p-datatable-tfoot > tr > td:nth-child(${index + 1}) {
                         ${style}
                     }
-                `
+                `;
             });
 
             this.styleElement.innerHTML = innerHTML;
@@ -1190,7 +1344,7 @@ export default {
         bindColumnResizeEvents() {
             if (!this.documentColumnResizeListener) {
                 this.documentColumnResizeListener = document.addEventListener('mousemove', () => {
-                    if(this.columnResizing) {
+                    if (this.columnResizing) {
                         this.onColumnResize(event);
                     }
                 });
@@ -1198,13 +1352,12 @@ export default {
 
             if (!this.documentColumnResizeEndListener) {
                 this.documentColumnResizeEndListener = document.addEventListener('mouseup', () => {
-                    if(this.columnResizing) {
+                    if (this.columnResizing) {
                         this.columnResizing = false;
                         this.onColumnResizeEnd();
                     }
                 });
             }
-
         },
         unbindColumnResizeEvents() {
             if (this.documentColumnResizeListener) {
@@ -1222,15 +1375,14 @@ export default {
             const column = e.column;
 
             if (this.reorderableColumns && this.columnProp(column, 'reorderableColumn') !== false) {
-                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;
+                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;
             }
 
@@ -1242,26 +1394,26 @@ export default {
         },
         onColumnHeaderDragOver(event) {
             let dropHeader = this.findParentHeader(event.target);
-            if(this.reorderableColumns && this.draggedColumn && dropHeader) {
+
+            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 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';
+                    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';
+                    } 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;
                     }
 
@@ -1271,7 +1423,7 @@ export default {
             }
         },
         onColumnHeaderDragLeave(event) {
-            if(this.reorderableColumns && this.draggedColumn) {
+            if (this.reorderableColumns && this.draggedColumn) {
                 event.preventDefault();
                 this.$refs.reorderIndicatorUp.style.display = 'none';
                 this.$refs.reorderIndicatorDown.style.display = 'none';
@@ -1279,10 +1431,12 @@ export default {
         },
         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);
+                let allowDrop = dragIndex !== dropIndex;
+
                 if (allowDrop && ((dropIndex - dragIndex === 1 && this.dropPosition === -1) || (dropIndex - dragIndex === -1 && this.dropPosition === 1))) {
                     allowDrop = false;
                 }
@@ -1306,15 +1460,16 @@ export default {
             }
         },
         findParentHeader(element) {
-            if(element.nodeName === 'TH') {
+            if (element.nodeName === 'TH') {
                 return element;
-            }
-            else {
+            } else {
                 let parent = element.parentElement;
-                while(parent.nodeName !== 'TH') {
+
+                while (parent.nodeName !== 'TH') {
                     parent = parent.parentElement;
                     if (!parent) break;
                 }
+
                 return parent;
             }
         },
@@ -1322,6 +1477,7 @@ export default {
             if (columns && columns.length) {
                 for (let i = 0; i < columns.length; i++) {
                     let column = columns[i];
+
                     if (this.columnProp(column, 'columnKey') === key || this.columnProp(column, 'field') === key) {
                         return column;
                     }
@@ -1331,17 +1487,16 @@ export default {
             return null;
         },
         onRowMouseDown(event) {
-            if (DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle'))
-                event.currentTarget.draggable = true;
-            else
-                event.currentTarget.draggable = false;
+            if (DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle')) event.currentTarget.draggable = true;
+            else event.currentTarget.draggable = false;
         },
         onRowDragStart(e) {
             const event = e.originalEvent;
             const index = e.index;
+
             this.rowDragging = true;
             this.draggedRowIndex = index;
-            event.dataTransfer.setData('text', 'b');    // For firefox
+            event.dataTransfer.setData('text', 'b'); // For firefox
         },
         onRowDragOver(e) {
             const event = e.originalEvent;
@@ -1358,16 +1513,11 @@ export default {
                     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');
+                    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');
@@ -1379,6 +1529,7 @@ export default {
         onRowDragLeave(event) {
             let rowElement = event.currentTarget;
             let prevRowElement = rowElement.previousElementSibling;
+
             if (prevRowElement) {
                 DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
             }
@@ -1394,8 +1545,9 @@ export default {
         },
         onRowDrop(event) {
             if (this.droppedRowIndex != null) {
-                let dropIndex = (this.draggedRowIndex > this.droppedRowIndex) ? this.droppedRowIndex : (this.droppedRowIndex === 0) ? 0 : this.droppedRowIndex - 1;
+                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', {
@@ -1419,8 +1571,7 @@ export default {
 
             if (this.dataKey) {
                 expanded = this.d_expandedRowKeys ? this.d_expandedRowKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;
-            }
-            else {
+            } else {
                 expandedRowIndex = this.findIndex(rowData, this.expandedRows);
                 expanded = expandedRowIndex > -1;
             }
@@ -1429,11 +1580,11 @@ export default {
                 if (expandedRowIndex == null) {
                     expandedRowIndex = this.findIndex(rowData, this.expandedRows);
                 }
+
                 _expandedRows.splice(expandedRowIndex, 1);
                 this.$emit('update:expandedRows', _expandedRows);
                 this.$emit('row-collapse', event);
-            }
-            else {
+            } else {
                 _expandedRows.push(rowData);
                 this.$emit('update:expandedRows', _expandedRows);
                 this.$emit('row-expand', event);
@@ -1446,28 +1597,29 @@ export default {
             let _expandedRowGroups = this.expandedRowGroups ? [...this.expandedRowGroups] : [];
 
             if (this.isRowGroupExpanded(data)) {
-                _expandedRowGroups = _expandedRowGroups.filter(group => group !== groupFieldValue);
+                _expandedRowGroups = _expandedRowGroups.filter((group) => group !== groupFieldValue);
                 this.$emit('update:expandedRowGroups', _expandedRowGroups);
-                this.$emit('rowgroup-collapse', {originalEvent: event, data: groupFieldValue});
-            }
-            else {
+                this.$emit('rowgroup-collapse', { originalEvent: event, data: groupFieldValue });
+            } else {
                 _expandedRowGroups.push(groupFieldValue);
                 this.$emit('update:expandedRowGroups', _expandedRowGroups);
-                this.$emit('rowgroup-expand', {originalEvent: event, data: groupFieldValue});
+                this.$emit('rowgroup-expand', { originalEvent: event, data: groupFieldValue });
             }
         },
         isRowGroupExpanded(rowData) {
             if (this.expandableRowGroups && this.expandedRowGroups) {
                 let groupFieldValue = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
+
                 return this.expandedRowGroups.indexOf(groupFieldValue) > -1;
             }
+
             return false;
         },
         isStateful() {
             return this.stateKey != null;
         },
         getStorage() {
-            switch(this.stateStorage) {
+            switch (this.stateStorage) {
                 case 'local':
                     return window.localStorage;
 
@@ -1532,13 +1684,14 @@ export default {
             const storage = this.getStorage();
             const stateString = storage.getItem(this.stateKey);
             const dateFormat = /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/;
-            const reviver = function(key, value) {
-                if (typeof value === "string" && dateFormat.test(value)) {
+
+            const reviver = function (key, value) {
+                if (typeof value === 'string' && dateFormat.test(value)) {
                     return new Date(value);
                 }
 
                 return value;
-            }
+            };
 
             if (stateString) {
                 let restoredState = JSON.parse(stateString, reviver);
@@ -1590,7 +1743,8 @@ export default {
         saveColumnWidths(state) {
             let widths = [];
             let headers = DomHandler.find(this.$el, '.p-datatable-thead > tr > th');
-            headers.forEach(header => widths.push(DomHandler.getOuterWidth(header)));
+
+            headers.forEach((header) => widths.push(DomHandler.getOuterWidth(header)));
             state.columnWidths = widths.join(',');
 
             if (this.columnResizeMode === 'expand') {
@@ -1611,15 +1765,17 @@ export default {
                     this.createStyleElement();
 
                     let innerHTML = '';
+
                     widths.forEach((width, index) => {
                         let style = this.scrollable ? `flex: 1 1 ${width}px !important` : `width: ${width}px !important`;
+
                         innerHTML += `
                             .p-datatable[${this.attributeSelector}] .p-datatable-thead > tr > th:nth-child(${index + 1}),
                             .p-datatable[${this.attributeSelector}] .p-datatable-tbody > tr > td:nth-child(${index + 1}),
                             .p-datatable[${this.attributeSelector}] .p-datatable-tfoot > tr > td:nth-child(${index + 1}) {
                                 ${style}
                             }
-                        `
+                        `;
                     });
 
                     this.styleElement.innerHTML = innerHTML;
@@ -1637,18 +1793,21 @@ export default {
         },
         onRowEditInit(event) {
             let _editingRows = this.editingRows ? [...this.editingRows] : [];
+
             _editingRows.push(event.data);
             this.$emit('update:editingRows', _editingRows);
             this.$emit('row-edit-init', event);
         },
         onRowEditSave(event) {
             let _editingRows = [...this.editingRows];
+
             _editingRows.splice(this.findIndex(event.data, _editingRows), 1);
             this.$emit('update:editingRows', _editingRows);
             this.$emit('row-edit-save', event);
         },
         onRowEditCancel(event) {
             let _editingRows = [...this.editingRows];
+
             _editingRows.splice(this.findIndex(event.data, _editingRows), 1);
             this.$emit('update:editingRows', _editingRows);
             this.$emit('row-edit-cancel', event);
@@ -1661,10 +1820,10 @@ export default {
             if (editing) {
                 !meta && (meta = editingMeta[index] = { data: { ...data }, fields: [] });
                 meta['fields'].push(field);
-            }
-            else if (meta) {
-                const fields = meta['fields'].filter(f => f !== field);
-                !fields.length ? (delete editingMeta[index]) : (meta['fields'] = fields);
+            } else if (meta) {
+                const fields = meta['fields'].filter((f) => f !== field);
+
+                !fields.length ? delete editingMeta[index] : (meta['fields'] = fields);
             }
 
             this.d_editingMeta = editingMeta;
@@ -1705,9 +1864,17 @@ export default {
         },
         cloneFilters() {
             let cloned = {};
+
             if (this.filters) {
-                Object.entries(this.filters).forEach(([prop,value]) => {
-                    cloned[prop] = value.operator ? {operator: value.operator, constraints: value.constraints.map(constraint => {return {...constraint}})} : {...value};
+                Object.entries(this.filters).forEach(([prop, value]) => {
+                    cloned[prop] = value.operator
+                        ? {
+                              operator: value.operator,
+                              constraints: value.constraints.map((constraint) => {
+                                  return { ...constraint };
+                              })
+                          }
+                        : { ...value };
                 });
             }
 
@@ -1715,7 +1882,8 @@ export default {
         },
         updateReorderableColumns() {
             let columnOrder = [];
-            this.columns.forEach(col => columnOrder.push(this.columnProp(col, 'columnKey')||this.columnProp(col, 'field')));
+
+            this.columns.forEach((col) => columnOrder.push(this.columnProp(col, 'columnKey') || this.columnProp(col, 'field')));
             this.d_columnOrder = columnOrder;
         },
         createStyleElement() {
@@ -1724,10 +1892,10 @@ export default {
             document.head.appendChild(this.styleElement);
         },
         createResponsiveStyle() {
-			if (!this.responsiveStyleElement) {
-				this.responsiveStyleElement = document.createElement('style');
-				this.responsiveStyleElement.type = 'text/css';
-				document.head.appendChild(this.responsiveStyleElement);
+            if (!this.responsiveStyleElement) {
+                this.responsiveStyleElement = document.createElement('style');
+                this.responsiveStyleElement.type = 'text/css';
+                document.head.appendChild(this.responsiveStyleElement);
 
                 let innerHTML = `
 @media screen and (max-width: ${this.breakpoint}) {
@@ -1760,8 +1928,8 @@ export default {
 `;
 
                 this.responsiveStyleElement.innerHTML = innerHTML;
-			}
-		},
+            }
+        },
         destroyResponsiveStyle() {
             if (this.responsiveStyleElement) {
                 document.head.removeChild(this.responsiveStyleElement);
@@ -1778,6 +1946,7 @@ export default {
             if (!results) {
                 results = [];
             }
+
             if (children && children.length) {
                 children.forEach((child) => {
                     if (child.children instanceof Array) {
@@ -1787,6 +1956,7 @@ export default {
                     }
                 });
             }
+
             return results;
         },
         dataToRender(data) {
@@ -1794,6 +1964,7 @@ export default {
 
             if (_data && this.paginator) {
                 const first = this.lazy ? 0 : this.d_first;
+
                 return _data.slice(first, first + this.d_rows);
             }
 
@@ -1806,8 +1977,9 @@ export default {
     computed: {
         containerClass() {
             return [
-                'p-datatable p-component', {
-                    'p-datatable-hoverable-rows': (this.rowHover || this.selectionMode),
+                'p-datatable p-component',
+                {
+                    'p-datatable-hoverable-rows': this.rowHover || this.selectionMode,
                     'p-datatable-auto-layout': this.autoLayout,
                     'p-datatable-resizable': this.resizableColumns,
                     'p-datatable-resizable-fit': this.resizableColumns && this.columnResizeMode === 'fit',
@@ -1815,7 +1987,7 @@ export default {
                     'p-datatable-scrollable-vertical': this.scrollable && this.scrollDirection === 'vertical',
                     'p-datatable-scrollable-horizontal': this.scrollable && this.scrollDirection === 'horizontal',
                     'p-datatable-scrollable-both': this.scrollable && this.scrollDirection === 'both',
-                    'p-datatable-flex-scrollable': (this.scrollable && this.scrollHeight === 'flex'),
+                    'p-datatable-flex-scrollable': this.scrollable && this.scrollHeight === 'flex',
                     'p-datatable-responsive-stack': this.responsiveLayout === 'stack',
                     'p-datatable-responsive-scroll': this.responsiveLayout === 'scroll',
                     'p-datatable-striped': this.stripedRows,
@@ -1836,8 +2008,10 @@ export default {
 
             if (this.reorderableColumns && this.d_columnOrder) {
                 let orderedColumns = [];
+
                 for (let columnKey of this.d_columnOrder) {
                     let column = this.findColumnByKey(cols, columnKey);
+
                     if (column && !this.columnProp(column, 'hidden')) {
                         orderedColumns.push(column);
                     }
@@ -1850,6 +2024,7 @@ export default {
         },
         headerColumnGroup() {
             const children = this.getChildren();
+
             if (children) {
                 for (let child of children) {
                     if (child.type.name === 'ColumnGroup' && this.columnProp(child, 'type') === 'header') {
@@ -1862,6 +2037,7 @@ export default {
         },
         footerColumnGroup() {
             const children = this.getChildren();
+
             if (children) {
                 for (let child of children) {
                     if (child.type.name === 'ColumnGroup' && this.columnProp(child, 'type') === 'footer') {
@@ -1885,10 +2061,8 @@ export default {
                     }
 
                     if (this.sorted) {
-                        if(this.sortMode === 'single')
-                            data = this.sortSingle(data);
-                        else if(this.sortMode === 'multiple')
-                            data = this.sortMultiple(data);
+                        if (this.sortMode === 'single') data = this.sortSingle(data);
+                        else if (this.sortMode === 'multiple') data = this.sortMultiple(data);
                     }
                 }
             }
@@ -1898,15 +2072,16 @@ export default {
         totalRecordsLength() {
             if (this.lazy) {
                 return this.totalRecords;
-            }
-            else {
+            } else {
                 const data = this.processedData;
+
                 return data ? data.length : 0;
             }
         },
         empty() {
             const data = this.processedData;
-            return (!data || data.length === 0);
+
+            return !data || data.length === 0;
         },
         paginatorTop() {
             return this.paginator && (this.paginatorPosition !== 'bottom' || this.paginatorPosition === 'both');
@@ -1923,30 +2098,30 @@ export default {
         allRowsSelected() {
             if (this.selectAll !== null) {
                 return this.selectAll;
-            }
-            else {
+            } else {
                 const val = this.frozenValue ? [...this.frozenValue, ...this.processedData] : this.processedData;
-                return ObjectUtils.isNotEmpty(val) && this.selection && Array.isArray(this.selection) && val.every(v => this.selection.some(s => this.equals(s, v)));
+
+                return ObjectUtils.isNotEmpty(val) && this.selection && Array.isArray(this.selection) && val.every((v) => this.selection.some((s) => this.equals(s, v)));
             }
         },
         attributeSelector() {
             return UniqueComponentId();
         },
         groupRowSortField() {
-            return this.sortMode === 'single' ? this.sortField : (this.d_groupRowsSortMeta ? this.d_groupRowsSortMeta.field : null);
+            return this.sortMode === 'single' ? this.sortField : this.d_groupRowsSortMeta ? this.d_groupRowsSortMeta.field : null;
         },
         virtualScrollerDisabled() {
             return ObjectUtils.isEmpty(this.virtualScrollerOptions) || !this.scrollable;
         }
     },
     components: {
-        'DTPaginator': Paginator,
-        'DTTableHeader': TableHeader,
-        'DTTableBody': TableBody,
-        'DTTableFooter': TableFooter,
-        'DTVirtualScroller': VirtualScroller
+        DTPaginator: Paginator,
+        DTTableHeader: TableHeader,
+        DTTableBody: TableBody,
+        DTTableFooter: TableFooter,
+        DTVirtualScroller: VirtualScroller
     }
-}
+};
 </script>
 
 <style>
@@ -2047,8 +2222,7 @@ export default {
 .p-datatable-scrollable-both .p-datatable-thead > tr > th,
 .p-datatable-scrollable-both .p-datatable-tbody > tr > td,
 .p-datatable-scrollable-both .p-datatable-tfoot > tr > td,
-.p-datatable-scrollable-horizontal .p-datatable-thead > tr > th
-.p-datatable-scrollable-horizontal .p-datatable-tbody > tr > td,
+.p-datatable-scrollable-horizontal .p-datatable-thead > tr > th .p-datatable-scrollable-horizontal .p-datatable-tbody > tr > td,
 .p-datatable-scrollable-horizontal .p-datatable-tfoot > tr > td {
     flex: 1 0 auto;
 }
@@ -2120,10 +2294,10 @@ export default {
     top: 0;
     right: 0;
     margin: 0;
-    width: .5rem;
+    width: 0.5rem;
     height: 100%;
     padding: 0px;
-    cursor:col-resize;
+    cursor: col-resize;
     border: 1px solid transparent;
 }