primereact 7.0.1 → 7.2.1

package/datatable/datatable.js

@@ -121,6 +121,9 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
   function _createClass(Constructor, protoProps, staticProps) {
     if (protoProps) _defineProperties(Constructor.prototype, protoProps);
     if (staticProps) _defineProperties(Constructor, staticProps);
+    Object.defineProperty(Constructor, "prototype", {
+      writable: false
+    });
     return Constructor;
   }
 
@@ -153,23 +156,20 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
         configurable: true
       }
     });
+    Object.defineProperty(subClass, "prototype", {
+      writable: false
+    });
     if (superClass) _setPrototypeOf(subClass, superClass);
   }
 
   function _typeof(obj) {
     "@babel/helpers - typeof";
 
-    if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-      _typeof = function _typeof(obj) {
-        return typeof obj;
-      };
-    } else {
-      _typeof = function _typeof(obj) {
-        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-      };
-    }
-
-    return _typeof(obj);
+    return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+      return typeof obj;
+    } : function (obj) {
+      return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+    }, _typeof(obj);
   }
 
   function _possibleConstructorReturn(self, call) {
@@ -267,10 +267,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
       key: "onClick",
       value: function onClick(event) {
         if (!this.props.disabled) {
-          this.props.onChange({
-            originalEvent: event,
-            data: this.props.value
-          });
+          this.props.onChange(event);
           this.input.focus();
         }
       }
@@ -306,14 +303,17 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
       value: function render() {
         var _this2 = this;
 
-        var className = utils.classNames('p-radiobutton-box p-component', {
+        var className = utils.classNames('p-radiobutton p-component', {
+          'p-radiobutton-focused': this.state.focused
+        });
+        var boxClassName = utils.classNames('p-radiobutton-box p-component', {
           'p-highlight': this.props.checked,
           'p-focus': this.state.focused,
           'p-disabled': this.props.disabled
         });
         var name = "".concat(this.props.tableSelector, "_dt_radio");
         return /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "p-radiobutton p-component"
+          className: className
         }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "p-hidden-accessible"
         }, /*#__PURE__*/React__default["default"].createElement("input", {
@@ -328,7 +328,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
           onChange: this.onChange,
           onKeyDown: this.onKeyDown
         })), /*#__PURE__*/React__default["default"].createElement("div", {
-          className: className,
+          className: boxClassName,
           onClick: this.onClick,
           role: "radio",
           "aria-checked": this.props.checked
@@ -372,10 +372,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
           this.setState({
             focused: true
           });
-          this.props.onChange({
-            originalEvent: event,
-            data: this.props.value
-          });
+          this.props.onChange(event);
         }
       }
     }, {
@@ -403,7 +400,10 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
     }, {
       key: "render",
       value: function render() {
-        var className = utils.classNames('p-checkbox-box p-component', {
+        var className = utils.classNames('p-checkbox p-component', {
+          'p-checkbox-focused': this.state.focused
+        });
+        var boxClassName = utils.classNames('p-checkbox-box p-component', {
           'p-highlight': this.props.checked,
           'p-disabled': this.props.disabled,
           'p-focus': this.state.focused
@@ -413,10 +413,10 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
         });
         var tabIndex = this.props.disabled ? null : '0';
         return /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "p-checkbox p-component",
+          className: className,
           onClick: this.onClick
         }, /*#__PURE__*/React__default["default"].createElement("div", {
-          className: className,
+          className: boxClassName,
           role: "checkbox",
           "aria-checked": this.props.checked,
           tabIndex: tabIndex,
@@ -432,9 +432,9 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
     return RowCheckbox;
   }(React.Component);
 
-  function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+  function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-  function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$7(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+  function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
   function _createSuper$a(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$a(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -462,6 +462,8 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
       _this.onBlur = _this.onBlur.bind(_assertThisInitialized(_this));
       _this.onEditorFocus = _this.onEditorFocus.bind(_assertThisInitialized(_this));
       _this.onRowToggle = _this.onRowToggle.bind(_assertThisInitialized(_this));
+      _this.onRadioChange = _this.onRadioChange.bind(_assertThisInitialized(_this));
+      _this.onCheckboxChange = _this.onCheckboxChange.bind(_assertThisInitialized(_this));
       _this.onRowEditSave = _this.onRowEditSave.bind(_assertThisInitialized(_this));
       _this.onRowEditCancel = _this.onRowEditCancel.bind(_assertThisInitialized(_this));
       _this.onRowEditInit = _this.onRowEditInit.bind(_assertThisInitialized(_this));
@@ -517,10 +519,9 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
         return this.getColumnProp('frozen') ? Object.assign({}, columnStyle, bodyStyle, this.state.styleObject) : Object.assign({}, columnStyle, bodyStyle);
       }
     }, {
-      key: "getCellCallbackParams",
-      value: function getCellCallbackParams(event) {
+      key: "getCellParams",
+      value: function getCellParams() {
         return {
-          originalEvent: event,
           value: this.resolveFieldData(),
           field: this.field,
           rowData: this.props.rowData,
@@ -531,6 +532,14 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
           props: this.props
         };
       }
+    }, {
+      key: "getCellCallbackParams",
+      value: function getCellCallbackParams(event) {
+        var params = this.getCellParams();
+        return _objectSpread$7({
+          originalEvent: event
+        }, params);
+      }
     }, {
       key: "resolveFieldData",
       value: function resolveFieldData(data) {
@@ -620,30 +629,27 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
       key: "findNextSelectableCell",
       value: function findNextSelectableCell(cell) {
         var nextCell = cell.nextElementSibling;
-        return nextCell ? utils.DomHandler.hasClass(nextCell, 'p-selectable-cell') ? nextCell : this.findNextSelectableRow(nextCell) : null;
+        return nextCell ? utils.DomHandler.hasClass(nextCell, 'p-selectable-cell') ? nextCell : this.findNextSelectableCell(nextCell) : null;
       }
     }, {
       key: "findPrevSelectableCell",
       value: function findPrevSelectableCell(cell) {
         var prevCell = cell.previousElementSibling;
-        return prevCell ? utils.DomHandler.hasClass(prevCell, 'p-selectable-cell') ? prevCell : this.findPrevSelectableRow(prevCell) : null;
+        return prevCell ? utils.DomHandler.hasClass(prevCell, 'p-selectable-cell') ? prevCell : this.findPrevSelectableCell(prevCell) : null;
       }
     }, {
-      key: "findNextSelectableRow",
-      value: function findNextSelectableRow(row) {
-        var nextRow = row.nextElementSibling;
-        return nextRow ? utils.DomHandler.hasClass(nextRow, 'p-selectable-row') ? nextRow : this.findNextSelectableRow(nextRow) : null;
+      key: "findDownSelectableCell",
+      value: function findDownSelectableCell(cell) {
+        var downRow = cell.parentElement.nextElementSibling;
+        var downCell = downRow ? downRow.children[this.props.index] : null;
+        return downRow && downCell ? utils.DomHandler.hasClass(downRow, 'p-selectable-row') && utils.DomHandler.hasClass(downCell, 'p-selectable-cell') ? downCell : this.findDownSelectableCell(downCell) : null;
       }
     }, {
-      key: "findPrevSelectableRow",
-      value: function findPrevSelectableRow(row) {
-        var prevRow = row.previousElementSibling;
-
-        if (prevRow) {
-          return utils.DomHandler.hasClass(prevRow, 'p-selectable-row') ? prevRow : this.findPrevSelectableRow(prevRow);
-        }
-
-        return null;
+      key: "findUpSelectableCell",
+      value: function findUpSelectableCell(cell) {
+        var upRow = cell.parentElement.previousElementSibling;
+        var upCell = upRow ? upRow.children[this.props.index] : null;
+        return upRow && upCell ? utils.DomHandler.hasClass(upRow, 'p-selectable-row') && utils.DomHandler.hasClass(upCell, 'p-selectable-cell') ? upCell : this.findUpSelectableCell(upCell) : null;
       }
     }, {
       key: "changeTabIndex",
@@ -661,13 +667,24 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
         clearTimeout(this.tabindexTimeout);
         this.tabindexTimeout = setTimeout(function () {
           if (_this4.state.editing) {
-            var focusableEl = utils.DomHandler.getFirstFocusableElement(_this4.el, ':not(.p-cell-editor-key-helper)');
+            var focusableEl = _this4.props.editMode === 'cell' ? utils.DomHandler.getFirstFocusableElement(_this4.el, ':not(.p-cell-editor-key-helper)') : utils.DomHandler.findSingle(_this4.el, '.p-row-editor-save');
             focusableEl && focusableEl.focus();
           }
 
           _this4.keyHelper && (_this4.keyHelper.tabIndex = _this4.state.editing ? -1 : 0);
         }, 1);
       }
+    }, {
+      key: "focusOnInit",
+      value: function focusOnInit() {
+        var _this5 = this;
+
+        clearTimeout(this.initFocusTimeout);
+        this.initFocusTimeout = setTimeout(function () {
+          var focusableEl = _this5.props.editMode === 'row' ? utils.DomHandler.findSingle(_this5.el, '.p-row-editor-init') : null;
+          focusableEl && focusableEl.focus();
+        }, 1);
+      }
     }, {
       key: "updateStickyPosition",
       value: function updateStickyPosition() {
@@ -717,7 +734,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
     }, {
       key: "onClick",
       value: function onClick(event) {
-        var _this5 = this;
+        var _this6 = this;
 
         var params = this.getCellCallbackParams(event);
 
@@ -733,7 +750,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
 
 
           setTimeout(function () {
-            _this5.setState({
+            _this6.setState({
               editing: true
             }, function () {
               if (onCellEditInit) {
@@ -741,15 +758,15 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
               }
 
               if (cellEditValidatorEvent === 'click') {
-                _this5.bindDocumentEditListener();
+                _this6.bindDocumentEditListener();
 
-                _this5.overlayEventListener = function (e) {
-                  if (!_this5.isOutsideClicked(e.target)) {
-                    _this5.selfClick = true;
+                _this6.overlayEventListener = function (e) {
+                  if (!_this6.isOutsideClicked(e.target)) {
+                    _this6.selfClick = true;
                   }
                 };
 
-                overlayservice.OverlayService.on('overlay-click', _this5.overlayEventListener);
+                overlayservice.OverlayService.on('overlay-click', _this6.overlayEventListener);
               }
             });
           }, 1);
@@ -823,10 +840,9 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
             //up arrow
 
             case 38:
-              var prevRow = this.findPrevSelectableRow(cell.parentElement);
+              var upCell = this.findUpSelectableCell(cell);
 
-              if (prevRow) {
-                var upCell = prevRow.children[this.props.index];
+              if (upCell) {
                 this.changeTabIndex(cell, upCell);
                 upCell.focus();
               }
@@ -836,10 +852,9 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
             //down arrow
 
             case 40:
-              var nextRow = this.findNextSelectableRow(cell.parentElement);
+              var downCell = this.findDownSelectableCell(cell);
 
-              if (nextRow) {
-                var downCell = nextRow.children[this.props.index];
+              if (downCell) {
                 this.changeTabIndex(cell, downCell);
                 downCell.focus();
               }
@@ -882,6 +897,24 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
       value: function onEditorFocus(event) {
         this.onClick(event);
       }
+    }, {
+      key: "onRadioChange",
+      value: function onRadioChange(event) {
+        this.props.onRadioChange({
+          originalEvent: event,
+          data: this.props.rowData,
+          index: this.props.rowIndex
+        });
+      }
+    }, {
+      key: "onCheckboxChange",
+      value: function onCheckboxChange(event) {
+        this.props.onCheckboxChange({
+          originalEvent: event,
+          data: this.props.rowData,
+          index: this.props.rowIndex
+        });
+      }
     }, {
       key: "onRowToggle",
       value: function onRowToggle(event) {
@@ -912,6 +945,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
           field: this.field,
           index: this.props.rowIndex
         });
+        this.focusOnInit();
       }
     }, {
       key: "onRowEditCancel",
@@ -923,19 +957,20 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
           field: this.field,
           index: this.props.rowIndex
         });
+        this.focusOnInit();
       }
     }, {
       key: "bindDocumentEditListener",
       value: function bindDocumentEditListener() {
-        var _this6 = this;
+        var _this7 = this;
 
         if (!this.documentEditListener) {
           this.documentEditListener = function (e) {
-            if (!_this6.selfClick && _this6.isOutsideClicked(e.target)) {
-              _this6.switchCellToViewMode(e, true);
+            if (!_this7.selfClick && _this7.isOutsideClicked(e.target)) {
+              _this7.switchCellToViewMode(e, true);
             }
 
-            _this6.selfClick = false;
+            _this7.selfClick = false;
           };
 
           document.addEventListener('click', this.documentEditListener, true);
@@ -1012,7 +1047,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
     }, {
       key: "renderElement",
       value: function renderElement() {
-        var _this7 = this;
+        var _this8 = this;
 
         var content, editorKeyHelper;
         var cellSelected = this.props.allowCellSelection && this.isSelected();
@@ -1026,19 +1061,24 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
         var body = this.getColumnProp('body');
         var editor = this.getColumnProp('editor');
         var frozen = this.getColumnProp('frozen');
+        var align = this.getColumnProp('align');
         var value = this.resolveFieldData();
         var cellClassName = utils.ObjectUtils.getPropValue(this.props.cellClassName, value, {
           props: this.props.tableProps,
-          rowData: this.props.rowData
+          rowData: this.props.rowData,
+          column: this.props.column
         });
-        var className = utils.classNames(this.getColumnProp('bodyClassName'), this.getColumnProp('class'), cellClassName, {
+        var className = utils.classNames(this.getColumnProp('bodyClassName'), this.getColumnProp('className'), cellClassName, _defineProperty({
           'p-selection-column': selectionMode !== null,
           'p-editable-column': editor,
           'p-cell-editing': editor && this.state.editing,
           'p-frozen-column': frozen,
-          'p-selectable-cell': this.props.allowCellSelection,
+          'p-selectable-cell': this.props.allowCellSelection && this.props.isSelectable({
+            data: this.getCellParams(),
+            index: this.props.rowIndex
+          }),
           'p-highlight': cellSelected
-        });
+        }, "p-align-".concat(align), !!align));
         var style = this.getStyle();
         var title = this.props.responsiveLayout === 'stack' && /*#__PURE__*/React__default["default"].createElement("span", {
           className: "p-column-title"
@@ -1046,40 +1086,19 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
           props: this.props.tableProps
         }));
 
-        if (body && !this.state.editing) {
-          content = body ? utils.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 = utils.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
           }) : true;
           content = showSelection && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, selectionMode === 'single' && /*#__PURE__*/React__default["default"].createElement(RowRadioButton, {
-            value: this.props.rowData,
             checked: this.props.selected,
-            onChange: this.props.onRadioChange,
+            onChange: this.onRadioChange,
             tabIndex: this.props.tabIndex,
             tableSelector: this.props.tableSelector
           }), selectionMode === 'multiple' && /*#__PURE__*/React__default["default"].createElement(RowCheckbox, {
-            value: this.props.rowData,
             checked: this.props.selected,
-            onChange: this.props.onCheckboxChange,
+            onChange: this.onCheckboxChange,
             tabIndex: this.props.tabIndex
           }));
         } else if (rowReorder) {
@@ -1176,6 +1195,25 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
               rowEditor: rowEditorProps
             });
           }
+        } else if (body && !this.state.editing) {
+          content = body ? utils.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 = utils.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;
         }
@@ -1185,7 +1223,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
           editorKeyHelper = /*#__PURE__*/React__default["default"].createElement("a", {
             tabIndex: "0",
             ref: function ref(el) {
-              return _this7.keyHelper = el;
+              return _this8.keyHelper = el;
             },
             className: "p-cell-editor-key-helper p-hidden-accessible",
             onFocus: this.onEditorFocus
@@ -1195,7 +1233,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
 
         return /*#__PURE__*/React__default["default"].createElement("td", {
           ref: function ref(el) {
-            return _this7.el = el;
+            return _this8.el = el;
           },
           style: style,
           className: className,
@@ -1230,9 +1268,9 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
     return BodyCell;
   }(React.Component);
 
-  function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+  function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-  function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$6(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+  function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
   function _createSuper$9(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$9(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -1660,6 +1698,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
               cellClassName: _this3.props.cellClassName,
               responsiveLayout: _this3.props.responsiveLayout,
               frozenRow: _this3.props.frozenRow,
+              isSelectable: _this3.props.isSelectable,
               showSelectionElement: _this3.props.showSelectionElement,
               showRowReorderElement: _this3.props.showRowReorderElement,
               onRadioChange: _this3.props.onRadioChange,
@@ -1685,7 +1724,10 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
         var className = utils.classNames(rowClassName, {
           'p-highlight': !this.props.allowCellSelection && this.props.selected,
           'p-highlight-contextmenu': this.props.contextMenuSelected,
-          'p-selectable-row': this.props.allowRowSelection,
+          'p-selectable-row': this.props.allowRowSelection && this.props.isSelectable({
+            data: this.props.rowData,
+            index: this.props.index
+          }),
           'p-row-odd': this.props.index % 2 !== 0
         });
         var content = this.renderContent();
@@ -1762,9 +1804,9 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
 
   var _excluded = ["originalEvent"];
 
-  function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+  function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-  function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$5(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+  function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
   function _createSuper$7(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$7(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -1801,7 +1843,8 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
       _this.onRadioChange = _this.onRadioChange.bind(_assertThisInitialized(_this));
       _this.onCheckboxChange = _this.onCheckboxChange.bind(_assertThisInitialized(_this));
       _this.onDragSelectionMouseMove = _this.onDragSelectionMouseMove.bind(_assertThisInitialized(_this));
-      _this.onDragSelectionMouseUp = _this.onDragSelectionMouseUp.bind(_assertThisInitialized(_this)); // cell
+      _this.onDragSelectionMouseUp = _this.onDragSelectionMouseUp.bind(_assertThisInitialized(_this));
+      _this.isSelectable = _this.isSelectable.bind(_assertThisInitialized(_this)); // cell
 
       _this.onCellClick = _this.onCellClick.bind(_assertThisInitialized(_this));
       _this.onCellMouseDown = _this.onCellMouseDown.bind(_assertThisInitialized(_this));
@@ -1819,7 +1862,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
     }, {
       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 : utils.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 : utils.ObjectUtils.equals(data1, data2, this.props.dataKey);
       }
     }, {
       key: "isSubheaderGrouping",
@@ -1891,6 +1934,11 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
 
         return false;
       }
+    }, {
+      key: "isSelectable",
+      value: function isSelectable(options) {
+        return this.props.isDataSelectable ? this.props.isDataSelectable(options) : true;
+      }
     }, {
       key: "isRowExpanded",
       value: function isRowExpanded(rowData) {
@@ -2060,8 +2108,17 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
       value: function onSingleSelection(_ref) {
         var originalEvent = _ref.originalEvent,
             data = _ref.data,
+            index = _ref.index,
             toggleable = _ref.toggleable,
             type = _ref.type;
+
+        if (!this.isSelectable({
+          data: data,
+          index: index
+        })) {
+          return;
+        }
+
         var selected = this.isSelected(data);
         var selection = this.props.selection;
 
@@ -2088,7 +2145,8 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
         if (this.props.onSelectionChange && selection !== this.props.selection) {
           this.props.onSelectionChange({
             originalEvent: originalEvent,
-            value: selection
+            value: selection,
+            type: type
           });
         }
       }
@@ -2099,8 +2157,17 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
 
         var originalEvent = _ref2.originalEvent,
             data = _ref2.data,
+            index = _ref2.index,
             toggleable = _ref2.toggleable,
             type = _ref2.type;
+
+        if (!this.isSelectable({
+          data: data,
+          index: index
+        })) {
+          return;
+        }
+
         var selected = this.isSelected(data);
         var selection = this.props.selection || [];
 
@@ -2144,13 +2211,14 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
         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) {
         utils.DomHandler.clearSelection();
         this.rangeRowIndex = this.allowCellSelection() ? event.rowIndex : event.index;
         var selectionInRange = this.selectRange(event);
@@ -2159,7 +2227,8 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
         if (this.props.onSelectionChange && selection !== this.props.selection) {
           this.props.onSelectionChange({
             originalEvent: event.originalEvent,
-            value: selection
+            value: selection,
+            type: type
           });
         }
 
@@ -2171,12 +2240,6 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
       key: "selectRange",
       value: function selectRange(event) {
         var rangeStart, rangeEnd;
-        var isLazyAndPaginator = this.props.lazy && this.props.paginator;
-
-        if (isLazyAndPaginator) {
-          this.anchorRowIndex += this.anchorRowFirst;
-          this.rangeRowIndex += this.props.first;
-        }
 
         if (this.rangeRowIndex > this.anchorRowIndex) {
           rangeStart = this.anchorRowIndex;
@@ -2188,7 +2251,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
           rangeStart = rangeEnd = this.rangeRowIndex;
         }
 
-        if (isLazyAndPaginator) {
+        if (this.props.paginator) {
           rangeStart = Math.max(rangeStart - this.props.first, 0);
           rangeEnd -= this.props.first;
         }
@@ -2203,6 +2266,14 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
 
         for (var i = rowRangeStart; i <= rowRangeEnd; i++) {
           var rangeRowData = value[i];
+
+          if (!this.isSelectable({
+            data: rangeRowData,
+            index: i
+          })) {
+            continue;
+          }
+
           selection.push(rangeRowData);
           this.onSelect({
             originalEvent: event.originalEvent,
@@ -2239,14 +2310,25 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
 
           for (var j = cellRangeStart; j <= cellRangeEnd; j++) {
             var field = columns[j].props.field;
+
+            var _value = utils.ObjectUtils.resolveFieldData(rowData, field);
+
             var rangeRowData = {
-              value: utils.ObjectUtils.resolveFieldData(rowData, field),
+              value: _value,
               field: field,
               rowData: rowData,
               rowIndex: i,
               cellIndex: j,
               selected: true
             };
+
+            if (!this.isSelectable({
+              data: rangeRowData,
+              index: i
+            })) {
+              continue;
+            }
+
             selection.push(rangeRowData);
             this.onSelect({
               originalEvent: event.originalEvent,
@@ -2296,7 +2378,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
       value: function focusOnElement(event, isFocused) {
         var target = event.currentTarget;
 
-        if (!this.allowCellSelection()) {
+        if (!this.allowCellSelection() && this.props.selectionAutoFocus) {
           if (this.isCheckboxSelectionModeInColumn()) {
             var checkbox = utils.DomHandler.findSingle(target, 'td.p-selection-column .p-checkbox-box');
             checkbox && checkbox.focus();
@@ -2308,6 +2390,22 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
 
         !isFocused && target && target.focus();
       }
+    }, {
+      key: "changeTabIndex",
+      value: function changeTabIndex(event, type) {
+        var target = event.currentTarget;
+        var isSelectable = utils.DomHandler.hasClass(target, type === 'cell' ? 'p-selectable-cell' : 'p-selectable-row');
+
+        if (isSelectable) {
+          var selector = type === 'cell' ? 'tr > td' : 'tr';
+          var tabbableEl = utils.DomHandler.findSingle(this.el, "".concat(selector, "[tabindex=\"").concat(this.props.tabIndex, "\"]"));
+
+          if (tabbableEl && target) {
+            tabbableEl.tabIndex = -1;
+            target.tabIndex = this.props.tabIndex;
+          }
+        }
+      }
     }, {
       key: "onRowClick",
       value: function onRowClick(event) {
@@ -2319,7 +2417,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
 
         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;
@@ -2338,6 +2436,8 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
               }));
             }
           }
+
+          this.changeTabIndex(event.originalEvent, 'row');
         } else {
           this.focusOnElement(event.originalEvent);
         }
@@ -2393,7 +2493,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
         if (utils.DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle')) event.currentTarget.draggable = true;else event.currentTarget.draggable = false;
 
         if (this.allowRowDrag(e)) {
-          this.enableDragSelection(event);
+          this.enableDragSelection(event, 'row');
           this.anchorRowIndex = e.index;
           this.rangeRowIndex = e.index;
           this.anchorRowFirst = this.props.first;
@@ -2405,7 +2505,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
         var isSameRow = event.index === this.anchorRowIndex;
 
         if (this.allowRowDrag(event) && !isSameRow) {
-          this.onRangeSelection(event);
+          this.onRangeSelection(event, 'row');
         }
       }
     }, {
@@ -2608,7 +2708,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
 
         if (this.allowCellSelection()) {
           if (this.allowRangeSelection(event)) {
-            this.onRangeSelection(event);
+            this.onRangeSelection(event, 'cell');
           } else {
             var toggleable = this.allowMetaKeySelection(event);
 
@@ -2624,6 +2724,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
               this.onSingleSelection({
                 originalEvent: originalEvent,
                 data: data,
+                index: event.rowIndex,
                 toggleable: toggleable,
                 type: 'cell'
               });
@@ -2631,11 +2732,14 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
               this.onMultipleSelection({
                 originalEvent: originalEvent,
                 data: data,
+                index: event.rowIndex,
                 toggleable: toggleable,
                 type: 'cell'
               });
             }
           }
+
+          this.changeTabIndex(event.originalEvent, 'cell');
         }
 
         this.rowTouched = false;
@@ -2657,7 +2761,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
         var isSameCell = event.rowIndex === this.anchorRowIndex && event.cellIndex === this.anchorCellIndex;
 
         if (this.allowCellDrag(event) && !isSameCell) {
-          this.onRangeSelection(event);
+          this.onRangeSelection(event, 'cell');
         }
       }
     }, {
@@ -2701,6 +2805,10 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
         if (!this.props.isVirtualScrollerDisabled && this.getVirtualScrollerOption('vertical') && this.getVirtualScrollerOption('itemSize', prevProps.virtualScrollerOptions) !== this.getVirtualScrollerOption('itemSize')) {
           this.updateVirtualScrollerPosition();
         }
+
+        if (this.props.paginator && this.isMultipleSelection() && this.props.first !== prevProps.first) {
+          this.anchorRowIndex = null;
+        }
       }
     }, {
       key: "componentWillUnmount",
@@ -2732,7 +2840,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
     }, {
       key: "renderGroupHeader",
       value: function renderGroupHeader(rowData, index, expanded, isSubheaderGrouping, colSpan) {
-        if (isSubheaderGrouping && this.shouldRenderRowGroupHeader(this.props.value, rowData, index)) {
+        if (isSubheaderGrouping && this.shouldRenderRowGroupHeader(this.props.value, rowData, index - this.props.first)) {
           var style = this.rowGroupHeaderStyle();
           var toggler = this.props.expandableRowGroups && /*#__PURE__*/React__default["default"].createElement(RowTogglerButton, {
             onClick: this.onRowToggle,
@@ -2780,6 +2888,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
             onRowDoubleClick: this.onRowDoubleClick,
             onRowRightClick: this.onRowRightClick,
             tabIndex: this.props.tabIndex,
+            isSelectable: this.isSelectable,
             onRowTouchEnd: this.onRowTouchEnd,
             onRowMouseDown: this.onRowMouseDown,
             onRowMouseUp: this.onRowMouseUp,
@@ -2851,7 +2960,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
     }, {
       key: "renderGroupFooter",
       value: function renderGroupFooter(rowData, index, expanded, isSubheaderGrouping, colSpan) {
-        if (isSubheaderGrouping && this.shouldRenderRowGroupFooter(this.props.value, rowData, index, expanded)) {
+        if (isSubheaderGrouping && this.shouldRenderRowGroupFooter(this.props.value, rowData, index - this.props.first, expanded)) {
           var content = utils.ObjectUtils.getJSXElement(this.props.rowGroupFooterTemplate, rowData, {
             index: index,
             colSpan: colSpan,
@@ -2909,9 +3018,9 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
     return TableBody;
   }(React.Component);
 
-  function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+  function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-  function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+  function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
   function _createSuper$6(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$6(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -2998,9 +3107,10 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
         var _this2 = this;
 
         var style = this.getStyle();
-        var className = utils.classNames(this.getColumnProp('footerClassName'), this.getColumnProp('className'), {
+        var align = this.getColumnProp('align');
+        var className = utils.classNames(this.getColumnProp('footerClassName'), this.getColumnProp('className'), _defineProperty({
           'p-frozen-column': this.getColumnProp('frozen')
-        });
+        }, "p-align-".concat(align), !!align));
         var colSpan = this.getColumnProp('colSpan');
         var rowSpan = this.getColumnProp('rowSpan');
         var content = utils.ObjectUtils.getJSXElement(this.getColumnProp('footer'), {
@@ -3147,7 +3257,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
           });
           this.props.onChange({
             originalEvent: event,
-            checked: this.props.checked
+            checked: !this.props.checked
           });
         }
       }
@@ -3191,29 +3301,9 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
     return HeaderCheckbox;
   }(React.Component);
 
-  var FilterMatchMode = Object.freeze({
-    STARTS_WITH: 'startsWith',
-    CONTAINS: 'contains',
-    NOT_CONTAINS: 'notContains',
-    ENDS_WITH: 'endsWith',
-    EQUALS: 'equals',
-    NOT_EQUALS: 'notEquals',
-    IN: 'in',
-    LESS_THAN: 'lt',
-    LESS_THAN_OR_EQUAL_TO: 'lte',
-    GREATER_THAN: 'gt',
-    GREATER_THAN_OR_EQUAL_TO: 'gte',
-    BETWEEN: 'between',
-    DATE_IS: 'dateIs',
-    DATE_IS_NOT: 'dateIsNot',
-    DATE_BEFORE: 'dateBefore',
-    DATE_AFTER: 'dateAfter',
-    CUSTOM: 'custom'
-  });
-
-  function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+  function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-  function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+  function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
   function _createSuper$3(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$3(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -3293,7 +3383,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
     }, {
       key: "isRowMatchModeSelected",
       value: function isRowMatchModeSelected(matchMode) {
-        return this.filterModel.matchMode === matchMode;
+        return this.filterModel && this.filterModel.matchMode === matchMode;
       }
     }, {
       key: "showMenuButton",
@@ -3374,7 +3464,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
         };
 
         if (matchMode === 'custom' && !hasMatchMode(dataType)) {
-          PrimeReact__default["default"].filterMatchModeOptions[dataType].push(FilterMatchMode.CUSTOM);
+          PrimeReact__default["default"].filterMatchModeOptions[dataType].push(PrimeReact.FilterMatchMode.CUSTOM);
           return dataType;
         } else if (matchMode) {
           return Object.keys(PrimeReact__default["default"].filterMatchModeOptions).find(function (key) {
@@ -3586,7 +3676,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
         filters[this.field].constraints.push(newConstraint);
         filterConstraintAddCallback && filterConstraintAddCallback({
           field: this.field,
-          constraing: newConstraint
+          constraint: newConstraint
         });
         this.props.onFilterChange(filters);
 
@@ -3604,7 +3694,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
         var removedConstraint = filters[this.field].constraints.splice(index, 1);
         filterConstraintRemoveCallback && filterConstraintRemoveCallback({
           field: this.field,
-          constraing: removedConstraint
+          constraint: removedConstraint
         });
         this.props.onFilterChange(filters);
 
@@ -3738,7 +3828,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
 
         if (!this.resizeListener) {
           this.resizeListener = function () {
-            if (_this5.state.overlayVisible) {
+            if (_this5.state.overlayVisible && !utils.DomHandler.isTouchDevice()) {
               _this5.hide();
             }
           };
@@ -3846,16 +3936,17 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
       value: function renderFilterElement(model, index) {
         var _this6 = this;
 
+        var value = model ? model.value : null;
         return this.getColumnProp('filterElement') ? utils.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__default["default"].createElement(inputtext.InputText, {
           type: this.getColumnProp('filterType'),
-          value: model.value || '',
+          value: value || '',
           onChange: function onChange(e) {
             return _this6.onInputChange(e, index);
           },
@@ -4154,7 +4245,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
         return /*#__PURE__*/React__default["default"].createElement(portal.Portal, null, /*#__PURE__*/React__default["default"].createElement(csstransition.CSSTransition, {
           nodeRef: this.overlayRef,
           classNames: "p-connected-overlay",
-          in: this.state.overlayVisible,
+          "in": this.state.overlayVisible,
           timeout: {
             enter: 120,
             exit: 100
@@ -4192,9 +4283,9 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
     return ColumnFilter;
   }(React.Component);
 
-  function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+  function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-  function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+  function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
   function _createSuper$2(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -4519,7 +4610,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
     }, {
       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__default["default"].createElement(HeaderCheckbox, {
             checked: allRowsSelected,
@@ -4566,7 +4657,8 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
         var isSortableDisabled = this.isSortableDisabled();
         var sortMeta = this.getSortMeta();
         var style = this.getStyle();
-        var className = utils.classNames(this.getColumnProp('headerClassName'), this.getColumnProp('className'), {
+        var align = this.getColumnProp('alignHeader') || this.getColumnProp('align');
+        var className = utils.classNames(this.getColumnProp('headerClassName'), this.getColumnProp('className'), _defineProperty({
           'p-sortable-column': this.getColumnProp('sortable'),
           'p-resizable-column': this.props.resizableColumns,
           'p-highlight': sortMeta.sorted,
@@ -4574,7 +4666,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
           'p-selection-column': this.getColumnProp('selectionMode'),
           'p-sortable-disabled': this.getColumnProp('sortable') && isSortableDisabled,
           'p-reorderable-column': this.props.reorderableColumns && this.getColumnProp('reorderable')
-        });
+        }, "p-align-".concat(align), !!align));
         var tabIndex = this.getColumnProp('sortable') && !isSortableDisabled ? this.props.tabIndex : null;
         var colSpan = this.getColumnProp('colSpan');
         var rowSpan = this.getColumnProp('rowSpan');
@@ -4611,9 +4703,9 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
     return HeaderCell;
   }(React.Component);
 
-  function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+  function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-  function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+  function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
   function _createSuper$1(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -4741,6 +4833,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
             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,
@@ -4748,6 +4841,36 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
           });
         });
       }
+    }, {
+      key: "renderCheckbox",
+      value: function renderCheckbox(selectionMode) {
+        if (this.props.showSelectAll && selectionMode === 'multiple') {
+          var allRowsSelected = this.props.allRowsSelected(this.props.value);
+          return /*#__PURE__*/React__default["default"].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__default["default"].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() {
@@ -4775,24 +4898,15 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
             });
             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__default["default"].createElement("th", {
               key: colKey,
               style: colStyle,
               className: colClassName
-            }, selectionMode === 'multiple' && /*#__PURE__*/React__default["default"].createElement(HeaderCheckbox, {
-              checked: allRowsSelected,
-              onChange: _this4.onCheckboxChange,
-              disabled: _this4.props.empty
-            }), filter && /*#__PURE__*/React__default["default"].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;
@@ -4834,9 +4948,9 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
     return TableHeader;
   }(React.Component);
 
-  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
   function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -4856,7 +4970,8 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
         d_rows: props.rows,
         columnOrder: [],
         groupRowsSortMeta: null,
-        editingMeta: {}
+        editingMeta: {},
+        attributeSelector: null
       };
 
       if (!_this.props.onPage) {
@@ -4874,13 +4989,8 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
 
       if (!_this.props.onFilter) {
         _this.state.filters = props.filters;
-      }
+      } // header
 
-      if (_this.isStateful()) {
-        _this.restoreState(_this.state);
-      }
-
-      _this.attributeSelector = utils.UniqueComponentId(); // header
 
       _this.onSortChange = _this.onSortChange.bind(_assertThisInitialized(_this));
       _this.onFilterChange = _this.onFilterChange.bind(_assertThisInitialized(_this));
@@ -4915,6 +5025,11 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
       value: function isVirtualScrollerDisabled() {
         return utils.ObjectUtils.isEmpty(this.props.virtualScrollerOptions) || !this.props.scrollable;
       }
+    }, {
+      key: "isEquals",
+      value: function isEquals(data1, data2) {
+        return this.props.compareSelectionBy === 'equals' ? data1 === data2 : utils.ObjectUtils.equals(data1, data2, this.props.dataKey);
+      }
     }, {
       key: "hasFilter",
       value: function hasFilter() {
@@ -5122,7 +5237,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
                 };
               };
 
-              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;
@@ -5131,10 +5246,10 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
 
           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;
@@ -5143,9 +5258,9 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
 
           if (restoredState.multiSortMeta) {
             if (this.props.onSort) {
-              this.props.onSort({
+              this.props.onSort(this.createEvent({
                 multiSortMeta: restoredState.multiSortMeta
-              });
+              }));
             } else {
               state.multiSortMeta = restoredState.multiSortMeta;
             }
@@ -5155,9 +5270,9 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
             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);
             }
@@ -5219,18 +5334,14 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
             this.el.style.width = this.tableWidthState;
           }
 
-          this.createStyleElement();
-
-          if (this.props.scrollable && widths && widths.length > 0) {
+          if (utils.ObjectUtils.isNotEmpty(widths)) {
+            this.createStyleElement();
             var innerHTML = '';
             widths.forEach(function (width, index) {
-              innerHTML += "\n                        .p-datatable[".concat(_this4.attributeSelector, "] .p-datatable-thead > tr > th:nth-child(").concat(index + 1, ") {\n                            flex: 0 0 ").concat(width, "px;\n                        }\n\n                        .p-datatable[").concat(_this4.attributeSelector, "] .p-datatable-tbody > tr > td:nth-child(").concat(index + 1, ") {\n                            flex: 0 0 ").concat(width, "px;\n                        }\n                    ");
+              var style = _this4.props.scrollable ? "flex: 1 1 ".concat(width, "px !important") : "width: ".concat(width, "px !important");
+              innerHTML += "\n                        .p-datatable[".concat(_this4.state.attributeSelector, "] .p-datatable-thead > tr > th:nth-child(").concat(index + 1, "),\n                        .p-datatable[").concat(_this4.state.attributeSelector, "] .p-datatable-tbody > tr > td:nth-child(").concat(index + 1, "),\n                        .p-datatable[").concat(_this4.state.attributeSelector, "] .p-datatable-tfoot > tr > td:nth-child(").concat(index + 1, ") {\n                            ").concat(style, "\n                        }\n                    ");
             });
             this.styleElement.innerHTML = innerHTML;
-          } else {
-            utils.DomHandler.find(this.table, '.p-datatable-thead > tr > th').forEach(function (header, index) {
-              return header.style.width = widths[index] + 'px';
-            });
           }
         }
       }
@@ -5255,20 +5366,45 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
       value: function getGroupRowSortField() {
         return this.props.sortMode === 'single' ? this.props.sortField : this.state.groupRowsSortMeta ? this.state.groupRowsSortMeta.field : null;
       }
+    }, {
+      key: "getSelectableData",
+      value: function getSelectableData(val) {
+        var _this5 = this;
+
+        if (this.props.showSelectionElement || this.props.isDataSelectable) {
+          return val.filter(function (data, index) {
+            var isSelectable = true;
+            if (_this5.props.showSelectionElement) isSelectable = _this5.props.showSelectionElement({
+              rowIndex: index,
+              props: _this5.props
+            });
+            if (_this5.props.isDataSelectable && isSelectable) isSelectable = _this5.props.isDataSelectable({
+              data: data,
+              index: index
+            });
+            return isSelectable;
+          });
+        }
+
+        return val;
+      }
     }, {
       key: "allRowsSelected",
       value: function allRowsSelected(processedData) {
-        var _this5 = this;
+        var _this6 = 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.getSelectableData(val);
+          return selectableVal && this.props.selection && selectableVal.every(function (sv) {
+            return _this6.props.selection.some(function (s) {
+              return _this6.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",
@@ -5399,7 +5535,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
     }, {
       key: "resizeTableCells",
       value: function resizeTableCells(newColumnWidth, nextColumnWidth) {
-        var _this6 = this;
+        var _this7 = this;
 
         var widths = [];
         var colIndex = utils.DomHandler.index(this.resizeColumnElement);
@@ -5412,30 +5548,30 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
         var innerHTML = '';
         widths.forEach(function (width, index) {
           var colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width;
-          var style = _this6.props.scrollable ? "flex: 0 0 ".concat(colWidth, "px !important") : "width: ".concat(colWidth, "px !important");
-          innerHTML += "\n                .p-datatable[".concat(_this6.attributeSelector, "] .p-datatable-thead > tr > th:nth-child(").concat(index + 1, "),\n                .p-datatable[").concat(_this6.attributeSelector, "] .p-datatable-tbody > tr > td:nth-child(").concat(index + 1, "),\n                .p-datatable[").concat(_this6.attributeSelector, "] .p-datatable-tfoot > tr > td:nth-child(").concat(index + 1, ") {\n                    ").concat(style, "\n                }\n            ");
+          var style = _this7.props.scrollable ? "flex: 1 1 ".concat(colWidth, "px !important") : "width: ".concat(colWidth, "px !important");
+          innerHTML += "\n                .p-datatable[".concat(_this7.state.attributeSelector, "] .p-datatable-thead > tr > th:nth-child(").concat(index + 1, "),\n                .p-datatable[").concat(_this7.state.attributeSelector, "] .p-datatable-tbody > tr > td:nth-child(").concat(index + 1, "),\n                .p-datatable[").concat(_this7.state.attributeSelector, "] .p-datatable-tfoot > tr > td:nth-child(").concat(index + 1, ") {\n                    ").concat(style, "\n                }\n            ");
         });
         this.styleElement.innerHTML = innerHTML;
       }
     }, {
       key: "bindColumnResizeEvents",
       value: function bindColumnResizeEvents() {
-        var _this7 = this;
+        var _this8 = this;
 
         if (!this.documentColumnResizeListener) {
           this.documentColumnResizeListener = document.addEventListener('mousemove', function (event) {
-            if (_this7.columnResizing) {
-              _this7.onColumnResize(event);
+            if (_this8.columnResizing) {
+              _this8.onColumnResize(event);
             }
           });
         }
 
         if (!this.documentColumnResizeEndListener) {
           this.documentColumnResizeEndListener = document.addEventListener('mouseup', function () {
-            if (_this7.columnResizing) {
-              _this7.columnResizing = false;
+            if (_this8.columnResizing) {
+              _this8.columnResizing = false;
 
-              _this7.onColumnResizeEnd();
+              _this8.onColumnResizeEnd();
             }
           });
         }
@@ -5467,39 +5603,43 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
     }, {
       key: "onColumnHeaderCheckboxChange",
       value: function onColumnHeaderCheckboxChange(e, processedData) {
-        var _this8 = this;
+        var _this9 = this;
 
-        var originalEvent = e.originalEvent,
-            checked = e.checked;
-        var selection;
+        if (this.props.onSelectAllChange) {
+          this.props.onSelectAllChange(e);
+        } else {
+          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 _this9.isEquals(s, d);
+            });
+          }) : [];
 
-        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
+          if (checked) {
+            selection = this.props.frozenValue ? [].concat(_toConsumableArray(selection), _toConsumableArray(this.props.frozenValue), _toConsumableArray(data)) : [].concat(_toConsumableArray(selection), _toConsumableArray(data));
+            selection = this.getSelectableData(selection);
+            this.props.onAllRowsSelect && this.props.onAllRowsSelect({
+              originalEvent: originalEvent,
+              data: selection,
+              type: 'all'
             });
-          }) : selection;
-          this.props.onAllRowsSelect && this.props.onAllRowsSelect({
-            originalEvent: originalEvent,
-            data: selection,
-            type: 'all'
-          });
-        } else {
-          selection = [];
-          this.props.onAllRowsUnselect && this.props.onAllRowsUnselect({
-            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'
+            });
+          }
         }
       }
     }, {
@@ -5565,7 +5705,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
     }, {
       key: "onColumnHeaderDrop",
       value: function onColumnHeaderDrop(e) {
-        var _this9 = this;
+        var _this10 = this;
 
         var event = e.originalEvent,
             column = e.column;
@@ -5588,7 +5728,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
             };
 
             var dragColIndex = columns.findIndex(function (child) {
-              return isSameColumn(child, _this9.draggedColumn);
+              return isSameColumn(child, _this10.draggedColumn);
             });
             var dropColIndex = columns.findIndex(function (child) {
               return isSameColumn(child, column);
@@ -5632,40 +5772,32 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
     }, {
       key: "createStyleElement",
       value: function createStyleElement() {
-        this.styleElement = document.createElement('style');
-        document.head.appendChild(this.styleElement);
+        this.styleElement = utils.DomHandler.createInlineStyle(PrimeReact__default["default"].nonce);
       }
     }, {
       key: "createResponsiveStyle",
       value: function createResponsiveStyle() {
         if (!this.responsiveStyleElement) {
-          this.responsiveStyleElement = document.createElement('style');
-          document.head.appendChild(this.responsiveStyleElement);
-          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 = utils.DomHandler.createInlineStyle(PrimeReact__default["default"].nonce);
+          var innerHTML = "\n@media screen and (max-width: ".concat(this.props.breakpoint, ") {\n    .p-datatable[").concat(this.state.attributeSelector, "] .p-datatable-thead > tr > th,\n    .p-datatable[").concat(this.state.attributeSelector, "] .p-datatable-tfoot > tr > td {\n        display: none !important;\n    }\n\n    .p-datatable[").concat(this.state.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.state.attributeSelector, "] .p-datatable-tbody > tr > td:not(:last-child) {\n        border: 0 none;\n    }\n\n    .p-datatable[").concat(this.state.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.state.attributeSelector, "] .p-datatable-tbody > tr > td > .p-column-title {\n        display: block;\n    }\n}\n");
           this.responsiveStyleElement.innerHTML = innerHTML;
         }
       }
     }, {
       key: "destroyResponsiveStyle",
       value: function destroyResponsiveStyle() {
-        if (this.responsiveStyleElement) {
-          document.head.removeChild(this.responsiveStyleElement);
-          this.responsiveStyleElement = null;
-        }
+        this.responsiveStyleElement = utils.DomHandler.removeInlineStyle(this.responsiveStyleElement);
       }
     }, {
       key: "destroyStyleElement",
       value: function destroyStyleElement() {
-        if (this.styleElement) {
-          document.head.removeChild(this.styleElement);
-          this.styleElement = null;
-        }
+        this.styleElement = utils.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
         });
@@ -5729,7 +5861,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
         }
 
         if (this.props.onSort) {
-          this.props.onSort(eventMeta);
+          this.props.onSort(this.createEvent(eventMeta));
         } else {
           eventMeta.first = 0;
           this.setState(eventMeta);
@@ -5748,6 +5880,11 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
       value: function getCalculatedSortOrder(currentOrder) {
         return this.props.removableSort ? this.props.defaultSortOrder === currentOrder ? currentOrder * -1 : 0 : currentOrder * -1;
       }
+    }, {
+      key: "compareValuesOnSort",
+      value: function compareValuesOnSort(value1, value2) {
+        return utils.ObjectUtils.sort(value1, value2, 1, PrimeReact__default["default"].locale);
+      }
     }, {
       key: "addSortMeta",
       value: function addSortMeta(meta, multiSortMeta) {
@@ -5772,6 +5909,8 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
     }, {
       key: "sortSingle",
       value: function sortSingle(data, field, order) {
+        var _this11 = this;
+
         if (this.props.groupRowsBy && this.props.groupRowsBy === this.props.sortField) {
           var multiSortMeta = [{
             field: this.props.sortField,
@@ -5795,10 +5934,9 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
           value.sort(function (data1, data2) {
             var value1 = utils.ObjectUtils.resolveFieldData(data1, field);
             var value2 = utils.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 = _this11.compareValuesOnSort(value1, value2);
+
             return order * result;
           });
         }
@@ -5808,7 +5946,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
     }, {
       key: "sortMultiple",
       value: function sortMultiple(data) {
-        var _this10 = this;
+        var _this12 = this;
 
         var multiSortMeta = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
 
@@ -5825,7 +5963,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
 
         if (this.columnSortable && this.columnSortFunction) {
           var meta = multiSortMeta.find(function (meta) {
-            return meta.field === _this10.columnField;
+            return meta.field === _this12.columnField;
           });
           var field = this.columnField;
           var order = meta ? meta.order : this.defaultSortOrder;
@@ -5835,7 +5973,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
           });
         } else {
           value.sort(function (data1, data2) {
-            return _this10.multisortField(data1, data2, multiSortMeta, 0);
+            return _this12.multisortField(data1, data2, multiSortMeta, 0);
           });
         }
 
@@ -5846,22 +5984,12 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
       value: function multisortField(data1, data2, multiSortMeta, index) {
         var value1 = utils.ObjectUtils.resolveFieldData(data1, multiSortMeta[index].field);
         var value2 = utils.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;
       }
     }, {
@@ -5875,25 +6003,25 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
     }, {
       key: "onFilterApply",
       value: function onFilterApply() {
-        var _this11 = this;
+        var _this13 = this;
 
         clearTimeout(this.filterTimeout);
         this.filterTimeout = setTimeout(function () {
-          var filters = _this11.cloneFilters(_this11.state.d_filters);
+          var filters = _this13.cloneFilters(_this13.state.d_filters);
 
-          if (_this11.props.onFilter) {
-            _this11.props.onFilter({
+          if (_this13.props.onFilter) {
+            _this13.props.onFilter(_this13.createEvent({
               filters: filters
-            });
+            }));
           } else {
-            _this11.setState({
+            _this13.setState({
               first: 0,
               filters: filters
             });
           }
 
-          if (_this11.props.onValueChange) {
-            _this11.props.onValueChange(_this11.processedData({
+          if (_this13.props.onValueChange) {
+            _this13.props.onValueChange(_this13.processedData({
               filters: filters
             }));
           }
@@ -5991,7 +6119,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
     }, {
       key: "cloneFilters",
       value: function cloneFilters(filters) {
-        var _this12 = this;
+        var _this14 = this;
 
         filters = filters || this.props.filters;
         var cloned = {};
@@ -6012,34 +6140,31 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
         } 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__default["default"].filterMatchModeOptions[dataType] ? PrimeReact__default["default"].filterMatchModeOptions[dataType][0] : PrimeReact.FilterMatchMode.STARTS_WITH);
-              var constraint = {
-                value: null,
-                matchMode: matchMode
-              };
-
-              if (filterFunction) {
-                PrimeReact.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__default["default"].filterMatchModeOptions[dataType] ? PrimeReact__default["default"].filterMatchModeOptions[dataType][0] : PrimeReact.FilterMatchMode.STARTS_WITH);
+            var constraint = {
+              value: null,
+              matchMode: matchMode
+            };
 
-                  return filterFunction.apply(void 0, args.concat([{
-                    column: col
-                  }]));
-                });
-              }
+            if (filterFunction) {
+              PrimeReact.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: PrimeReact.FilterOperator.AND,
-                constraints: [constraint]
-              } : constraint;
+                return filterFunction.apply(void 0, args.concat([{
+                  column: col
+                }]));
+              });
             }
 
+            _filters[field] = _this14.props.filterDisplay === 'menu' ? {
+              operator: PrimeReact.FilterOperator.AND,
+              constraints: [constraint]
+            } : constraint;
             return _filters;
           }, {});
         }
@@ -6095,6 +6220,14 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
         this.resetColumnOrder();
         this.setState(state);
       }
+    }, {
+      key: "resetScroll",
+      value: function resetScroll() {
+        if (this.wrapper) {
+          var scrollableContainer = !this.isVirtualScrollerDisabled() ? utils.DomHandler.findSingle(this.wrapper, '.p-virtualscroller') : this.wrapper;
+          scrollableContainer.scrollTo(0, 0);
+        }
+      }
     }, {
       key: "resetColumnOrder",
       value: function resetColumnOrder() {
@@ -6115,7 +6248,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
     }, {
       key: "exportCSV",
       value: function exportCSV(options) {
-        var _this13 = this;
+        var _this15 = this;
 
         var data;
         var csv = "\uFEFF";
@@ -6138,7 +6271,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
             csv += '"' + (header || field) + '"';
 
             if (i < columns.length - 1) {
-              csv += _this13.props.csvSeparator;
+              csv += _this15.props.csvSeparator;
             }
           }
         }); //body
@@ -6147,14 +6280,16 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
           csv += '\n';
           columns.forEach(function (column, i) {
             var _column$props2 = column.props,
-                field = _column$props2.field,
+                columnField = _column$props2.field,
+                exportField = _column$props2.exportField,
                 exportable = _column$props2.exportable;
+            var field = exportField || columnField;
 
             if (exportable && field) {
               var cellData = utils.ObjectUtils.resolveFieldData(record, field);
 
               if (cellData != null) {
-                cellData = _this13.props.exportFunction ? _this13.props.exportFunction({
+                cellData = _this15.props.exportFunction ? _this15.props.exportFunction({
                   data: cellData,
                   field: field,
                   rowData: record,
@@ -6165,7 +6300,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
               csv += '"' + cellData + '"';
 
               if (i < columns.length - 1) {
-                csv += _this13.props.csvSeparator;
+                csv += _this15.props.csvSeparator;
               }
             }
           });
@@ -6179,6 +6314,18 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
           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) {
@@ -6216,14 +6363,24 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
     }, {
       key: "componentDidMount",
       value: function componentDidMount() {
-        this.el.setAttribute(this.attributeSelector, '');
+        var _this16 = this;
 
-        if (this.props.responsiveLayout === 'stack' && !this.props.scrollable) {
-          this.createResponsiveStyle();
-        }
+        this.setState({
+          attributeSelector: utils.UniqueComponentId()
+        }, function () {
+          _this16.el.setAttribute(_this16.state.attributeSelector, '');
+
+          if (_this16.props.responsiveLayout === 'stack' && !_this16.props.scrollable) {
+            _this16.createResponsiveStyle();
+          }
+        });
 
-        if (this.isStateful() && this.props.resizableColumns) {
-          this.restoreColumnWidths();
+        if (this.isStateful()) {
+          this.setState(this.restoreState(this.state));
+
+          if (this.props.resizableColumns) {
+            this.restoreColumnWidths();
+          }
         }
       }
     }, {
@@ -6323,6 +6480,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
           filtersStore: filtersStore,
           onFilterChange: this.onFilterChange,
           onFilterApply: this.onFilterApply,
+          showSelectAll: this.props.showSelectAll,
           allRowsSelected: this.allRowsSelected,
           onColumnCheckboxChange: this.onColumnHeaderCheckboxChange,
           onColumnMouseDown: this.onColumnHeaderMouseDown,
@@ -6337,7 +6495,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
     }, {
       key: "renderTableBody",
       value: function renderTableBody(options, selectionModeInColumn, empty, isVirtualScrollerDisabled) {
-        var tableSelector = this.attributeSelector;
+        var tableSelector = this.state.attributeSelector;
         var first = this.getFirst();
         var editingMeta = this.state.editingMeta;
         var rows = options.rows,
@@ -6401,6 +6559,8 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
           onRowEditCancel: this.props.onRowEditCancel,
           cellClassName: this.props.cellClassName,
           responsiveLayout: this.props.responsiveLayout,
+          selectionAutoFocus: this.props.selectionAutoFocus,
+          isDataSelectable: this.props.isDataSelectable,
           showSelectionElement: this.props.showSelectionElement,
           showRowReorderElement: this.props.showRowReorderElement,
           expandedRowIcon: this.props.expandedRowIcon,
@@ -6466,6 +6626,8 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
           onRowEditCancel: this.props.onRowEditCancel,
           cellClassName: this.props.cellClassName,
           responsiveLayout: this.props.responsiveLayout,
+          selectionAutoFocus: this.props.selectionAutoFocus,
+          isDataSelectable: this.props.isDataSelectable,
           showSelectionElement: this.props.showSelectionElement,
           showRowReorderElement: this.props.showRowReorderElement,
           expandedRowIcon: this.props.expandedRowIcon,
@@ -6490,42 +6652,43 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
     }, {
       key: "renderContent",
       value: function renderContent(processedData, columns, selectionModeInColumn, empty) {
-        var _this14 = this;
+        var _this17 = this;
 
         if (!columns) return;
         var isVirtualScrollerDisabled = this.isVirtualScrollerDisabled();
         var virtualScrollerOptions = this.props.virtualScrollerOptions || {};
         return /*#__PURE__*/React__default["default"].createElement("div", {
+          ref: function ref(el) {
+            return _this17.wrapper = el;
+          },
           className: "p-datatable-wrapper",
           style: {
-            maxHeight: isVirtualScrollerDisabled ? this.props.scrollHeight : ''
+            maxHeight: isVirtualScrollerDisabled ? this.props.scrollHeight : null
           }
         }, /*#__PURE__*/React__default["default"].createElement(virtualscroller.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;
+              _this17.table = el;
               options.spacerRef && options.spacerRef(el);
             };
 
-            var tableClassName = utils.classNames('p-datatable-table', _this14.props.tableClassName);
+            var tableClassName = utils.classNames('p-datatable-table', _this17.props.tableClassName);
 
-            var tableHeader = _this14.renderTableHeader(options, empty);
+            var tableHeader = _this17.renderTableHeader(options, empty);
 
-            var tableBody = _this14.renderTableBody(options, selectionModeInColumn, empty, isVirtualScrollerDisabled);
+            var tableBody = _this17.renderTableBody(options, selectionModeInColumn, empty, isVirtualScrollerDisabled);
 
-            var tableFooter = _this14.renderTableFooter(options);
+            var tableFooter = _this17.renderTableFooter(options);
 
             return /*#__PURE__*/React__default["default"].createElement("table", {
               ref: ref,
-              style: _this14.props.tableStyle,
+              style: _this17.props.tableStyle,
               className: tableClassName,
               role: "table"
             }, tableHeader, tableBody, tableFooter);
@@ -6587,12 +6750,12 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
     }, {
       key: "renderResizeHelper",
       value: function renderResizeHelper() {
-        var _this15 = this;
+        var _this18 = this;
 
         if (this.props.resizableColumns) {
           return /*#__PURE__*/React__default["default"].createElement("div", {
             ref: function ref(el) {
-              return _this15.resizeHelper = el;
+              return _this18.resizeHelper = el;
             },
             className: "p-column-resizer-helper",
             style: {
@@ -6606,7 +6769,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
     }, {
       key: "renderReorderIndicators",
       value: function renderReorderIndicators() {
-        var _this16 = this;
+        var _this19 = this;
 
         if (this.props.reorderableColumns) {
           var style = {
@@ -6615,13 +6778,13 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
           };
           return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
             ref: function ref(el) {
-              return _this16.reorderIndicatorUp = el;
+              return _this19.reorderIndicatorUp = el;
             },
             className: "pi pi-arrow-down p-datatable-reorder-indicator-up",
             style: style
           }), /*#__PURE__*/React__default["default"].createElement("span", {
             ref: function ref(el) {
-              return _this16.reorderIndicatorDown = el;
+              return _this19.reorderIndicatorDown = el;
             },
             className: "pi pi-arrow-up p-datatable-reorder-indicator-down",
             style: style
@@ -6633,15 +6796,18 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
     }, {
       key: "render",
       value: function render() {
-        var _this17 = this;
+        var _this20 = this;
 
         var processedData = this.processedData();
         var columns = this.getColumns();
         var totalRecords = this.getTotalRecords(processedData);
         var empty = utils.ObjectUtils.isEmpty(processedData);
         var selectionModeInColumn = this.getSelectionModeInColumn(columns);
+        var selectable = this.props.selectionMode || selectionModeInColumn;
         var className = utils.classNames('p-datatable p-component', {
-          'p-datatable-hoverable-rows': this.props.rowHover || this.props.selectionMode || selectionModeInColumn,
+          'p-datatable-hoverable-rows': this.props.rowHover,
+          'p-datatable-selectable': selectable && !this.props.cellSelection,
+          'p-datatable-selectable-cell': selectable && this.props.cellSelection,
           'p-datatable-auto-layout': this.props.autoLayout,
           'p-datatable-resizable': this.props.resizableColumns,
           'p-datatable-resizable-fit': this.props.resizableColumns && this.props.columnResizeMode === 'fit',
@@ -6669,7 +6835,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
         var reorderIndicators = this.renderReorderIndicators();
         return /*#__PURE__*/React__default["default"].createElement("div", {
           ref: function ref(el) {
-            return _this17.el = el;
+            return _this20.el = el;
           },
           id: this.props.id,
           className: className,
@@ -6736,6 +6902,11 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
     dataKey: null,
     metaKeySelection: true,
     selectOnEdit: true,
+    selectionPageOnly: false,
+    selectionAutoFocus: true,
+    showSelectAll: true,
+    selectAll: false,
+    onSelectAllChange: null,
     headerColumnGroup: null,
     footerColumnGroup: null,
     rowExpansionTemplate: null,
@@ -6784,6 +6955,7 @@ this.primereact.datatable = (function (exports, React, paginator, utils, PrimeRe
     globalFilterFields: null,
     showSelectionElement: null,
     showRowReorderElement: null,
+    isDataSelectable: null,
     onColumnResizeEnd: null,
     onColumnResizerClick: null,
     onColumnResizerDoubleClick: null,