primevue 3.7.2 → 3.9.0

package/datatable/datatable.js

@@ -348,7 +348,15 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
             hide() {
                 this.overlayVisible = false;
             },
-            onContentClick() {
+            onContentClick(event) {
+                this.selfClick = true;
+
+                OverlayEventBus__default['default'].emit('overlay-click', {
+                    originalEvent: event,
+                    target: this.overlay
+                });
+            },
+            onContentMouseDown() {
                 this.selfClick = true;
             },
             onOverlayEnter(el) {
@@ -362,7 +370,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 this.bindResizeListener();
 
                 this.overlayEventListener = (e) => {
-                    if (this.overlay.contains(e.target)) {
+                    if (!this.isOutsideClicked(e.target)) {
                         this.selfClick = true;
                     }
                 };
@@ -385,13 +393,16 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
             overlayRef(el) {
                 this.overlay = el;
             },
-            isTargetClicked(event) {
-                return this.$refs.icon && (this.$refs.icon === event.target || this.$refs.icon.contains(event.target));
+            isOutsideClicked(target) {
+                return !this.isTargetClicked(target) && this.overlay && !(this.overlay.isSameNode(target) || this.overlay.contains(target));
+            },
+            isTargetClicked(target) {
+                return this.$refs.icon && (this.$refs.icon.isSameNode(target) || this.$refs.icon.contains(target));
             },
             bindOutsideClickListener() {
                 if (!this.outsideClickListener) {
                     this.outsideClickListener = (event) => {
-                        if (this.overlayVisible && !this.selfClick && !this.isTargetClicked(event)) {
+                        if (this.overlayVisible && !this.selfClick && this.isOutsideClicked(event.target)) {
                             this.overlayVisible = false;
                         }
                         this.selfClick = false;
@@ -524,7 +535,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
       key: 0,
       class: "p-column-filter-operator"
     };
-    const _hoisted_7$1 = { class: "p-column-filter-constraints" };
+    const _hoisted_7 = { class: "p-column-filter-constraints" };
     const _hoisted_8 = {
       key: 1,
       class: "p-column-filter-add-rule"
@@ -583,7 +594,8 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                     ref: $options.overlayRef,
                     class: $options.overlayClass,
                     onKeydown: _cache[12] || (_cache[12] = vue.withKeys((...args) => ($options.onEscape && $options.onEscape(...args)), ["escape"])),
-                    onClick: _cache[13] || (_cache[13] = (...args) => ($options.onContentClick && $options.onContentClick(...args)))
+                    onClick: _cache[13] || (_cache[13] = (...args) => ($options.onContentClick && $options.onContentClick(...args))),
+                    onMousedown: _cache[14] || (_cache[14] = (...args) => ($options.onContentMouseDown && $options.onContentMouseDown(...args)))
                   }, [
                     (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterHeaderTemplate), {
                       field: $props.field,
@@ -627,7 +639,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                                 }, null, 8, ["options", "modelValue"])
                               ]))
                             : vue.createCommentVNode("", true),
-                          vue.createVNode("div", _hoisted_7$1, [
+                          vue.createVNode("div", _hoisted_7, [
                             (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList($options.fieldConstraints, (fieldConstraint, i) => {
                               return (vue.openBlock(), vue.createBlock("div", {
                                 key: i,
@@ -809,7 +821,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
         },
         methods: {
             columnProp(prop) {
-                return this.column.props ? ((this.column.type.props[prop].type === Boolean && this.column.props[prop] === '') ? true : this.column.props[prop]) : null;
+                return utils.ObjectUtils.getVNodeProp(this.column, prop);
             },
             onClick(event) {
                 this.$emit('column-click', {originalEvent: event, column: this.column});
@@ -1115,7 +1127,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
         },
         methods: {
             columnProp(col, prop) {
-                return col.props ? ((col.type.props[prop].type === Boolean && col.props[prop] === '') ? true : col.props[prop]) : null;
+                return utils.ObjectUtils.getVNodeProp(col, prop);
             },
             getFilterColumnHeaderClass(column) {
                 return ['p-filter-column', this.columnProp(column, 'filterHeaderClass'), this.columnProp(column, 'class'), {
@@ -1124,6 +1136,20 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
             },
             getFilterColumnHeaderStyle(column) {
                 return [this.columnProp(column, 'filterHeaderStyle'), this.columnProp(column, 'style')];
+            },
+            getHeaderColumns(row){
+                let cols = [];
+
+                if (row.children && row.children.default) {
+                    row.children.default().forEach(child => {
+                        if (child.children && child.children instanceof Array)
+                            cols = [...cols, ...child.children];
+                        else if (child.type.name === 'Column')
+                            cols.push(child);
+                    });
+
+                    return cols;
+                }
             }
         },
         components: {
@@ -1256,7 +1282,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 key: i,
                 role: "row"
               }, [
-                (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(row.children.default(), (col, j) => {
+                (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList($options.getHeaderColumns(row), (col, j) => {
                   return (vue.openBlock(), vue.createBlock(vue.Fragment, {
                     key: $options.columnProp(col, 'columnKey')||$options.columnProp(col, 'field')||j
                   }, [
@@ -1411,8 +1437,8 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
 
     var script$4 = {
         name: 'BodyCell',
-        emits: ['cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel', 'row-edit-init', 'row-edit-save', 'row-edit-cancel', 'editing-cell-change',
-                'row-toggle', 'radio-change', 'checkbox-change'],
+        emits: ['cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel', 'row-edit-init', 'row-edit-save', 'row-edit-cancel',
+                'row-toggle', 'radio-change', 'checkbox-change', 'editing-meta-change'],
         props: {
             rowData: {
                 type: Object,
@@ -1446,6 +1472,10 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 type: Boolean,
                 default: false
             },
+            editingMeta: {
+                type: Object,
+                default: null
+            },
             editMode: {
                 type: String,
                 default: null
@@ -1467,6 +1497,9 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
         watch: {
             editing(newValue) {
                 this.d_editing = newValue;
+            },
+            '$data.d_editing': function(newValue) {
+                this.$emit('editing-meta-change', {data: this.rowData, field: (this.field || `field_${this.index}`), index: this.rowIndex, editing: newValue});
             }
         },
         mounted() {
@@ -1478,6 +1511,11 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
             if (this.columnProp('frozen')) {
                 this.updateStickyPosition();
             }
+
+            if (this.d_editing && (this.editMode === 'cell' || (this.editMode === 'row' && this.columnProp('rowEditor')))) {
+                const focusableEl = utils.DomHandler.getFirstFocusableElement(this.$el);
+                focusableEl && focusableEl.focus();
+            }
         },
         beforeUnmount() {
             if (this.overlayEventListener) {
@@ -1487,10 +1525,10 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
         },
         methods: {
             columnProp(prop) {
-                return this.column.props ? ((this.column.type.props[prop].type === Boolean && this.column.props[prop] === '') ? true : this.column.props[prop]) : null;
+                return utils.ObjectUtils.getVNodeProp(this.column, prop);
             },
             resolveFieldData() {
-                return utils.ObjectUtils.resolveFieldData(this.rowData, this.columnProp('field'));
+                return utils.ObjectUtils.resolveFieldData(this.rowData, this.field);
             },
             toggleRow(event) {
                 this.$emit('row-toggle', {
@@ -1529,7 +1567,6 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
             switchCellToViewMode() {
                 this.d_editing = false;
                 this.unbindDocumentEditListener();
-                this.$emit('editing-cell-change', {rowIndex: this.rowIndex, cellIndex: this.index, editing: false});
                 OverlayEventBus__default['default'].off('overlay-click', this.overlayEventListener);
                 this.overlayEventListener = null;
             },
@@ -1540,8 +1577,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                     if (!this.d_editing) {
                         this.d_editing = true;
                         this.bindDocumentEditListener();
-                        this.$emit('cell-edit-init', {originalEvent: event, data: this.rowData, field: this.columnProp('field'), index: this.rowIndex});
-                        this.$emit('editing-cell-change', {rowIndex: this.rowIndex, cellIndex: this.index, editing: true});
+                        this.$emit('cell-edit-init', {originalEvent: event, data: this.rowData, field: this.field, index: this.rowIndex});
 
                         this.overlayEventListener = (e) => {
                             if (this.$el && this.$el.contains(e.target)) {
@@ -1553,10 +1589,13 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 }
             },
             completeEdit(event, type) {
-                let completeEvent = {
+                const completeEvent = {
                     originalEvent: event,
                     data: this.rowData,
-                    field: this.columnProp('field'),
+                    newData: this.editingRowData,
+                    value: this.rowData[this.field],
+                    newValue: this.editingRowData[this.field],
+                    field: this.field,
                     index: this.rowIndex,
                     type: type,
                     defaultPrevented: false,
@@ -1580,7 +1619,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
 
                         case 27:
                             this.switchCellToViewMode();
-                            this.$emit('cell-edit-cancel', {originalEvent: event, data: this.rowData, field: this.columnProp('field'), index: this.rowIndex});
+                            this.$emit('cell-edit-cancel', {originalEvent: event, data: this.rowData, field: this.field, index: this.rowIndex});
                         break;
 
                         case 9:
@@ -1669,13 +1708,13 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 return (utils.DomHandler.find(this.$el, '.p-invalid').length === 0);
             },
             onRowEditInit(event) {
-                this.$emit('row-edit-init', {originalEvent: event, data: this.rowData, field: this.columnProp('field'), index: this.rowIndex});
+                this.$emit('row-edit-init', {originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex});
             },
             onRowEditSave(event) {
-                this.$emit('row-edit-save', {originalEvent: event, data: this.rowData, field: this.columnProp('field'), index: this.rowIndex});
+                this.$emit('row-edit-save', {originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex});
             },
             onRowEditCancel(event) {
-                this.$emit('row-edit-cancel', {originalEvent: event, data: this.rowData, field: this.columnProp('field'), index: this.rowIndex});
+                this.$emit('row-edit-cancel', {originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex});
             },
             updateStickyPosition() {
                 if (this.columnProp('frozen')) {
@@ -1700,6 +1739,12 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
             }
         },
         computed: {
+            editingRowData() {
+                return this.editingMeta[this.rowIndex] ? this.editingMeta[this.rowIndex].data : this.rowData;
+            },
+            field() {
+                return this.columnProp('field');
+            },
             containerClass() {
                 return [this.columnProp('bodyClass'), this.columnProp('class'), {
                     'p-selection-column': this.columnProp('selectionMode') != null,
@@ -1752,93 +1797,104 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
               key: 1,
               data: $props.rowData,
               column: $props.column,
+              field: $options.field,
               index: $props.rowIndex,
               frozenRow: $props.frozenRow
-            }, null, 8, ["data", "column", "index", "frozenRow"]))
+            }, null, 8, ["data", "column", "field", "index", "frozenRow"]))
           : ($props.column.children && $props.column.children.editor && $data.d_editing)
             ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children.editor), {
                 key: 2,
-                data: $props.rowData,
+                data: $options.editingRowData,
                 column: $props.column,
+                field: $options.field,
                 index: $props.rowIndex,
                 frozenRow: $props.frozenRow
-              }, null, 8, ["data", "column", "index", "frozenRow"]))
-            : ($options.columnProp('selectionMode'))
-              ? (vue.openBlock(), vue.createBlock(vue.Fragment, { key: 3 }, [
-                  ($props.column.props.selectionMode === 'single')
-                    ? (vue.openBlock(), vue.createBlock(_component_DTRadioButton, {
-                        key: 0,
-                        value: $props.rowData,
-                        checked: $props.selected,
-                        onChange: $options.toggleRowWithRadio
-                      }, null, 8, ["value", "checked", "onChange"]))
-                    : ($props.column.props.selectionMode ==='multiple')
-                      ? (vue.openBlock(), vue.createBlock(_component_DTCheckbox, {
-                          key: 1,
+              }, null, 8, ["data", "column", "field", "index", "frozenRow"]))
+            : ($props.column.children && $props.column.children.body && !$props.column.children.editor && $data.d_editing)
+              ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children.body), {
+                  key: 3,
+                  data: $options.editingRowData,
+                  column: $props.column,
+                  field: $options.field,
+                  index: $props.rowIndex,
+                  frozenRow: $props.frozenRow
+                }, null, 8, ["data", "column", "field", "index", "frozenRow"]))
+              : ($options.columnProp('selectionMode'))
+                ? (vue.openBlock(), vue.createBlock(vue.Fragment, { key: 4 }, [
+                    ($options.columnProp('selectionMode') === 'single')
+                      ? (vue.openBlock(), vue.createBlock(_component_DTRadioButton, {
+                          key: 0,
                           value: $props.rowData,
                           checked: $props.selected,
-                          onChange: $options.toggleRowWithCheckbox
+                          onChange: $options.toggleRowWithRadio
                         }, null, 8, ["value", "checked", "onChange"]))
-                      : vue.createCommentVNode("", true)
-                ], 64))
-              : ($options.columnProp('rowReorder'))
-                ? (vue.openBlock(), vue.createBlock("i", {
-                    key: 4,
-                    class: ['p-datatable-reorderablerow-handle', ($options.columnProp('rowReorderIcon') || 'pi pi-bars')]
-                  }, null, 2))
-                : ($options.columnProp('expander'))
-                  ? vue.withDirectives((vue.openBlock(), vue.createBlock("button", {
+                      : ($options.columnProp('selectionMode') ==='multiple')
+                        ? (vue.openBlock(), vue.createBlock(_component_DTCheckbox, {
+                            key: 1,
+                            value: $props.rowData,
+                            checked: $props.selected,
+                            onChange: $options.toggleRowWithCheckbox
+                          }, null, 8, ["value", "checked", "onChange"]))
+                        : vue.createCommentVNode("", true)
+                  ], 64))
+                : ($options.columnProp('rowReorder'))
+                  ? (vue.openBlock(), vue.createBlock("i", {
                       key: 5,
-                      class: "p-row-toggler p-link",
-                      onClick: _cache[1] || (_cache[1] = (...args) => ($options.toggleRow && $options.toggleRow(...args))),
-                      type: "button"
-                    }, [
-                      vue.createVNode("span", { class: $props.rowTogglerIcon }, null, 2)
-                    ], 512)), [
-                      [_directive_ripple]
-                    ])
-                  : ($props.editMode === 'row' && $options.columnProp('rowEditor'))
-                    ? (vue.openBlock(), vue.createBlock(vue.Fragment, { key: 6 }, [
-                        (!$data.d_editing)
-                          ? vue.withDirectives((vue.openBlock(), vue.createBlock("button", {
-                              key: 0,
-                              class: "p-row-editor-init p-link",
-                              onClick: _cache[2] || (_cache[2] = (...args) => ($options.onRowEditInit && $options.onRowEditInit(...args))),
-                              type: "button"
-                            }, [
-                              _hoisted_2$3
-                            ], 512)), [
-                              [_directive_ripple]
-                            ])
-                          : vue.createCommentVNode("", true),
-                        ($data.d_editing)
-                          ? vue.withDirectives((vue.openBlock(), vue.createBlock("button", {
-                              key: 1,
-                              class: "p-row-editor-save p-link",
-                              onClick: _cache[3] || (_cache[3] = (...args) => ($options.onRowEditSave && $options.onRowEditSave(...args))),
-                              type: "button"
-                            }, [
-                              _hoisted_3$1
-                            ], 512)), [
-                              [_directive_ripple]
-                            ])
-                          : vue.createCommentVNode("", true),
-                        ($data.d_editing)
-                          ? vue.withDirectives((vue.openBlock(), vue.createBlock("button", {
-                              key: 2,
-                              class: "p-row-editor-cancel p-link",
-                              onClick: _cache[4] || (_cache[4] = (...args) => ($options.onRowEditCancel && $options.onRowEditCancel(...args))),
-                              type: "button"
-                            }, [
-                              _hoisted_4$1
-                            ], 512)), [
-                              [_directive_ripple]
-                            ])
-                          : vue.createCommentVNode("", true)
-                      ], 64))
-                    : (vue.openBlock(), vue.createBlock(vue.Fragment, { key: 7 }, [
-                        vue.createTextVNode(vue.toDisplayString($options.resolveFieldData()), 1)
-                      ], 64))
+                      class: ['p-datatable-reorderablerow-handle', ($options.columnProp('rowReorderIcon') || 'pi pi-bars')]
+                    }, null, 2))
+                  : ($options.columnProp('expander'))
+                    ? vue.withDirectives((vue.openBlock(), vue.createBlock("button", {
+                        key: 6,
+                        class: "p-row-toggler p-link",
+                        onClick: _cache[1] || (_cache[1] = (...args) => ($options.toggleRow && $options.toggleRow(...args))),
+                        type: "button"
+                      }, [
+                        vue.createVNode("span", { class: $props.rowTogglerIcon }, null, 2)
+                      ], 512)), [
+                        [_directive_ripple]
+                      ])
+                    : ($props.editMode === 'row' && $options.columnProp('rowEditor'))
+                      ? (vue.openBlock(), vue.createBlock(vue.Fragment, { key: 7 }, [
+                          (!$data.d_editing)
+                            ? vue.withDirectives((vue.openBlock(), vue.createBlock("button", {
+                                key: 0,
+                                class: "p-row-editor-init p-link",
+                                onClick: _cache[2] || (_cache[2] = (...args) => ($options.onRowEditInit && $options.onRowEditInit(...args))),
+                                type: "button"
+                              }, [
+                                _hoisted_2$3
+                              ], 512)), [
+                                [_directive_ripple]
+                              ])
+                            : vue.createCommentVNode("", true),
+                          ($data.d_editing)
+                            ? vue.withDirectives((vue.openBlock(), vue.createBlock("button", {
+                                key: 1,
+                                class: "p-row-editor-save p-link",
+                                onClick: _cache[3] || (_cache[3] = (...args) => ($options.onRowEditSave && $options.onRowEditSave(...args))),
+                                type: "button"
+                              }, [
+                                _hoisted_3$1
+                              ], 512)), [
+                                [_directive_ripple]
+                              ])
+                            : vue.createCommentVNode("", true),
+                          ($data.d_editing)
+                            ? vue.withDirectives((vue.openBlock(), vue.createBlock("button", {
+                                key: 2,
+                                class: "p-row-editor-cancel p-link",
+                                onClick: _cache[4] || (_cache[4] = (...args) => ($options.onRowEditCancel && $options.onRowEditCancel(...args))),
+                                type: "button"
+                              }, [
+                                _hoisted_4$1
+                              ], 512)), [
+                                [_directive_ripple]
+                              ])
+                            : vue.createCommentVNode("", true)
+                        ], 64))
+                      : (vue.openBlock(), vue.createBlock(vue.Fragment, { key: 8 }, [
+                          vue.createTextVNode(vue.toDisplayString($options.resolveFieldData()), 1)
+                        ], 64))
       ], 38))
     }
 
@@ -1849,7 +1905,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
         emits: ['rowgroup-toggle', 'row-click', 'row-dblclick', 'row-rightclick', 'row-touchend', 'row-keydown', 'row-mousedown',
             'row-dragstart', 'row-dragover', 'row-dragleave', 'row-dragend', 'row-drop', 'row-toggle',
             'radio-change', 'checkbox-change', 'cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel',
-            'row-edit-init', 'row-edit-save', 'row-edit-cancel', 'editing-cell-change'],
+            'row-edit-init', 'row-edit-save', 'row-edit-cancel', 'editing-meta-change'],
         props: {
             value: {
                 type: Array,
@@ -1927,6 +1983,10 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 type: null,
                 default: null
             },
+            rowStyle: {
+                type: null,
+                default: null
+            },
             editMode: {
                 type: String,
                 default: null
@@ -1943,6 +2003,10 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 type: null,
                 default: null
             },
+            editingMeta: {
+                type: Object,
+                default: null
+            },
             loading: {
                 type: Boolean,
                 default: false
@@ -1985,7 +2049,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
         },
         methods: {
             columnProp(col, prop) {
-                return col.props ? ((col.type.props[prop].type === Boolean && col.props[prop] === '') ? true : col.props[prop]) : null;
+                return utils.ObjectUtils.getVNodeProp(col, prop);
             },
             shouldRenderRowGroupHeader(value, rowData, i) {
                 let currentRowFieldData = utils.ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
@@ -2244,8 +2308,8 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
             onRowEditCancel(event) {
                 this.$emit('row-edit-cancel', event);
             },
-            onEditingCellChange(event) {
-                this.$emit('editing-cell-change', event);
+            onEditingMetaChange(event) {
+                this.$emit('editing-meta-change', event);
             },
             updateFrozenRowStickyPosition() {
                 this.$el.style.top = utils.DomHandler.getOuterHeight(this.$el.previousElementSibling) + 'px';
@@ -2323,19 +2387,20 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 ($props.expandableRowGroups ? $options.isRowGroupExpanded(rowData): true)
                   ? (vue.openBlock(), vue.createBlock("tr", {
                       class: $options.getRowClass(rowData),
+                      style: $props.rowStyle,
                       key: $options.getRowKey(rowData, index),
                       onClick: $event => ($options.onRowClick($event, rowData, index)),
                       onDblclick: $event => ($options.onRowDblClick($event, rowData, index)),
                       onContextmenu: $event => ($options.onRowRightClick($event, rowData, index)),
-                      onTouchend: _cache[11] || (_cache[11] = $event => ($options.onRowTouchEnd($event))),
+                      onTouchend: _cache[10] || (_cache[10] = $event => ($options.onRowTouchEnd($event))),
                       onKeydown: $event => ($options.onRowKeyDown($event, rowData, index)),
                       tabindex: $props.selectionMode || $props.contextMenu ? '0' : null,
-                      onMousedown: _cache[12] || (_cache[12] = $event => ($options.onRowMouseDown($event))),
+                      onMousedown: _cache[11] || (_cache[11] = $event => ($options.onRowMouseDown($event))),
                       onDragstart: $event => ($options.onRowDragStart($event, index)),
                       onDragover: $event => ($options.onRowDragOver($event,index)),
-                      onDragleave: _cache[13] || (_cache[13] = $event => ($options.onRowDragLeave($event))),
-                      onDragend: _cache[14] || (_cache[14] = $event => ($options.onRowDragEnd($event))),
-                      onDrop: _cache[15] || (_cache[15] = $event => ($options.onRowDrop($event))),
+                      onDragleave: _cache[12] || (_cache[12] = $event => ($options.onRowDragLeave($event))),
+                      onDragend: _cache[13] || (_cache[13] = $event => ($options.onRowDragEnd($event))),
+                      onDrop: _cache[14] || (_cache[14] = $event => ($options.onRowDrop($event))),
                       role: "row"
                     }, [
                       (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList($props.columns, (col, i) => {
@@ -2365,12 +2430,13 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                                 onRowEditInit: _cache[7] || (_cache[7] = $event => ($options.onRowEditInit($event))),
                                 onRowEditSave: _cache[8] || (_cache[8] = $event => ($options.onRowEditSave($event))),
                                 onRowEditCancel: _cache[9] || (_cache[9] = $event => ($options.onRowEditCancel($event))),
-                                onEditingCellChange: _cache[10] || (_cache[10] = $event => ($options.onEditingCellChange($event)))
-                              }, null, 8, ["rowData", "column", "rowIndex", "index", "selected", "rowTogglerIcon", "frozenRow", "rowspan", "editMode", "editing", "responsiveLayout"]))
+                                editingMeta: $props.editingMeta,
+                                onEditingMetaChange: $options.onEditingMetaChange
+                              }, null, 8, ["rowData", "column", "rowIndex", "index", "selected", "rowTogglerIcon", "frozenRow", "rowspan", "editMode", "editing", "responsiveLayout", "editingMeta", "onEditingMetaChange"]))
                             : vue.createCommentVNode("", true)
                         ], 64))
                       }), 128))
-                    ], 42, ["onClick", "onDblclick", "onContextmenu", "onKeydown", "tabindex", "onDragstart", "onDragover"]))
+                    ], 46, ["onClick", "onDblclick", "onContextmenu", "onKeydown", "tabindex", "onDragstart", "onDragover"]))
                   : vue.createCommentVNode("", true),
                 ($props.templates['expansion'] && $props.expandedRows && $options.isRowExpanded(rowData))
                   ? (vue.openBlock(), vue.createBlock("tr", {
@@ -2440,7 +2506,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
         },
         methods: {
             columnProp(prop) {
-                return this.column.props ? ((this.column.type.props[prop].type === Boolean && this.column.props[prop] === '') ? true : this.column.props[prop]) : null;
+                return utils.ObjectUtils.getVNodeProp(this.column, prop);
             },
             updateStickyPosition() {
                 if (this.columnProp('frozen')) {
@@ -2513,7 +2579,21 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
         },
         methods: {
             columnProp(col, prop) {
-                return col.props ? ((col.type.props[prop].type === Boolean && col.props[prop] === '') ? true : col.props[prop]) : null;
+                return utils.ObjectUtils.getVNodeProp(col, prop);
+            },
+            getFooterColumns(row){
+                let cols = [];
+
+                if (row.children && row.children.default) {
+                    row.children.default().forEach(child => {
+                        if (child.children && child.children instanceof Array)
+                            cols = [...cols, ...child.children];
+                        else if (child.type.name === 'Column')
+                            cols.push(child);
+                    });
+
+                    return cols;
+                }
             }
         },
         computed: {
@@ -2575,7 +2655,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                     key: i,
                     role: "row"
                   }, [
-                    (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(row.children.default(), (col, j) => {
+                    (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList($options.getFooterColumns(row), (col, j) => {
                       return (vue.openBlock(), vue.createBlock(vue.Fragment, {
                         key: $options.columnProp(col,'columnKey')||$options.columnProp(col,'field')||j
                       }, [
@@ -2601,7 +2681,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
             'update:selection', 'row-select', 'row-unselect', 'update:contextMenuSelection', 'row-contextmenu', 'row-unselect-all', 'row-select-all',
             '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', 'editing-cell-change'],
+            'cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel', 'update:editingRows', 'row-edit-init', 'row-edit-save', 'row-edit-cancel'],
         props: {
             value: {
                 type: Array,
@@ -2807,6 +2887,10 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 type: null,
                 default: null
             },
+            rowStyle: {
+                type: null,
+                default: null
+            },
             scrollable: {
                 type: Boolean,
                 default: false
@@ -2838,6 +2922,14 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
             stripedRows: {
                 type: Boolean,
                 default: false
+            },
+            tableStyle: {
+                type: null,
+                default: null
+            },
+            tableClass: {
+                type: String,
+                default: null
             }
         },
         data() {
@@ -2852,8 +2944,8 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 d_expandedRowKeys: null,
                 d_columnOrder: null,
                 d_editingRowKeys: null,
-                d_filters: this.cloneFilters(this.filters),
-                d_editingCells: []
+                d_editingMeta: {},
+                d_filters: this.cloneFilters(this.filters)
             };
         },
         rowTouched: false,
@@ -2929,6 +3021,10 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
             if (this.isStateful() && this.resizableColumns) {
                 this.restoreColumnWidths();
             }
+
+            if (this.editMode === 'row' && this.dataKey && !this.d_editingRowKeys) {
+                this.updateEditingRowKeys(this.editingRows);
+            }
         },
         beforeUnmount() {
             this.unbindColumnResizeEvents();
@@ -2939,12 +3035,18 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
             if (this.isStateful()) {
                 this.saveState();
             }
+
+            if (this.editMode === 'row' && this.dataKey && !this.d_editingRowKeys) {
+                this.updateEditingRowKeys(this.editingRows);
+            }
         },
         methods: {
             columnProp(col, prop) {
-                return col.props ? ((col.type.props[prop].type === Boolean && col.props[prop] === '') ? true : col.props[prop]) : null;
+                return utils.ObjectUtils.getVNodeProp(col, prop);
             },
             onPage(event) {
+                this.clearEditingMetaData();
+
                 this.d_first = event.first;
                 this.d_rows = event.rows;
 
@@ -3004,6 +3106,8 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 }
             },
             sortSingle(value) {
+                this.clearEditingMetaData();
+
                 if (this.groupRowsBy && this.groupRowsBy === this.sortField) {
                     this.d_multiSortMeta = [
                         {field: this.sortField, order: this.sortOrder || this.defaultSortOrder},
@@ -3038,6 +3142,8 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 return data;
             },
             sortMultiple(value) {
+                this.clearEditingMetaData();
+
                 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);
@@ -3095,6 +3201,8 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                     return;
                 }
 
+                this.clearEditingMetaData();
+
                 let globalFilterFieldsArray;
                 if (this.filters['global']) {
                     globalFilterFieldsArray = this.globalFilterFields|| this.columns.map(col => this.columnProp(col, 'filterField') || this.columnProp(col, 'field'));
@@ -3185,7 +3293,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
 
                 if (this.selectionMode) {
                     const rowData = e.data;
-                    const rowIndex = e.index;
+                    const rowIndex = this.d_first + e.index;
 
                     if (this.isMultipleSelectionMode() && event.shiftKey && this.anchorRowIndex != null) {
                         utils.DomHandler.clearSelection();
@@ -4105,18 +4213,6 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
             onCellEditCancel(event) {
                 this.$emit('cell-edit-cancel', event);
             },
-            onEditingCellChange(event) {
-                let { rowIndex, cellIndex, editing } = event;
-                let _editingCells = [...this.d_editingCells];
-
-                if (editing)
-                    _editingCells.push({ rowIndex, cellIndex });
-                else
-                    _editingCells = _editingCells.filter(cell => !(cell.rowIndex === rowIndex && cell.cellIndex === cellIndex));
-
-                this.d_editingCells = _editingCells;
-                this.$emit('value-change', this.processedData);
-            },
             onRowEditInit(event) {
                 let _editingRows = this.editingRows ? [...this.editingRows] : [];
                 _editingRows.push(event.data);
@@ -4135,6 +4231,24 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 this.$emit('update:editingRows', _editingRows);
                 this.$emit('row-edit-cancel', event);
             },
+            onEditingMetaChange(event) {
+                let { data, field, index, editing } = event;
+                let meta = this.d_editingMeta[index];
+
+                if (editing) {
+                    !meta && (meta = this.d_editingMeta[index] = { data: { ...data }, fields: [] });
+                    meta['fields'].push(field);
+                }
+                else if (meta) {
+                    const fields = meta['fields'].filter(f => f !== field);
+                    !fields.length ? (delete this.d_editingMeta[index]) : (meta['fields'] = fields);
+                }
+            },
+            clearEditingMetaData() {
+                if (this.editMode) {
+                    this.d_editingMeta = {};
+                }
+            },
             createLazyLoadEvent(event) {
                 return {
                     originalEvent: event,
@@ -4234,7 +4348,22 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                     document.head.removeChild(this.styleElement);
                     this.styleElement = null;
                 }
-            }
+            },
+            recursiveGetChildren(children, results) {
+                if (!results) {
+                    results = [];
+                }
+                if (children && children.length) {
+                    children.forEach((child) => {
+                        if (child.children instanceof Array) {
+                            results.concat(this.recursiveGetChildren(child.children, results));
+                        } else if (child.type.name == 'Column') {
+                            results.push(child);
+                        }
+                    });
+                }
+                return results;
+            },
         },
         computed: {
             containerClass() {
@@ -4259,19 +4388,13 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 ];
             },
             columns() {
-                let cols = [];
                 let children = this.getChildren();
 
                 if (!children) {
                     return;
                 }
 
-                children.forEach(child => {
-                    if (child.children && child.children instanceof Array)
-                        cols = [...cols, ...child.children];
-                    else if (child.type.name === 'Column')
-                        cols.push(child);
-                });
+                const cols = this.recursiveGetChildren(children, []);
 
                 if (this.reorderableColumns && this.d_columnOrder) {
                     let orderedColumns = [];
@@ -4314,24 +4437,21 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
             hasFilters() {
                 return this.filters && Object.keys(this.filters).length > 0 && this.filters.constructor === Object;
             },
-            hasEditingCell() {
-                return this.d_editingCells && this.d_editingCells.length !== 0;
-            },
             processedData() {
                 let data = this.value || [];
 
-                if (!this.lazy && !this.hasEditingCell) {
+                if (!this.lazy) {
                     if (data && data.length) {
+                        if (this.hasFilters) {
+                            data = this.filter(data);
+                        }
+
                         if (this.sorted) {
                             if(this.sortMode === 'single')
                                 data = this.sortSingle(data);
                             else if(this.sortMode === 'multiple')
                                 data = this.sortMultiple(data);
                         }
-
-                        if (this.hasFilters) {
-                            data = this.filter(data);
-                        }
                     }
                 }
 
@@ -4402,26 +4522,21 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
       class: "p-datatable-header"
     };
     const _hoisted_3 = {
-      ref: "table",
-      role: "table",
-      class: "p-datatable-table"
-    };
-    const _hoisted_4 = {
       key: 4,
       class: "p-datatable-footer"
     };
-    const _hoisted_5 = {
+    const _hoisted_4 = {
       ref: "resizeHelper",
       class: "p-column-resizer-helper",
       style: {"display":"none"}
     };
-    const _hoisted_6 = {
+    const _hoisted_5 = {
       key: 5,
       ref: "reorderIndicatorUp",
       class: "pi pi-arrow-down p-datatable-reorder-indicator-up",
       style: {"position":"absolute","display":"none"}
     };
-    const _hoisted_7 = {
+    const _hoisted_6 = {
       key: 6,
       ref: "reorderIndicatorDown",
       class: "pi pi-arrow-up p-datatable-reorder-indicator-down",
@@ -4453,7 +4568,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
           ? (vue.openBlock(), vue.createBlock(_component_DTPaginator, {
               key: 2,
               rows: $data.d_rows,
-              first: $data.d_first,
+              first: $props.lazy ? 0 : $data.d_first,
               totalRecords: $options.totalRecordsLength,
               pageLinkSize: $props.pageLinkSize,
               template: $props.paginatorTemplate,
@@ -4463,19 +4578,19 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
               onPage: _cache[1] || (_cache[1] = $event => ($options.onPage($event))),
               alwaysShow: $props.alwaysShowPaginator
             }, vue.createSlots({ _: 2 }, [
-              (_ctx.$slots.paginatorLeft)
+              (_ctx.$slots.paginatorstart)
                 ? {
-                    name: "left",
+                    name: "start",
                     fn: vue.withCtx(() => [
-                      vue.renderSlot(_ctx.$slots, "paginatorLeft")
+                      vue.renderSlot(_ctx.$slots, "paginatorstart")
                     ])
                   }
                 : undefined,
-              (_ctx.$slots.paginatorRight)
+              (_ctx.$slots.paginatorend)
                 ? {
-                    name: "right",
+                    name: "end",
                     fn: vue.withCtx(() => [
-                      vue.renderSlot(_ctx.$slots, "paginatorRight")
+                      vue.renderSlot(_ctx.$slots, "paginatorend")
                     ])
                   }
                 : undefined
@@ -4485,7 +4600,12 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
           class: "p-datatable-wrapper",
           style: {maxHeight: $props.scrollHeight}
         }, [
-          vue.createVNode("table", _hoisted_3, [
+          vue.createVNode("table", {
+            ref: "table",
+            role: "table",
+            class: [$props.tableClass, 'p-datatable-table'],
+            style: $props.tableStyle
+          }, [
             vue.createVNode(_component_DTTableHeader, {
               columnGroup: $options.headerColumnGroup,
               columns: $options.columns,
@@ -4530,6 +4650,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                   groupRowsBy: $props.groupRowsBy,
                   expandableRowGroups: $props.expandableRowGroups,
                   rowClass: $props.rowClass,
+                  rowStyle: $props.rowStyle,
                   editMode: $props.editMode,
                   compareSelectionBy: $props.compareSelectionBy,
                   scrollable: $props.scrollable,
@@ -4564,8 +4685,9 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                   onRowEditInit: _cache[24] || (_cache[24] = $event => ($options.onRowEditInit($event))),
                   onRowEditSave: _cache[25] || (_cache[25] = $event => ($options.onRowEditSave($event))),
                   onRowEditCancel: _cache[26] || (_cache[26] = $event => ($options.onRowEditCancel($event))),
-                  onEditingCellChange: _cache[27] || (_cache[27] = $event => ($options.onEditingCellChange($event)))
-                }, null, 8, ["value", "columns", "dataKey", "selection", "selectionKeys", "selectionMode", "contextMenu", "contextMenuSelection", "rowGroupMode", "groupRowsBy", "expandableRowGroups", "rowClass", "editMode", "compareSelectionBy", "scrollable", "expandedRowIcon", "collapsedRowIcon", "expandedRows", "expandedRowKeys", "expandedRowGroups", "editingRows", "editingRowKeys", "templates", "loading", "responsiveLayout", "onRowgroupToggle", "onRowTouchend", "onRowKeydown", "onRowMousedown"]))
+                  editingMeta: $data.d_editingMeta,
+                  onEditingMetaChange: $options.onEditingMetaChange
+                }, null, 8, ["value", "columns", "dataKey", "selection", "selectionKeys", "selectionMode", "contextMenu", "contextMenuSelection", "rowGroupMode", "groupRowsBy", "expandableRowGroups", "rowClass", "rowStyle", "editMode", "compareSelectionBy", "scrollable", "expandedRowIcon", "collapsedRowIcon", "expandedRows", "expandedRowKeys", "expandedRowGroups", "editingRows", "editingRowKeys", "templates", "loading", "responsiveLayout", "onRowgroupToggle", "onRowTouchend", "onRowKeydown", "onRowMousedown", "editingMeta", "onEditingMetaChange"]))
               : vue.createCommentVNode("", true),
             vue.createVNode(_component_DTTableBody, {
               value: $options.dataToRender,
@@ -4581,6 +4703,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
               groupRowsBy: $props.groupRowsBy,
               expandableRowGroups: $props.expandableRowGroups,
               rowClass: $props.rowClass,
+              rowStyle: $props.rowStyle,
               editMode: $props.editMode,
               compareSelectionBy: $props.compareSelectionBy,
               scrollable: $props.scrollable,
@@ -4595,77 +4718,78 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
               loading: $props.loading,
               responsiveLayout: $props.responsiveLayout,
               onRowgroupToggle: $options.toggleRowGroup,
-              onRowClick: _cache[28] || (_cache[28] = $event => ($options.onRowClick($event))),
-              onRowDblclick: _cache[29] || (_cache[29] = $event => ($options.onRowDblClick($event))),
-              onRowRightclick: _cache[30] || (_cache[30] = $event => ($options.onRowRightClick($event))),
+              onRowClick: _cache[27] || (_cache[27] = $event => ($options.onRowClick($event))),
+              onRowDblclick: _cache[28] || (_cache[28] = $event => ($options.onRowDblClick($event))),
+              onRowRightclick: _cache[29] || (_cache[29] = $event => ($options.onRowRightClick($event))),
               onRowTouchend: $options.onRowTouchEnd,
               onRowKeydown: $options.onRowKeyDown,
               onRowMousedown: $options.onRowMouseDown,
-              onRowDragstart: _cache[31] || (_cache[31] = $event => ($options.onRowDragStart($event))),
-              onRowDragover: _cache[32] || (_cache[32] = $event => ($options.onRowDragOver($event))),
-              onRowDragleave: _cache[33] || (_cache[33] = $event => ($options.onRowDragLeave($event))),
-              onRowDragend: _cache[34] || (_cache[34] = $event => ($options.onRowDragEnd($event))),
-              onRowDrop: _cache[35] || (_cache[35] = $event => ($options.onRowDrop($event))),
-              onRowToggle: _cache[36] || (_cache[36] = $event => ($options.toggleRow($event))),
-              onRadioChange: _cache[37] || (_cache[37] = $event => ($options.toggleRowWithRadio($event))),
-              onCheckboxChange: _cache[38] || (_cache[38] = $event => ($options.toggleRowWithCheckbox($event))),
-              onCellEditInit: _cache[39] || (_cache[39] = $event => ($options.onCellEditInit($event))),
-              onCellEditComplete: _cache[40] || (_cache[40] = $event => ($options.onCellEditComplete($event))),
-              onCellEditCancel: _cache[41] || (_cache[41] = $event => ($options.onCellEditCancel($event))),
-              onRowEditInit: _cache[42] || (_cache[42] = $event => ($options.onRowEditInit($event))),
-              onRowEditSave: _cache[43] || (_cache[43] = $event => ($options.onRowEditSave($event))),
-              onRowEditCancel: _cache[44] || (_cache[44] = $event => ($options.onRowEditCancel($event))),
-              onEditingCellChange: _cache[45] || (_cache[45] = $event => ($options.onEditingCellChange($event)))
-            }, null, 8, ["value", "columns", "empty", "dataKey", "selection", "selectionKeys", "selectionMode", "contextMenu", "contextMenuSelection", "rowGroupMode", "groupRowsBy", "expandableRowGroups", "rowClass", "editMode", "compareSelectionBy", "scrollable", "expandedRowIcon", "collapsedRowIcon", "expandedRows", "expandedRowKeys", "expandedRowGroups", "editingRows", "editingRowKeys", "templates", "loading", "responsiveLayout", "onRowgroupToggle", "onRowTouchend", "onRowKeydown", "onRowMousedown"]),
+              onRowDragstart: _cache[30] || (_cache[30] = $event => ($options.onRowDragStart($event))),
+              onRowDragover: _cache[31] || (_cache[31] = $event => ($options.onRowDragOver($event))),
+              onRowDragleave: _cache[32] || (_cache[32] = $event => ($options.onRowDragLeave($event))),
+              onRowDragend: _cache[33] || (_cache[33] = $event => ($options.onRowDragEnd($event))),
+              onRowDrop: _cache[34] || (_cache[34] = $event => ($options.onRowDrop($event))),
+              onRowToggle: _cache[35] || (_cache[35] = $event => ($options.toggleRow($event))),
+              onRadioChange: _cache[36] || (_cache[36] = $event => ($options.toggleRowWithRadio($event))),
+              onCheckboxChange: _cache[37] || (_cache[37] = $event => ($options.toggleRowWithCheckbox($event))),
+              onCellEditInit: _cache[38] || (_cache[38] = $event => ($options.onCellEditInit($event))),
+              onCellEditComplete: _cache[39] || (_cache[39] = $event => ($options.onCellEditComplete($event))),
+              onCellEditCancel: _cache[40] || (_cache[40] = $event => ($options.onCellEditCancel($event))),
+              onRowEditInit: _cache[41] || (_cache[41] = $event => ($options.onRowEditInit($event))),
+              onRowEditSave: _cache[42] || (_cache[42] = $event => ($options.onRowEditSave($event))),
+              onRowEditCancel: _cache[43] || (_cache[43] = $event => ($options.onRowEditCancel($event))),
+              editingMeta: $data.d_editingMeta,
+              onEditingMetaChange: $options.onEditingMetaChange
+            }, null, 8, ["value", "columns", "empty", "dataKey", "selection", "selectionKeys", "selectionMode", "contextMenu", "contextMenuSelection", "rowGroupMode", "groupRowsBy", "expandableRowGroups", "rowClass", "rowStyle", "editMode", "compareSelectionBy", "scrollable", "expandedRowIcon", "collapsedRowIcon", "expandedRows", "expandedRowKeys", "expandedRowGroups", "editingRows", "editingRowKeys", "templates", "loading", "responsiveLayout", "onRowgroupToggle", "onRowTouchend", "onRowKeydown", "onRowMousedown", "editingMeta", "onEditingMetaChange"]),
             vue.createVNode(_component_DTTableFooter, {
               columnGroup: $options.footerColumnGroup,
               columns: $options.columns
             }, null, 8, ["columnGroup", "columns"])
-          ], 512)
+          ], 6)
         ], 4),
         ($options.paginatorBottom)
           ? (vue.openBlock(), vue.createBlock(_component_DTPaginator, {
               key: 3,
               rows: $data.d_rows,
-              first: $data.d_first,
+              first: $props.lazy ? 0 : $data.d_first,
               totalRecords: $options.totalRecordsLength,
               pageLinkSize: $props.pageLinkSize,
               template: $props.paginatorTemplate,
               rowsPerPageOptions: $props.rowsPerPageOptions,
               currentPageReportTemplate: $props.currentPageReportTemplate,
               class: "p-paginator-bottom",
-              onPage: _cache[46] || (_cache[46] = $event => ($options.onPage($event))),
+              onPage: _cache[44] || (_cache[44] = $event => ($options.onPage($event))),
               alwaysShow: $props.alwaysShowPaginator
             }, vue.createSlots({ _: 2 }, [
-              (_ctx.$slots.paginatorLeft)
+              (_ctx.$slots.paginatorstart)
                 ? {
-                    name: "left",
+                    name: "start",
                     fn: vue.withCtx(() => [
-                      vue.renderSlot(_ctx.$slots, "paginatorLeft")
+                      vue.renderSlot(_ctx.$slots, "paginatorstart")
                     ])
                   }
                 : undefined,
-              (_ctx.$slots.paginatorRight)
+              (_ctx.$slots.paginatorend)
                 ? {
-                    name: "right",
+                    name: "end",
                     fn: vue.withCtx(() => [
-                      vue.renderSlot(_ctx.$slots, "paginatorRight")
+                      vue.renderSlot(_ctx.$slots, "paginatorend")
                     ])
                   }
                 : undefined
             ]), 1032, ["rows", "first", "totalRecords", "pageLinkSize", "template", "rowsPerPageOptions", "currentPageReportTemplate", "alwaysShow"]))
           : vue.createCommentVNode("", true),
         (_ctx.$slots.footer)
-          ? (vue.openBlock(), vue.createBlock("div", _hoisted_4, [
+          ? (vue.openBlock(), vue.createBlock("div", _hoisted_3, [
               vue.renderSlot(_ctx.$slots, "footer")
             ]))
           : vue.createCommentVNode("", true),
-        vue.createVNode("div", _hoisted_5, null, 512),
+        vue.createVNode("div", _hoisted_4, null, 512),
         ($props.reorderableColumns)
-          ? (vue.openBlock(), vue.createBlock("span", _hoisted_6, null, 512))
+          ? (vue.openBlock(), vue.createBlock("span", _hoisted_5, null, 512))
           : vue.createCommentVNode("", true),
         ($props.reorderableColumns)
-          ? (vue.openBlock(), vue.createBlock("span", _hoisted_7, null, 512))
+          ? (vue.openBlock(), vue.createBlock("span", _hoisted_6, null, 512))
           : vue.createCommentVNode("", true)
       ], 2))
     }