primevue 3.7.2 → 3.9.0

package/datatable/datatable.esm.js

@@ -345,7 +345,15 @@ var script$9 = {
         hide() {
             this.overlayVisible = false;
         },
-        onContentClick() {
+        onContentClick(event) {
+            this.selfClick = true;
+
+            OverlayEventBus.emit('overlay-click', {
+                originalEvent: event,
+                target: this.overlay
+            });
+        },
+        onContentMouseDown() {
             this.selfClick = true;
         },
         onOverlayEnter(el) {
@@ -359,7 +367,7 @@ var script$9 = {
             this.bindResizeListener();
 
             this.overlayEventListener = (e) => {
-                if (this.overlay.contains(e.target)) {
+                if (!this.isOutsideClicked(e.target)) {
                     this.selfClick = true;
                 }
             };
@@ -382,13 +390,16 @@ var script$9 = {
         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;
@@ -521,7 +532,7 @@ const _hoisted_6$1 = {
   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"
@@ -580,7 +591,8 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
                 ref: $options.overlayRef,
                 class: $options.overlayClass,
                 onKeydown: _cache[12] || (_cache[12] = 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)))
               }, [
                 (openBlock(), createBlock(resolveDynamicComponent($props.filterHeaderTemplate), {
                   field: $props.field,
@@ -624,7 +636,7 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
                             }, null, 8, ["options", "modelValue"])
                           ]))
                         : createCommentVNode("", true),
-                      createVNode("div", _hoisted_7$1, [
+                      createVNode("div", _hoisted_7, [
                         (openBlock(true), createBlock(Fragment, null, renderList($options.fieldConstraints, (fieldConstraint, i) => {
                           return (openBlock(), createBlock("div", {
                             key: i,
@@ -806,7 +818,7 @@ var script$8 = {
     },
     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 ObjectUtils.getVNodeProp(this.column, prop);
         },
         onClick(event) {
             this.$emit('column-click', {originalEvent: event, column: this.column});
@@ -1112,7 +1124,7 @@ var script$7 = {
     },
     methods: {
         columnProp(col, prop) {
-            return col.props ? ((col.type.props[prop].type === Boolean && col.props[prop] === '') ? true : col.props[prop]) : null;
+            return ObjectUtils.getVNodeProp(col, prop);
         },
         getFilterColumnHeaderClass(column) {
             return ['p-filter-column', this.columnProp(column, 'filterHeaderClass'), this.columnProp(column, 'class'), {
@@ -1121,6 +1133,20 @@ var script$7 = {
         },
         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: {
@@ -1253,7 +1279,7 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
             key: i,
             role: "row"
           }, [
-            (openBlock(true), createBlock(Fragment, null, renderList(row.children.default(), (col, j) => {
+            (openBlock(true), createBlock(Fragment, null, renderList($options.getHeaderColumns(row), (col, j) => {
               return (openBlock(), createBlock(Fragment, {
                 key: $options.columnProp(col, 'columnKey')||$options.columnProp(col, 'field')||j
               }, [
@@ -1408,8 +1434,8 @@ script$5.render = render$5;
 
 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,
@@ -1443,6 +1469,10 @@ var script$4 = {
             type: Boolean,
             default: false
         },
+        editingMeta: {
+            type: Object,
+            default: null
+        },
         editMode: {
             type: String,
             default: null
@@ -1464,6 +1494,9 @@ var script$4 = {
     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() {
@@ -1475,6 +1508,11 @@ var script$4 = {
         if (this.columnProp('frozen')) {
             this.updateStickyPosition();
         }
+
+        if (this.d_editing && (this.editMode === 'cell' || (this.editMode === 'row' && this.columnProp('rowEditor')))) {
+            const focusableEl = DomHandler.getFirstFocusableElement(this.$el);
+            focusableEl && focusableEl.focus();
+        }
     },
     beforeUnmount() {
         if (this.overlayEventListener) {
@@ -1484,10 +1522,10 @@ var script$4 = {
     },
     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 ObjectUtils.getVNodeProp(this.column, prop);
         },
         resolveFieldData() {
-            return ObjectUtils.resolveFieldData(this.rowData, this.columnProp('field'));
+            return ObjectUtils.resolveFieldData(this.rowData, this.field);
         },
         toggleRow(event) {
             this.$emit('row-toggle', {
@@ -1526,7 +1564,6 @@ var script$4 = {
         switchCellToViewMode() {
             this.d_editing = false;
             this.unbindDocumentEditListener();
-            this.$emit('editing-cell-change', {rowIndex: this.rowIndex, cellIndex: this.index, editing: false});
             OverlayEventBus.off('overlay-click', this.overlayEventListener);
             this.overlayEventListener = null;
         },
@@ -1537,8 +1574,7 @@ var script$4 = {
                 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)) {
@@ -1550,10 +1586,13 @@ var script$4 = {
             }
         },
         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,
@@ -1577,7 +1616,7 @@ var script$4 = {
 
                     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:
@@ -1666,13 +1705,13 @@ var script$4 = {
             return (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')) {
@@ -1697,6 +1736,12 @@ var script$4 = {
         }
     },
     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,
@@ -1749,93 +1794,104 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
           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)
         ? (openBlock(), createBlock(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'))
-          ? (openBlock(), createBlock(Fragment, { key: 3 }, [
-              ($props.column.props.selectionMode === 'single')
-                ? (openBlock(), createBlock(_component_DTRadioButton, {
-                    key: 0,
-                    value: $props.rowData,
-                    checked: $props.selected,
-                    onChange: $options.toggleRowWithRadio
-                  }, null, 8, ["value", "checked", "onChange"]))
-                : ($props.column.props.selectionMode ==='multiple')
-                  ? (openBlock(), 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)
+          ? (openBlock(), createBlock(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'))
+            ? (openBlock(), createBlock(Fragment, { key: 4 }, [
+                ($options.columnProp('selectionMode') === 'single')
+                  ? (openBlock(), createBlock(_component_DTRadioButton, {
+                      key: 0,
                       value: $props.rowData,
                       checked: $props.selected,
-                      onChange: $options.toggleRowWithCheckbox
+                      onChange: $options.toggleRowWithRadio
                     }, null, 8, ["value", "checked", "onChange"]))
-                  : createCommentVNode("", true)
-            ], 64))
-          : ($options.columnProp('rowReorder'))
-            ? (openBlock(), createBlock("i", {
-                key: 4,
-                class: ['p-datatable-reorderablerow-handle', ($options.columnProp('rowReorderIcon') || 'pi pi-bars')]
-              }, null, 2))
-            : ($options.columnProp('expander'))
-              ? withDirectives((openBlock(), createBlock("button", {
+                  : ($options.columnProp('selectionMode') ==='multiple')
+                    ? (openBlock(), createBlock(_component_DTCheckbox, {
+                        key: 1,
+                        value: $props.rowData,
+                        checked: $props.selected,
+                        onChange: $options.toggleRowWithCheckbox
+                      }, null, 8, ["value", "checked", "onChange"]))
+                    : createCommentVNode("", true)
+              ], 64))
+            : ($options.columnProp('rowReorder'))
+              ? (openBlock(), createBlock("i", {
                   key: 5,
-                  class: "p-row-toggler p-link",
-                  onClick: _cache[1] || (_cache[1] = (...args) => ($options.toggleRow && $options.toggleRow(...args))),
-                  type: "button"
-                }, [
-                  createVNode("span", { class: $props.rowTogglerIcon }, null, 2)
-                ], 512)), [
-                  [_directive_ripple]
-                ])
-              : ($props.editMode === 'row' && $options.columnProp('rowEditor'))
-                ? (openBlock(), createBlock(Fragment, { key: 6 }, [
-                    (!$data.d_editing)
-                      ? withDirectives((openBlock(), 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]
-                        ])
-                      : createCommentVNode("", true),
-                    ($data.d_editing)
-                      ? withDirectives((openBlock(), 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]
-                        ])
-                      : createCommentVNode("", true),
-                    ($data.d_editing)
-                      ? withDirectives((openBlock(), 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]
-                        ])
-                      : createCommentVNode("", true)
-                  ], 64))
-                : (openBlock(), createBlock(Fragment, { key: 7 }, [
-                    createTextVNode(toDisplayString($options.resolveFieldData()), 1)
-                  ], 64))
+                  class: ['p-datatable-reorderablerow-handle', ($options.columnProp('rowReorderIcon') || 'pi pi-bars')]
+                }, null, 2))
+              : ($options.columnProp('expander'))
+                ? withDirectives((openBlock(), createBlock("button", {
+                    key: 6,
+                    class: "p-row-toggler p-link",
+                    onClick: _cache[1] || (_cache[1] = (...args) => ($options.toggleRow && $options.toggleRow(...args))),
+                    type: "button"
+                  }, [
+                    createVNode("span", { class: $props.rowTogglerIcon }, null, 2)
+                  ], 512)), [
+                    [_directive_ripple]
+                  ])
+                : ($props.editMode === 'row' && $options.columnProp('rowEditor'))
+                  ? (openBlock(), createBlock(Fragment, { key: 7 }, [
+                      (!$data.d_editing)
+                        ? withDirectives((openBlock(), 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]
+                          ])
+                        : createCommentVNode("", true),
+                      ($data.d_editing)
+                        ? withDirectives((openBlock(), 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]
+                          ])
+                        : createCommentVNode("", true),
+                      ($data.d_editing)
+                        ? withDirectives((openBlock(), 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]
+                          ])
+                        : createCommentVNode("", true)
+                    ], 64))
+                  : (openBlock(), createBlock(Fragment, { key: 8 }, [
+                      createTextVNode(toDisplayString($options.resolveFieldData()), 1)
+                    ], 64))
   ], 38))
 }
 
@@ -1846,7 +1902,7 @@ var script$3 = {
     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,
@@ -1924,6 +1980,10 @@ var script$3 = {
             type: null,
             default: null
         },
+        rowStyle: {
+            type: null,
+            default: null
+        },
         editMode: {
             type: String,
             default: null
@@ -1940,6 +2000,10 @@ var script$3 = {
             type: null,
             default: null
         },
+        editingMeta: {
+            type: Object,
+            default: null
+        },
         loading: {
             type: Boolean,
             default: false
@@ -1982,7 +2046,7 @@ var script$3 = {
     },
     methods: {
         columnProp(col, prop) {
-            return col.props ? ((col.type.props[prop].type === Boolean && col.props[prop] === '') ? true : col.props[prop]) : null;
+            return ObjectUtils.getVNodeProp(col, prop);
         },
         shouldRenderRowGroupHeader(value, rowData, i) {
             let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
@@ -2241,8 +2305,8 @@ var script$3 = {
         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 = DomHandler.getOuterHeight(this.$el.previousElementSibling) + 'px';
@@ -2320,19 +2384,20 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
             ($props.expandableRowGroups ? $options.isRowGroupExpanded(rowData): true)
               ? (openBlock(), 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"
                 }, [
                   (openBlock(true), createBlock(Fragment, null, renderList($props.columns, (col, i) => {
@@ -2362,12 +2427,13 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
                             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"]))
                         : createCommentVNode("", true)
                     ], 64))
                   }), 128))
-                ], 42, ["onClick", "onDblclick", "onContextmenu", "onKeydown", "tabindex", "onDragstart", "onDragover"]))
+                ], 46, ["onClick", "onDblclick", "onContextmenu", "onKeydown", "tabindex", "onDragstart", "onDragover"]))
               : createCommentVNode("", true),
             ($props.templates['expansion'] && $props.expandedRows && $options.isRowExpanded(rowData))
               ? (openBlock(), createBlock("tr", {
@@ -2437,7 +2503,7 @@ var script$2 = {
     },
     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 ObjectUtils.getVNodeProp(this.column, prop);
         },
         updateStickyPosition() {
             if (this.columnProp('frozen')) {
@@ -2510,7 +2576,21 @@ var script$1 = {
     },
     methods: {
         columnProp(col, prop) {
-            return col.props ? ((col.type.props[prop].type === Boolean && col.props[prop] === '') ? true : col.props[prop]) : null;
+            return 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: {
@@ -2572,7 +2652,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                 key: i,
                 role: "row"
               }, [
-                (openBlock(true), createBlock(Fragment, null, renderList(row.children.default(), (col, j) => {
+                (openBlock(true), createBlock(Fragment, null, renderList($options.getFooterColumns(row), (col, j) => {
                   return (openBlock(), createBlock(Fragment, {
                     key: $options.columnProp(col,'columnKey')||$options.columnProp(col,'field')||j
                   }, [
@@ -2598,7 +2678,7 @@ var script = {
         '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,
@@ -2804,6 +2884,10 @@ var script = {
             type: null,
             default: null
         },
+        rowStyle: {
+            type: null,
+            default: null
+        },
         scrollable: {
             type: Boolean,
             default: false
@@ -2835,6 +2919,14 @@ var script = {
         stripedRows: {
             type: Boolean,
             default: false
+        },
+        tableStyle: {
+            type: null,
+            default: null
+        },
+        tableClass: {
+            type: String,
+            default: null
         }
     },
     data() {
@@ -2849,8 +2941,8 @@ var script = {
             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,
@@ -2926,6 +3018,10 @@ var script = {
         if (this.isStateful() && this.resizableColumns) {
             this.restoreColumnWidths();
         }
+
+        if (this.editMode === 'row' && this.dataKey && !this.d_editingRowKeys) {
+            this.updateEditingRowKeys(this.editingRows);
+        }
     },
     beforeUnmount() {
         this.unbindColumnResizeEvents();
@@ -2936,12 +3032,18 @@ var script = {
         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 ObjectUtils.getVNodeProp(col, prop);
         },
         onPage(event) {
+            this.clearEditingMetaData();
+
             this.d_first = event.first;
             this.d_rows = event.rows;
 
@@ -3001,6 +3103,8 @@ var script = {
             }
         },
         sortSingle(value) {
+            this.clearEditingMetaData();
+
             if (this.groupRowsBy && this.groupRowsBy === this.sortField) {
                 this.d_multiSortMeta = [
                     {field: this.sortField, order: this.sortOrder || this.defaultSortOrder},
@@ -3035,6 +3139,8 @@ var script = {
             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);
@@ -3092,6 +3198,8 @@ var script = {
                 return;
             }
 
+            this.clearEditingMetaData();
+
             let globalFilterFieldsArray;
             if (this.filters['global']) {
                 globalFilterFieldsArray = this.globalFilterFields|| this.columns.map(col => this.columnProp(col, 'filterField') || this.columnProp(col, 'field'));
@@ -3182,7 +3290,7 @@ var script = {
 
             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) {
                     DomHandler.clearSelection();
@@ -4102,18 +4210,6 @@ var script = {
         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);
@@ -4132,6 +4228,24 @@ var script = {
             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,
@@ -4231,7 +4345,22 @@ var script = {
                 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() {
@@ -4256,19 +4385,13 @@ var script = {
             ];
         },
         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 = [];
@@ -4311,24 +4434,21 @@ var script = {
         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);
-                    }
                 }
             }
 
@@ -4399,26 +4519,21 @@ const _hoisted_2 = {
   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",
@@ -4450,7 +4565,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       ? (openBlock(), 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,
@@ -4460,19 +4575,19 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           onPage: _cache[1] || (_cache[1] = $event => ($options.onPage($event))),
           alwaysShow: $props.alwaysShowPaginator
         }, createSlots({ _: 2 }, [
-          (_ctx.$slots.paginatorLeft)
+          (_ctx.$slots.paginatorstart)
             ? {
-                name: "left",
+                name: "start",
                 fn: withCtx(() => [
-                  renderSlot(_ctx.$slots, "paginatorLeft")
+                  renderSlot(_ctx.$slots, "paginatorstart")
                 ])
               }
             : undefined,
-          (_ctx.$slots.paginatorRight)
+          (_ctx.$slots.paginatorend)
             ? {
-                name: "right",
+                name: "end",
                 fn: withCtx(() => [
-                  renderSlot(_ctx.$slots, "paginatorRight")
+                  renderSlot(_ctx.$slots, "paginatorend")
                 ])
               }
             : undefined
@@ -4482,7 +4597,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       class: "p-datatable-wrapper",
       style: {maxHeight: $props.scrollHeight}
     }, [
-      createVNode("table", _hoisted_3, [
+      createVNode("table", {
+        ref: "table",
+        role: "table",
+        class: [$props.tableClass, 'p-datatable-table'],
+        style: $props.tableStyle
+      }, [
         createVNode(_component_DTTableHeader, {
           columnGroup: $options.headerColumnGroup,
           columns: $options.columns,
@@ -4527,6 +4647,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               groupRowsBy: $props.groupRowsBy,
               expandableRowGroups: $props.expandableRowGroups,
               rowClass: $props.rowClass,
+              rowStyle: $props.rowStyle,
               editMode: $props.editMode,
               compareSelectionBy: $props.compareSelectionBy,
               scrollable: $props.scrollable,
@@ -4561,8 +4682,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               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"]))
           : createCommentVNode("", true),
         createVNode(_component_DTTableBody, {
           value: $options.dataToRender,
@@ -4578,6 +4700,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           groupRowsBy: $props.groupRowsBy,
           expandableRowGroups: $props.expandableRowGroups,
           rowClass: $props.rowClass,
+          rowStyle: $props.rowStyle,
           editMode: $props.editMode,
           compareSelectionBy: $props.compareSelectionBy,
           scrollable: $props.scrollable,
@@ -4592,77 +4715,78 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           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"]),
         createVNode(_component_DTTableFooter, {
           columnGroup: $options.footerColumnGroup,
           columns: $options.columns
         }, null, 8, ["columnGroup", "columns"])
-      ], 512)
+      ], 6)
     ], 4),
     ($options.paginatorBottom)
       ? (openBlock(), 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
         }, createSlots({ _: 2 }, [
-          (_ctx.$slots.paginatorLeft)
+          (_ctx.$slots.paginatorstart)
             ? {
-                name: "left",
+                name: "start",
                 fn: withCtx(() => [
-                  renderSlot(_ctx.$slots, "paginatorLeft")
+                  renderSlot(_ctx.$slots, "paginatorstart")
                 ])
               }
             : undefined,
-          (_ctx.$slots.paginatorRight)
+          (_ctx.$slots.paginatorend)
             ? {
-                name: "right",
+                name: "end",
                 fn: withCtx(() => [
-                  renderSlot(_ctx.$slots, "paginatorRight")
+                  renderSlot(_ctx.$slots, "paginatorend")
                 ])
               }
             : undefined
         ]), 1032, ["rows", "first", "totalRecords", "pageLinkSize", "template", "rowsPerPageOptions", "currentPageReportTemplate", "alwaysShow"]))
       : createCommentVNode("", true),
     (_ctx.$slots.footer)
-      ? (openBlock(), createBlock("div", _hoisted_4, [
+      ? (openBlock(), createBlock("div", _hoisted_3, [
           renderSlot(_ctx.$slots, "footer")
         ]))
       : createCommentVNode("", true),
-    createVNode("div", _hoisted_5, null, 512),
+    createVNode("div", _hoisted_4, null, 512),
     ($props.reorderableColumns)
-      ? (openBlock(), createBlock("span", _hoisted_6, null, 512))
+      ? (openBlock(), createBlock("span", _hoisted_5, null, 512))
       : createCommentVNode("", true),
     ($props.reorderableColumns)
-      ? (openBlock(), createBlock("span", _hoisted_7, null, 512))
+      ? (openBlock(), createBlock("span", _hoisted_6, null, 512))
       : createCommentVNode("", true)
   ], 2))
 }