primereact 7.0.1 → 7.1.0

package/datatable/datatable.esm.js

@@ -1050,26 +1050,7 @@ var BodyCell = /*#__PURE__*/function (_Component) {
         props: this.props.tableProps
       }));
 
-      if (body && !this.state.editing) {
-        content = body ? ObjectUtils.getJSXElement(body, this.props.rowData, {
-          column: this.props.column,
-          field: this.field,
-          rowIndex: this.props.rowIndex,
-          frozenRow: this.props.frozenRow,
-          props: this.props.tableProps
-        }) : value;
-      } else if (editor && this.state.editing) {
-        content = ObjectUtils.getJSXElement(editor, {
-          rowData: this.state.editingRowData,
-          value: this.resolveFieldData(this.state.editingRowData),
-          column: this.props.column,
-          field: this.field,
-          rowIndex: this.props.rowIndex,
-          frozenRow: this.props.frozenRow,
-          props: this.props.tableProps,
-          editorCallback: this.editorCallback
-        });
-      } else if (selectionMode) {
+      if (selectionMode) {
         var showSelection = this.props.showSelectionElement ? this.props.showSelectionElement(this.props.rowData, {
           rowIndex: this.props.rowIndex,
           props: this.props.tableProps
@@ -1180,6 +1161,25 @@ var BodyCell = /*#__PURE__*/function (_Component) {
             rowEditor: rowEditorProps
           });
         }
+      } else if (body && !this.state.editing) {
+        content = body ? ObjectUtils.getJSXElement(body, this.props.rowData, {
+          column: this.props.column,
+          field: this.field,
+          rowIndex: this.props.rowIndex,
+          frozenRow: this.props.frozenRow,
+          props: this.props.tableProps
+        }) : value;
+      } else if (editor && this.state.editing) {
+        content = ObjectUtils.getJSXElement(editor, {
+          rowData: this.state.editingRowData,
+          value: this.resolveFieldData(this.state.editingRowData),
+          column: this.props.column,
+          field: this.field,
+          rowIndex: this.props.rowIndex,
+          frozenRow: this.props.frozenRow,
+          props: this.props.tableProps,
+          editorCallback: this.editorCallback
+        });
       } else {
         content = value;
       }
@@ -1823,7 +1823,7 @@ var TableBody = /*#__PURE__*/function (_Component) {
   }, {
     key: "equals",
     value: function equals(data1, data2) {
-      if (this.allowCellSelection()) return (data1.rowIndex === data2.rowIndex || data1.rowData === data2.rowData) && (data1.field === data2.field || data1.cellIndex === data2.cellIndex);else return this.compareSelectionBy === 'equals' ? data1 === data2 : ObjectUtils.equals(data1, data2, this.props.dataKey);
+      if (this.allowCellSelection()) return (data1.rowIndex === data2.rowIndex || data1.rowData === data2.rowData) && (data1.field === data2.field || data1.cellIndex === data2.cellIndex);else return this.props.compareSelectionBy === 'equals' ? data1 === data2 : ObjectUtils.equals(data1, data2, this.props.dataKey);
     }
   }, {
     key: "isSubheaderGrouping",
@@ -2092,7 +2092,8 @@ var TableBody = /*#__PURE__*/function (_Component) {
       if (this.props.onSelectionChange && selection !== this.props.selection) {
         this.props.onSelectionChange({
           originalEvent: originalEvent,
-          value: selection
+          value: selection,
+          type: type
         });
       }
     }
@@ -2148,13 +2149,14 @@ var TableBody = /*#__PURE__*/function (_Component) {
       if (this.props.onSelectionChange && selection !== this.props.selection) {
         this.props.onSelectionChange({
           originalEvent: originalEvent,
-          value: selection
+          value: selection,
+          type: type
         });
       }
     }
   }, {
     key: "onRangeSelection",
-    value: function onRangeSelection(event) {
+    value: function onRangeSelection(event, type) {
       DomHandler.clearSelection();
       this.rangeRowIndex = this.allowCellSelection() ? event.rowIndex : event.index;
       var selectionInRange = this.selectRange(event);
@@ -2163,7 +2165,8 @@ var TableBody = /*#__PURE__*/function (_Component) {
       if (this.props.onSelectionChange && selection !== this.props.selection) {
         this.props.onSelectionChange({
           originalEvent: event.originalEvent,
-          value: selection
+          value: selection,
+          type: type
         });
       }
 
@@ -2323,7 +2326,7 @@ var TableBody = /*#__PURE__*/function (_Component) {
 
       if (this.allowRowSelection()) {
         if (this.allowRangeSelection(event)) {
-          this.onRangeSelection(event);
+          this.onRangeSelection(event, 'row');
         } else {
           var toggleable = this.isRadioSelectionModeInColumn() || this.isCheckboxSelectionModeInColumn() || this.allowMetaKeySelection(event);
           this.anchorRowIndex = event.index;
@@ -2409,7 +2412,7 @@ var TableBody = /*#__PURE__*/function (_Component) {
       var isSameRow = event.index === this.anchorRowIndex;
 
       if (this.allowRowDrag(event) && !isSameRow) {
-        this.onRangeSelection(event);
+        this.onRangeSelection(event, 'row');
       }
     }
   }, {
@@ -2612,7 +2615,7 @@ var TableBody = /*#__PURE__*/function (_Component) {
 
       if (this.allowCellSelection()) {
         if (this.allowRangeSelection(event)) {
-          this.onRangeSelection(event);
+          this.onRangeSelection(event, 'cell');
         } else {
           var toggleable = this.allowMetaKeySelection(event);
 
@@ -2661,7 +2664,7 @@ var TableBody = /*#__PURE__*/function (_Component) {
       var isSameCell = event.rowIndex === this.anchorRowIndex && event.cellIndex === this.anchorCellIndex;
 
       if (this.allowCellDrag(event) && !isSameCell) {
-        this.onRangeSelection(event);
+        this.onRangeSelection(event, 'cell');
       }
     }
   }, {
@@ -3151,7 +3154,7 @@ var HeaderCheckbox = /*#__PURE__*/function (_Component) {
         });
         this.props.onChange({
           originalEvent: event,
-          checked: this.props.checked
+          checked: !this.props.checked
         });
       }
     }
@@ -3297,7 +3300,7 @@ var ColumnFilter = /*#__PURE__*/function (_Component) {
   }, {
     key: "isRowMatchModeSelected",
     value: function isRowMatchModeSelected(matchMode) {
-      return this.filterModel.matchMode === matchMode;
+      return this.filterModel && this.filterModel.matchMode === matchMode;
     }
   }, {
     key: "showMenuButton",
@@ -3590,7 +3593,7 @@ var ColumnFilter = /*#__PURE__*/function (_Component) {
       filters[this.field].constraints.push(newConstraint);
       filterConstraintAddCallback && filterConstraintAddCallback({
         field: this.field,
-        constraing: newConstraint
+        constraint: newConstraint
       });
       this.props.onFilterChange(filters);
 
@@ -3608,7 +3611,7 @@ var ColumnFilter = /*#__PURE__*/function (_Component) {
       var removedConstraint = filters[this.field].constraints.splice(index, 1);
       filterConstraintRemoveCallback && filterConstraintRemoveCallback({
         field: this.field,
-        constraing: removedConstraint
+        constraint: removedConstraint
       });
       this.props.onFilterChange(filters);
 
@@ -3742,7 +3745,7 @@ var ColumnFilter = /*#__PURE__*/function (_Component) {
 
       if (!this.resizeListener) {
         this.resizeListener = function () {
-          if (_this5.state.overlayVisible) {
+          if (_this5.state.overlayVisible && !DomHandler.isTouchDevice()) {
             _this5.hide();
           }
         };
@@ -3850,16 +3853,17 @@ var ColumnFilter = /*#__PURE__*/function (_Component) {
     value: function renderFilterElement(model, index) {
       var _this6 = this;
 
+      var value = model ? model.value : null;
       return this.getColumnProp('filterElement') ? ObjectUtils.getJSXElement(this.getColumnProp('filterElement'), {
         field: this.field,
         index: index,
         filterModel: model,
-        value: model.value,
+        value: value,
         filterApplyCallback: this.filterApplyCallback,
         filterCallback: this.filterCallback
       }) : /*#__PURE__*/React.createElement(InputText, {
         type: this.getColumnProp('filterType'),
-        value: model.value || '',
+        value: value || '',
         onChange: function onChange(e) {
           return _this6.onInputChange(e, index);
         },
@@ -4523,7 +4527,7 @@ var HeaderCell = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderCheckbox",
     value: function renderCheckbox() {
-      if (this.getColumnProp('selectionMode') === 'multiple' && this.props.filterDisplay !== 'row') {
+      if (this.props.showSelectAll && this.getColumnProp('selectionMode') === 'multiple' && this.props.filterDisplay !== 'row') {
         var allRowsSelected = this.props.allRowsSelected(this.props.value);
         return /*#__PURE__*/React.createElement(HeaderCheckbox, {
           checked: allRowsSelected,
@@ -4745,6 +4749,7 @@ var TableHeader = /*#__PURE__*/function (_Component) {
           onColumnResizeStart: _this3.props.onColumnResizeStart,
           onColumnResizerClick: _this3.props.onColumnResizerClick,
           onColumnResizerDoubleClick: _this3.props.onColumnResizerDoubleClick,
+          showSelectAll: _this3.props.showSelectAll,
           allRowsSelected: _this3.props.allRowsSelected,
           onColumnCheckboxChange: _this3.onCheckboxChange,
           reorderableColumns: _this3.props.reorderableColumns,
@@ -4752,6 +4757,36 @@ var TableHeader = /*#__PURE__*/function (_Component) {
         });
       });
     }
+  }, {
+    key: "renderCheckbox",
+    value: function renderCheckbox(selectionMode) {
+      if (this.props.showSelectAll && selectionMode === 'multiple') {
+        var allRowsSelected = this.props.allRowsSelected(this.props.value);
+        return /*#__PURE__*/React.createElement(HeaderCheckbox, {
+          checked: allRowsSelected,
+          onChange: this.onCheckboxChange,
+          disabled: this.props.empty
+        });
+      }
+
+      return null;
+    }
+  }, {
+    key: "renderFilter",
+    value: function renderFilter(column, filter) {
+      if (filter) {
+        return /*#__PURE__*/React.createElement(ColumnFilter, {
+          display: "row",
+          column: column,
+          filters: this.props.filters,
+          filtersStore: this.props.filtersStore,
+          onFilterChange: this.props.onFilterChange,
+          onFilterApply: this.props.onFilterApply
+        });
+      }
+
+      return null;
+    }
   }, {
     key: "renderFilterCells",
     value: function renderFilterCells() {
@@ -4779,24 +4814,15 @@ var TableHeader = /*#__PURE__*/function (_Component) {
           });
           var colKey = columnKey || field || i;
 
-          var allRowsSelected = selectionMode === 'multiple' && _this4.props.allRowsSelected(_this4.props.value);
+          var checkbox = _this4.renderCheckbox(selectionMode);
+
+          var filterRow = _this4.renderFilter(col, filter);
 
           return /*#__PURE__*/React.createElement("th", {
             key: colKey,
             style: colStyle,
             className: colClassName
-          }, selectionMode === 'multiple' && /*#__PURE__*/React.createElement(HeaderCheckbox, {
-            checked: allRowsSelected,
-            onChange: _this4.onCheckboxChange,
-            disabled: _this4.props.empty
-          }), filter && /*#__PURE__*/React.createElement(ColumnFilter, {
-            display: "row",
-            column: col,
-            filters: _this4.props.filters,
-            filtersStore: _this4.props.filtersStore,
-            onFilterChange: _this4.props.onFilterChange,
-            onFilterApply: _this4.props.onFilterApply
-          }));
+          }, checkbox, filterRow);
         }
 
         return null;
@@ -4880,10 +4906,6 @@ var DataTable = /*#__PURE__*/function (_Component) {
       _this.state.filters = props.filters;
     }
 
-    if (_this.isStateful()) {
-      _this.restoreState(_this.state);
-    }
-
     _this.attributeSelector = UniqueComponentId(); // header
 
     _this.onSortChange = _this.onSortChange.bind(_assertThisInitialized(_this));
@@ -4919,6 +4941,11 @@ var DataTable = /*#__PURE__*/function (_Component) {
     value: function isVirtualScrollerDisabled() {
       return ObjectUtils.isEmpty(this.props.virtualScrollerOptions) || !this.props.scrollable;
     }
+  }, {
+    key: "isEquals",
+    value: function isEquals(data1, data2) {
+      return this.props.compareSelectionBy === 'equals' ? data1 === data2 : ObjectUtils.equals(data1, data2, this.props.dataKey);
+    }
   }, {
     key: "hasFilter",
     value: function hasFilter() {
@@ -5126,7 +5153,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
               };
             };
 
-            this.props.onPage(getOnPageParams(restoredState.first, restoredState.rows));
+            this.props.onPage(this.createEvent(getOnPageParams(restoredState.first, restoredState.rows)));
           } else {
             state.first = restoredState.first;
             state.rows = restoredState.rows;
@@ -5135,10 +5162,10 @@ var DataTable = /*#__PURE__*/function (_Component) {
 
         if (restoredState.sortField) {
           if (this.props.onSort) {
-            this.props.onSort({
+            this.props.onSort(this.createEvent({
               sortField: restoredState.sortField,
               sortOrder: restoredState.sortOrder
-            });
+            }));
           } else {
             state.sortField = restoredState.sortField;
             state.sortOrder = restoredState.sortOrder;
@@ -5147,9 +5174,9 @@ var DataTable = /*#__PURE__*/function (_Component) {
 
         if (restoredState.multiSortMeta) {
           if (this.props.onSort) {
-            this.props.onSort({
+            this.props.onSort(this.createEvent({
               multiSortMeta: restoredState.multiSortMeta
-            });
+            }));
           } else {
             state.multiSortMeta = restoredState.multiSortMeta;
           }
@@ -5159,9 +5186,9 @@ var DataTable = /*#__PURE__*/function (_Component) {
           state.d_filters = this.cloneFilters(restoredState.filters);
 
           if (this.props.onFilter) {
-            this.props.onFilter({
+            this.props.onFilter(this.createEvent({
               filters: restoredState.filters
-            });
+            }));
           } else {
             state.filters = this.cloneFilters(restoredState.filters);
           }
@@ -5264,15 +5291,23 @@ var DataTable = /*#__PURE__*/function (_Component) {
     value: function allRowsSelected(processedData) {
       var _this5 = this;
 
-      var val = this.props.frozenValue ? [].concat(_toConsumableArray(this.props.frozenValue), _toConsumableArray(processedData)) : processedData;
-      var selectableVal = this.props.showSelectionElement ? val.filter(function (data, index) {
-        return _this5.props.showSelectionElement(data, {
-          rowIndex: index,
-          props: _this5.props
+      if (this.props.onSelectAllChange) {
+        return this.props.selectAll;
+      } else {
+        var data = this.props.selectionPageOnly ? this.dataToRender(processedData) : processedData;
+        var val = this.props.frozenValue ? [].concat(_toConsumableArray(this.props.frozenValue), _toConsumableArray(data)) : data;
+        var selectableVal = this.props.showSelectionElement ? val.filter(function (data, index) {
+          return _this5.props.showSelectionElement(data, {
+            rowIndex: index,
+            props: _this5.props
+          });
+        }) : val;
+        return selectableVal && this.props.selection && selectableVal.every(function (sv) {
+          return _this5.props.selection.some(function (s) {
+            return _this5.isEquals(s, sv);
+          });
         });
-      }) : val;
-      var length = this.props.lazy ? this.props.totalRecords : selectableVal ? selectableVal.length : 0;
-      return selectableVal && length > 0 && this.props.selection && this.props.selection.length > 0 && this.props.selection.length === length;
+      }
     }
   }, {
     key: "getSelectionModeInColumn",
@@ -5473,37 +5508,46 @@ var DataTable = /*#__PURE__*/function (_Component) {
     value: function onColumnHeaderCheckboxChange(e, processedData) {
       var _this8 = this;
 
-      var originalEvent = e.originalEvent,
-          checked = e.checked;
-      var selection;
-
-      if (!checked) {
-        selection = this.props.frozenValue ? [].concat(_toConsumableArray(this.props.frozenValue), _toConsumableArray(processedData)) : processedData;
-        selection = this.props.showSelectionElement ? selection.filter(function (data, index) {
-          return _this8.props.showSelectionElement(data, {
-            rowIndex: index,
-            props: _this8.props
-          });
-        }) : selection;
-        this.props.onAllRowsSelect && this.props.onAllRowsSelect({
-          originalEvent: originalEvent,
-          data: selection,
-          type: 'all'
-        });
+      if (this.props.onSelectAllChange) {
+        this.props.onSelectAllChange(e);
       } else {
-        selection = [];
-        this.props.onAllRowsUnselect && this.props.onAllRowsUnselect({
-          originalEvent: originalEvent,
-          data: selection,
-          type: 'all'
-        });
-      }
+        var originalEvent = e.originalEvent,
+            checked = e.checked;
+        var data = this.props.selectionPageOnly ? this.dataToRender(processedData) : processedData;
+        var selection = this.props.selectionPageOnly && this.props.selection ? this.props.selection.filter(function (s) {
+          return !data.some(function (d) {
+            return _this8.isEquals(s, d);
+          });
+        }) : [];
+
+        if (checked) {
+          selection = this.props.frozenValue ? [].concat(_toConsumableArray(selection), _toConsumableArray(this.props.frozenValue), _toConsumableArray(data)) : [].concat(_toConsumableArray(selection), _toConsumableArray(data));
+          selection = this.props.showSelectionElement ? selection.filter(function (data, index) {
+            return _this8.props.showSelectionElement(data, {
+              rowIndex: index,
+              props: _this8.props
+            });
+          }) : selection;
+          this.props.onAllRowsSelect && this.props.onAllRowsSelect({
+            originalEvent: originalEvent,
+            data: selection,
+            type: 'all'
+          });
+        } else {
+          this.props.onAllRowsUnselect && this.props.onAllRowsUnselect({
+            originalEvent: originalEvent,
+            data: selection,
+            type: 'all'
+          });
+        }
 
-      if (this.props.onSelectionChange) {
-        this.props.onSelectionChange({
-          originalEvent: originalEvent,
-          value: selection
-        });
+        if (this.props.onSelectionChange) {
+          this.props.onSelectionChange({
+            originalEvent: originalEvent,
+            value: selection,
+            type: 'all'
+          });
+        }
       }
     }
   }, {
@@ -5636,15 +5680,13 @@ var DataTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "createStyleElement",
     value: function createStyleElement() {
-      this.styleElement = document.createElement('style');
-      document.head.appendChild(this.styleElement);
+      this.styleElement = DomHandler.createInlineStyle();
     }
   }, {
     key: "createResponsiveStyle",
     value: function createResponsiveStyle() {
       if (!this.responsiveStyleElement) {
-        this.responsiveStyleElement = document.createElement('style');
-        document.head.appendChild(this.responsiveStyleElement);
+        this.responsiveStyleElement = DomHandler.createInlineStyle();
         var innerHTML = "\n@media screen and (max-width: ".concat(this.props.breakpoint, ") {\n    .p-datatable[").concat(this.attributeSelector, "] .p-datatable-thead > tr > th,\n    .p-datatable[").concat(this.attributeSelector, "] .p-datatable-tfoot > tr > td {\n        display: none !important;\n    }\n\n    .p-datatable[").concat(this.attributeSelector, "] .p-datatable-tbody > tr > td {\n        display: flex;\n        width: 100% !important;\n        align-items: center;\n        justify-content: space-between;\n    }\n\n    .p-datatable[").concat(this.attributeSelector, "] .p-datatable-tbody > tr > td:not(:last-child) {\n        border: 0 none;\n    }\n\n    .p-datatable[").concat(this.attributeSelector, "].p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {\n        border-top: 0;\n        border-right: 0;\n        border-left: 0;\n    }\n\n    .p-datatable[").concat(this.attributeSelector, "] .p-datatable-tbody > tr > td > .p-column-title {\n        display: block;\n    }\n}\n");
         this.responsiveStyleElement.innerHTML = innerHTML;
       }
@@ -5652,24 +5694,18 @@ var DataTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "destroyResponsiveStyle",
     value: function destroyResponsiveStyle() {
-      if (this.responsiveStyleElement) {
-        document.head.removeChild(this.responsiveStyleElement);
-        this.responsiveStyleElement = null;
-      }
+      this.responsiveStyleElement = DomHandler.removeInlineStyle(this.responsiveStyleElement);
     }
   }, {
     key: "destroyStyleElement",
     value: function destroyStyleElement() {
-      if (this.styleElement) {
-        document.head.removeChild(this.styleElement);
-        this.styleElement = null;
-      }
+      this.styleElement = DomHandler.removeInlineStyle(this.styleElement);
     }
   }, {
     key: "onPageChange",
     value: function onPageChange(e) {
       this.clearEditingMetaData();
-      if (this.props.onPage) this.props.onPage(e);else this.setState({
+      if (this.props.onPage) this.props.onPage(this.createEvent(e));else this.setState({
         first: e.first,
         rows: e.rows
       });
@@ -5733,7 +5769,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
       }
 
       if (this.props.onSort) {
-        this.props.onSort(eventMeta);
+        this.props.onSort(this.createEvent(eventMeta));
       } else {
         eventMeta.first = 0;
         this.setState(eventMeta);
@@ -5752,6 +5788,15 @@ var DataTable = /*#__PURE__*/function (_Component) {
     value: function getCalculatedSortOrder(currentOrder) {
       return this.props.removableSort ? this.props.defaultSortOrder === currentOrder ? currentOrder * -1 : 0 : currentOrder * -1;
     }
+  }, {
+    key: "compareValuesOnSort",
+    value: function compareValuesOnSort(value1, value2) {
+      var result = null;
+      if (value1 == null && value2 != null) result = -1;else if (value1 != null && value2 == null) result = 1;else if (value1 == null && value2 == null) result = 0;else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2, undefined, {
+        numeric: true
+      });else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
+      return result;
+    }
   }, {
     key: "addSortMeta",
     value: function addSortMeta(meta, multiSortMeta) {
@@ -5776,6 +5821,8 @@ var DataTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "sortSingle",
     value: function sortSingle(data, field, order) {
+      var _this10 = this;
+
       if (this.props.groupRowsBy && this.props.groupRowsBy === this.props.sortField) {
         var multiSortMeta = [{
           field: this.props.sortField,
@@ -5799,10 +5846,9 @@ var DataTable = /*#__PURE__*/function (_Component) {
         value.sort(function (data1, data2) {
           var value1 = ObjectUtils.resolveFieldData(data1, field);
           var value2 = ObjectUtils.resolveFieldData(data2, field);
-          var result = null;
-          if (value1 == null && value2 != null) result = -1;else if (value1 != null && value2 == null) result = 1;else if (value1 == null && value2 == null) result = 0;else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2, undefined, {
-            numeric: true
-          });else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
+
+          var result = _this10.compareValuesOnSort(value1, value2);
+
           return order * result;
         });
       }
@@ -5812,7 +5858,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "sortMultiple",
     value: function sortMultiple(data) {
-      var _this10 = this;
+      var _this11 = this;
 
       var multiSortMeta = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
 
@@ -5829,7 +5875,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
 
       if (this.columnSortable && this.columnSortFunction) {
         var meta = multiSortMeta.find(function (meta) {
-          return meta.field === _this10.columnField;
+          return meta.field === _this11.columnField;
         });
         var field = this.columnField;
         var order = meta ? meta.order : this.defaultSortOrder;
@@ -5839,7 +5885,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
         });
       } else {
         value.sort(function (data1, data2) {
-          return _this10.multisortField(data1, data2, multiSortMeta, 0);
+          return _this11.multisortField(data1, data2, multiSortMeta, 0);
         });
       }
 
@@ -5850,22 +5896,12 @@ var DataTable = /*#__PURE__*/function (_Component) {
     value: function multisortField(data1, data2, multiSortMeta, index) {
       var value1 = ObjectUtils.resolveFieldData(data1, multiSortMeta[index].field);
       var value2 = ObjectUtils.resolveFieldData(data2, multiSortMeta[index].field);
-      var result = null;
-
-      if (typeof value1 === 'string' || value1 instanceof String) {
-        if (value1.localeCompare && value1 !== value2) {
-          return multiSortMeta[index].order * value1.localeCompare(value2, undefined, {
-            numeric: true
-          });
-        }
-      } else {
-        result = value1 < value2 ? -1 : 1;
-      }
 
       if (value1 === value2) {
         return multiSortMeta.length - 1 > index ? this.multisortField(data1, data2, multiSortMeta, index + 1) : 0;
       }
 
+      var result = this.compareValuesOnSort(value1, value2);
       return multiSortMeta[index].order * result;
     }
   }, {
@@ -5879,25 +5915,25 @@ var DataTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "onFilterApply",
     value: function onFilterApply() {
-      var _this11 = this;
+      var _this12 = this;
 
       clearTimeout(this.filterTimeout);
       this.filterTimeout = setTimeout(function () {
-        var filters = _this11.cloneFilters(_this11.state.d_filters);
+        var filters = _this12.cloneFilters(_this12.state.d_filters);
 
-        if (_this11.props.onFilter) {
-          _this11.props.onFilter({
+        if (_this12.props.onFilter) {
+          _this12.props.onFilter(_this12.createEvent({
             filters: filters
-          });
+          }));
         } else {
-          _this11.setState({
+          _this12.setState({
             first: 0,
             filters: filters
           });
         }
 
-        if (_this11.props.onValueChange) {
-          _this11.props.onValueChange(_this11.processedData({
+        if (_this12.props.onValueChange) {
+          _this12.props.onValueChange(_this12.processedData({
             filters: filters
           }));
         }
@@ -5995,7 +6031,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "cloneFilters",
     value: function cloneFilters(filters) {
-      var _this12 = this;
+      var _this13 = this;
 
       filters = filters || this.props.filters;
       var cloned = {};
@@ -6016,34 +6052,31 @@ var DataTable = /*#__PURE__*/function (_Component) {
       } else {
         var columns = this.getColumns();
         cloned = columns.reduce(function (_filters, col) {
-          if (col.props.filter) {
-            var field = col.props.filterField || col.props.field;
-            var filterFunction = col.props.filterFunction;
-            var dataType = col.props.dataType;
-            var matchMode = col.props.filterMatchMode || (PrimeReact.filterMatchModeOptions[dataType] ? PrimeReact.filterMatchModeOptions[dataType][0] : FilterMatchMode$1.STARTS_WITH);
-            var constraint = {
-              value: null,
-              matchMode: matchMode
-            };
-
-            if (filterFunction) {
-              FilterService.register("custom_".concat(field), function () {
-                for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-                  args[_key] = arguments[_key];
-                }
+          var field = col.props.filterField || col.props.field;
+          var filterFunction = col.props.filterFunction;
+          var dataType = col.props.dataType;
+          var matchMode = col.props.filterMatchMode || (PrimeReact.filterMatchModeOptions[dataType] ? PrimeReact.filterMatchModeOptions[dataType][0] : FilterMatchMode$1.STARTS_WITH);
+          var constraint = {
+            value: null,
+            matchMode: matchMode
+          };
 
-                return filterFunction.apply(void 0, args.concat([{
-                  column: col
-                }]));
-              });
-            }
+          if (filterFunction) {
+            FilterService.register("custom_".concat(field), function () {
+              for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+                args[_key] = arguments[_key];
+              }
 
-            _filters[field] = _this12.props.filterDisplay === 'menu' ? {
-              operator: FilterOperator.AND,
-              constraints: [constraint]
-            } : constraint;
+              return filterFunction.apply(void 0, args.concat([{
+                column: col
+              }]));
+            });
           }
 
+          _filters[field] = _this13.props.filterDisplay === 'menu' ? {
+            operator: FilterOperator.AND,
+            constraints: [constraint]
+          } : constraint;
           return _filters;
         }, {});
       }
@@ -6119,7 +6152,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "exportCSV",
     value: function exportCSV(options) {
-      var _this13 = this;
+      var _this14 = this;
 
       var data;
       var csv = "\uFEFF";
@@ -6142,7 +6175,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
           csv += '"' + (header || field) + '"';
 
           if (i < columns.length - 1) {
-            csv += _this13.props.csvSeparator;
+            csv += _this14.props.csvSeparator;
           }
         }
       }); //body
@@ -6158,7 +6191,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
             var cellData = ObjectUtils.resolveFieldData(record, field);
 
             if (cellData != null) {
-              cellData = _this13.props.exportFunction ? _this13.props.exportFunction({
+              cellData = _this14.props.exportFunction ? _this14.props.exportFunction({
                 data: cellData,
                 field: field,
                 rowData: record,
@@ -6169,7 +6202,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
             csv += '"' + cellData + '"';
 
             if (i < columns.length - 1) {
-              csv += _this13.props.csvSeparator;
+              csv += _this14.props.csvSeparator;
             }
           }
         });
@@ -6183,6 +6216,18 @@ var DataTable = /*#__PURE__*/function (_Component) {
         document.body.click();
       }
     }
+  }, {
+    key: "createEvent",
+    value: function createEvent(event) {
+      return _objectSpread({
+        first: this.getFirst(),
+        rows: this.getRows(),
+        sortField: this.getSortField(),
+        sortOrder: this.getSortOrder(),
+        multiSortMeta: this.getMultiSortMeta(),
+        filters: this.getFilters()
+      }, event);
+    }
   }, {
     key: "processedData",
     value: function processedData(localState) {
@@ -6226,8 +6271,12 @@ var DataTable = /*#__PURE__*/function (_Component) {
         this.createResponsiveStyle();
       }
 
-      if (this.isStateful() && this.props.resizableColumns) {
-        this.restoreColumnWidths();
+      if (this.isStateful()) {
+        this.setState(this.restoreState(this.state));
+
+        if (this.props.resizableColumns) {
+          this.restoreColumnWidths();
+        }
       }
     }
   }, {
@@ -6327,6 +6376,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
         filtersStore: filtersStore,
         onFilterChange: this.onFilterChange,
         onFilterApply: this.onFilterApply,
+        showSelectAll: this.props.showSelectAll,
         allRowsSelected: this.allRowsSelected,
         onColumnCheckboxChange: this.onColumnHeaderCheckboxChange,
         onColumnMouseDown: this.onColumnHeaderMouseDown,
@@ -6494,7 +6544,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderContent",
     value: function renderContent(processedData, columns, selectionModeInColumn, empty) {
-      var _this14 = this;
+      var _this15 = this;
 
       if (!columns) return;
       var isVirtualScrollerDisabled = this.isVirtualScrollerDisabled();
@@ -6507,29 +6557,27 @@ var DataTable = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React.createElement(VirtualScroller, _extends({}, virtualScrollerOptions, {
         items: processedData,
         columns: columns,
-        style: {
-          height: this.props.scrollHeight
-        },
+        scrollHeight: this.props.scrollHeight,
         disabled: isVirtualScrollerDisabled,
         loaderDisabled: true,
         showSpacer: false,
         contentTemplate: function contentTemplate(options) {
           var ref = function ref(el) {
-            _this14.table = el;
+            _this15.table = el;
             options.spacerRef && options.spacerRef(el);
           };
 
-          var tableClassName = classNames('p-datatable-table', _this14.props.tableClassName);
+          var tableClassName = classNames('p-datatable-table', _this15.props.tableClassName);
 
-          var tableHeader = _this14.renderTableHeader(options, empty);
+          var tableHeader = _this15.renderTableHeader(options, empty);
 
-          var tableBody = _this14.renderTableBody(options, selectionModeInColumn, empty, isVirtualScrollerDisabled);
+          var tableBody = _this15.renderTableBody(options, selectionModeInColumn, empty, isVirtualScrollerDisabled);
 
-          var tableFooter = _this14.renderTableFooter(options);
+          var tableFooter = _this15.renderTableFooter(options);
 
           return /*#__PURE__*/React.createElement("table", {
             ref: ref,
-            style: _this14.props.tableStyle,
+            style: _this15.props.tableStyle,
             className: tableClassName,
             role: "table"
           }, tableHeader, tableBody, tableFooter);
@@ -6591,12 +6639,12 @@ var DataTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderResizeHelper",
     value: function renderResizeHelper() {
-      var _this15 = this;
+      var _this16 = this;
 
       if (this.props.resizableColumns) {
         return /*#__PURE__*/React.createElement("div", {
           ref: function ref(el) {
-            return _this15.resizeHelper = el;
+            return _this16.resizeHelper = el;
           },
           className: "p-column-resizer-helper",
           style: {
@@ -6610,7 +6658,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderReorderIndicators",
     value: function renderReorderIndicators() {
-      var _this16 = this;
+      var _this17 = this;
 
       if (this.props.reorderableColumns) {
         var style = {
@@ -6619,13 +6667,13 @@ var DataTable = /*#__PURE__*/function (_Component) {
         };
         return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
           ref: function ref(el) {
-            return _this16.reorderIndicatorUp = el;
+            return _this17.reorderIndicatorUp = el;
           },
           className: "pi pi-arrow-down p-datatable-reorder-indicator-up",
           style: style
         }), /*#__PURE__*/React.createElement("span", {
           ref: function ref(el) {
-            return _this16.reorderIndicatorDown = el;
+            return _this17.reorderIndicatorDown = el;
           },
           className: "pi pi-arrow-up p-datatable-reorder-indicator-down",
           style: style
@@ -6637,7 +6685,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this17 = this;
+      var _this18 = this;
 
       var processedData = this.processedData();
       var columns = this.getColumns();
@@ -6673,7 +6721,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
       var reorderIndicators = this.renderReorderIndicators();
       return /*#__PURE__*/React.createElement("div", {
         ref: function ref(el) {
-          return _this17.el = el;
+          return _this18.el = el;
         },
         id: this.props.id,
         className: className,
@@ -6740,6 +6788,10 @@ _defineProperty(DataTable, "defaultProps", {
   dataKey: null,
   metaKeySelection: true,
   selectOnEdit: true,
+  selectionPageOnly: false,
+  showSelectAll: true,
+  selectAll: false,
+  onSelectAllChange: null,
   headerColumnGroup: null,
   footerColumnGroup: null,
   rowExpansionTemplate: null,