primereact 7.0.1 → 7.2.1

package/datatable/datatable.esm.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { Paginator } from 'primereact/paginator';
 import { classNames, ObjectUtils, DomHandler, ZIndexUtils, ConnectedOverlayScrollHandler, UniqueComponentId } from 'primereact/utils';
-import PrimeReact, { localeOption, FilterOperator, FilterMatchMode as FilterMatchMode$1, FilterService } from 'primereact/api';
+import PrimeReact, { localeOption, FilterMatchMode, FilterOperator, FilterService } from 'primereact/api';
 import { OverlayService } from 'primereact/overlayservice';
 import { Ripple } from 'primereact/ripple';
 import { CSSTransition } from 'primereact/csstransition';
@@ -125,6 +125,9 @@ function _defineProperties(target, props) {
 function _createClass(Constructor, protoProps, staticProps) {
   if (protoProps) _defineProperties(Constructor.prototype, protoProps);
   if (staticProps) _defineProperties(Constructor, staticProps);
+  Object.defineProperty(Constructor, "prototype", {
+    writable: false
+  });
   return Constructor;
 }
 
@@ -157,23 +160,20 @@ function _inherits(subClass, superClass) {
       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) {
@@ -271,10 +271,7 @@ var RowRadioButton = /*#__PURE__*/function (_Component) {
     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();
       }
     }
@@ -310,14 +307,17 @@ var RowRadioButton = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this2 = this;
 
-      var className = classNames('p-radiobutton-box p-component', {
+      var className = classNames('p-radiobutton p-component', {
+        'p-radiobutton-focused': this.state.focused
+      });
+      var boxClassName = 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.createElement("div", {
-        className: "p-radiobutton p-component"
+        className: className
       }, /*#__PURE__*/React.createElement("div", {
         className: "p-hidden-accessible"
       }, /*#__PURE__*/React.createElement("input", {
@@ -332,7 +332,7 @@ var RowRadioButton = /*#__PURE__*/function (_Component) {
         onChange: this.onChange,
         onKeyDown: this.onKeyDown
       })), /*#__PURE__*/React.createElement("div", {
-        className: className,
+        className: boxClassName,
         onClick: this.onClick,
         role: "radio",
         "aria-checked": this.props.checked
@@ -376,10 +376,7 @@ var RowCheckbox = /*#__PURE__*/function (_Component) {
         this.setState({
           focused: true
         });
-        this.props.onChange({
-          originalEvent: event,
-          data: this.props.value
-        });
+        this.props.onChange(event);
       }
     }
   }, {
@@ -407,7 +404,10 @@ var RowCheckbox = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var className = classNames('p-checkbox-box p-component', {
+      var className = classNames('p-checkbox p-component', {
+        'p-checkbox-focused': this.state.focused
+      });
+      var boxClassName = classNames('p-checkbox-box p-component', {
         'p-highlight': this.props.checked,
         'p-disabled': this.props.disabled,
         'p-focus': this.state.focused
@@ -417,10 +417,10 @@ var RowCheckbox = /*#__PURE__*/function (_Component) {
       });
       var tabIndex = this.props.disabled ? null : '0';
       return /*#__PURE__*/React.createElement("div", {
-        className: "p-checkbox p-component",
+        className: className,
         onClick: this.onClick
       }, /*#__PURE__*/React.createElement("div", {
-        className: className,
+        className: boxClassName,
         role: "checkbox",
         "aria-checked": this.props.checked,
         tabIndex: tabIndex,
@@ -436,9 +436,9 @@ var RowCheckbox = /*#__PURE__*/function (_Component) {
   return RowCheckbox;
 }(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); }; }
 
@@ -466,6 +466,8 @@ var BodyCell = /*#__PURE__*/function (_Component) {
     _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));
@@ -521,10 +523,9 @@ var BodyCell = /*#__PURE__*/function (_Component) {
       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,
@@ -535,6 +536,14 @@ var BodyCell = /*#__PURE__*/function (_Component) {
         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) {
@@ -624,30 +633,27 @@ var BodyCell = /*#__PURE__*/function (_Component) {
     key: "findNextSelectableCell",
     value: function findNextSelectableCell(cell) {
       var nextCell = cell.nextElementSibling;
-      return nextCell ? DomHandler.hasClass(nextCell, 'p-selectable-cell') ? nextCell : this.findNextSelectableRow(nextCell) : null;
+      return nextCell ? DomHandler.hasClass(nextCell, 'p-selectable-cell') ? nextCell : this.findNextSelectableCell(nextCell) : null;
     }
   }, {
     key: "findPrevSelectableCell",
     value: function findPrevSelectableCell(cell) {
       var prevCell = cell.previousElementSibling;
-      return prevCell ? DomHandler.hasClass(prevCell, 'p-selectable-cell') ? prevCell : this.findPrevSelectableRow(prevCell) : null;
+      return prevCell ? DomHandler.hasClass(prevCell, 'p-selectable-cell') ? prevCell : this.findPrevSelectableCell(prevCell) : null;
     }
   }, {
-    key: "findNextSelectableRow",
-    value: function findNextSelectableRow(row) {
-      var nextRow = row.nextElementSibling;
-      return nextRow ? 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 ? DomHandler.hasClass(downRow, 'p-selectable-row') && DomHandler.hasClass(downCell, 'p-selectable-cell') ? downCell : this.findDownSelectableCell(downCell) : null;
     }
   }, {
-    key: "findPrevSelectableRow",
-    value: function findPrevSelectableRow(row) {
-      var prevRow = row.previousElementSibling;
-
-      if (prevRow) {
-        return 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 ? DomHandler.hasClass(upRow, 'p-selectable-row') && DomHandler.hasClass(upCell, 'p-selectable-cell') ? upCell : this.findUpSelectableCell(upCell) : null;
     }
   }, {
     key: "changeTabIndex",
@@ -665,13 +671,24 @@ var BodyCell = /*#__PURE__*/function (_Component) {
       clearTimeout(this.tabindexTimeout);
       this.tabindexTimeout = setTimeout(function () {
         if (_this4.state.editing) {
-          var focusableEl = DomHandler.getFirstFocusableElement(_this4.el, ':not(.p-cell-editor-key-helper)');
+          var focusableEl = _this4.props.editMode === 'cell' ? DomHandler.getFirstFocusableElement(_this4.el, ':not(.p-cell-editor-key-helper)') : 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' ? DomHandler.findSingle(_this5.el, '.p-row-editor-init') : null;
+        focusableEl && focusableEl.focus();
+      }, 1);
+    }
   }, {
     key: "updateStickyPosition",
     value: function updateStickyPosition() {
@@ -721,7 +738,7 @@ var BodyCell = /*#__PURE__*/function (_Component) {
   }, {
     key: "onClick",
     value: function onClick(event) {
-      var _this5 = this;
+      var _this6 = this;
 
       var params = this.getCellCallbackParams(event);
 
@@ -737,7 +754,7 @@ var BodyCell = /*#__PURE__*/function (_Component) {
 
 
         setTimeout(function () {
-          _this5.setState({
+          _this6.setState({
             editing: true
           }, function () {
             if (onCellEditInit) {
@@ -745,15 +762,15 @@ var BodyCell = /*#__PURE__*/function (_Component) {
             }
 
             if (cellEditValidatorEvent === 'click') {
-              _this5.bindDocumentEditListener();
+              _this6.bindDocumentEditListener();
 
-              _this5.overlayEventListener = function (e) {
-                if (!_this5.isOutsideClicked(e.target)) {
-                  _this5.selfClick = true;
+              _this6.overlayEventListener = function (e) {
+                if (!_this6.isOutsideClicked(e.target)) {
+                  _this6.selfClick = true;
                 }
               };
 
-              OverlayService.on('overlay-click', _this5.overlayEventListener);
+              OverlayService.on('overlay-click', _this6.overlayEventListener);
             }
           });
         }, 1);
@@ -827,10 +844,9 @@ var BodyCell = /*#__PURE__*/function (_Component) {
           //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();
             }
@@ -840,10 +856,9 @@ var BodyCell = /*#__PURE__*/function (_Component) {
           //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();
             }
@@ -886,6 +901,24 @@ var BodyCell = /*#__PURE__*/function (_Component) {
     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) {
@@ -916,6 +949,7 @@ var BodyCell = /*#__PURE__*/function (_Component) {
         field: this.field,
         index: this.props.rowIndex
       });
+      this.focusOnInit();
     }
   }, {
     key: "onRowEditCancel",
@@ -927,19 +961,20 @@ var BodyCell = /*#__PURE__*/function (_Component) {
         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);
@@ -1016,7 +1051,7 @@ var BodyCell = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderElement",
     value: function renderElement() {
-      var _this7 = this;
+      var _this8 = this;
 
       var content, editorKeyHelper;
       var cellSelected = this.props.allowCellSelection && this.isSelected();
@@ -1030,19 +1065,24 @@ var BodyCell = /*#__PURE__*/function (_Component) {
       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 = ObjectUtils.getPropValue(this.props.cellClassName, value, {
         props: this.props.tableProps,
-        rowData: this.props.rowData
+        rowData: this.props.rowData,
+        column: this.props.column
       });
-      var className = classNames(this.getColumnProp('bodyClassName'), this.getColumnProp('class'), cellClassName, {
+      var className = 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.createElement("span", {
         className: "p-column-title"
@@ -1050,40 +1090,19 @@ var BodyCell = /*#__PURE__*/function (_Component) {
         props: this.props.tableProps
       }));
 
-      if (body && !this.state.editing) {
-        content = body ? ObjectUtils.getJSXElement(body, this.props.rowData, {
-          column: this.props.column,
-          field: this.field,
-          rowIndex: this.props.rowIndex,
-          frozenRow: this.props.frozenRow,
-          props: this.props.tableProps
-        }) : value;
-      } else if (editor && this.state.editing) {
-        content = ObjectUtils.getJSXElement(editor, {
-          rowData: this.state.editingRowData,
-          value: this.resolveFieldData(this.state.editingRowData),
-          column: this.props.column,
-          field: this.field,
-          rowIndex: this.props.rowIndex,
-          frozenRow: this.props.frozenRow,
-          props: this.props.tableProps,
-          editorCallback: this.editorCallback
-        });
-      } else if (selectionMode) {
+      if (selectionMode) {
         var showSelection = this.props.showSelectionElement ? this.props.showSelectionElement(this.props.rowData, {
           rowIndex: this.props.rowIndex,
           props: this.props.tableProps
         }) : true;
         content = showSelection && /*#__PURE__*/React.createElement(React.Fragment, null, selectionMode === 'single' && /*#__PURE__*/React.createElement(RowRadioButton, {
-          value: this.props.rowData,
           checked: this.props.selected,
-          onChange: this.props.onRadioChange,
+          onChange: this.onRadioChange,
           tabIndex: this.props.tabIndex,
           tableSelector: this.props.tableSelector
         }), selectionMode === 'multiple' && /*#__PURE__*/React.createElement(RowCheckbox, {
-          value: this.props.rowData,
           checked: this.props.selected,
-          onChange: this.props.onCheckboxChange,
+          onChange: this.onCheckboxChange,
           tabIndex: this.props.tabIndex
         }));
       } else if (rowReorder) {
@@ -1180,6 +1199,25 @@ var BodyCell = /*#__PURE__*/function (_Component) {
             rowEditor: rowEditorProps
           });
         }
+      } else if (body && !this.state.editing) {
+        content = body ? ObjectUtils.getJSXElement(body, this.props.rowData, {
+          column: this.props.column,
+          field: this.field,
+          rowIndex: this.props.rowIndex,
+          frozenRow: this.props.frozenRow,
+          props: this.props.tableProps
+        }) : value;
+      } else if (editor && this.state.editing) {
+        content = ObjectUtils.getJSXElement(editor, {
+          rowData: this.state.editingRowData,
+          value: this.resolveFieldData(this.state.editingRowData),
+          column: this.props.column,
+          field: this.field,
+          rowIndex: this.props.rowIndex,
+          frozenRow: this.props.frozenRow,
+          props: this.props.tableProps,
+          editorCallback: this.editorCallback
+        });
       } else {
         content = value;
       }
@@ -1189,7 +1227,7 @@ var BodyCell = /*#__PURE__*/function (_Component) {
         editorKeyHelper = /*#__PURE__*/React.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
@@ -1199,7 +1237,7 @@ var BodyCell = /*#__PURE__*/function (_Component) {
 
       return /*#__PURE__*/React.createElement("td", {
         ref: function ref(el) {
-          return _this7.el = el;
+          return _this8.el = el;
         },
         style: style,
         className: className,
@@ -1234,9 +1272,9 @@ var BodyCell = /*#__PURE__*/function (_Component) {
   return BodyCell;
 }(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); }; }
 
@@ -1664,6 +1702,7 @@ var BodyRow = /*#__PURE__*/function (_Component) {
             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,
@@ -1689,7 +1728,10 @@ var BodyRow = /*#__PURE__*/function (_Component) {
       var className = 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();
@@ -1766,9 +1808,9 @@ var RowTogglerButton = /*#__PURE__*/function (_Component) {
 
 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); }; }
 
@@ -1805,7 +1847,8 @@ var TableBody = /*#__PURE__*/function (_Component) {
     _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));
@@ -1823,7 +1866,7 @@ var TableBody = /*#__PURE__*/function (_Component) {
   }, {
     key: "equals",
     value: function equals(data1, data2) {
-      if (this.allowCellSelection()) return (data1.rowIndex === data2.rowIndex || data1.rowData === data2.rowData) && (data1.field === data2.field || data1.cellIndex === data2.cellIndex);else return this.compareSelectionBy === 'equals' ? data1 === data2 : ObjectUtils.equals(data1, data2, this.props.dataKey);
+      if (this.allowCellSelection()) return (data1.rowIndex === data2.rowIndex || data1.rowData === data2.rowData) && (data1.field === data2.field || data1.cellIndex === data2.cellIndex);else return this.props.compareSelectionBy === 'equals' ? data1 === data2 : ObjectUtils.equals(data1, data2, this.props.dataKey);
     }
   }, {
     key: "isSubheaderGrouping",
@@ -1895,6 +1938,11 @@ var TableBody = /*#__PURE__*/function (_Component) {
 
       return false;
     }
+  }, {
+    key: "isSelectable",
+    value: function isSelectable(options) {
+      return this.props.isDataSelectable ? this.props.isDataSelectable(options) : true;
+    }
   }, {
     key: "isRowExpanded",
     value: function isRowExpanded(rowData) {
@@ -2064,8 +2112,17 @@ var TableBody = /*#__PURE__*/function (_Component) {
     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;
 
@@ -2092,7 +2149,8 @@ var TableBody = /*#__PURE__*/function (_Component) {
       if (this.props.onSelectionChange && selection !== this.props.selection) {
         this.props.onSelectionChange({
           originalEvent: originalEvent,
-          value: selection
+          value: selection,
+          type: type
         });
       }
     }
@@ -2103,8 +2161,17 @@ var TableBody = /*#__PURE__*/function (_Component) {
 
       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 || [];
 
@@ -2148,13 +2215,14 @@ var TableBody = /*#__PURE__*/function (_Component) {
       if (this.props.onSelectionChange && selection !== this.props.selection) {
         this.props.onSelectionChange({
           originalEvent: originalEvent,
-          value: selection
+          value: selection,
+          type: type
         });
       }
     }
   }, {
     key: "onRangeSelection",
-    value: function onRangeSelection(event) {
+    value: function onRangeSelection(event, type) {
       DomHandler.clearSelection();
       this.rangeRowIndex = this.allowCellSelection() ? event.rowIndex : event.index;
       var selectionInRange = this.selectRange(event);
@@ -2163,7 +2231,8 @@ var TableBody = /*#__PURE__*/function (_Component) {
       if (this.props.onSelectionChange && selection !== this.props.selection) {
         this.props.onSelectionChange({
           originalEvent: event.originalEvent,
-          value: selection
+          value: selection,
+          type: type
         });
       }
 
@@ -2175,12 +2244,6 @@ var TableBody = /*#__PURE__*/function (_Component) {
     key: "selectRange",
     value: function selectRange(event) {
       var rangeStart, rangeEnd;
-      var isLazyAndPaginator = this.props.lazy && this.props.paginator;
-
-      if (isLazyAndPaginator) {
-        this.anchorRowIndex += this.anchorRowFirst;
-        this.rangeRowIndex += this.props.first;
-      }
 
       if (this.rangeRowIndex > this.anchorRowIndex) {
         rangeStart = this.anchorRowIndex;
@@ -2192,7 +2255,7 @@ var TableBody = /*#__PURE__*/function (_Component) {
         rangeStart = rangeEnd = this.rangeRowIndex;
       }
 
-      if (isLazyAndPaginator) {
+      if (this.props.paginator) {
         rangeStart = Math.max(rangeStart - this.props.first, 0);
         rangeEnd -= this.props.first;
       }
@@ -2207,6 +2270,14 @@ var TableBody = /*#__PURE__*/function (_Component) {
 
       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,
@@ -2243,14 +2314,25 @@ var TableBody = /*#__PURE__*/function (_Component) {
 
         for (var j = cellRangeStart; j <= cellRangeEnd; j++) {
           var field = columns[j].props.field;
+
+          var _value = ObjectUtils.resolveFieldData(rowData, field);
+
           var rangeRowData = {
-            value: 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,
@@ -2300,7 +2382,7 @@ var TableBody = /*#__PURE__*/function (_Component) {
     value: function focusOnElement(event, isFocused) {
       var target = event.currentTarget;
 
-      if (!this.allowCellSelection()) {
+      if (!this.allowCellSelection() && this.props.selectionAutoFocus) {
         if (this.isCheckboxSelectionModeInColumn()) {
           var checkbox = DomHandler.findSingle(target, 'td.p-selection-column .p-checkbox-box');
           checkbox && checkbox.focus();
@@ -2312,6 +2394,22 @@ var TableBody = /*#__PURE__*/function (_Component) {
 
       !isFocused && target && target.focus();
     }
+  }, {
+    key: "changeTabIndex",
+    value: function changeTabIndex(event, type) {
+      var target = event.currentTarget;
+      var isSelectable = DomHandler.hasClass(target, type === 'cell' ? 'p-selectable-cell' : 'p-selectable-row');
+
+      if (isSelectable) {
+        var selector = type === 'cell' ? 'tr > td' : 'tr';
+        var tabbableEl = 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) {
@@ -2323,7 +2421,7 @@ var TableBody = /*#__PURE__*/function (_Component) {
 
       if (this.allowRowSelection()) {
         if (this.allowRangeSelection(event)) {
-          this.onRangeSelection(event);
+          this.onRangeSelection(event, 'row');
         } else {
           var toggleable = this.isRadioSelectionModeInColumn() || this.isCheckboxSelectionModeInColumn() || this.allowMetaKeySelection(event);
           this.anchorRowIndex = event.index;
@@ -2342,6 +2440,8 @@ var TableBody = /*#__PURE__*/function (_Component) {
             }));
           }
         }
+
+        this.changeTabIndex(event.originalEvent, 'row');
       } else {
         this.focusOnElement(event.originalEvent);
       }
@@ -2397,7 +2497,7 @@ var TableBody = /*#__PURE__*/function (_Component) {
       if (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;
@@ -2409,7 +2509,7 @@ var TableBody = /*#__PURE__*/function (_Component) {
       var isSameRow = event.index === this.anchorRowIndex;
 
       if (this.allowRowDrag(event) && !isSameRow) {
-        this.onRangeSelection(event);
+        this.onRangeSelection(event, 'row');
       }
     }
   }, {
@@ -2612,7 +2712,7 @@ var TableBody = /*#__PURE__*/function (_Component) {
 
       if (this.allowCellSelection()) {
         if (this.allowRangeSelection(event)) {
-          this.onRangeSelection(event);
+          this.onRangeSelection(event, 'cell');
         } else {
           var toggleable = this.allowMetaKeySelection(event);
 
@@ -2628,6 +2728,7 @@ var TableBody = /*#__PURE__*/function (_Component) {
             this.onSingleSelection({
               originalEvent: originalEvent,
               data: data,
+              index: event.rowIndex,
               toggleable: toggleable,
               type: 'cell'
             });
@@ -2635,11 +2736,14 @@ var TableBody = /*#__PURE__*/function (_Component) {
             this.onMultipleSelection({
               originalEvent: originalEvent,
               data: data,
+              index: event.rowIndex,
               toggleable: toggleable,
               type: 'cell'
             });
           }
         }
+
+        this.changeTabIndex(event.originalEvent, 'cell');
       }
 
       this.rowTouched = false;
@@ -2661,7 +2765,7 @@ var TableBody = /*#__PURE__*/function (_Component) {
       var isSameCell = event.rowIndex === this.anchorRowIndex && event.cellIndex === this.anchorCellIndex;
 
       if (this.allowCellDrag(event) && !isSameCell) {
-        this.onRangeSelection(event);
+        this.onRangeSelection(event, 'cell');
       }
     }
   }, {
@@ -2705,6 +2809,10 @@ var TableBody = /*#__PURE__*/function (_Component) {
       if (!this.props.isVirtualScrollerDisabled && this.getVirtualScrollerOption('vertical') && this.getVirtualScrollerOption('itemSize', prevProps.virtualScrollerOptions) !== this.getVirtualScrollerOption('itemSize')) {
         this.updateVirtualScrollerPosition();
       }
+
+      if (this.props.paginator && this.isMultipleSelection() && this.props.first !== prevProps.first) {
+        this.anchorRowIndex = null;
+      }
     }
   }, {
     key: "componentWillUnmount",
@@ -2736,7 +2844,7 @@ var TableBody = /*#__PURE__*/function (_Component) {
   }, {
     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.createElement(RowTogglerButton, {
           onClick: this.onRowToggle,
@@ -2784,6 +2892,7 @@ var TableBody = /*#__PURE__*/function (_Component) {
           onRowDoubleClick: this.onRowDoubleClick,
           onRowRightClick: this.onRowRightClick,
           tabIndex: this.props.tabIndex,
+          isSelectable: this.isSelectable,
           onRowTouchEnd: this.onRowTouchEnd,
           onRowMouseDown: this.onRowMouseDown,
           onRowMouseUp: this.onRowMouseUp,
@@ -2855,7 +2964,7 @@ var TableBody = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderGroupFooter",
     value: function renderGroupFooter(rowData, index, expanded, isSubheaderGrouping, colSpan) {
-      if (isSubheaderGrouping && this.shouldRenderRowGroupFooter(this.props.value, rowData, index, expanded)) {
+      if (isSubheaderGrouping && this.shouldRenderRowGroupFooter(this.props.value, rowData, index - this.props.first, expanded)) {
         var content = ObjectUtils.getJSXElement(this.props.rowGroupFooterTemplate, rowData, {
           index: index,
           colSpan: colSpan,
@@ -2913,9 +3022,9 @@ var TableBody = /*#__PURE__*/function (_Component) {
   return TableBody;
 }(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); }; }
 
@@ -3002,9 +3111,10 @@ var FooterCell = /*#__PURE__*/function (_Component) {
       var _this2 = this;
 
       var style = this.getStyle();
-      var className = classNames(this.getColumnProp('footerClassName'), this.getColumnProp('className'), {
+      var align = this.getColumnProp('align');
+      var className = 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 = ObjectUtils.getJSXElement(this.getColumnProp('footer'), {
@@ -3151,7 +3261,7 @@ var HeaderCheckbox = /*#__PURE__*/function (_Component) {
         });
         this.props.onChange({
           originalEvent: event,
-          checked: this.props.checked
+          checked: !this.props.checked
         });
       }
     }
@@ -3195,29 +3305,9 @@ var HeaderCheckbox = /*#__PURE__*/function (_Component) {
   return HeaderCheckbox;
 }(Component);
 
-var FilterMatchMode = Object.freeze({
-  STARTS_WITH: 'startsWith',
-  CONTAINS: 'contains',
-  NOT_CONTAINS: 'notContains',
-  ENDS_WITH: 'endsWith',
-  EQUALS: 'equals',
-  NOT_EQUALS: 'notEquals',
-  IN: 'in',
-  LESS_THAN: 'lt',
-  LESS_THAN_OR_EQUAL_TO: 'lte',
-  GREATER_THAN: 'gt',
-  GREATER_THAN_OR_EQUAL_TO: 'gte',
-  BETWEEN: 'between',
-  DATE_IS: 'dateIs',
-  DATE_IS_NOT: 'dateIsNot',
-  DATE_BEFORE: 'dateBefore',
-  DATE_AFTER: 'dateAfter',
-  CUSTOM: 'custom'
-});
-
-function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createSuper$3(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$3(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -3297,7 +3387,7 @@ var ColumnFilter = /*#__PURE__*/function (_Component) {
   }, {
     key: "isRowMatchModeSelected",
     value: function isRowMatchModeSelected(matchMode) {
-      return this.filterModel.matchMode === matchMode;
+      return this.filterModel && this.filterModel.matchMode === matchMode;
     }
   }, {
     key: "showMenuButton",
@@ -3590,7 +3680,7 @@ var ColumnFilter = /*#__PURE__*/function (_Component) {
       filters[this.field].constraints.push(newConstraint);
       filterConstraintAddCallback && filterConstraintAddCallback({
         field: this.field,
-        constraing: newConstraint
+        constraint: newConstraint
       });
       this.props.onFilterChange(filters);
 
@@ -3608,7 +3698,7 @@ var ColumnFilter = /*#__PURE__*/function (_Component) {
       var removedConstraint = filters[this.field].constraints.splice(index, 1);
       filterConstraintRemoveCallback && filterConstraintRemoveCallback({
         field: this.field,
-        constraing: removedConstraint
+        constraint: removedConstraint
       });
       this.props.onFilterChange(filters);
 
@@ -3742,7 +3832,7 @@ var ColumnFilter = /*#__PURE__*/function (_Component) {
 
       if (!this.resizeListener) {
         this.resizeListener = function () {
-          if (_this5.state.overlayVisible) {
+          if (_this5.state.overlayVisible && !DomHandler.isTouchDevice()) {
             _this5.hide();
           }
         };
@@ -3850,16 +3940,17 @@ var ColumnFilter = /*#__PURE__*/function (_Component) {
     value: function renderFilterElement(model, index) {
       var _this6 = this;
 
+      var value = model ? model.value : null;
       return this.getColumnProp('filterElement') ? ObjectUtils.getJSXElement(this.getColumnProp('filterElement'), {
         field: this.field,
         index: index,
         filterModel: model,
-        value: model.value,
+        value: value,
         filterApplyCallback: this.filterApplyCallback,
         filterCallback: this.filterCallback
       }) : /*#__PURE__*/React.createElement(InputText, {
         type: this.getColumnProp('filterType'),
-        value: model.value || '',
+        value: value || '',
         onChange: function onChange(e) {
           return _this6.onInputChange(e, index);
         },
@@ -4158,7 +4249,7 @@ var ColumnFilter = /*#__PURE__*/function (_Component) {
       return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(CSSTransition, {
         nodeRef: this.overlayRef,
         classNames: "p-connected-overlay",
-        in: this.state.overlayVisible,
+        "in": this.state.overlayVisible,
         timeout: {
           enter: 120,
           exit: 100
@@ -4196,9 +4287,9 @@ var ColumnFilter = /*#__PURE__*/function (_Component) {
   return ColumnFilter;
 }(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); }; }
 
@@ -4523,7 +4614,7 @@ var HeaderCell = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderCheckbox",
     value: function renderCheckbox() {
-      if (this.getColumnProp('selectionMode') === 'multiple' && this.props.filterDisplay !== 'row') {
+      if (this.props.showSelectAll && this.getColumnProp('selectionMode') === 'multiple' && this.props.filterDisplay !== 'row') {
         var allRowsSelected = this.props.allRowsSelected(this.props.value);
         return /*#__PURE__*/React.createElement(HeaderCheckbox, {
           checked: allRowsSelected,
@@ -4570,7 +4661,8 @@ var HeaderCell = /*#__PURE__*/function (_Component) {
       var isSortableDisabled = this.isSortableDisabled();
       var sortMeta = this.getSortMeta();
       var style = this.getStyle();
-      var className = classNames(this.getColumnProp('headerClassName'), this.getColumnProp('className'), {
+      var align = this.getColumnProp('alignHeader') || this.getColumnProp('align');
+      var className = classNames(this.getColumnProp('headerClassName'), this.getColumnProp('className'), _defineProperty({
         'p-sortable-column': this.getColumnProp('sortable'),
         'p-resizable-column': this.props.resizableColumns,
         'p-highlight': sortMeta.sorted,
@@ -4578,7 +4670,7 @@ var HeaderCell = /*#__PURE__*/function (_Component) {
         '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');
@@ -4615,9 +4707,9 @@ var HeaderCell = /*#__PURE__*/function (_Component) {
   return HeaderCell;
 }(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); }; }
 
@@ -4745,6 +4837,7 @@ var TableHeader = /*#__PURE__*/function (_Component) {
           onColumnResizeStart: _this3.props.onColumnResizeStart,
           onColumnResizerClick: _this3.props.onColumnResizerClick,
           onColumnResizerDoubleClick: _this3.props.onColumnResizerDoubleClick,
+          showSelectAll: _this3.props.showSelectAll,
           allRowsSelected: _this3.props.allRowsSelected,
           onColumnCheckboxChange: _this3.onCheckboxChange,
           reorderableColumns: _this3.props.reorderableColumns,
@@ -4752,6 +4845,36 @@ var TableHeader = /*#__PURE__*/function (_Component) {
         });
       });
     }
+  }, {
+    key: "renderCheckbox",
+    value: function renderCheckbox(selectionMode) {
+      if (this.props.showSelectAll && selectionMode === 'multiple') {
+        var allRowsSelected = this.props.allRowsSelected(this.props.value);
+        return /*#__PURE__*/React.createElement(HeaderCheckbox, {
+          checked: allRowsSelected,
+          onChange: this.onCheckboxChange,
+          disabled: this.props.empty
+        });
+      }
+
+      return null;
+    }
+  }, {
+    key: "renderFilter",
+    value: function renderFilter(column, filter) {
+      if (filter) {
+        return /*#__PURE__*/React.createElement(ColumnFilter, {
+          display: "row",
+          column: column,
+          filters: this.props.filters,
+          filtersStore: this.props.filtersStore,
+          onFilterChange: this.props.onFilterChange,
+          onFilterApply: this.props.onFilterApply
+        });
+      }
+
+      return null;
+    }
   }, {
     key: "renderFilterCells",
     value: function renderFilterCells() {
@@ -4779,24 +4902,15 @@ var TableHeader = /*#__PURE__*/function (_Component) {
           });
           var colKey = columnKey || field || i;
 
-          var allRowsSelected = selectionMode === 'multiple' && _this4.props.allRowsSelected(_this4.props.value);
+          var checkbox = _this4.renderCheckbox(selectionMode);
+
+          var filterRow = _this4.renderFilter(col, filter);
 
           return /*#__PURE__*/React.createElement("th", {
             key: colKey,
             style: colStyle,
             className: colClassName
-          }, selectionMode === 'multiple' && /*#__PURE__*/React.createElement(HeaderCheckbox, {
-            checked: allRowsSelected,
-            onChange: _this4.onCheckboxChange,
-            disabled: _this4.props.empty
-          }), filter && /*#__PURE__*/React.createElement(ColumnFilter, {
-            display: "row",
-            column: col,
-            filters: _this4.props.filters,
-            filtersStore: _this4.props.filtersStore,
-            onFilterChange: _this4.props.onFilterChange,
-            onFilterApply: _this4.props.onFilterApply
-          }));
+          }, checkbox, filterRow);
         }
 
         return null;
@@ -4838,9 +4952,9 @@ var TableHeader = /*#__PURE__*/function (_Component) {
   return TableHeader;
 }(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); }; }
 
@@ -4860,7 +4974,8 @@ var DataTable = /*#__PURE__*/function (_Component) {
       d_rows: props.rows,
       columnOrder: [],
       groupRowsSortMeta: null,
-      editingMeta: {}
+      editingMeta: {},
+      attributeSelector: null
     };
 
     if (!_this.props.onPage) {
@@ -4878,13 +4993,8 @@ var DataTable = /*#__PURE__*/function (_Component) {
 
     if (!_this.props.onFilter) {
       _this.state.filters = props.filters;
-    }
+    } // header
 
-    if (_this.isStateful()) {
-      _this.restoreState(_this.state);
-    }
-
-    _this.attributeSelector = UniqueComponentId(); // header
 
     _this.onSortChange = _this.onSortChange.bind(_assertThisInitialized(_this));
     _this.onFilterChange = _this.onFilterChange.bind(_assertThisInitialized(_this));
@@ -4919,6 +5029,11 @@ var DataTable = /*#__PURE__*/function (_Component) {
     value: function isVirtualScrollerDisabled() {
       return ObjectUtils.isEmpty(this.props.virtualScrollerOptions) || !this.props.scrollable;
     }
+  }, {
+    key: "isEquals",
+    value: function isEquals(data1, data2) {
+      return this.props.compareSelectionBy === 'equals' ? data1 === data2 : ObjectUtils.equals(data1, data2, this.props.dataKey);
+    }
   }, {
     key: "hasFilter",
     value: function hasFilter() {
@@ -5126,7 +5241,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
               };
             };
 
-            this.props.onPage(getOnPageParams(restoredState.first, restoredState.rows));
+            this.props.onPage(this.createEvent(getOnPageParams(restoredState.first, restoredState.rows)));
           } else {
             state.first = restoredState.first;
             state.rows = restoredState.rows;
@@ -5135,10 +5250,10 @@ var DataTable = /*#__PURE__*/function (_Component) {
 
         if (restoredState.sortField) {
           if (this.props.onSort) {
-            this.props.onSort({
+            this.props.onSort(this.createEvent({
               sortField: restoredState.sortField,
               sortOrder: restoredState.sortOrder
-            });
+            }));
           } else {
             state.sortField = restoredState.sortField;
             state.sortOrder = restoredState.sortOrder;
@@ -5147,9 +5262,9 @@ var DataTable = /*#__PURE__*/function (_Component) {
 
         if (restoredState.multiSortMeta) {
           if (this.props.onSort) {
-            this.props.onSort({
+            this.props.onSort(this.createEvent({
               multiSortMeta: restoredState.multiSortMeta
-            });
+            }));
           } else {
             state.multiSortMeta = restoredState.multiSortMeta;
           }
@@ -5159,9 +5274,9 @@ var DataTable = /*#__PURE__*/function (_Component) {
           state.d_filters = this.cloneFilters(restoredState.filters);
 
           if (this.props.onFilter) {
-            this.props.onFilter({
+            this.props.onFilter(this.createEvent({
               filters: restoredState.filters
-            });
+            }));
           } else {
             state.filters = this.cloneFilters(restoredState.filters);
           }
@@ -5223,18 +5338,14 @@ var DataTable = /*#__PURE__*/function (_Component) {
           this.el.style.width = this.tableWidthState;
         }
 
-        this.createStyleElement();
-
-        if (this.props.scrollable && widths && widths.length > 0) {
+        if (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 {
-          DomHandler.find(this.table, '.p-datatable-thead > tr > th').forEach(function (header, index) {
-            return header.style.width = widths[index] + 'px';
-          });
         }
       }
     }
@@ -5259,20 +5370,45 @@ var DataTable = /*#__PURE__*/function (_Component) {
     value: function getGroupRowSortField() {
       return this.props.sortMode === 'single' ? this.props.sortField : this.state.groupRowsSortMeta ? this.state.groupRowsSortMeta.field : null;
     }
+  }, {
+    key: "getSelectableData",
+    value: function getSelectableData(val) {
+      var _this5 = this;
+
+      if (this.props.showSelectionElement || this.props.isDataSelectable) {
+        return val.filter(function (data, index) {
+          var isSelectable = true;
+          if (_this5.props.showSelectionElement) isSelectable = _this5.props.showSelectionElement({
+            rowIndex: index,
+            props: _this5.props
+          });
+          if (_this5.props.isDataSelectable && isSelectable) isSelectable = _this5.props.isDataSelectable({
+            data: data,
+            index: index
+          });
+          return isSelectable;
+        });
+      }
+
+      return val;
+    }
   }, {
     key: "allRowsSelected",
     value: function allRowsSelected(processedData) {
-      var _this5 = this;
+      var _this6 = this;
 
-      var val = this.props.frozenValue ? [].concat(_toConsumableArray(this.props.frozenValue), _toConsumableArray(processedData)) : processedData;
-      var selectableVal = this.props.showSelectionElement ? val.filter(function (data, index) {
-        return _this5.props.showSelectionElement(data, {
-          rowIndex: index,
-          props: _this5.props
+      if (this.props.onSelectAllChange) {
+        return this.props.selectAll;
+      } else {
+        var data = this.props.selectionPageOnly ? this.dataToRender(processedData) : processedData;
+        var val = this.props.frozenValue ? [].concat(_toConsumableArray(this.props.frozenValue), _toConsumableArray(data)) : data;
+        var selectableVal = this.getSelectableData(val);
+        return selectableVal && this.props.selection && selectableVal.every(function (sv) {
+          return _this6.props.selection.some(function (s) {
+            return _this6.isEquals(s, sv);
+          });
         });
-      }) : val;
-      var length = this.props.lazy ? this.props.totalRecords : selectableVal ? selectableVal.length : 0;
-      return selectableVal && length > 0 && this.props.selection && this.props.selection.length > 0 && this.props.selection.length === length;
+      }
     }
   }, {
     key: "getSelectionModeInColumn",
@@ -5403,7 +5539,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "resizeTableCells",
     value: function resizeTableCells(newColumnWidth, nextColumnWidth) {
-      var _this6 = this;
+      var _this7 = this;
 
       var widths = [];
       var colIndex = DomHandler.index(this.resizeColumnElement);
@@ -5416,30 +5552,30 @@ var DataTable = /*#__PURE__*/function (_Component) {
       var innerHTML = '';
       widths.forEach(function (width, index) {
         var colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width;
-        var style = _this6.props.scrollable ? "flex: 0 0 ".concat(colWidth, "px !important") : "width: ".concat(colWidth, "px !important");
-        innerHTML += "\n                .p-datatable[".concat(_this6.attributeSelector, "] .p-datatable-thead > tr > th:nth-child(").concat(index + 1, "),\n                .p-datatable[").concat(_this6.attributeSelector, "] .p-datatable-tbody > tr > td:nth-child(").concat(index + 1, "),\n                .p-datatable[").concat(_this6.attributeSelector, "] .p-datatable-tfoot > tr > td:nth-child(").concat(index + 1, ") {\n                    ").concat(style, "\n                }\n            ");
+        var style = _this7.props.scrollable ? "flex: 1 1 ".concat(colWidth, "px !important") : "width: ".concat(colWidth, "px !important");
+        innerHTML += "\n                .p-datatable[".concat(_this7.state.attributeSelector, "] .p-datatable-thead > tr > th:nth-child(").concat(index + 1, "),\n                .p-datatable[").concat(_this7.state.attributeSelector, "] .p-datatable-tbody > tr > td:nth-child(").concat(index + 1, "),\n                .p-datatable[").concat(_this7.state.attributeSelector, "] .p-datatable-tfoot > tr > td:nth-child(").concat(index + 1, ") {\n                    ").concat(style, "\n                }\n            ");
       });
       this.styleElement.innerHTML = innerHTML;
     }
   }, {
     key: "bindColumnResizeEvents",
     value: function bindColumnResizeEvents() {
-      var _this7 = this;
+      var _this8 = this;
 
       if (!this.documentColumnResizeListener) {
         this.documentColumnResizeListener = document.addEventListener('mousemove', function (event) {
-          if (_this7.columnResizing) {
-            _this7.onColumnResize(event);
+          if (_this8.columnResizing) {
+            _this8.onColumnResize(event);
           }
         });
       }
 
       if (!this.documentColumnResizeEndListener) {
         this.documentColumnResizeEndListener = document.addEventListener('mouseup', function () {
-          if (_this7.columnResizing) {
-            _this7.columnResizing = false;
+          if (_this8.columnResizing) {
+            _this8.columnResizing = false;
 
-            _this7.onColumnResizeEnd();
+            _this8.onColumnResizeEnd();
           }
         });
       }
@@ -5471,39 +5607,43 @@ var DataTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "onColumnHeaderCheckboxChange",
     value: function onColumnHeaderCheckboxChange(e, processedData) {
-      var _this8 = this;
+      var _this9 = this;
 
-      var originalEvent = e.originalEvent,
-          checked = e.checked;
-      var selection;
+      if (this.props.onSelectAllChange) {
+        this.props.onSelectAllChange(e);
+      } else {
+        var originalEvent = e.originalEvent,
+            checked = e.checked;
+        var data = this.props.selectionPageOnly ? this.dataToRender(processedData) : processedData;
+        var selection = this.props.selectionPageOnly && this.props.selection ? this.props.selection.filter(function (s) {
+          return !data.some(function (d) {
+            return _this9.isEquals(s, d);
+          });
+        }) : [];
 
-      if (!checked) {
-        selection = this.props.frozenValue ? [].concat(_toConsumableArray(this.props.frozenValue), _toConsumableArray(processedData)) : processedData;
-        selection = this.props.showSelectionElement ? selection.filter(function (data, index) {
-          return _this8.props.showSelectionElement(data, {
-            rowIndex: index,
-            props: _this8.props
+        if (checked) {
+          selection = this.props.frozenValue ? [].concat(_toConsumableArray(selection), _toConsumableArray(this.props.frozenValue), _toConsumableArray(data)) : [].concat(_toConsumableArray(selection), _toConsumableArray(data));
+          selection = this.getSelectableData(selection);
+          this.props.onAllRowsSelect && this.props.onAllRowsSelect({
+            originalEvent: originalEvent,
+            data: selection,
+            type: 'all'
           });
-        }) : selection;
-        this.props.onAllRowsSelect && this.props.onAllRowsSelect({
-          originalEvent: originalEvent,
-          data: selection,
-          type: 'all'
-        });
-      } else {
-        selection = [];
-        this.props.onAllRowsUnselect && this.props.onAllRowsUnselect({
-          originalEvent: originalEvent,
-          data: selection,
-          type: 'all'
-        });
-      }
+        } else {
+          this.props.onAllRowsUnselect && this.props.onAllRowsUnselect({
+            originalEvent: originalEvent,
+            data: selection,
+            type: 'all'
+          });
+        }
 
-      if (this.props.onSelectionChange) {
-        this.props.onSelectionChange({
-          originalEvent: originalEvent,
-          value: selection
-        });
+        if (this.props.onSelectionChange) {
+          this.props.onSelectionChange({
+            originalEvent: originalEvent,
+            value: selection,
+            type: 'all'
+          });
+        }
       }
     }
   }, {
@@ -5569,7 +5709,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "onColumnHeaderDrop",
     value: function onColumnHeaderDrop(e) {
-      var _this9 = this;
+      var _this10 = this;
 
       var event = e.originalEvent,
           column = e.column;
@@ -5592,7 +5732,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
           };
 
           var dragColIndex = columns.findIndex(function (child) {
-            return isSameColumn(child, _this9.draggedColumn);
+            return isSameColumn(child, _this10.draggedColumn);
           });
           var dropColIndex = columns.findIndex(function (child) {
             return isSameColumn(child, column);
@@ -5636,40 +5776,32 @@ var DataTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "createStyleElement",
     value: function createStyleElement() {
-      this.styleElement = document.createElement('style');
-      document.head.appendChild(this.styleElement);
+      this.styleElement = DomHandler.createInlineStyle(PrimeReact.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 = DomHandler.createInlineStyle(PrimeReact.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 = DomHandler.removeInlineStyle(this.responsiveStyleElement);
     }
   }, {
     key: "destroyStyleElement",
     value: function destroyStyleElement() {
-      if (this.styleElement) {
-        document.head.removeChild(this.styleElement);
-        this.styleElement = null;
-      }
+      this.styleElement = DomHandler.removeInlineStyle(this.styleElement);
     }
   }, {
     key: "onPageChange",
     value: function onPageChange(e) {
       this.clearEditingMetaData();
-      if (this.props.onPage) this.props.onPage(e);else this.setState({
+      if (this.props.onPage) this.props.onPage(this.createEvent(e));else this.setState({
         first: e.first,
         rows: e.rows
       });
@@ -5733,7 +5865,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
       }
 
       if (this.props.onSort) {
-        this.props.onSort(eventMeta);
+        this.props.onSort(this.createEvent(eventMeta));
       } else {
         eventMeta.first = 0;
         this.setState(eventMeta);
@@ -5752,6 +5884,11 @@ var DataTable = /*#__PURE__*/function (_Component) {
     value: function getCalculatedSortOrder(currentOrder) {
       return this.props.removableSort ? this.props.defaultSortOrder === currentOrder ? currentOrder * -1 : 0 : currentOrder * -1;
     }
+  }, {
+    key: "compareValuesOnSort",
+    value: function compareValuesOnSort(value1, value2) {
+      return ObjectUtils.sort(value1, value2, 1, PrimeReact.locale);
+    }
   }, {
     key: "addSortMeta",
     value: function addSortMeta(meta, multiSortMeta) {
@@ -5776,6 +5913,8 @@ var DataTable = /*#__PURE__*/function (_Component) {
   }, {
     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,
@@ -5799,10 +5938,9 @@ var DataTable = /*#__PURE__*/function (_Component) {
         value.sort(function (data1, data2) {
           var value1 = ObjectUtils.resolveFieldData(data1, field);
           var value2 = ObjectUtils.resolveFieldData(data2, field);
-          var result = null;
-          if (value1 == null && value2 != null) result = -1;else if (value1 != null && value2 == null) result = 1;else if (value1 == null && value2 == null) result = 0;else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2, undefined, {
-            numeric: true
-          });else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
+
+          var result = _this11.compareValuesOnSort(value1, value2);
+
           return order * result;
         });
       }
@@ -5812,7 +5950,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "sortMultiple",
     value: function sortMultiple(data) {
-      var _this10 = this;
+      var _this12 = this;
 
       var multiSortMeta = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
 
@@ -5829,7 +5967,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
 
       if (this.columnSortable && this.columnSortFunction) {
         var meta = multiSortMeta.find(function (meta) {
-          return meta.field === _this10.columnField;
+          return meta.field === _this12.columnField;
         });
         var field = this.columnField;
         var order = meta ? meta.order : this.defaultSortOrder;
@@ -5839,7 +5977,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
         });
       } else {
         value.sort(function (data1, data2) {
-          return _this10.multisortField(data1, data2, multiSortMeta, 0);
+          return _this12.multisortField(data1, data2, multiSortMeta, 0);
         });
       }
 
@@ -5850,22 +5988,12 @@ var DataTable = /*#__PURE__*/function (_Component) {
     value: function multisortField(data1, data2, multiSortMeta, index) {
       var value1 = ObjectUtils.resolveFieldData(data1, multiSortMeta[index].field);
       var value2 = ObjectUtils.resolveFieldData(data2, multiSortMeta[index].field);
-      var result = null;
-
-      if (typeof value1 === 'string' || value1 instanceof String) {
-        if (value1.localeCompare && value1 !== value2) {
-          return multiSortMeta[index].order * value1.localeCompare(value2, undefined, {
-            numeric: true
-          });
-        }
-      } else {
-        result = value1 < value2 ? -1 : 1;
-      }
 
       if (value1 === value2) {
         return multiSortMeta.length - 1 > index ? this.multisortField(data1, data2, multiSortMeta, index + 1) : 0;
       }
 
+      var result = this.compareValuesOnSort(value1, value2);
       return multiSortMeta[index].order * result;
     }
   }, {
@@ -5879,25 +6007,25 @@ var DataTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "onFilterApply",
     value: function onFilterApply() {
-      var _this11 = this;
+      var _this13 = this;
 
       clearTimeout(this.filterTimeout);
       this.filterTimeout = setTimeout(function () {
-        var filters = _this11.cloneFilters(_this11.state.d_filters);
+        var filters = _this13.cloneFilters(_this13.state.d_filters);
 
-        if (_this11.props.onFilter) {
-          _this11.props.onFilter({
+        if (_this13.props.onFilter) {
+          _this13.props.onFilter(_this13.createEvent({
             filters: filters
-          });
+          }));
         } else {
-          _this11.setState({
+          _this13.setState({
             first: 0,
             filters: filters
           });
         }
 
-        if (_this11.props.onValueChange) {
-          _this11.props.onValueChange(_this11.processedData({
+        if (_this13.props.onValueChange) {
+          _this13.props.onValueChange(_this13.processedData({
             filters: filters
           }));
         }
@@ -5954,7 +6082,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
         if (isGlobalFilter && !globalMatch && globalFilterFieldsArray) {
           for (var _j = 0; _j < globalFilterFieldsArray.length; _j++) {
             var globalFilterField = globalFilterFieldsArray[_j];
-            var matchMode = filters['global'] ? filters['global'].matchMode : FilterMatchMode$1.CONTAINS;
+            var matchMode = filters['global'] ? filters['global'].matchMode : FilterMatchMode.CONTAINS;
             var value = filters['global'] ? filters['global'].value : this.props.globalFilter;
             globalMatch = FilterService.filters[matchMode](ObjectUtils.resolveFieldData(data[i], globalFilterField), value, this.props.filterLocale);
 
@@ -5987,7 +6115,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
     key: "executeLocalFilter",
     value: function executeLocalFilter(field, rowData, filterMeta, index) {
       var filterValue = filterMeta.value;
-      var filterMatchMode = filterMeta.matchMode === 'custom' ? "custom_".concat(field) : filterMeta.matchMode || FilterMatchMode$1.STARTS_WITH;
+      var filterMatchMode = filterMeta.matchMode === 'custom' ? "custom_".concat(field) : filterMeta.matchMode || FilterMatchMode.STARTS_WITH;
       var dataFieldValue = ObjectUtils.resolveFieldData(rowData, field);
       var filterConstraint = FilterService.filters[filterMatchMode];
       return filterConstraint(dataFieldValue, filterValue, this.props.filterLocale, index);
@@ -5995,7 +6123,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "cloneFilters",
     value: function cloneFilters(filters) {
-      var _this12 = this;
+      var _this14 = this;
 
       filters = filters || this.props.filters;
       var cloned = {};
@@ -6016,34 +6144,31 @@ var DataTable = /*#__PURE__*/function (_Component) {
       } else {
         var columns = this.getColumns();
         cloned = columns.reduce(function (_filters, col) {
-          if (col.props.filter) {
-            var field = col.props.filterField || col.props.field;
-            var filterFunction = col.props.filterFunction;
-            var dataType = col.props.dataType;
-            var matchMode = col.props.filterMatchMode || (PrimeReact.filterMatchModeOptions[dataType] ? PrimeReact.filterMatchModeOptions[dataType][0] : FilterMatchMode$1.STARTS_WITH);
-            var constraint = {
-              value: null,
-              matchMode: matchMode
-            };
-
-            if (filterFunction) {
-              FilterService.register("custom_".concat(field), function () {
-                for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-                  args[_key] = arguments[_key];
-                }
+          var field = col.props.filterField || col.props.field;
+          var filterFunction = col.props.filterFunction;
+          var dataType = col.props.dataType;
+          var matchMode = col.props.filterMatchMode || (PrimeReact.filterMatchModeOptions[dataType] ? PrimeReact.filterMatchModeOptions[dataType][0] : FilterMatchMode.STARTS_WITH);
+          var constraint = {
+            value: null,
+            matchMode: matchMode
+          };
 
-                return filterFunction.apply(void 0, args.concat([{
-                  column: col
-                }]));
-              });
-            }
+          if (filterFunction) {
+            FilterService.register("custom_".concat(field), function () {
+              for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+                args[_key] = arguments[_key];
+              }
 
-            _filters[field] = _this12.props.filterDisplay === 'menu' ? {
-              operator: FilterOperator.AND,
-              constraints: [constraint]
-            } : constraint;
+              return filterFunction.apply(void 0, args.concat([{
+                column: col
+              }]));
+            });
           }
 
+          _filters[field] = _this14.props.filterDisplay === 'menu' ? {
+            operator: FilterOperator.AND,
+            constraints: [constraint]
+          } : constraint;
           return _filters;
         }, {});
       }
@@ -6099,6 +6224,14 @@ var DataTable = /*#__PURE__*/function (_Component) {
       this.resetColumnOrder();
       this.setState(state);
     }
+  }, {
+    key: "resetScroll",
+    value: function resetScroll() {
+      if (this.wrapper) {
+        var scrollableContainer = !this.isVirtualScrollerDisabled() ? DomHandler.findSingle(this.wrapper, '.p-virtualscroller') : this.wrapper;
+        scrollableContainer.scrollTo(0, 0);
+      }
+    }
   }, {
     key: "resetColumnOrder",
     value: function resetColumnOrder() {
@@ -6119,7 +6252,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "exportCSV",
     value: function exportCSV(options) {
-      var _this13 = this;
+      var _this15 = this;
 
       var data;
       var csv = "\uFEFF";
@@ -6142,7 +6275,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
           csv += '"' + (header || field) + '"';
 
           if (i < columns.length - 1) {
-            csv += _this13.props.csvSeparator;
+            csv += _this15.props.csvSeparator;
           }
         }
       }); //body
@@ -6151,14 +6284,16 @@ var DataTable = /*#__PURE__*/function (_Component) {
         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 = ObjectUtils.resolveFieldData(record, field);
 
             if (cellData != null) {
-              cellData = _this13.props.exportFunction ? _this13.props.exportFunction({
+              cellData = _this15.props.exportFunction ? _this15.props.exportFunction({
                 data: cellData,
                 field: field,
                 rowData: record,
@@ -6169,7 +6304,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
             csv += '"' + cellData + '"';
 
             if (i < columns.length - 1) {
-              csv += _this13.props.csvSeparator;
+              csv += _this15.props.csvSeparator;
             }
           }
         });
@@ -6183,6 +6318,18 @@ var DataTable = /*#__PURE__*/function (_Component) {
         document.body.click();
       }
     }
+  }, {
+    key: "createEvent",
+    value: function createEvent(event) {
+      return _objectSpread({
+        first: this.getFirst(),
+        rows: this.getRows(),
+        sortField: this.getSortField(),
+        sortOrder: this.getSortOrder(),
+        multiSortMeta: this.getMultiSortMeta(),
+        filters: this.getFilters()
+      }, event);
+    }
   }, {
     key: "processedData",
     value: function processedData(localState) {
@@ -6220,14 +6367,24 @@ var DataTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      this.el.setAttribute(this.attributeSelector, '');
+      var _this16 = this;
 
-      if (this.props.responsiveLayout === 'stack' && !this.props.scrollable) {
-        this.createResponsiveStyle();
-      }
+      this.setState({
+        attributeSelector: UniqueComponentId()
+      }, function () {
+        _this16.el.setAttribute(_this16.state.attributeSelector, '');
+
+        if (_this16.props.responsiveLayout === 'stack' && !_this16.props.scrollable) {
+          _this16.createResponsiveStyle();
+        }
+      });
 
-      if (this.isStateful() && this.props.resizableColumns) {
-        this.restoreColumnWidths();
+      if (this.isStateful()) {
+        this.setState(this.restoreState(this.state));
+
+        if (this.props.resizableColumns) {
+          this.restoreColumnWidths();
+        }
       }
     }
   }, {
@@ -6327,6 +6484,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
         filtersStore: filtersStore,
         onFilterChange: this.onFilterChange,
         onFilterApply: this.onFilterApply,
+        showSelectAll: this.props.showSelectAll,
         allRowsSelected: this.allRowsSelected,
         onColumnCheckboxChange: this.onColumnHeaderCheckboxChange,
         onColumnMouseDown: this.onColumnHeaderMouseDown,
@@ -6341,7 +6499,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
   }, {
     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,
@@ -6405,6 +6563,8 @@ var DataTable = /*#__PURE__*/function (_Component) {
         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,
@@ -6470,6 +6630,8 @@ var DataTable = /*#__PURE__*/function (_Component) {
         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,
@@ -6494,42 +6656,43 @@ var DataTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderContent",
     value: function renderContent(processedData, columns, selectionModeInColumn, empty) {
-      var _this14 = this;
+      var _this17 = this;
 
       if (!columns) return;
       var isVirtualScrollerDisabled = this.isVirtualScrollerDisabled();
       var virtualScrollerOptions = this.props.virtualScrollerOptions || {};
       return /*#__PURE__*/React.createElement("div", {
+        ref: function ref(el) {
+          return _this17.wrapper = el;
+        },
         className: "p-datatable-wrapper",
         style: {
-          maxHeight: isVirtualScrollerDisabled ? this.props.scrollHeight : ''
+          maxHeight: isVirtualScrollerDisabled ? this.props.scrollHeight : null
         }
       }, /*#__PURE__*/React.createElement(VirtualScroller, _extends({}, virtualScrollerOptions, {
         items: processedData,
         columns: columns,
-        style: {
-          height: this.props.scrollHeight
-        },
+        scrollHeight: this.props.scrollHeight,
         disabled: isVirtualScrollerDisabled,
         loaderDisabled: true,
         showSpacer: false,
         contentTemplate: function contentTemplate(options) {
           var ref = function ref(el) {
-            _this14.table = el;
+            _this17.table = el;
             options.spacerRef && options.spacerRef(el);
           };
 
-          var tableClassName = classNames('p-datatable-table', _this14.props.tableClassName);
+          var tableClassName = classNames('p-datatable-table', _this17.props.tableClassName);
 
-          var tableHeader = _this14.renderTableHeader(options, empty);
+          var tableHeader = _this17.renderTableHeader(options, empty);
 
-          var tableBody = _this14.renderTableBody(options, selectionModeInColumn, empty, isVirtualScrollerDisabled);
+          var tableBody = _this17.renderTableBody(options, selectionModeInColumn, empty, isVirtualScrollerDisabled);
 
-          var tableFooter = _this14.renderTableFooter(options);
+          var tableFooter = _this17.renderTableFooter(options);
 
           return /*#__PURE__*/React.createElement("table", {
             ref: ref,
-            style: _this14.props.tableStyle,
+            style: _this17.props.tableStyle,
             className: tableClassName,
             role: "table"
           }, tableHeader, tableBody, tableFooter);
@@ -6591,12 +6754,12 @@ var DataTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderResizeHelper",
     value: function renderResizeHelper() {
-      var _this15 = this;
+      var _this18 = this;
 
       if (this.props.resizableColumns) {
         return /*#__PURE__*/React.createElement("div", {
           ref: function ref(el) {
-            return _this15.resizeHelper = el;
+            return _this18.resizeHelper = el;
           },
           className: "p-column-resizer-helper",
           style: {
@@ -6610,7 +6773,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderReorderIndicators",
     value: function renderReorderIndicators() {
-      var _this16 = this;
+      var _this19 = this;
 
       if (this.props.reorderableColumns) {
         var style = {
@@ -6619,13 +6782,13 @@ var DataTable = /*#__PURE__*/function (_Component) {
         };
         return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
           ref: function ref(el) {
-            return _this16.reorderIndicatorUp = el;
+            return _this19.reorderIndicatorUp = el;
           },
           className: "pi pi-arrow-down p-datatable-reorder-indicator-up",
           style: style
         }), /*#__PURE__*/React.createElement("span", {
           ref: function ref(el) {
-            return _this16.reorderIndicatorDown = el;
+            return _this19.reorderIndicatorDown = el;
           },
           className: "pi pi-arrow-up p-datatable-reorder-indicator-down",
           style: style
@@ -6637,15 +6800,18 @@ var DataTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this17 = this;
+      var _this20 = this;
 
       var processedData = this.processedData();
       var columns = this.getColumns();
       var totalRecords = this.getTotalRecords(processedData);
       var empty = ObjectUtils.isEmpty(processedData);
       var selectionModeInColumn = this.getSelectionModeInColumn(columns);
+      var selectable = this.props.selectionMode || selectionModeInColumn;
       var className = classNames('p-datatable p-component', {
-        'p-datatable-hoverable-rows': this.props.rowHover || this.props.selectionMode || selectionModeInColumn,
+        'p-datatable-hoverable-rows': this.props.rowHover,
+        'p-datatable-selectable': selectable && !this.props.cellSelection,
+        'p-datatable-selectable-cell': selectable && this.props.cellSelection,
         'p-datatable-auto-layout': this.props.autoLayout,
         'p-datatable-resizable': this.props.resizableColumns,
         'p-datatable-resizable-fit': this.props.resizableColumns && this.props.columnResizeMode === 'fit',
@@ -6673,7 +6839,7 @@ var DataTable = /*#__PURE__*/function (_Component) {
       var reorderIndicators = this.renderReorderIndicators();
       return /*#__PURE__*/React.createElement("div", {
         ref: function ref(el) {
-          return _this17.el = el;
+          return _this20.el = el;
         },
         id: this.props.id,
         className: className,
@@ -6740,6 +6906,11 @@ _defineProperty(DataTable, "defaultProps", {
   dataKey: null,
   metaKeySelection: true,
   selectOnEdit: true,
+  selectionPageOnly: false,
+  selectionAutoFocus: true,
+  showSelectAll: true,
+  selectAll: false,
+  onSelectAllChange: null,
   headerColumnGroup: null,
   footerColumnGroup: null,
   rowExpansionTemplate: null,
@@ -6788,6 +6959,7 @@ _defineProperty(DataTable, "defaultProps", {
   globalFilterFields: null,
   showSelectionElement: null,
   showRowReorderElement: null,
+  isDataSelectable: null,
   onColumnResizeEnd: null,
   onColumnResizerClick: null,
   onColumnResizerDoubleClick: null,