primereact 7.0.0-rc.2 → 7.2.0

package/datatable/datatable.js

@@ -1,5 +1,5 @@
 this.primereact = this.primereact || {};
-this.primereact.datatable = (function (exports, React, paginator, core, PrimeReact, inputtext, dropdown, button, virtualscroller) {
+this.primereact.datatable = (function (exports, React, paginator, utils, PrimeReact, overlayservice, ripple, csstransition, portal, inputtext, dropdown, button, virtualscroller) {
   'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -121,6 +121,9 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
   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, core, PrimeRea
         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, core, PrimeRea
       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,17 +303,20 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
       value: function render() {
         var _this2 = this;
 
-        var className = core.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"
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          className: className
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "p-hidden-accessible"
-        }, /*#__PURE__*/React__default['default'].createElement("input", {
+        }, /*#__PURE__*/React__default["default"].createElement("input", {
           name: name,
           ref: function ref(el) {
             return _this2.input = el;
@@ -327,12 +327,12 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
           onBlur: this.onBlur,
           onChange: this.onChange,
           onKeyDown: this.onKeyDown
-        })), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: className,
+        })), /*#__PURE__*/React__default["default"].createElement("div", {
+          className: boxClassName,
           onClick: this.onClick,
           role: "radio",
           "aria-checked": this.props.checked
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "p-radiobutton-icon"
         })));
       }
@@ -372,10 +372,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
           this.setState({
             focused: true
           });
-          this.props.onChange({
-            originalEvent: event,
-            data: this.props.value
-          });
+          this.props.onChange(event);
         }
       }
     }, {
@@ -403,27 +400,30 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     }, {
       key: "render",
       value: function render() {
-        var className = core.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
         });
-        var iconClassName = core.classNames('p-checkbox-icon', {
+        var iconClassName = utils.classNames('p-checkbox-icon', {
           'pi pi-check': this.props.checked
         });
         var tabIndex = this.props.disabled ? null : '0';
-        return /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "p-checkbox p-component",
-          onClick: this.onClick
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
           className: className,
+          onClick: this.onClick
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
+          className: boxClassName,
           role: "checkbox",
           "aria-checked": this.props.checked,
           tabIndex: tabIndex,
           onKeyDown: this.onKeyDown,
           onFocus: this.onFocus,
           onBlur: this.onBlur
-        }, /*#__PURE__*/React__default['default'].createElement("span", {
+        }, /*#__PURE__*/React__default["default"].createElement("span", {
           className: iconClassName
         })));
       }
@@ -432,9 +432,9 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     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, core, PrimeRea
       _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));
@@ -487,7 +489,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     }, {
       key: "equalsData",
       value: function equalsData(data) {
-        return this.props.compareSelectionBy === 'equals' ? data === this.props.rowData : core.ObjectUtils.equals(data, this.props.rowData, this.props.dataKey);
+        return this.props.compareSelectionBy === 'equals' ? data === this.props.rowData : utils.ObjectUtils.equals(data, this.props.rowData, this.props.dataKey);
       }
     }, {
       key: "equals",
@@ -517,10 +519,9 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
         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,10 +532,18 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
           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) {
-        return core.ObjectUtils.resolveFieldData(data || this.props.rowData, this.field);
+        return utils.ObjectUtils.resolveFieldData(data || this.props.rowData, this.field);
       }
     }, {
       key: "getEditingRowData",
@@ -575,7 +584,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
           }, function () {
             _this3.unbindDocumentEditListener();
 
-            core.OverlayService.off('overlay-click', _this3.overlayEventListener);
+            overlayservice.OverlayService.off('overlay-click', _this3.overlayEventListener);
             _this3.overlayEventListener = null;
           });
         }, 1);
@@ -612,36 +621,35 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
           }
 
           this.closeCell(event);
+        } else {
+          event.preventDefault();
         }
       }
     }, {
       key: "findNextSelectableCell",
       value: function findNextSelectableCell(cell) {
         var nextCell = cell.nextElementSibling;
-        return nextCell ? core.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 ? core.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 ? core.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 core.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",
@@ -659,13 +667,24 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
         clearTimeout(this.tabindexTimeout);
         this.tabindexTimeout = setTimeout(function () {
           if (_this4.state.editing) {
-            var focusableEl = core.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() {
@@ -679,7 +698,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
             var next = this.el.nextElementSibling;
 
             if (next) {
-              right = core.DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
+              right = utils.DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
             }
 
             styleObject['right'] = right + 'px';
@@ -688,7 +707,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
             var prev = this.el.previousElementSibling;
 
             if (prev) {
-              left = core.DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
+              left = utils.DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
             }
 
             styleObject['left'] = left + 'px';
@@ -715,7 +734,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     }, {
       key: "onClick",
       value: function onClick(event) {
-        var _this5 = this;
+        var _this6 = this;
 
         var params = this.getCellCallbackParams(event);
 
@@ -731,7 +750,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
 
 
           setTimeout(function () {
-            _this5.setState({
+            _this6.setState({
               editing: true
             }, function () {
               if (onCellEditInit) {
@@ -739,15 +758,15 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
               }
 
               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;
                   }
                 };
 
-                core.OverlayService.on('overlay-click', _this5.overlayEventListener);
+                overlayservice.OverlayService.on('overlay-click', _this6.overlayEventListener);
               }
             });
           }, 1);
@@ -821,10 +840,9 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
             //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();
               }
@@ -834,10 +852,9 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
             //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();
               }
@@ -848,13 +865,16 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
 
             case 13:
               // @deprecated
-              this.onClick(event);
-              event.preventDefault();
+              if (!utils.DomHandler.isClickable(target)) {
+                this.onClick(event);
+                event.preventDefault();
+              }
+
               break;
             //space
 
             case 32:
-              if (target.nodeName !== 'INPUT' && target.nodeName !== 'TEXTAREA' && !target.readOnly) {
+              if (!utils.DomHandler.isClickable(target) && !target.readOnly) {
                 this.onClick(event);
                 event.preventDefault();
               }
@@ -877,6 +897,24 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
       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) {
@@ -907,6 +945,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
           field: this.field,
           index: this.props.rowIndex
         });
+        this.focusOnInit();
       }
     }, {
       key: "onRowEditCancel",
@@ -918,19 +957,20 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
           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);
@@ -985,7 +1025,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
         this.unbindDocumentEditListener();
 
         if (this.overlayEventListener) {
-          core.OverlayService.off('overlay-click', this.overlayEventListener);
+          overlayservice.OverlayService.off('overlay-click', this.overlayEventListener);
           this.overlayEventListener = null;
         }
       }
@@ -1001,13 +1041,13 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
           column: this.props.column,
           field: this.field
         });
-        var content = core.ObjectUtils.getJSXElement(this.getVirtualScrollerOption('loadingTemplate'), options);
-        return /*#__PURE__*/React__default['default'].createElement("td", null, content);
+        var content = utils.ObjectUtils.getJSXElement(this.getVirtualScrollerOption('loadingTemplate'), options);
+        return /*#__PURE__*/React__default["default"].createElement("td", null, content);
       }
     }, {
       key: "renderElement",
       value: function renderElement() {
-        var _this7 = this;
+        var _this8 = this;
 
         var content, editorKeyHelper;
         var cellSelected = this.props.allowCellSelection && this.isSelected();
@@ -1021,96 +1061,81 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
         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 = core.ObjectUtils.getPropValue(this.props.cellClassName, value, {
+        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 = core.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", {
+        var title = this.props.responsiveLayout === 'stack' && /*#__PURE__*/React__default["default"].createElement("span", {
           className: "p-column-title"
-        }, core.ObjectUtils.getJSXElement(header, {
+        }, utils.ObjectUtils.getJSXElement(header, {
           props: this.props.tableProps
         }));
 
-        if (body && !this.state.editing) {
-          content = body ? core.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 = core.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, {
-            index: this.props.rowIndex,
+            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,
+          content = showSelection && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, selectionMode === 'single' && /*#__PURE__*/React__default["default"].createElement(RowRadioButton, {
             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,
+          }), selectionMode === 'multiple' && /*#__PURE__*/React__default["default"].createElement(RowCheckbox, {
             checked: this.props.selected,
-            onChange: this.props.onCheckboxChange,
+            onChange: this.onCheckboxChange,
             tabIndex: this.props.tabIndex
           }));
         } else if (rowReorder) {
           var showReorder = this.props.showRowReorderElement ? this.props.showRowReorderElement(this.props.rowData, {
-            index: this.props.rowIndex,
+            rowIndex: this.props.rowIndex,
             props: this.props.tableProps
           }) : true;
-          content = showReorder && /*#__PURE__*/React__default['default'].createElement("i", {
-            className: core.classNames('p-datatable-reorderablerow-handle', this.getColumnProp('rowReorderIcon'))
+          content = showReorder && /*#__PURE__*/React__default["default"].createElement("i", {
+            className: utils.classNames('p-datatable-reorderablerow-handle', this.getColumnProp('rowReorderIcon'))
           });
         } else if (expander) {
-          var iconClassName = core.classNames('p-row-toggler-icon', this.props.expanded ? this.props.expandedRowIcon : this.props.collapsedRowIcon);
+          var iconClassName = utils.classNames('p-row-toggler-icon', this.props.expanded ? this.props.expandedRowIcon : this.props.collapsedRowIcon);
           var ariaControls = "".concat(this.props.tableSelector, "_content_").concat(this.props.rowIndex, "_expanded");
           var expanderProps = {
             onClick: this.onRowToggle,
             className: 'p-row-toggler p-link',
             iconClassName: iconClassName
           };
-          content = /*#__PURE__*/React__default['default'].createElement("button", {
+          content = /*#__PURE__*/React__default["default"].createElement("button", {
             className: expanderProps.className,
             onClick: expanderProps.onClick,
             type: "button",
             "aria-expanded": this.props.expanded,
             "aria-controls": ariaControls,
             tabIndex: this.props.tabIndex
-          }, /*#__PURE__*/React__default['default'].createElement("span", {
+          }, /*#__PURE__*/React__default["default"].createElement("span", {
             className: expanderProps.iconClassName
-          }), /*#__PURE__*/React__default['default'].createElement(core.Ripple, null));
+          }), /*#__PURE__*/React__default["default"].createElement(ripple.Ripple, null));
 
           if (body) {
             expanderProps['element'] = content;
-            content = core.ObjectUtils.getJSXElement(body, this.props.rowData, {
+            content = utils.ObjectUtils.getJSXElement(body, this.props.rowData, {
               column: this.props.column,
               field: this.field,
-              index: this.props.rowIndex,
+              rowIndex: this.props.rowIndex,
               frozenRow: this.props.frozenRow,
+              props: this.props.tableProps,
               expander: expanderProps
             });
           }
@@ -1127,21 +1152,21 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
               cancelClassName: 'p-row-editor-cancel p-link',
               cancelIconClassName: 'p-row-editor-cancel-icon pi pi-fw pi-times'
             };
-            content = /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("button", {
+            content = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("button", {
               type: "button",
               onClick: rowEditorProps.onSaveClick,
               className: rowEditorProps.saveClassName,
               tabIndex: this.props.tabIndex
-            }, /*#__PURE__*/React__default['default'].createElement("span", {
+            }, /*#__PURE__*/React__default["default"].createElement("span", {
               className: rowEditorProps.saveIconClassName
-            }), /*#__PURE__*/React__default['default'].createElement(core.Ripple, null)), /*#__PURE__*/React__default['default'].createElement("button", {
+            }), /*#__PURE__*/React__default["default"].createElement(ripple.Ripple, null)), /*#__PURE__*/React__default["default"].createElement("button", {
               type: "button",
               onClick: rowEditorProps.onCancelClick,
               className: rowEditorProps.cancelClassName,
               tabIndex: this.props.tabIndex
-            }, /*#__PURE__*/React__default['default'].createElement("span", {
+            }, /*#__PURE__*/React__default["default"].createElement("span", {
               className: rowEditorProps.cancelIconClassName
-            }), /*#__PURE__*/React__default['default'].createElement(core.Ripple, null)));
+            }), /*#__PURE__*/React__default["default"].createElement(ripple.Ripple, null)));
           } else {
             rowEditorProps = {
               editing: false,
@@ -1149,46 +1174,66 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
               initClassName: 'p-row-editor-init p-link',
               initIconClassName: 'p-row-editor-init-icon pi pi-fw pi-pencil'
             };
-            content = /*#__PURE__*/React__default['default'].createElement("button", {
+            content = /*#__PURE__*/React__default["default"].createElement("button", {
               type: "button",
               onClick: rowEditorProps.onInitClick,
               className: rowEditorProps.initClassName,
               tabIndex: this.props.tabIndex
-            }, /*#__PURE__*/React__default['default'].createElement("span", {
+            }, /*#__PURE__*/React__default["default"].createElement("span", {
               className: rowEditorProps.initIconClassName
-            }), /*#__PURE__*/React__default['default'].createElement(core.Ripple, null));
+            }), /*#__PURE__*/React__default["default"].createElement(ripple.Ripple, null));
           }
 
           if (body) {
             rowEditorProps['element'] = content;
-            content = core.ObjectUtils.getJSXElement(body, this.props.rowData, {
+            content = utils.ObjectUtils.getJSXElement(body, this.props.rowData, {
               column: this.props.column,
               field: this.field,
-              index: this.props.rowIndex,
+              rowIndex: this.props.rowIndex,
               frozenRow: this.props.frozenRow,
+              props: this.props.tableProps,
               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;
         }
 
         if (!isRowEditor && editor) {
           /* eslint-disable */
-          editorKeyHelper = /*#__PURE__*/React__default['default'].createElement("a", {
+          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
-          }, /*#__PURE__*/React__default['default'].createElement("span", null));
+          }, /*#__PURE__*/React__default["default"].createElement("span", null));
           /* eslint-enable */
         }
 
-        return /*#__PURE__*/React__default['default'].createElement("td", {
+        return /*#__PURE__*/React__default["default"].createElement("td", {
           ref: function ref(el) {
-            return _this7.el = el;
+            return _this8.el = el;
           },
           style: style,
           className: className,
@@ -1223,9 +1268,9 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     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); }; }
 
@@ -1283,7 +1328,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     }, {
       key: "equals",
       value: function equals(data1, data2) {
-        return this.props.compareSelectionBy === 'equals' ? data1 === data2 : core.ObjectUtils.equals(data1, data2, this.props.dataKey);
+        return this.props.compareSelectionBy === 'equals' ? data1 === data2 : utils.ObjectUtils.equals(data1, data2, this.props.dataKey);
       }
     }, {
       key: "getColumnProp",
@@ -1321,13 +1366,13 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
       key: "findNextSelectableRow",
       value: function findNextSelectableRow(row) {
         var nextRow = row.nextElementSibling;
-        return nextRow ? core.DomHandler.hasClass(nextRow, 'p-selectable-row') ? nextRow : this.findNextSelectableRow(nextRow) : null;
+        return nextRow ? utils.DomHandler.hasClass(nextRow, 'p-selectable-row') ? nextRow : this.findNextSelectableRow(nextRow) : null;
       }
     }, {
       key: "findPrevSelectableRow",
       value: function findPrevSelectableRow(row) {
         var prevRow = row.previousElementSibling;
-        return prevRow ? core.DomHandler.hasClass(prevRow, 'p-selectable-row') ? prevRow : this.findPrevSelectableRow(prevRow) : null;
+        return prevRow ? utils.DomHandler.hasClass(prevRow, 'p-selectable-row') ? prevRow : this.findPrevSelectableRow(prevRow) : null;
       }
     }, {
       key: "shouldRenderBodyCell",
@@ -1338,8 +1383,8 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
           var prevRowData = value[i - 1];
 
           if (prevRowData) {
-            var currentRowFieldData = core.ObjectUtils.resolveFieldData(value[i], this.getColumnProp(column, 'field'));
-            var previousRowFieldData = core.ObjectUtils.resolveFieldData(prevRowData, this.getColumnProp(column, 'field'));
+            var currentRowFieldData = utils.ObjectUtils.resolveFieldData(value[i], this.getColumnProp(column, 'field'));
+            var previousRowFieldData = utils.ObjectUtils.resolveFieldData(prevRowData, this.getColumnProp(column, 'field'));
             return currentRowFieldData !== previousRowFieldData;
           }
         }
@@ -1350,7 +1395,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
       key: "calculateRowGroupSize",
       value: function calculateRowGroupSize(value, column, index) {
         if (this.isGrouped(column)) {
-          var currentRowFieldData = core.ObjectUtils.resolveFieldData(value[index], this.getColumnProp(column, 'field'));
+          var currentRowFieldData = utils.ObjectUtils.resolveFieldData(value[index], this.getColumnProp(column, 'field'));
           var nextRowFieldData = currentRowFieldData;
           var groupRowSpan = 0;
 
@@ -1359,7 +1404,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
             var nextRowData = value[++index];
 
             if (nextRowData) {
-              nextRowFieldData = core.ObjectUtils.resolveFieldData(nextRowData, this.getColumnProp(column, 'field'));
+              nextRowFieldData = utils.ObjectUtils.resolveFieldData(nextRowData, this.getColumnProp(column, 'field'));
             } else {
               break;
             }
@@ -1437,13 +1482,16 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
 
             case 13:
               // @deprecated
-              this.onClick(event);
-              event.preventDefault();
+              if (!utils.DomHandler.isClickable(target)) {
+                this.onClick(event);
+                event.preventDefault();
+              }
+
               break;
             //space
 
             case 32:
-              if (target.nodeName !== 'INPUT' && target.nodeName !== 'TEXTAREA' && !target.readOnly) {
+              if (!utils.DomHandler.isClickable(target) && !target.readOnly) {
                 this.onClick(event);
                 event.preventDefault();
               }
@@ -1526,7 +1574,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
               index = e.index;
 
           if (dataKey) {
-            var dataKeyValue = String(core.ObjectUtils.resolveFieldData(data, dataKey));
+            var dataKeyValue = String(utils.ObjectUtils.resolveFieldData(data, dataKey));
             editingRows = this.props.editingRows ? _objectSpread$6({}, this.props.editingRows) : {};
             if (editingRows[dataKeyValue] != null) delete editingRows[dataKeyValue];else editingRows[dataKeyValue] = true;
           } else {
@@ -1619,7 +1667,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
 
             var editing = _this3.getEditing();
 
-            return /*#__PURE__*/React__default['default'].createElement(BodyCell, {
+            return /*#__PURE__*/React__default["default"].createElement(BodyCell, {
               key: key,
               value: _this3.props.value,
               tableProps: _this3.props.tableProps,
@@ -1650,6 +1698,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
               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,
@@ -1669,18 +1718,21 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
       value: function render() {
         var _this4 = this;
 
-        var rowClassName = core.ObjectUtils.getPropValue(this.props.rowClassName, this.props.rowData, {
+        var rowClassName = utils.ObjectUtils.getPropValue(this.props.rowClassName, this.props.rowData, {
           props: this.props.tableProps
         });
-        var className = core.classNames(rowClassName, {
+        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();
         var tabIndex = this.getTabIndex();
-        return /*#__PURE__*/React__default['default'].createElement("tr", {
+        return /*#__PURE__*/React__default["default"].createElement("tr", {
           ref: function ref(el) {
             return _this4.el = el;
           },
@@ -1735,15 +1787,15 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     }, {
       key: "render",
       value: function render() {
-        var iconClassName = core.classNames('p-row-toggler-icon', this.props.expanded ? this.props.expandedRowIcon : this.props.collapsedRowIcon);
-        return /*#__PURE__*/React__default['default'].createElement("button", {
+        var iconClassName = utils.classNames('p-row-toggler-icon', this.props.expanded ? this.props.expandedRowIcon : this.props.collapsedRowIcon);
+        return /*#__PURE__*/React__default["default"].createElement("button", {
           type: "button",
           onClick: this.onClick,
           className: "p-row-toggler p-link",
           tabIndex: this.props.tabIndex
-        }, /*#__PURE__*/React__default['default'].createElement("span", {
+        }, /*#__PURE__*/React__default["default"].createElement("span", {
           className: iconClassName
-        }), /*#__PURE__*/React__default['default'].createElement(core.Ripple, null));
+        }), /*#__PURE__*/React__default["default"].createElement(ripple.Ripple, null));
       }
     }]);
 
@@ -1752,9 +1804,9 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
 
   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); }; }
 
@@ -1791,7 +1843,8 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
       _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));
@@ -1809,7 +1862,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     }, {
       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 : core.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",
@@ -1881,6 +1934,11 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
 
         return false;
       }
+    }, {
+      key: "isSelectable",
+      value: function isSelectable(options) {
+        return this.props.isDataSelectable ? this.props.isDataSelectable(options) : true;
+      }
     }, {
       key: "isRowExpanded",
       value: function isRowExpanded(rowData) {
@@ -1888,7 +1946,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
           if (this.isSubheaderGrouping() && this.props.expandableRowGroups) {
             return this.isRowGroupExpanded(rowData);
           } else {
-            if (this.props.dataKey) return this.props.expandedRows ? this.props.expandedRows[core.ObjectUtils.resolveFieldData(rowData, this.props.dataKey)] !== undefined : false;else return this.findIndex(this.props.expandedRows, rowData) !== -1;
+            if (this.props.dataKey) return this.props.expandedRows ? this.props.expandedRows[utils.ObjectUtils.resolveFieldData(rowData, this.props.dataKey)] !== undefined : false;else return this.findIndex(this.props.expandedRows, rowData) !== -1;
           }
         }
 
@@ -1900,16 +1958,16 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
         var _this2 = this;
 
         if (this.props.dataKey === this.props.groupRowsBy) return Object.keys(this.props.expandedRows).some(function (data) {
-          return core.ObjectUtils.equals(data, core.ObjectUtils.resolveFieldData(rowData, _this2.props.dataKey));
+          return utils.ObjectUtils.equals(data, utils.ObjectUtils.resolveFieldData(rowData, _this2.props.dataKey));
         });else return this.props.expandedRows.some(function (data) {
-          return core.ObjectUtils.equals(data, rowData, _this2.props.groupRowsBy);
+          return utils.ObjectUtils.equals(data, rowData, _this2.props.groupRowsBy);
         });
       }
     }, {
       key: "isRowEditing",
       value: function isRowEditing(rowData) {
         if (this.props.editMode === 'row' && rowData && this.props.editingRows) {
-          if (this.props.dataKey) return this.props.editingRows ? this.props.editingRows[core.ObjectUtils.resolveFieldData(rowData, this.props.dataKey)] !== undefined : false;else return this.findIndex(this.props.editingRows, rowData) !== -1;
+          if (this.props.dataKey) return this.props.editingRows ? this.props.editingRows[utils.ObjectUtils.resolveFieldData(rowData, this.props.dataKey)] !== undefined : false;else return this.findIndex(this.props.editingRows, rowData) !== -1;
         }
 
         return false;
@@ -1932,7 +1990,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     }, {
       key: "allowSelection",
       value: function allowSelection(event) {
-        return !core.DomHandler.isClickable(event.originalEvent.target);
+        return !utils.DomHandler.isClickable(event.originalEvent.target);
       }
     }, {
       key: "allowMetaKeySelection",
@@ -1988,16 +2046,16 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     }, {
       key: "getRowKey",
       value: function getRowKey(rowData, index) {
-        return this.props.dataKey ? core.ObjectUtils.resolveFieldData(rowData, this.props.dataKey) + '_' + index : index;
+        return this.props.dataKey ? utils.ObjectUtils.resolveFieldData(rowData, this.props.dataKey) + '_' + index : index;
       }
     }, {
       key: "shouldRenderRowGroupHeader",
       value: function shouldRenderRowGroupHeader(value, rowData, i) {
-        var currentRowFieldData = core.ObjectUtils.resolveFieldData(rowData, this.props.groupRowsBy);
+        var currentRowFieldData = utils.ObjectUtils.resolveFieldData(rowData, this.props.groupRowsBy);
         var prevRowData = value[i - 1];
 
         if (prevRowData) {
-          var previousRowFieldData = core.ObjectUtils.resolveFieldData(prevRowData, this.props.groupRowsBy);
+          var previousRowFieldData = utils.ObjectUtils.resolveFieldData(prevRowData, this.props.groupRowsBy);
           return currentRowFieldData !== previousRowFieldData;
         } else {
           return true;
@@ -2009,11 +2067,11 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
         if (this.props.expandableRowGroups && !expanded) {
           return false;
         } else {
-          var currentRowFieldData = core.ObjectUtils.resolveFieldData(rowData, this.props.groupRowsBy);
+          var currentRowFieldData = utils.ObjectUtils.resolveFieldData(rowData, this.props.groupRowsBy);
           var nextRowData = value[i + 1];
 
           if (nextRowData) {
-            var nextRowFieldData = core.ObjectUtils.resolveFieldData(nextRowData, this.props.groupRowsBy);
+            var nextRowFieldData = utils.ObjectUtils.resolveFieldData(nextRowData, this.props.groupRowsBy);
             return currentRowFieldData !== nextRowFieldData;
           } else {
             return true;
@@ -2023,12 +2081,12 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     }, {
       key: "updateFrozenRowStickyPosition",
       value: function updateFrozenRowStickyPosition() {
-        this.el.style.top = core.DomHandler.getOuterHeight(this.el.previousElementSibling) + 'px';
+        this.el.style.top = utils.DomHandler.getOuterHeight(this.el.previousElementSibling) + 'px';
       }
     }, {
       key: "updateFrozenRowGroupHeaderStickyPosition",
       value: function updateFrozenRowGroupHeaderStickyPosition() {
-        var tableHeaderHeight = core.DomHandler.getOuterHeight(this.el.previousElementSibling);
+        var tableHeaderHeight = utils.DomHandler.getOuterHeight(this.el.previousElementSibling);
         var top = tableHeaderHeight + 'px';
 
         if (this.state.rowGroupHeaderStyleObject && this.state.rowGroupHeaderStyleObject.top !== top) {
@@ -2039,13 +2097,28 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
           });
         }
       }
+    }, {
+      key: "updateVirtualScrollerPosition",
+      value: function updateVirtualScrollerPosition() {
+        var tableHeaderHeight = utils.DomHandler.getOuterHeight(this.el.previousElementSibling);
+        this.el.style.top = (this.el.style.top || 0) + tableHeaderHeight + 'px';
+      }
     }, {
       key: "onSingleSelection",
       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;
 
@@ -2072,7 +2145,8 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
         if (this.props.onSelectionChange && selection !== this.props.selection) {
           this.props.onSelectionChange({
             originalEvent: originalEvent,
-            value: selection
+            value: selection,
+            type: type
           });
         }
       }
@@ -2083,8 +2157,17 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
 
         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 || [];
 
@@ -2128,14 +2211,15 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
         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) {
-        core.DomHandler.clearSelection();
+      value: function onRangeSelection(event, type) {
+        utils.DomHandler.clearSelection();
         this.rangeRowIndex = this.allowCellSelection() ? event.rowIndex : event.index;
         var selectionInRange = this.selectRange(event);
         var selection = this.isMultipleSelection() ? _toConsumableArray(new Set([].concat(_toConsumableArray(this.props.selection || []), _toConsumableArray(selectionInRange)))) : selectionInRange;
@@ -2143,7 +2227,8 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
         if (this.props.onSelectionChange && selection !== this.props.selection) {
           this.props.onSelectionChange({
             originalEvent: event.originalEvent,
-            value: selection
+            value: selection,
+            type: type
           });
         }
 
@@ -2187,6 +2272,14 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
 
         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,
@@ -2223,14 +2316,25 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
 
           for (var j = cellRangeStart; j <= cellRangeEnd; j++) {
             var field = columns[j].props.field;
+
+            var _value = utils.ObjectUtils.resolveFieldData(rowData, field);
+
             var rangeRowData = {
-              value: core.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,
@@ -2265,7 +2369,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
       value: function enableDragSelection(event) {
         if (this.props.dragSelection && !this.dragSelectionHelper) {
           this.dragSelectionHelper = document.createElement('div');
-          core.DomHandler.addClass(this.dragSelectionHelper, 'p-datatable-drag-selection-helper');
+          utils.DomHandler.addClass(this.dragSelectionHelper, 'p-datatable-drag-selection-helper');
           this.initialDragPosition = {
             x: event.clientX,
             y: event.clientY
@@ -2280,18 +2384,34 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
       value: function focusOnElement(event, isFocused) {
         var target = event.currentTarget;
 
-        if (!this.allowCellSelection()) {
+        if (!this.allowCellSelection() && this.props.selectionAutoFocus) {
           if (this.isCheckboxSelectionModeInColumn()) {
-            var checkbox = core.DomHandler.findSingle(target, 'td.p-selection-column .p-checkbox-box');
+            var checkbox = utils.DomHandler.findSingle(target, 'td.p-selection-column .p-checkbox-box');
             checkbox && checkbox.focus();
           } else if (this.isRadioSelectionModeInColumn()) {
-            var radio = core.DomHandler.findSingle(target, 'td.p-selection-column input[type="radio"]');
+            var radio = utils.DomHandler.findSingle(target, 'td.p-selection-column input[type="radio"]');
             radio && radio.focus();
           }
         }
 
         !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) {
@@ -2303,7 +2423,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
 
         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;
@@ -2322,6 +2442,8 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
               }));
             }
           }
+
+          this.changeTabIndex(event.originalEvent, 'row');
         } else {
           this.focusOnElement(event.originalEvent);
         }
@@ -2333,7 +2455,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
       value: function onRowDoubleClick(e) {
         var event = e.originalEvent;
 
-        if (core.DomHandler.isClickable(event.target)) {
+        if (utils.DomHandler.isClickable(event.target)) {
           return;
         }
 
@@ -2345,7 +2467,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
       key: "onRowRightClick",
       value: function onRowRightClick(event) {
         if (this.props.onContextMenu || this.props.onContextMenuSelectionChange) {
-          core.DomHandler.clearSelection();
+          utils.DomHandler.clearSelection();
 
           if (this.props.onContextMenuSelectionChange) {
             this.props.onContextMenuSelectionChange({
@@ -2372,12 +2494,12 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     }, {
       key: "onRowMouseDown",
       value: function onRowMouseDown(e) {
-        core.DomHandler.clearSelection();
+        utils.DomHandler.clearSelection();
         var event = e.originalEvent;
-        if (core.DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle')) event.currentTarget.draggable = true;else event.currentTarget.draggable = false;
+        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;
@@ -2389,7 +2511,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
         var isSameRow = event.index === this.anchorRowIndex;
 
         if (this.allowRowDrag(event) && !isSameRow) {
-          this.onRangeSelection(event);
+          this.onRangeSelection(event, 'row');
         }
       }
     }, {
@@ -2400,7 +2522,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
         var hasDataKey = this.props.groupRowsBy ? dataKey === this.props.groupRowsBy : !!dataKey;
 
         if (hasDataKey) {
-          var dataKeyValue = String(core.ObjectUtils.resolveFieldData(event.data, dataKey));
+          var dataKeyValue = String(utils.ObjectUtils.resolveFieldData(event.data, dataKey));
           expandedRows = this.props.expandedRows ? _objectSpread$5({}, this.props.expandedRows) : {};
 
           if (expandedRows[dataKeyValue] != null) {
@@ -2472,19 +2594,19 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
 
         if (this.rowDragging && this.draggedRowIndex !== index) {
           var rowElement = event.currentTarget;
-          var rowY = core.DomHandler.getOffset(rowElement).top + core.DomHandler.getWindowScrollTop();
+          var rowY = utils.DomHandler.getOffset(rowElement).top + utils.DomHandler.getWindowScrollTop();
           var pageY = event.pageY;
-          var rowMidY = rowY + core.DomHandler.getOuterHeight(rowElement) / 2;
+          var rowMidY = rowY + utils.DomHandler.getOuterHeight(rowElement) / 2;
           var prevRowElement = rowElement.previousElementSibling;
 
           if (pageY < rowMidY) {
-            core.DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
+            utils.DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
             this.droppedRowIndex = index;
-            if (prevRowElement) core.DomHandler.addClass(prevRowElement, 'p-datatable-dragpoint-bottom');else core.DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
+            if (prevRowElement) utils.DomHandler.addClass(prevRowElement, 'p-datatable-dragpoint-bottom');else utils.DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
           } else {
-            if (prevRowElement) core.DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');else core.DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
+            if (prevRowElement) utils.DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');else utils.DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
             this.droppedRowIndex = index + 1;
-            core.DomHandler.addClass(rowElement, 'p-datatable-dragpoint-bottom');
+            utils.DomHandler.addClass(rowElement, 'p-datatable-dragpoint-bottom');
           }
         }
 
@@ -2498,11 +2620,11 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
         var prevRowElement = rowElement.previousElementSibling;
 
         if (prevRowElement) {
-          core.DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
+          utils.DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
         }
 
-        core.DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
-        core.DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-top');
+        utils.DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
+        utils.DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-top');
       }
     }, {
       key: "onRowDragEnd",
@@ -2523,7 +2645,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
 
           var val = _toConsumableArray(this.props.value);
 
-          core.ObjectUtils.reorderArray(val, this.draggedRowIndex, dropIndex);
+          utils.ObjectUtils.reorderArray(val, this.draggedRowIndex, dropIndex);
 
           if (this.props.onRowReorder) {
             this.props.onRowReorder({
@@ -2592,7 +2714,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
 
         if (this.allowCellSelection()) {
           if (this.allowRangeSelection(event)) {
-            this.onRangeSelection(event);
+            this.onRangeSelection(event, 'cell');
           } else {
             var toggleable = this.allowMetaKeySelection(event);
 
@@ -2608,6 +2730,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
               this.onSingleSelection({
                 originalEvent: originalEvent,
                 data: data,
+                index: event.rowIndex,
                 toggleable: toggleable,
                 type: 'cell'
               });
@@ -2615,11 +2738,14 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
               this.onMultipleSelection({
                 originalEvent: originalEvent,
                 data: data,
+                index: event.rowIndex,
                 toggleable: toggleable,
                 type: 'cell'
               });
             }
           }
+
+          this.changeTabIndex(event.originalEvent, 'cell');
         }
 
         this.rowTouched = false;
@@ -2641,7 +2767,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
         var isSameCell = event.rowIndex === this.anchorRowIndex && event.cellIndex === this.anchorCellIndex;
 
         if (this.allowCellDrag(event) && !isSameCell) {
-          this.onRangeSelection(event);
+          this.onRangeSelection(event, 'cell');
         }
       }
     }, {
@@ -2668,8 +2794,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
         }
 
         if (!this.props.isVirtualScrollerDisabled && this.getVirtualScrollerOption('vertical')) {
-          var style = getComputedStyle(this.el);
-          this.el.style.top = parseFloat(style.top) + parseFloat(this.props.virtualScrollerOptions.itemSize) + 'px';
+          this.updateVirtualScrollerPosition();
         }
       }
     }, {
@@ -2684,8 +2809,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
         }
 
         if (!this.props.isVirtualScrollerDisabled && this.getVirtualScrollerOption('vertical') && this.getVirtualScrollerOption('itemSize', prevProps.virtualScrollerOptions) !== this.getVirtualScrollerOption('itemSize')) {
-          var style = getComputedStyle(this.el);
-          this.el.style.top = parseFloat(style.top) + parseFloat(this.getVirtualScrollerOption('itemSize')) - parseFloat(this.getVirtualScrollerOption('itemSize', prevProps.virtualScrollerOptions)) + 'px';
+          this.updateVirtualScrollerPosition();
         }
       }
     }, {
@@ -2700,14 +2824,14 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
       value: function renderEmptyContent() {
         if (!this.props.loading) {
           var colSpan = this.getColumnsLength();
-          var content = core.ObjectUtils.getJSXElement(this.props.emptyMessage, {
+          var content = utils.ObjectUtils.getJSXElement(this.props.emptyMessage, {
             props: this.props,
             frozen: this.props.frozenRow
-          });
-          return /*#__PURE__*/React__default['default'].createElement("tr", {
+          }) || PrimeReact.localeOption('emptyMessage');
+          return /*#__PURE__*/React__default["default"].createElement("tr", {
             className: "p-datatable-emptymessage",
             role: "row"
-          }, /*#__PURE__*/React__default['default'].createElement("td", {
+          }, /*#__PURE__*/React__default["default"].createElement("td", {
             colSpan: colSpan,
             role: "cell"
           }, content));
@@ -2718,26 +2842,26 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     }, {
       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, {
+          var toggler = this.props.expandableRowGroups && /*#__PURE__*/React__default["default"].createElement(RowTogglerButton, {
             onClick: this.onRowToggle,
             rowData: rowData,
             expanded: expanded,
             expandedRowIcon: this.props.expandedRowIcon,
             collapsedRowIcon: this.props.collapsedRowIcon
           });
-          var content = core.ObjectUtils.getJSXElement(this.props.rowGroupHeaderTemplate, rowData, {
+          var content = utils.ObjectUtils.getJSXElement(this.props.rowGroupHeaderTemplate, rowData, {
             index: index,
             props: this.props.tableProps
           });
-          return /*#__PURE__*/React__default['default'].createElement("tr", {
+          return /*#__PURE__*/React__default["default"].createElement("tr", {
             className: "p-rowgroup-header",
             style: style,
             role: "row"
-          }, /*#__PURE__*/React__default['default'].createElement("td", {
+          }, /*#__PURE__*/React__default["default"].createElement("td", {
             colSpan: colSpan
-          }, toggler, /*#__PURE__*/React__default['default'].createElement("span", {
+          }, toggler, /*#__PURE__*/React__default["default"].createElement("span", {
             className: "p-rowgroup-header-name"
           }, content)));
         }
@@ -2753,7 +2877,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
           var allowRowSelection = this.allowRowSelection();
           var allowCellSelection = this.allowCellSelection();
           var editing = this.isRowEditing(rowData);
-          return /*#__PURE__*/React__default['default'].createElement(BodyRow, {
+          return /*#__PURE__*/React__default["default"].createElement(BodyRow, {
             tableProps: this.props.tableProps,
             tableSelector: this.props.tableSelector,
             value: this.props.value,
@@ -2766,6 +2890,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
             onRowDoubleClick: this.onRowDoubleClick,
             onRowRightClick: this.onRowRightClick,
             tabIndex: this.props.tabIndex,
+            isSelectable: this.isSelectable,
             onRowTouchEnd: this.onRowTouchEnd,
             onRowMouseDown: this.onRowMouseDown,
             onRowMouseUp: this.onRowMouseUp,
@@ -2818,15 +2943,15 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
       key: "renderExpansion",
       value: function renderExpansion(rowData, index, expanded, isSubheaderGrouping, colSpan) {
         if (expanded && !(isSubheaderGrouping && this.props.expandableRowGroups)) {
-          var content = core.ObjectUtils.getJSXElement(this.props.rowExpansionTemplate, rowData, {
+          var content = utils.ObjectUtils.getJSXElement(this.props.rowExpansionTemplate, rowData, {
             index: index
           });
           var id = "".concat(this.props.tableSelector, "_content_").concat(index, "_expanded");
-          return /*#__PURE__*/React__default['default'].createElement("tr", {
+          return /*#__PURE__*/React__default["default"].createElement("tr", {
             id: id,
             className: "p-datatable-row-expansion",
             role: "row"
-          }, /*#__PURE__*/React__default['default'].createElement("td", {
+          }, /*#__PURE__*/React__default["default"].createElement("td", {
             role: "cell",
             colSpan: colSpan
           }, content));
@@ -2837,13 +2962,13 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     }, {
       key: "renderGroupFooter",
       value: function renderGroupFooter(rowData, index, expanded, isSubheaderGrouping, colSpan) {
-        if (isSubheaderGrouping && this.shouldRenderRowGroupFooter(this.props.value, rowData, index, expanded)) {
-          var content = core.ObjectUtils.getJSXElement(this.props.rowGroupFooterTemplate, rowData, {
+        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,
             props: this.props.tableProps
           });
-          return /*#__PURE__*/React__default['default'].createElement("tr", {
+          return /*#__PURE__*/React__default["default"].createElement("tr", {
             className: "p-rowgroup-footer",
             role: "row"
           }, content);
@@ -2875,7 +3000,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
 
           var groupFooter = _this5.renderGroupFooter(rowData, index, expanded, isSubheaderGrouping, colSpan);
 
-          return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, {
+          return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
             key: key
           }, groupHeader, row, expansion, groupFooter);
         });
@@ -2883,9 +3008,9 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     }, {
       key: "render",
       value: function render() {
-        var className = core.classNames('p-datatable-tbody', this.props.className);
+        var className = utils.classNames('p-datatable-tbody', this.props.className);
         var content = this.props.empty ? this.renderEmptyContent() : this.renderContent();
-        return /*#__PURE__*/React__default['default'].createElement("tbody", {
+        return /*#__PURE__*/React__default["default"].createElement("tbody", {
           ref: this.ref,
           className: className
         }, content);
@@ -2895,9 +3020,9 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     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); }; }
 
@@ -2944,7 +3069,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
             var next = this.el.nextElementSibling;
 
             if (next) {
-              right = core.DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
+              right = utils.DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
             }
 
             styleObject['right'] = right + 'px';
@@ -2953,7 +3078,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
             var prev = this.el.previousElementSibling;
 
             if (prev) {
-              left = core.DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
+              left = utils.DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
             }
 
             styleObject['left'] = left + 'px';
@@ -2984,15 +3109,16 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
         var _this2 = this;
 
         var style = this.getStyle();
-        var className = core.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 = core.ObjectUtils.getJSXElement(this.getColumnProp('footer'), {
+        var content = utils.ObjectUtils.getJSXElement(this.getColumnProp('footer'), {
           props: this.props.tableProps
         });
-        return /*#__PURE__*/React__default['default'].createElement("td", {
+        return /*#__PURE__*/React__default["default"].createElement("td", {
           ref: function ref(el) {
             return _this2.el = el;
           },
@@ -3032,7 +3158,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     }, {
       key: "renderGroupFooterCells",
       value: function renderGroupFooterCells(row) {
-        var columns = React__default['default'].Children.toArray(row.props.children);
+        var columns = React__default["default"].Children.toArray(row.props.children);
         return this.renderFooterCells(columns);
       }
     }, {
@@ -3040,10 +3166,10 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
       value: function renderFooterCells(columns) {
         var _this = this;
 
-        return React__default['default'].Children.map(columns, function (col, i) {
+        return React__default["default"].Children.map(columns, function (col, i) {
           var isVisible = col ? !col.props.hidden : true;
           var key = col ? col.props.columnKey || col.props.field || i : i;
-          return isVisible && /*#__PURE__*/React__default['default'].createElement(FooterCell, {
+          return isVisible && /*#__PURE__*/React__default["default"].createElement(FooterCell, {
             key: key,
             tableProps: _this.props.tableProps,
             column: col
@@ -3056,16 +3182,16 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
         var _this2 = this;
 
         if (this.props.footerColumnGroup) {
-          var rows = React__default['default'].Children.toArray(this.props.footerColumnGroup.props.children);
+          var rows = React__default["default"].Children.toArray(this.props.footerColumnGroup.props.children);
           return rows.map(function (row, i) {
-            return /*#__PURE__*/React__default['default'].createElement("tr", {
+            return /*#__PURE__*/React__default["default"].createElement("tr", {
               key: i,
               role: "row"
             }, _this2.renderGroupFooterCells(row));
           });
         }
 
-        return /*#__PURE__*/React__default['default'].createElement("tr", {
+        return /*#__PURE__*/React__default["default"].createElement("tr", {
           role: "row"
         }, this.renderFooterCells(this.props.columns));
       }
@@ -3074,7 +3200,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
       value: function render() {
         if (this.hasFooter()) {
           var content = this.renderContent();
-          return /*#__PURE__*/React__default['default'].createElement("tfoot", {
+          return /*#__PURE__*/React__default["default"].createElement("tfoot", {
             className: "p-datatable-tfoot"
           }, content);
         }
@@ -3133,7 +3259,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
           });
           this.props.onChange({
             originalEvent: event,
-            checked: this.props.checked
+            checked: !this.props.checked
           });
         }
       }
@@ -3148,19 +3274,19 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     }, {
       key: "render",
       value: function render() {
-        var boxClassName = core.classNames('p-checkbox-box p-component', {
+        var boxClassName = utils.classNames('p-checkbox-box p-component', {
           'p-highlight': this.props.checked,
           'p-disabled': this.props.disabled,
           'p-focus': this.state.focused
         });
-        var iconClassName = core.classNames('p-checkbox-icon', {
+        var iconClassName = utils.classNames('p-checkbox-icon', {
           'pi pi-check': this.props.checked
         });
         var tabIndex = this.props.disabled ? null : 0;
-        return /*#__PURE__*/React__default['default'].createElement("div", {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
           className: "p-checkbox p-component",
           onClick: this.onClick
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: boxClassName,
           role: "checkbox",
           "aria-checked": this.props.checked,
@@ -3168,7 +3294,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
           onFocus: this.onFocus,
           onBlur: this.onBlur,
           onKeyDown: this.onKeyDown
-        }, /*#__PURE__*/React__default['default'].createElement("span", {
+        }, /*#__PURE__*/React__default["default"].createElement("span", {
           className: iconClassName
         })));
       }
@@ -3177,29 +3303,9 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     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); 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); if (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); }; }
 
@@ -3216,11 +3322,9 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
 
       _this = _super.call(this, props);
       _this.state = {
-        overlayVisible: false,
-        defaultMatchMode: null,
-        defaultOperator: null
+        overlayVisible: false
       };
-      _this.overlayRef = /*#__PURE__*/React__default['default'].createRef();
+      _this.overlayRef = /*#__PURE__*/React__default["default"].createRef();
       _this.filterCallback = _this.filterCallback.bind(_assertThisInitialized(_this));
       _this.filterApplyCallback = _this.filterApplyCallback.bind(_assertThisInitialized(_this));
       _this.onOperatorChange = _this.onOperatorChange.bind(_assertThisInitialized(_this));
@@ -3253,6 +3357,11 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
       get: function get() {
         return this.props.filters[this.field];
       }
+    }, {
+      key: "filterStoreModel",
+      get: function get() {
+        return this.props.filtersStore[this.field];
+      }
     }, {
       key: "hasFilter",
       value: function hasFilter() {
@@ -3271,12 +3380,12 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     }, {
       key: "isFilterBlank",
       value: function isFilterBlank(filter) {
-        return core.ObjectUtils.isEmpty(filter);
+        return utils.ObjectUtils.isEmpty(filter);
       }
     }, {
       key: "isRowMatchModeSelected",
       value: function isRowMatchModeSelected(matchMode) {
-        return this.filterModel.matchMode === matchMode;
+        return this.filterModel && this.filterModel.matchMode === matchMode;
       }
     }, {
       key: "showMenuButton",
@@ -3286,7 +3395,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     }, {
       key: "matchModes",
       value: function matchModes() {
-        return this.getColumnProp('filterMatchModeOptions') || PrimeReact__default['default'].filterMatchModeOptions[this.findDataType()].map(function (key) {
+        return this.getColumnProp('filterMatchModeOptions') || PrimeReact__default["default"].filterMatchModeOptions[this.findDataType()].map(function (key) {
           return {
             label: PrimeReact.localeOption(key),
             value: key
@@ -3328,6 +3437,22 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
       value: function getColumnProp(prop) {
         return this.props.column.props[prop];
       }
+    }, {
+      key: "getDefaultConstraint",
+      value: function getDefaultConstraint() {
+        if (this.props.filtersStore && this.filterStoreModel) {
+          if (this.filterStoreModel.operator) {
+            return {
+              matchMode: this.filterStoreModel.constraints[0].matchMode,
+              operator: this.filterStoreModel.operator
+            };
+          } else {
+            return {
+              matchMode: this.filterStoreModel.matchMode
+            };
+          }
+        }
+      }
     }, {
       key: "findDataType",
       value: function findDataType() {
@@ -3335,16 +3460,16 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
         var matchMode = this.getColumnProp('filterMatchMode');
 
         var hasMatchMode = function hasMatchMode(key) {
-          return PrimeReact__default['default'].filterMatchModeOptions[key].some(function (mode) {
+          return PrimeReact__default["default"].filterMatchModeOptions[key].some(function (mode) {
             return mode === matchMode;
           });
         };
 
         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) {
+          return Object.keys(PrimeReact__default["default"].filterMatchModeOptions).find(function (key) {
             return hasMatchMode(key);
           }) || dataType;
         }
@@ -3356,19 +3481,20 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
       value: function clearFilter() {
         var field = this.field;
         var filterClearCallback = this.getColumnProp('onFilterClear');
+        var defaultConstraint = this.getDefaultConstraint();
 
         var filters = _objectSpread$3({}, this.props.filters);
 
         if (filters[field].operator) {
           filters[field].constraints.splice(1);
-          filters[field].operator = this.state.defaultOperator;
+          filters[field].operator = defaultConstraint.operator;
           filters[field].constraints[0] = {
             value: null,
-            matchMode: this.state.defaultMatchMode
+            matchMode: defaultConstraint.matchMode
           };
         } else {
           filters[field].value = null;
-          filters[field].matchMode = this.state.defaultMatchMode;
+          filters[field].matchMode = defaultConstraint.matchMode;
         }
 
         filterClearCallback && filterClearCallback();
@@ -3407,7 +3533,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
 
           case 'ArrowDown':
             if (this.state.overlayVisible) {
-              var focusable = core.DomHandler.getFirstFocusableElement(this.overlay);
+              var focusable = utils.DomHandler.getFirstFocusableElement(this.overlay);
               focusable && focusable.focus();
               event.preventDefault();
             } else if (event.altKey) {
@@ -3541,17 +3667,18 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
       key: "addConstraint",
       value: function addConstraint() {
         var filterConstraintAddCallback = this.getColumnProp('onFilterConstraintAdd');
+        var defaultConstraint = this.getDefaultConstraint();
 
         var filters = _objectSpread$3({}, this.props.filters);
 
         var newConstraint = {
           value: null,
-          matchMode: this.state.defaultMatchMode
+          matchMode: defaultConstraint.matchMode
         };
         filters[this.field].constraints.push(newConstraint);
         filterConstraintAddCallback && filterConstraintAddCallback({
           field: this.field,
-          constraing: newConstraint
+          constraint: newConstraint
         });
         this.props.onFilterChange(filters);
 
@@ -3569,7 +3696,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
         var removedConstraint = filters[this.field].constraints.splice(index, 1);
         filterConstraintRemoveCallback && filterConstraintRemoveCallback({
           field: this.field,
-          constraing: removedConstraint
+          constraint: removedConstraint
         });
         this.props.onFilterChange(filters);
 
@@ -3581,13 +3708,13 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
       key: "findNextItem",
       value: function findNextItem(item) {
         var nextItem = item.nextElementSibling;
-        if (nextItem) return core.DomHandler.hasClass(nextItem, 'p-column-filter-separator') ? this.findNextItem(nextItem) : nextItem;else return item.parentElement.firstElementChild;
+        if (nextItem) return utils.DomHandler.hasClass(nextItem, 'p-column-filter-separator') ? this.findNextItem(nextItem) : nextItem;else return item.parentElement.firstElementChild;
       }
     }, {
       key: "findPrevItem",
       value: function findPrevItem(item) {
         var prevItem = item.previousElementSibling;
-        if (prevItem) return core.DomHandler.hasClass(prevItem, 'p-column-filter-separator') ? this.findPrevItem(prevItem) : prevItem;else return item.parentElement.lastElementChild;
+        if (prevItem) return utils.DomHandler.hasClass(prevItem, 'p-column-filter-separator') ? this.findPrevItem(prevItem) : prevItem;else return item.parentElement.lastElementChild;
       }
     }, {
       key: "hide",
@@ -3600,7 +3727,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
       key: "onContentClick",
       value: function onContentClick(event) {
         this.selfClick = true;
-        core.OverlayService.emit('overlay-click', {
+        overlayservice.OverlayService.emit('overlay-click', {
           originalEvent: event,
           target: this.overlay
         });
@@ -3615,8 +3742,8 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
       value: function onOverlayEnter() {
         var _this2 = this;
 
-        core.ZIndexUtils.set('overlay', this.overlay);
-        core.DomHandler.alignOverlay(this.overlay, this.icon, PrimeReact__default['default'].appendTo, false);
+        utils.ZIndexUtils.set('overlay', this.overlay, PrimeReact__default["default"].autoZIndex, PrimeReact__default["default"].zIndex['overlay']);
+        utils.DomHandler.alignOverlay(this.overlay, this.icon, PrimeReact__default["default"].appendTo, false);
         this.bindOutsideClickListener();
         this.bindScrollListener();
         this.bindResizeListener();
@@ -3627,7 +3754,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
           }
         };
 
-        core.OverlayService.on('overlay-click', this.overlayEventListener);
+        overlayservice.OverlayService.on('overlay-click', this.overlayEventListener);
       }
     }, {
       key: "onOverlayExit",
@@ -3637,7 +3764,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     }, {
       key: "onOverlayExited",
       value: function onOverlayExited() {
-        core.ZIndexUtils.clear(this.overlay);
+        utils.ZIndexUtils.clear(this.overlay);
       }
     }, {
       key: "onOverlayHide",
@@ -3645,7 +3772,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
         this.unbindOutsideClickListener();
         this.unbindResizeListener();
         this.unbindScrollListener();
-        core.OverlayService.off('overlay-click', this.overlayEventListener);
+        overlayservice.OverlayService.off('overlay-click', this.overlayEventListener);
         this.overlayEventListener = null;
       }
     }, {
@@ -3680,7 +3807,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
         var _this4 = this;
 
         if (!this.scrollHandler) {
-          this.scrollHandler = new core.ConnectedOverlayScrollHandler(this.icon, function () {
+          this.scrollHandler = new utils.ConnectedOverlayScrollHandler(this.icon, function () {
             if (_this4.state.overlayVisible) {
               _this4.hide();
             }
@@ -3703,7 +3830,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
 
         if (!this.resizeListener) {
           this.resizeListener = function () {
-            if (_this5.state.overlayVisible) {
+            if (_this5.state.overlayVisible && !utils.DomHandler.isTouchDevice()) {
               _this5.hide();
             }
           };
@@ -3786,41 +3913,23 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
         args && this.filterCallback(args[0], args[1]);
         this.props.onFilterApply();
       }
-    }, {
-      key: "componentDidMount",
-      value: function componentDidMount() {
-        if (this.props.filters && this.filterModel) {
-          var filterModel = this.filterModel;
-
-          if (filterModel.operator) {
-            this.setState({
-              defaultMatchMode: filterModel.constraints[0].matchMode,
-              defaultOperator: filterModel.operator
-            });
-          } else {
-            this.setState({
-              defaultMatchMode: this.filterModel.matchMode
-            });
-          }
-        }
-      }
     }, {
       key: "componentDidUpdate",
       value: function componentDidUpdate(prevProps, prevState) {
         if (this.props.display === 'menu' && this.state.overlayVisible) {
-          core.DomHandler.alignOverlay(this.overlay, this.icon, PrimeReact__default['default'].appendTo, false);
+          utils.DomHandler.alignOverlay(this.overlay, this.icon, PrimeReact__default["default"].appendTo, false);
         }
       }
     }, {
       key: "componentWillUnmount",
       value: function componentWillUnmount() {
         if (this.overlayEventListener) {
-          core.OverlayService.off('overlay-click', this.overlayEventListener);
+          overlayservice.OverlayService.off('overlay-click', this.overlayEventListener);
           this.overlayEventListener = null;
         }
 
         if (this.overlay) {
-          core.ZIndexUtils.clear(this.overlay);
+          utils.ZIndexUtils.clear(this.overlay);
           this.onOverlayHide();
         }
       }
@@ -3829,16 +3938,17 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
       value: function renderFilterElement(model, index) {
         var _this6 = this;
 
-        return this.getColumnProp('filterElement') ? core.ObjectUtils.getJSXElement(this.getColumnProp('filterElement'), {
+        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, {
+        }) : /*#__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);
           },
@@ -3852,7 +3962,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
       value: function renderRowFilterElement() {
         if (this.props.display === 'row') {
           var content = this.renderFilterElement(this.filterModel, 0);
-          return /*#__PURE__*/React__default['default'].createElement("div", {
+          return /*#__PURE__*/React__default["default"].createElement("div", {
             className: "p-fluid p-column-filter-element"
           }, content);
         }
@@ -3874,11 +3984,11 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
         var _this7 = this;
 
         if (this.showMenuButton()) {
-          var className = core.classNames('p-column-filter-menu-button p-link', {
+          var className = utils.classNames('p-column-filter-menu-button p-link', {
             'p-column-filter-menu-button-open': this.state.overlayVisible,
             'p-column-filter-menu-button-active': this.hasFilter()
           });
-          return /*#__PURE__*/React__default['default'].createElement("button", {
+          return /*#__PURE__*/React__default["default"].createElement("button", {
             ref: function ref(el) {
               return _this7.icon = el;
             },
@@ -3888,7 +3998,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
             "aria-expanded": this.state.overlayVisible,
             onClick: this.toggleMenu,
             onKeyDown: this.onToggleButtonKeyDown
-          }, /*#__PURE__*/React__default['default'].createElement("span", {
+          }, /*#__PURE__*/React__default["default"].createElement("span", {
             className: "pi pi-filter-icon pi-filter"
           }));
         }
@@ -3899,14 +4009,14 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
       key: "renderClearButton",
       value: function renderClearButton() {
         if (this.getColumnProp('showClearButton') && this.props.display === 'row') {
-          var className = core.classNames('p-column-filter-clear-button p-link', {
+          var className = utils.classNames('p-column-filter-clear-button p-link', {
             'p-hidden-space': !this.hasRowFilter()
           });
-          return /*#__PURE__*/React__default['default'].createElement("button", {
+          return /*#__PURE__*/React__default["default"].createElement("button", {
             className: className,
             type: "button",
             onClick: this.clearFilter
-          }, /*#__PURE__*/React__default['default'].createElement("span", {
+          }, /*#__PURE__*/React__default["default"].createElement("span", {
             className: "pi pi-filter-slash"
           }));
         }
@@ -3921,16 +4031,16 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
         if (this.isShowMatchModes()) {
           var matchModes = this.matchModes();
           var noFilterLabel = this.noFilterLabel();
-          return /*#__PURE__*/React__default['default'].createElement("ul", {
+          return /*#__PURE__*/React__default["default"].createElement("ul", {
             className: "p-column-filter-row-items"
           }, matchModes.map(function (matchMode, i) {
             var value = matchMode.value,
                 label = matchMode.label;
-            var className = core.classNames('p-column-filter-row-item', {
+            var className = utils.classNames('p-column-filter-row-item', {
               'p-highlight': _this8.isRowMatchModeSelected(value)
             });
             var tabIndex = i === 0 ? 0 : null;
-            return /*#__PURE__*/React__default['default'].createElement("li", {
+            return /*#__PURE__*/React__default["default"].createElement("li", {
               className: className,
               key: label,
               onClick: function onClick() {
@@ -3941,9 +4051,9 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
               },
               tabIndex: tabIndex
             }, label);
-          }), /*#__PURE__*/React__default['default'].createElement("li", {
+          }), /*#__PURE__*/React__default["default"].createElement("li", {
             className: "p-column-filter-separator"
-          }), /*#__PURE__*/React__default['default'].createElement("li", {
+          }), /*#__PURE__*/React__default["default"].createElement("li", {
             className: "p-column-filter-row-item",
             onClick: this.clearFilter,
             onKeyDown: function onKeyDown(e) {
@@ -3960,9 +4070,9 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
         if (this.isShowOperator()) {
           var options = this.operatorOptions();
           var value = this.operator();
-          return /*#__PURE__*/React__default['default'].createElement("div", {
+          return /*#__PURE__*/React__default["default"].createElement("div", {
             className: "p-column-filter-operator"
-          }, /*#__PURE__*/React__default['default'].createElement(dropdown.Dropdown, {
+          }, /*#__PURE__*/React__default["default"].createElement(dropdown.Dropdown, {
             options: options,
             value: value,
             onChange: this.onOperatorChange,
@@ -3979,7 +4089,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
 
         if (this.isShowMatchModes()) {
           var options = this.matchModes();
-          return /*#__PURE__*/React__default['default'].createElement(dropdown.Dropdown, {
+          return /*#__PURE__*/React__default["default"].createElement(dropdown.Dropdown, {
             options: options,
             value: constraint.matchMode,
             onChange: function onChange(e) {
@@ -3998,7 +4108,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
 
         if (this.showRemoveIcon()) {
           var removeRuleLabel = this.removeRuleButtonLabel();
-          return /*#__PURE__*/React__default['default'].createElement(button.Button, {
+          return /*#__PURE__*/React__default["default"].createElement(button.Button, {
             type: "button",
             icon: "pi pi-trash",
             className: "p-column-filter-remove-button p-button-text p-button-danger p-button-sm",
@@ -4017,7 +4127,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
         var _this11 = this;
 
         var fieldConstraints = this.fieldConstraints();
-        return /*#__PURE__*/React__default['default'].createElement("div", {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
           className: "p-column-filter-constraints"
         }, fieldConstraints.map(function (fieldConstraint, i) {
           var matchModeDropdown = _this11.renderMatchModeDropdown(fieldConstraint, i);
@@ -4026,10 +4136,10 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
 
           var removeButton = _this11.renderRemoveButton(i);
 
-          return /*#__PURE__*/React__default['default'].createElement("div", {
+          return /*#__PURE__*/React__default["default"].createElement("div", {
             key: i,
             className: "p-column-filter-constraint"
-          }, matchModeDropdown, menuFilterElement, /*#__PURE__*/React__default['default'].createElement("div", null, removeButton));
+          }, matchModeDropdown, menuFilterElement, /*#__PURE__*/React__default["default"].createElement("div", null, removeButton));
         }));
       }
     }, {
@@ -4037,9 +4147,9 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
       value: function renderAddRule() {
         if (this.isShowAddConstraint()) {
           var addRuleLabel = this.addRuleButtonLabel();
-          return /*#__PURE__*/React__default['default'].createElement("div", {
+          return /*#__PURE__*/React__default["default"].createElement("div", {
             className: "p-column-filter-add-rule"
-          }, /*#__PURE__*/React__default['default'].createElement(button.Button, {
+          }, /*#__PURE__*/React__default["default"].createElement(button.Button, {
             type: "button",
             label: addRuleLabel,
             icon: "pi pi-plus",
@@ -4056,7 +4166,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
         if (this.getColumnProp('showClearButton')) {
           if (!this.getColumnProp('filterClear')) {
             var clearLabel = this.clearButtonLabel();
-            return /*#__PURE__*/React__default['default'].createElement(button.Button, {
+            return /*#__PURE__*/React__default["default"].createElement(button.Button, {
               type: "button",
               className: "p-button-outlined p-button-sm",
               onClick: this.clearFilter,
@@ -4064,7 +4174,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
             });
           }
 
-          return core.ObjectUtils.getJSXElement(this.getColumnProp('filterClear'), {
+          return utils.ObjectUtils.getJSXElement(this.getColumnProp('filterClear'), {
             field: this.field,
             filterModel: this.filterModel,
             filterClearCallback: this.clearFilter
@@ -4079,7 +4189,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
         if (this.getColumnProp('showApplyButton')) {
           if (!this.getColumnProp('filterApply')) {
             var applyLabel = this.applyButtonLabel();
-            return /*#__PURE__*/React__default['default'].createElement(button.Button, {
+            return /*#__PURE__*/React__default["default"].createElement(button.Button, {
               type: "button",
               className: "p-button-sm",
               onClick: this.applyFilter,
@@ -4087,7 +4197,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
             });
           }
 
-          return core.ObjectUtils.getJSXElement(this.getColumnProp('filterApply'), {
+          return utils.ObjectUtils.getJSXElement(this.getColumnProp('filterApply'), {
             field: this.field,
             filterModel: this.filterModel,
             filterApplyCallback: this.applyFilter
@@ -4101,7 +4211,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
       value: function renderButtonBar() {
         var clearButton = this.renderFilterClearButton();
         var applyButton = this.renderFilterApplyButton();
-        return /*#__PURE__*/React__default['default'].createElement("div", {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
           className: "p-column-filter-buttonbar"
         }, clearButton, applyButton);
       }
@@ -4112,32 +4222,32 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
         var constraints = this.renderConstraints();
         var addRule = this.renderAddRule();
         var buttonBar = this.renderButtonBar();
-        return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, operator, constraints, addRule, buttonBar);
+        return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, operator, constraints, addRule, buttonBar);
       }
     }, {
       key: "renderOverlay",
       value: function renderOverlay() {
         var style = this.getColumnProp('filterMenuStyle');
-        var className = core.classNames('p-column-filter-overlay p-component p-fluid', this.getColumnProp('filterMenuClassName'), {
+        var className = utils.classNames('p-column-filter-overlay p-component p-fluid', this.getColumnProp('filterMenuClassName'), {
           'p-column-filter-overlay-menu': this.props.display === 'menu',
-          'p-input-filled': PrimeReact__default['default'].inputStyle === 'filled',
-          'p-ripple-disabled': PrimeReact__default['default'].ripple === false
+          'p-input-filled': PrimeReact__default["default"].inputStyle === 'filled',
+          'p-ripple-disabled': PrimeReact__default["default"].ripple === false
         });
-        var filterHeader = core.ObjectUtils.getJSXElement(this.getColumnProp('filterHeader'), {
+        var filterHeader = utils.ObjectUtils.getJSXElement(this.getColumnProp('filterHeader'), {
           field: this.field,
           filterModel: this.filterModel,
           filterApplyCallback: this.filterApplyCallback
         });
-        var filterFooter = core.ObjectUtils.getJSXElement(this.getColumnProp('filterFooter'), {
+        var filterFooter = utils.ObjectUtils.getJSXElement(this.getColumnProp('filterFooter'), {
           field: this.field,
           filterModel: this.filterModel,
           filterApplyCallback: this.filterApplyCallback
         });
         var items = this.props.display === 'row' ? this.renderRowItems() : this.renderItems();
-        return /*#__PURE__*/React__default['default'].createElement(core.Portal, null, /*#__PURE__*/React__default['default'].createElement(core.CSSTransition, {
+        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
@@ -4146,7 +4256,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
           onEnter: this.onOverlayEnter,
           onExit: this.onOverlayExit,
           onExited: this.onOverlayExited
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
           ref: this.overlayRef,
           style: style,
           className: className,
@@ -4158,7 +4268,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     }, {
       key: "render",
       value: function render() {
-        var className = core.classNames('p-column-filter p-fluid', {
+        var className = utils.classNames('p-column-filter p-fluid', {
           'p-column-filter-row': this.props.display === 'row',
           'p-column-filter-menu': this.props.display === 'menu'
         });
@@ -4166,7 +4276,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
         var menuButton = this.renderMenuButton();
         var clearButton = this.renderClearButton();
         var overlay = this.renderOverlay();
-        return /*#__PURE__*/React__default['default'].createElement("div", {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
           className: className
         }, rowFilterElement, menuButton, clearButton, overlay);
       }
@@ -4175,9 +4285,9 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     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); }; }
 
@@ -4297,7 +4407,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
             var next = this.el.nextElementSibling;
 
             if (next) {
-              right = core.DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
+              right = utils.DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
             }
 
             styleObject['right'] = right + 'px';
@@ -4306,7 +4416,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
             var prev = this.el.previousElementSibling;
 
             if (prev) {
-              left = core.DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
+              left = utils.DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
             }
 
             styleObject['left'] = left + 'px';
@@ -4315,7 +4425,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
           var filterRow = this.el.parentElement.nextElementSibling;
 
           if (filterRow) {
-            var index = core.DomHandler.index(this.el);
+            var index = utils.DomHandler.index(this.el);
             filterRow.children[index].style.left = styleObject['left'];
             filterRow.children[index].style.right = styleObject['right'];
           }
@@ -4339,8 +4449,8 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
         if (!this.isSortableDisabled()) {
           var targetNode = event.target;
 
-          if (core.DomHandler.hasClass(targetNode, 'p-sortable-column') || core.DomHandler.hasClass(targetNode, 'p-column-title') || core.DomHandler.hasClass(targetNode, 'p-column-header-content') || core.DomHandler.hasClass(targetNode, 'p-sortable-column-icon') || core.DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')) {
-            core.DomHandler.clearSelection();
+          if (utils.DomHandler.hasClass(targetNode, 'p-sortable-column') || utils.DomHandler.hasClass(targetNode, 'p-column-title') || utils.DomHandler.hasClass(targetNode, 'p-column-header-content') || utils.DomHandler.hasClass(targetNode, 'p-sortable-column-icon') || utils.DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')) {
+            utils.DomHandler.clearSelection();
             this.props.onSortChange({
               originalEvent: event,
               column: this.props.column,
@@ -4360,7 +4470,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     }, {
       key: "onKeyDown",
       value: function onKeyDown(event) {
-        if (event.key === 'Enter' && event.currentTarget === this.el && core.DomHandler.hasClass(event.currentTarget, 'p-sortable-column')) {
+        if (event.key === 'Enter' && event.currentTarget === this.el && utils.DomHandler.hasClass(event.currentTarget, 'p-sortable-column')) {
           this.onClick(event);
           event.preventDefault();
         }
@@ -4449,7 +4559,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
       key: "renderResizer",
       value: function renderResizer() {
         if (this.props.resizableColumns && !this.getColumnProp('frozen')) {
-          return /*#__PURE__*/React__default['default'].createElement("span", {
+          return /*#__PURE__*/React__default["default"].createElement("span", {
             className: "p-column-resizer",
             onMouseDown: this.onResizerMouseDown,
             onClick: this.onResizerClick,
@@ -4462,10 +4572,10 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     }, {
       key: "renderTitle",
       value: function renderTitle() {
-        var title = core.ObjectUtils.getJSXElement(this.getColumnProp('header'), {
+        var title = utils.ObjectUtils.getJSXElement(this.getColumnProp('header'), {
           props: this.props.tableProps
         });
-        return /*#__PURE__*/React__default['default'].createElement("span", {
+        return /*#__PURE__*/React__default["default"].createElement("span", {
           className: "p-column-title"
         }, title);
       }
@@ -4477,8 +4587,8 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
 
         if (this.getColumnProp('sortable')) {
           var sortIcon = sorted ? sortOrder < 0 ? 'pi-sort-amount-down' : 'pi-sort-amount-up-alt' : 'pi-sort-alt';
-          var className = core.classNames('p-sortable-column-icon pi pi-fw', sortIcon);
-          return /*#__PURE__*/React__default['default'].createElement("span", {
+          var className = utils.classNames('p-sortable-column-icon pi pi-fw', sortIcon);
+          return /*#__PURE__*/React__default["default"].createElement("span", {
             className: className
           });
         }
@@ -4492,7 +4602,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
 
         if (metaIndex !== -1 && this.isBadgeVisible()) {
           var value = this.props.groupRowsBy && this.props.groupRowsBy === this.props.groupRowSortField ? metaIndex : metaIndex + 1;
-          return /*#__PURE__*/React__default['default'].createElement("span", {
+          return /*#__PURE__*/React__default["default"].createElement("span", {
             className: "p-sortable-column-badge"
           }, value);
         }
@@ -4502,9 +4612,9 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     }, {
       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, {
+          return /*#__PURE__*/React__default["default"].createElement(HeaderCheckbox, {
             checked: allRowsSelected,
             onChange: this.props.onColumnCheckboxChange,
             disabled: this.props.empty
@@ -4517,7 +4627,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
       key: "renderFilter",
       value: function renderFilter() {
         if (this.props.filterDisplay === 'menu' && this.getColumnProp('filter')) {
-          return /*#__PURE__*/React__default['default'].createElement(ColumnFilter, {
+          return /*#__PURE__*/React__default["default"].createElement(ColumnFilter, {
             display: "menu",
             column: this.props.column,
             filters: this.props.filters,
@@ -4537,7 +4647,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
         var badge = this.renderBadge(sortMeta);
         var checkbox = this.renderCheckbox();
         var filter = this.renderFilter();
-        return /*#__PURE__*/React__default['default'].createElement("div", {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
           className: "p-column-header-content"
         }, title, sortIcon, badge, checkbox, filter);
       }
@@ -4549,7 +4659,8 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
         var isSortableDisabled = this.isSortableDisabled();
         var sortMeta = this.getSortMeta();
         var style = this.getStyle();
-        var className = core.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,
@@ -4557,14 +4668,14 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
           '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');
         var ariaSort = this.getAriaSort(sortMeta);
         var resizer = this.renderResizer();
         var header = this.renderHeader(sortMeta);
-        return /*#__PURE__*/React__default['default'].createElement("th", {
+        return /*#__PURE__*/React__default["default"].createElement("th", {
           ref: function ref(el) {
             return _this3.el = el;
           },
@@ -4594,9 +4705,9 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     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); }; }
 
@@ -4683,7 +4794,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     }, {
       key: "renderGroupHeaderCells",
       value: function renderGroupHeaderCells(row) {
-        var columns = React__default['default'].Children.toArray(row.props.children);
+        var columns = React__default["default"].Children.toArray(row.props.children);
         return this.renderHeaderCells(columns);
       }
     }, {
@@ -4691,10 +4802,10 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
       value: function renderHeaderCells(columns) {
         var _this3 = this;
 
-        return React__default['default'].Children.map(columns, function (col, i) {
+        return React__default["default"].Children.map(columns, function (col, i) {
           var isVisible = col ? !col.props.hidden : true;
           var key = col ? col.props.columnKey || col.props.field || i : i;
-          return isVisible && /*#__PURE__*/React__default['default'].createElement(HeaderCell, {
+          return isVisible && /*#__PURE__*/React__default["default"].createElement(HeaderCell, {
             key: key,
             value: _this3.props.value,
             tableProps: _this3.props.tableProps,
@@ -4724,6 +4835,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
             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,
@@ -4731,12 +4843,42 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
           });
         });
       }
+    }, {
+      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() {
         var _this4 = this;
 
-        return React__default['default'].Children.map(this.props.columns, function (col, i) {
+        return React__default["default"].Children.map(this.props.columns, function (col, i) {
           var isVisible = !col.props.hidden;
 
           if (isVisible) {
@@ -4753,29 +4895,20 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
 
             var colStyle = _objectSpread$1(_objectSpread$1({}, filterHeaderStyle || {}), style || {});
 
-            var colClassName = core.classNames('p-filter-column', filterHeaderClassName, className, {
+            var colClassName = utils.classNames('p-filter-column', filterHeaderClassName, className, {
               'p-frozen-column': frozen
             });
             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", {
+            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;
@@ -4787,28 +4920,28 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
         var _this5 = this;
 
         if (this.props.headerColumnGroup) {
-          var rows = React__default['default'].Children.toArray(this.props.headerColumnGroup.props.children);
+          var rows = React__default["default"].Children.toArray(this.props.headerColumnGroup.props.children);
           return rows.map(function (row, i) {
-            return /*#__PURE__*/React__default['default'].createElement("tr", {
+            return /*#__PURE__*/React__default["default"].createElement("tr", {
               key: i,
               role: "row"
             }, _this5.renderGroupHeaderCells(row));
           });
         } else {
-          var headerRow = /*#__PURE__*/React__default['default'].createElement("tr", {
+          var headerRow = /*#__PURE__*/React__default["default"].createElement("tr", {
             role: "row"
           }, this.renderHeaderCells(this.props.columns));
-          var filterRow = this.props.filterDisplay === 'row' && /*#__PURE__*/React__default['default'].createElement("tr", {
+          var filterRow = this.props.filterDisplay === 'row' && /*#__PURE__*/React__default["default"].createElement("tr", {
             role: "row"
           }, this.renderFilterCells());
-          return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, headerRow, filterRow);
+          return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, headerRow, filterRow);
         }
       }
     }, {
       key: "render",
       value: function render() {
         var content = this.renderContent();
-        return /*#__PURE__*/React__default['default'].createElement("thead", {
+        return /*#__PURE__*/React__default["default"].createElement("thead", {
           className: "p-datatable-thead"
         }, content);
       }
@@ -4817,9 +4950,9 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     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); }; }
 
@@ -4839,7 +4972,8 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
         d_rows: props.rows,
         columnOrder: [],
         groupRowsSortMeta: null,
-        editingMeta: {}
+        editingMeta: {},
+        attributeSelector: null
       };
 
       if (!_this.props.onPage) {
@@ -4857,13 +4991,8 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
 
       if (!_this.props.onFilter) {
         _this.state.filters = props.filters;
-      }
-
-      if (_this.isStateful()) {
-        _this.restoreState(_this.state);
-      }
+      } // header
 
-      _this.attributeSelector = core.UniqueComponentId(); // header
 
       _this.onSortChange = _this.onSortChange.bind(_assertThisInitialized(_this));
       _this.onFilterChange = _this.onFilterChange.bind(_assertThisInitialized(_this));
@@ -4896,12 +5025,17 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     }, {
       key: "isVirtualScrollerDisabled",
       value: function isVirtualScrollerDisabled() {
-        return core.ObjectUtils.isEmpty(this.props.virtualScrollerOptions) || !this.props.scrollable;
+        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() {
-        return core.ObjectUtils.isNotEmpty(this.getFilters()) || this.props.globalFilter;
+        return utils.ObjectUtils.isNotEmpty(this.getFilters()) || this.props.globalFilter;
       }
     }, {
       key: "getFirst",
@@ -4943,7 +5077,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
       value: function getColumns(ignoreReorderable) {
         var _this2 = this;
 
-        var columns = React__default['default'].Children.toArray(this.props.children);
+        var columns = React__default["default"].Children.toArray(this.props.children);
 
         if (!columns) {
           return null;
@@ -5030,7 +5164,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
         } else {
           var storage = this.getStorage();
 
-          if (core.ObjectUtils.isNotEmpty(state)) {
+          if (utils.ObjectUtils.isNotEmpty(state)) {
             storage.setItem(this.props.stateKey, JSON.stringify(state));
           }
         }
@@ -5078,7 +5212,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
       value: function restoreTableState(restoredState) {
         var state = this._restoreState(restoredState);
 
-        if (core.ObjectUtils.isNotEmpty(state)) {
+        if (utils.ObjectUtils.isNotEmpty(state)) {
           this.setState(state);
         }
       }
@@ -5089,7 +5223,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
 
         var state = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
-        if (core.ObjectUtils.isNotEmpty(restoredState)) {
+        if (utils.ObjectUtils.isNotEmpty(restoredState)) {
           if (this.props.paginator) {
             if (this.props.onPage) {
               var getOnPageParams = function getOnPageParams(first, rows) {
@@ -5105,7 +5239,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
                 };
               };
 
-              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;
@@ -5114,10 +5248,10 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
 
           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;
@@ -5126,9 +5260,9 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
 
           if (restoredState.multiSortMeta) {
             if (this.props.onSort) {
-              this.props.onSort({
+              this.props.onSort(this.createEvent({
                 multiSortMeta: restoredState.multiSortMeta
-              });
+              }));
             } else {
               state.multiSortMeta = restoredState.multiSortMeta;
             }
@@ -5138,9 +5272,9 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
             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);
             }
@@ -5178,14 +5312,14 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
       key: "saveColumnWidths",
       value: function saveColumnWidths(state) {
         var widths = [];
-        var headers = core.DomHandler.find(this.el, '.p-datatable-thead > tr > th');
+        var headers = utils.DomHandler.find(this.el, '.p-datatable-thead > tr > th');
         headers.forEach(function (header) {
-          return widths.push(core.DomHandler.getOuterWidth(header));
+          return widths.push(utils.DomHandler.getOuterWidth(header));
         });
         state.columnWidths = widths.join(',');
 
         if (this.props.columnResizeMode === 'expand') {
-          state.tableWidth = core.DomHandler.getOuterWidth(this.table) + 'px';
+          state.tableWidth = utils.DomHandler.getOuterWidth(this.table) + 'px';
         }
       }
     }, {
@@ -5202,18 +5336,14 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
             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 {
-            core.DomHandler.find(this.table, '.p-datatable-thead > tr > th').forEach(function (header, index) {
-              return header.style.width = widths[index] + 'px';
-            });
           }
         }
       }
@@ -5238,12 +5368,45 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
       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 val = this.props.frozenValue ? [].concat(_toConsumableArray(this.props.frozenValue), _toConsumableArray(processedData)) : processedData;
-        var length = this.props.lazy ? this.props.totalRecords : val ? val.length : 0;
-        return val && length > 0 && this.props.selection && this.props.selection.length > 0 && this.props.selection.length === length;
+        var _this6 = this;
+
+        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);
+            });
+          });
+        }
       }
     }, {
       key: "getSelectionModeInColumn",
@@ -5260,7 +5423,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     }, {
       key: "findColumnByKey",
       value: function findColumnByKey(columns, key) {
-        return core.ObjectUtils.isNotEmpty(columns) ? columns.find(function (col) {
+        return utils.ObjectUtils.isNotEmpty(columns) ? columns.find(function (col) {
           return col.props.columnKey === key || col.props.field === key;
         }) : null;
       }
@@ -5301,7 +5464,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     }, {
       key: "clearEditingMetaData",
       value: function clearEditingMetaData() {
-        if (this.props.editMode && core.ObjectUtils.isNotEmpty(this.state.editingMeta)) {
+        if (this.props.editMode && utils.ObjectUtils.isNotEmpty(this.state.editingMeta)) {
           this.setState({
             editingMeta: {}
           });
@@ -5312,7 +5475,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
       value: function onColumnResizeStart(e) {
         var event = e.originalEvent,
             column = e.column;
-        var containerLeft = core.DomHandler.getOffset(this.el).left;
+        var containerLeft = utils.DomHandler.getOffset(this.el).left;
         this.resizeColumn = column;
         this.resizeColumnElement = event.currentTarget.parentElement;
         this.columnResizing = true;
@@ -5322,8 +5485,8 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     }, {
       key: "onColumnResize",
       value: function onColumnResize(event) {
-        var containerLeft = core.DomHandler.getOffset(this.el).left;
-        core.DomHandler.addClass(this.el, 'p-unselectable-text');
+        var containerLeft = utils.DomHandler.getOffset(this.el).left;
+        utils.DomHandler.addClass(this.el, 'p-unselectable-text');
         this.resizeHelper.style.height = this.el.offsetHeight + 'px';
         this.resizeHelper.style.top = 0 + 'px';
         this.resizeHelper.style.left = event.pageX - containerLeft + this.el.scrollLeft + 'px';
@@ -5368,49 +5531,49 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
         this.resizeHelper.style.display = 'none';
         this.resizeColumn = null;
         this.resizeColumnElement = null;
-        core.DomHandler.removeClass(this.el, 'p-unselectable-text');
+        utils.DomHandler.removeClass(this.el, 'p-unselectable-text');
         this.unbindColumnResizeEvents();
       }
     }, {
       key: "resizeTableCells",
       value: function resizeTableCells(newColumnWidth, nextColumnWidth) {
-        var _this5 = this;
+        var _this7 = this;
 
         var widths = [];
-        var colIndex = core.DomHandler.index(this.resizeColumnElement);
-        var headers = core.DomHandler.find(this.table, '.p-datatable-thead > tr > th');
+        var colIndex = utils.DomHandler.index(this.resizeColumnElement);
+        var headers = utils.DomHandler.find(this.table, '.p-datatable-thead > tr > th');
         headers.forEach(function (header) {
-          return widths.push(core.DomHandler.getOuterWidth(header));
+          return widths.push(utils.DomHandler.getOuterWidth(header));
         });
         this.destroyStyleElement();
         this.createStyleElement();
         var innerHTML = '';
         widths.forEach(function (width, index) {
           var colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width;
-          var style = _this5.props.scrollable ? "flex: 0 0 ".concat(colWidth, "px !important") : "width: ".concat(colWidth, "px !important");
-          innerHTML += "\n                .p-datatable[".concat(_this5.attributeSelector, "] .p-datatable-thead > tr > th:nth-child(").concat(index + 1, "),\n                .p-datatable[").concat(_this5.attributeSelector, "] .p-datatable-tbody > tr > td:nth-child(").concat(index + 1, "),\n                .p-datatable[").concat(_this5.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 _this6 = this;
+        var _this8 = this;
 
         if (!this.documentColumnResizeListener) {
           this.documentColumnResizeListener = document.addEventListener('mousemove', function (event) {
-            if (_this6.columnResizing) {
-              _this6.onColumnResize(event);
+            if (_this8.columnResizing) {
+              _this8.onColumnResize(event);
             }
           });
         }
 
         if (!this.documentColumnResizeEndListener) {
           this.documentColumnResizeEndListener = document.addEventListener('mouseup', function () {
-            if (_this6.columnResizing) {
-              _this6.columnResizing = false;
+            if (_this8.columnResizing) {
+              _this8.columnResizing = false;
 
-              _this6.onColumnResizeEnd();
+              _this8.onColumnResizeEnd();
             }
           });
         }
@@ -5431,42 +5594,54 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     }, {
       key: "onColumnHeaderMouseDown",
       value: function onColumnHeaderMouseDown(e) {
-        core.DomHandler.clearSelection();
+        utils.DomHandler.clearSelection();
         var event = e.originalEvent,
             column = e.column;
 
         if (this.props.reorderableColumns && this.getColumnProp(column, 'reorderable') !== false) {
-          if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA' || core.DomHandler.hasClass(event.target, 'p-column-resizer')) event.currentTarget.draggable = false;else event.currentTarget.draggable = true;
+          if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA' || utils.DomHandler.hasClass(event.target, 'p-column-resizer')) event.currentTarget.draggable = false;else event.currentTarget.draggable = true;
         }
       }
     }, {
       key: "onColumnHeaderCheckboxChange",
       value: function onColumnHeaderCheckboxChange(e, processedData) {
-        var originalEvent = e.originalEvent,
-            checked = e.checked;
-        var selection;
+        var _this9 = this;
 
-        if (!checked) {
-          selection = this.props.frozenValue ? [].concat(_toConsumableArray(this.props.frozenValue), _toConsumableArray(processedData)) : processedData;
-          this.props.onAllRowsSelect && this.props.onAllRowsSelect({
-            originalEvent: originalEvent,
-            data: selection,
-            type: 'all'
-          });
+        if (this.props.onSelectAllChange) {
+          this.props.onSelectAllChange(e);
         } else {
-          selection = [];
-          this.props.onAllRowsUnselect && this.props.onAllRowsUnselect({
-            originalEvent: originalEvent,
-            data: selection,
-            type: 'all'
-          });
-        }
+          var originalEvent = e.originalEvent,
+              checked = e.checked;
+          var data = this.props.selectionPageOnly ? this.dataToRender(processedData) : processedData;
+          var selection = this.props.selectionPageOnly && this.props.selection ? this.props.selection.filter(function (s) {
+            return !data.some(function (d) {
+              return _this9.isEquals(s, d);
+            });
+          }) : [];
 
-        if (this.props.onSelectionChange) {
-          this.props.onSelectionChange({
-            originalEvent: originalEvent,
-            value: selection
-          });
+          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'
+            });
+          } else {
+            this.props.onAllRowsUnselect && this.props.onAllRowsUnselect({
+              originalEvent: originalEvent,
+              data: selection,
+              type: 'all'
+            });
+          }
+
+          if (this.props.onSelectionChange) {
+            this.props.onSelectionChange({
+              originalEvent: originalEvent,
+              value: selection,
+              type: 'all'
+            });
+          }
         }
       }
     }, {
@@ -5480,8 +5655,8 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
           return;
         }
 
-        this.colReorderIconWidth = core.DomHandler.getHiddenElementOuterWidth(this.reorderIndicatorUp);
-        this.colReorderIconHeight = core.DomHandler.getHiddenElementOuterHeight(this.reorderIndicatorUp);
+        this.colReorderIconWidth = utils.DomHandler.getHiddenElementOuterWidth(this.reorderIndicatorUp);
+        this.colReorderIconHeight = utils.DomHandler.getHiddenElementOuterHeight(this.reorderIndicatorUp);
         this.draggedColumn = column;
         this.draggedColumnElement = this.findParentHeader(event.currentTarget);
         event.dataTransfer.setData('text', 'b'); // Firefox requires this to make dragging possible
@@ -5496,8 +5671,8 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
           event.preventDefault();
 
           if (this.draggedColumnElement !== dropHeader) {
-            var containerOffset = core.DomHandler.getOffset(this.el);
-            var dropHeaderOffset = core.DomHandler.getOffset(dropHeader);
+            var containerOffset = utils.DomHandler.getOffset(this.el);
+            var dropHeaderOffset = utils.DomHandler.getOffset(dropHeader);
             var targetLeft = dropHeaderOffset.left - containerOffset.left;
             var columnCenter = dropHeaderOffset.left + dropHeader.offsetWidth / 2;
             this.reorderIndicatorUp.style.top = dropHeaderOffset.top - containerOffset.top - (this.colReorderIconHeight - 1) + 'px';
@@ -5532,15 +5707,15 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     }, {
       key: "onColumnHeaderDrop",
       value: function onColumnHeaderDrop(e) {
-        var _this7 = this;
+        var _this10 = this;
 
         var event = e.originalEvent,
             column = e.column;
         event.preventDefault();
 
         if (this.draggedColumnElement) {
-          var dragIndex = core.DomHandler.index(this.draggedColumnElement);
-          var dropIndex = core.DomHandler.index(this.findParentHeader(event.currentTarget));
+          var dragIndex = utils.DomHandler.index(this.draggedColumnElement);
+          var dropIndex = utils.DomHandler.index(this.findParentHeader(event.currentTarget));
           var allowDrop = dragIndex !== dropIndex;
 
           if (allowDrop && (dropIndex - dragIndex === 1 && this.dropPosition === -1 || dragIndex - dropIndex === 1 && this.dropPosition === 1)) {
@@ -5551,11 +5726,11 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
             var columns = this.getColumns();
 
             var isSameColumn = function isSameColumn(col1, col2) {
-              return col1.props.columnKey || col2.props.columnKey ? core.ObjectUtils.equals(col1.props, col2.props, 'columnKey') : core.ObjectUtils.equals(col1.props, col2.props, 'field');
+              return col1.props.columnKey || col2.props.columnKey ? utils.ObjectUtils.equals(col1.props, col2.props, 'columnKey') : utils.ObjectUtils.equals(col1.props, col2.props, 'field');
             };
 
             var dragColIndex = columns.findIndex(function (child) {
-              return isSameColumn(child, _this7.draggedColumn);
+              return isSameColumn(child, _this10.draggedColumn);
             });
             var dropColIndex = columns.findIndex(function (child) {
               return isSameColumn(child, column);
@@ -5569,7 +5744,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
               dropColIndex--;
             }
 
-            core.ObjectUtils.reorderArray(columns, dragColIndex, dropColIndex);
+            utils.ObjectUtils.reorderArray(columns, dragColIndex, dropColIndex);
             var columnOrder = columns.reduce(function (orders, col) {
               orders.push(col.props.columnKey || col.props.field);
               return orders;
@@ -5599,40 +5774,32 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     }, {
       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
         });
@@ -5696,7 +5863,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
         }
 
         if (this.props.onSort) {
-          this.props.onSort(eventMeta);
+          this.props.onSort(this.createEvent(eventMeta));
         } else {
           eventMeta.first = 0;
           this.setState(eventMeta);
@@ -5715,6 +5882,15 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
       value: function getCalculatedSortOrder(currentOrder) {
         return this.props.removableSort ? this.props.defaultSortOrder === currentOrder ? currentOrder * -1 : 0 : currentOrder * -1;
       }
+    }, {
+      key: "compareValuesOnSort",
+      value: function compareValuesOnSort(value1, value2) {
+        var result = null;
+        if (value1 == null && value2 != null) result = -1;else if (value1 != null && value2 == null) result = 1;else if (value1 == null && value2 == null) result = 0;else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2, undefined, {
+          numeric: true
+        });else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
+        return result;
+      }
     }, {
       key: "addSortMeta",
       value: function addSortMeta(meta, multiSortMeta) {
@@ -5739,6 +5915,8 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     }, {
       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,
@@ -5760,12 +5938,11 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
           });
         } else {
           value.sort(function (data1, data2) {
-            var value1 = core.ObjectUtils.resolveFieldData(data1, field);
-            var value2 = core.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 value1 = utils.ObjectUtils.resolveFieldData(data1, field);
+            var value2 = utils.ObjectUtils.resolveFieldData(data2, field);
+
+            var result = _this11.compareValuesOnSort(value1, value2);
+
             return order * result;
           });
         }
@@ -5775,7 +5952,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     }, {
       key: "sortMultiple",
       value: function sortMultiple(data) {
-        var _this8 = this;
+        var _this12 = this;
 
         var multiSortMeta = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
 
@@ -5792,7 +5969,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
 
         if (this.columnSortable && this.columnSortFunction) {
           var meta = multiSortMeta.find(function (meta) {
-            return meta.field === _this8.columnField;
+            return meta.field === _this12.columnField;
           });
           var field = this.columnField;
           var order = meta ? meta.order : this.defaultSortOrder;
@@ -5802,7 +5979,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
           });
         } else {
           value.sort(function (data1, data2) {
-            return _this8.multisortField(data1, data2, multiSortMeta, 0);
+            return _this12.multisortField(data1, data2, multiSortMeta, 0);
           });
         }
 
@@ -5811,24 +5988,14 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     }, {
       key: "multisortField",
       value: function multisortField(data1, data2, multiSortMeta, index) {
-        var value1 = core.ObjectUtils.resolveFieldData(data1, multiSortMeta[index].field);
-        var value2 = core.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;
-        }
+        var value1 = utils.ObjectUtils.resolveFieldData(data1, multiSortMeta[index].field);
+        var value2 = utils.ObjectUtils.resolveFieldData(data2, multiSortMeta[index].field);
 
         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;
       }
     }, {
@@ -5842,25 +6009,25 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     }, {
       key: "onFilterApply",
       value: function onFilterApply() {
-        var _this9 = this;
+        var _this13 = this;
 
         clearTimeout(this.filterTimeout);
         this.filterTimeout = setTimeout(function () {
-          var filters = _this9.cloneFilters(_this9.state.d_filters);
+          var filters = _this13.cloneFilters(_this13.state.d_filters);
 
-          if (_this9.props.onFilter) {
-            _this9.props.onFilter({
+          if (_this13.props.onFilter) {
+            _this13.props.onFilter(_this13.createEvent({
               filters: filters
-            });
+            }));
           } else {
-            _this9.setState({
+            _this13.setState({
               first: 0,
               filters: filters
             });
           }
 
-          if (_this9.props.onValueChange) {
-            _this9.props.onValueChange(_this9.processedData({
+          if (_this13.props.onValueChange) {
+            _this13.props.onValueChange(_this13.processedData({
               filters: filters
             }));
           }
@@ -5919,7 +6086,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
               var globalFilterField = globalFilterFieldsArray[_j];
               var matchMode = filters['global'] ? filters['global'].matchMode : PrimeReact.FilterMatchMode.CONTAINS;
               var value = filters['global'] ? filters['global'].value : this.props.globalFilter;
-              globalMatch = PrimeReact.FilterService.filters[matchMode](core.ObjectUtils.resolveFieldData(data[i], globalFilterField), value, this.props.filterLocale);
+              globalMatch = PrimeReact.FilterService.filters[matchMode](utils.ObjectUtils.resolveFieldData(data[i], globalFilterField), value, this.props.filterLocale);
 
               if (globalMatch) {
                 break;
@@ -5951,14 +6118,14 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
       value: function executeLocalFilter(field, rowData, filterMeta, index) {
         var filterValue = filterMeta.value;
         var filterMatchMode = filterMeta.matchMode === 'custom' ? "custom_".concat(field) : filterMeta.matchMode || PrimeReact.FilterMatchMode.STARTS_WITH;
-        var dataFieldValue = core.ObjectUtils.resolveFieldData(rowData, field);
+        var dataFieldValue = utils.ObjectUtils.resolveFieldData(rowData, field);
         var filterConstraint = PrimeReact.FilterService.filters[filterMatchMode];
         return filterConstraint(dataFieldValue, filterValue, this.props.filterLocale, index);
       }
     }, {
       key: "cloneFilters",
       value: function cloneFilters(filters) {
-        var _this10 = this;
+        var _this14 = this;
 
         filters = filters || this.props.filters;
         var cloned = {};
@@ -5979,34 +6146,31 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
         } 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] = _this10.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;
           }, {});
         }
@@ -6082,7 +6246,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     }, {
       key: "exportCSV",
       value: function exportCSV(options) {
-        var _this11 = this;
+        var _this15 = this;
 
         var data;
         var csv = "\uFEFF";
@@ -6105,7 +6269,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
             csv += '"' + (header || field) + '"';
 
             if (i < columns.length - 1) {
-              csv += _this11.props.csvSeparator;
+              csv += _this15.props.csvSeparator;
             }
           }
         }); //body
@@ -6114,28 +6278,32 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
           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 = core.ObjectUtils.resolveFieldData(record, field);
+              var cellData = utils.ObjectUtils.resolveFieldData(record, field);
 
               if (cellData != null) {
-                cellData = _this11.props.exportFunction ? _this11.props.exportFunction({
+                cellData = _this15.props.exportFunction ? _this15.props.exportFunction({
                   data: cellData,
-                  field: field
+                  field: field,
+                  rowData: record,
+                  column: column
                 }) : String(cellData).replace(/"/g, '""');
               } else cellData = '';
 
               csv += '"' + cellData + '"';
 
               if (i < columns.length - 1) {
-                csv += _this11.props.csvSeparator;
+                csv += _this15.props.csvSeparator;
               }
             }
           });
         });
-        core.DomHandler.exportCSV(csv, this.props.exportFilename);
+        utils.DomHandler.exportCSV(csv, this.props.exportFilename);
       }
     }, {
       key: "closeEditingCell",
@@ -6144,6 +6312,18 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
           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) {
@@ -6156,11 +6336,11 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
             var sortOrder = localState && localState.sortOrder || this.getSortOrder();
             var multiSortMeta = localState && localState.multiSortMeta || this.getMultiSortMeta();
 
-            if (core.ObjectUtils.isNotEmpty(filters) || this.props.globalFilter) {
+            if (utils.ObjectUtils.isNotEmpty(filters) || this.props.globalFilter) {
               data = this.filterLocal(data, filters);
             }
 
-            if (sortField || core.ObjectUtils.isNotEmpty(multiSortMeta)) {
+            if (sortField || utils.ObjectUtils.isNotEmpty(multiSortMeta)) {
               if (this.props.sortMode === 'single') data = this.sortSingle(data, sortField, sortOrder);else if (this.props.sortMode === 'multiple') data = this.sortMultiple(data, multiSortMeta);
             }
           }
@@ -6181,14 +6361,24 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     }, {
       key: "componentDidMount",
       value: function componentDidMount() {
-        this.el.setAttribute(this.attributeSelector, '');
+        var _this16 = this;
+
+        this.setState({
+          attributeSelector: utils.UniqueComponentId()
+        }, function () {
+          _this16.el.setAttribute(_this16.state.attributeSelector, '');
+        });
 
         if (this.props.responsiveLayout === 'stack' && !this.props.scrollable) {
           this.createResponsiveStyle();
         }
 
-        if (this.isStateful() && this.props.resizableColumns) {
-          this.restoreColumnWidths();
+        if (this.isStateful()) {
+          this.setState(this.restoreState(this.state));
+
+          if (this.props.resizableColumns) {
+            this.restoreColumnWidths();
+          }
         }
       }
     }, {
@@ -6228,10 +6418,10 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
       key: "renderLoader",
       value: function renderLoader() {
         if (this.props.loading) {
-          var iconClassName = core.classNames('p-datatable-loading-icon pi-spin', this.props.loadingIcon);
-          return /*#__PURE__*/React__default['default'].createElement("div", {
+          var iconClassName = utils.classNames('p-datatable-loading-icon pi-spin', this.props.loadingIcon);
+          return /*#__PURE__*/React__default["default"].createElement("div", {
             className: "p-datatable-loading-overlay p-component-overlay"
-          }, /*#__PURE__*/React__default['default'].createElement("i", {
+          }, /*#__PURE__*/React__default["default"].createElement("i", {
             className: iconClassName
           }));
         }
@@ -6242,10 +6432,10 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
       key: "renderHeader",
       value: function renderHeader() {
         if (this.props.header) {
-          var content = core.ObjectUtils.getJSXElement(this.props.header, {
+          var content = utils.ObjectUtils.getJSXElement(this.props.header, {
             props: this.props
           });
-          return /*#__PURE__*/React__default['default'].createElement("div", {
+          return /*#__PURE__*/React__default["default"].createElement("div", {
             className: "p-datatable-header"
           }, content);
         }
@@ -6265,7 +6455,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
         var filtersStore = this.getFilters();
         var processedData = options.items,
             columns = options.columns;
-        return /*#__PURE__*/React__default['default'].createElement(TableHeader, {
+        return /*#__PURE__*/React__default["default"].createElement(TableHeader, {
           value: processedData,
           tableProps: this.props,
           columns: columns,
@@ -6288,6 +6478,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
           filtersStore: filtersStore,
           onFilterChange: this.onFilterChange,
           onFilterApply: this.onFilterApply,
+          showSelectAll: this.props.showSelectAll,
           allRowsSelected: this.allRowsSelected,
           onColumnCheckboxChange: this.onColumnHeaderCheckboxChange,
           onColumnMouseDown: this.onColumnHeaderMouseDown,
@@ -6302,14 +6493,14 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     }, {
       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,
             columns = options.columns,
             contentRef = options.contentRef,
             className = options.className;
-        var frozenBody = this.props.frozenValue && /*#__PURE__*/React__default['default'].createElement(TableBody, {
+        var frozenBody = this.props.frozenValue && /*#__PURE__*/React__default["default"].createElement(TableBody, {
           value: this.props.frozenValue,
           className: "p-datatable-frozen-tbody",
           frozenRow: true,
@@ -6366,6 +6557,8 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
           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,
@@ -6373,7 +6566,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
           rowClassName: this.props.rowClassName,
           isVirtualScrollerDisabled: true
         });
-        var body = /*#__PURE__*/React__default['default'].createElement(TableBody, {
+        var body = /*#__PURE__*/React__default["default"].createElement(TableBody, {
           value: this.dataToRender(rows),
           className: className,
           empty: empty,
@@ -6431,6 +6624,8 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
           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,
@@ -6440,13 +6635,13 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
           virtualScrollerOptions: options,
           isVirtualScrollerDisabled: isVirtualScrollerDisabled
         });
-        return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, frozenBody, body);
+        return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, frozenBody, body);
       }
     }, {
       key: "renderTableFooter",
       value: function renderTableFooter(options) {
         var columns = options.columns;
-        return /*#__PURE__*/React__default['default'].createElement(TableFooter, {
+        return /*#__PURE__*/React__default["default"].createElement(TableFooter, {
           tableProps: this.props,
           columns: columns,
           footerColumnGroup: this.props.footerColumnGroup
@@ -6455,42 +6650,40 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     }, {
       key: "renderContent",
       value: function renderContent(processedData, columns, selectionModeInColumn, empty) {
-        var _this12 = this;
+        var _this17 = this;
 
         if (!columns) return;
         var isVirtualScrollerDisabled = this.isVirtualScrollerDisabled();
         var virtualScrollerOptions = this.props.virtualScrollerOptions || {};
-        return /*#__PURE__*/React__default['default'].createElement("div", {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
           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, {
+        }, /*#__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) {
-              _this12.table = el;
+              _this17.table = el;
               options.spacerRef && options.spacerRef(el);
             };
 
-            var tableClassName = core.classNames('p-datatable-table', _this12.props.tableClassName);
+            var tableClassName = utils.classNames('p-datatable-table', _this17.props.tableClassName);
 
-            var tableHeader = _this12.renderTableHeader(options, empty);
+            var tableHeader = _this17.renderTableHeader(options, empty);
 
-            var tableBody = _this12.renderTableBody(options, selectionModeInColumn, empty, isVirtualScrollerDisabled);
+            var tableBody = _this17.renderTableBody(options, selectionModeInColumn, empty, isVirtualScrollerDisabled);
 
-            var tableFooter = _this12.renderTableFooter(options);
+            var tableFooter = _this17.renderTableFooter(options);
 
-            return /*#__PURE__*/React__default['default'].createElement("table", {
+            return /*#__PURE__*/React__default["default"].createElement("table", {
               ref: ref,
-              style: _this12.props.tableStyle,
+              style: _this17.props.tableStyle,
               className: tableClassName,
               role: "table"
             }, tableHeader, tableBody, tableFooter);
@@ -6501,10 +6694,10 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
       key: "renderFooter",
       value: function renderFooter() {
         if (this.props.footer) {
-          var content = core.ObjectUtils.getJSXElement(this.props.footer, {
+          var content = utils.ObjectUtils.getJSXElement(this.props.footer, {
             props: this.props
           });
-          return /*#__PURE__*/React__default['default'].createElement("div", {
+          return /*#__PURE__*/React__default["default"].createElement("div", {
             className: "p-datatable-footer"
           }, content);
         }
@@ -6514,8 +6707,8 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     }, {
       key: "renderPaginator",
       value: function renderPaginator(position, totalRecords) {
-        var className = core.classNames('p-paginator-' + position, this.props.paginatorClassName);
-        return /*#__PURE__*/React__default['default'].createElement(paginator.Paginator, {
+        var className = utils.classNames('p-paginator-' + position, this.props.paginatorClassName);
+        return /*#__PURE__*/React__default["default"].createElement(paginator.Paginator, {
           first: this.getFirst(),
           rows: this.getRows(),
           pageLinkSize: this.props.pageLinkSize,
@@ -6552,12 +6745,12 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     }, {
       key: "renderResizeHelper",
       value: function renderResizeHelper() {
-        var _this13 = this;
+        var _this18 = this;
 
         if (this.props.resizableColumns) {
-          return /*#__PURE__*/React__default['default'].createElement("div", {
+          return /*#__PURE__*/React__default["default"].createElement("div", {
             ref: function ref(el) {
-              return _this13.resizeHelper = el;
+              return _this18.resizeHelper = el;
             },
             className: "p-column-resizer-helper",
             style: {
@@ -6571,22 +6764,22 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     }, {
       key: "renderReorderIndicators",
       value: function renderReorderIndicators() {
-        var _this14 = this;
+        var _this19 = this;
 
         if (this.props.reorderableColumns) {
           var style = {
             position: 'absolute',
             display: 'none'
           };
-          return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("span", {
+          return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
             ref: function ref(el) {
-              return _this14.reorderIndicatorUp = el;
+              return _this19.reorderIndicatorUp = el;
             },
             className: "pi pi-arrow-down p-datatable-reorder-indicator-up",
             style: style
-          }), /*#__PURE__*/React__default['default'].createElement("span", {
+          }), /*#__PURE__*/React__default["default"].createElement("span", {
             ref: function ref(el) {
-              return _this14.reorderIndicatorDown = el;
+              return _this19.reorderIndicatorDown = el;
             },
             className: "pi pi-arrow-up p-datatable-reorder-indicator-down",
             style: style
@@ -6598,15 +6791,18 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     }, {
       key: "render",
       value: function render() {
-        var _this15 = this;
+        var _this20 = this;
 
         var processedData = this.processedData();
         var columns = this.getColumns();
         var totalRecords = this.getTotalRecords(processedData);
-        var empty = core.ObjectUtils.isEmpty(processedData);
+        var empty = utils.ObjectUtils.isEmpty(processedData);
         var selectionModeInColumn = this.getSelectionModeInColumn(columns);
-        var className = core.classNames('p-datatable p-component', {
-          'p-datatable-hoverable-rows': this.props.rowHover || this.props.selectionMode || selectionModeInColumn,
+        var selectable = this.props.selectionMode || selectionModeInColumn;
+        var className = utils.classNames('p-datatable p-component', {
+          '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',
@@ -6632,9 +6828,9 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
         var footer = this.renderFooter();
         var resizeHelper = this.renderResizeHelper();
         var reorderIndicators = this.renderReorderIndicators();
-        return /*#__PURE__*/React__default['default'].createElement("div", {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
           ref: function ref(el) {
-            return _this15.el = el;
+            return _this20.el = el;
           },
           id: this.props.id,
           className: className,
@@ -6689,7 +6885,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     sortMode: 'single',
     defaultSortOrder: 1,
     removableSort: false,
-    emptyMessage: 'No records found',
+    emptyMessage: null,
     selectionMode: null,
     dragSelection: false,
     cellSelection: false,
@@ -6701,6 +6897,11 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     dataKey: null,
     metaKeySelection: true,
     selectOnEdit: true,
+    selectionPageOnly: false,
+    selectionAutoFocus: true,
+    showSelectAll: true,
+    selectAll: false,
+    onSelectAllChange: null,
     headerColumnGroup: null,
     footerColumnGroup: null,
     rowExpansionTemplate: null,
@@ -6749,6 +6950,7 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
     globalFilterFields: null,
     showSelectionElement: null,
     showRowReorderElement: null,
+    isDataSelectable: null,
     onColumnResizeEnd: null,
     onColumnResizerClick: null,
     onColumnResizerDoubleClick: null,
@@ -6788,4 +6990,4 @@ this.primereact.datatable = (function (exports, React, paginator, core, PrimeRea
 
   return exports;
 
-}({}, React, primereact.paginator, primereact.core, primereact.api, primereact.inputtext, primereact.dropdown, primereact.button, primereact.virtualscroller));
+})({}, React, primereact.paginator, primereact.utils, primereact.api, primereact.overlayservice, primereact.ripple, primereact.csstransition, primereact.portal, primereact.inputtext, primereact.dropdown, primereact.button, primereact.virtualscroller);