import React, { Component } from 'react';
import { Paginator } from 'primereact/paginator';
import { classNames, ObjectUtils, DomHandler, ZIndexUtils, ConnectedOverlayScrollHandler, UniqueComponentId } from 'primereact/utils';
import PrimeReact, { localeOption, FilterMatchMode, FilterOperator, FilterService } from 'primereact/api';
import { OverlayService } from 'primereact/overlayservice';
import { Ripple } from 'primereact/ripple';
import { CSSTransition } from 'primereact/csstransition';
import { Portal } from 'primereact/portal';
import { InputText } from 'primereact/inputtext';
import { Dropdown } from 'primereact/dropdown';
import { Button } from 'primereact/button';
import { VirtualScroller } from 'primereact/virtualscroller';

function _extends() {
  _extends = Object.assign || function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];

      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }

    return target;
  };

  return _extends.apply(this, arguments);
}

function _arrayWithHoles(arr) {
  if (Array.isArray(arr)) return arr;
}

function _iterableToArrayLimit(arr, i) {
  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];

  if (_i == null) return;
  var _arr = [];
  var _n = true;
  var _d = false;

  var _s, _e;

  try {
    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
      _arr.push(_s.value);

      if (i && _arr.length === i) break;
    }
  } catch (err) {
    _d = true;
    _e = err;
  } finally {
    try {
      if (!_n && _i["return"] != null) _i["return"]();
    } finally {
      if (_d) throw _e;
    }
  }

  return _arr;
}

function _arrayLikeToArray(arr, len) {
  if (len == null || len > arr.length) len = arr.length;

  for (var i = 0, arr2 = new Array(len); i < len; i++) {
    arr2[i] = arr[i];
  }

  return arr2;
}

function _unsupportedIterableToArray(o, minLen) {
  if (!o) return;
  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
  var n = Object.prototype.toString.call(o).slice(8, -1);
  if (n === "Object" && o.constructor) n = o.constructor.name;
  if (n === "Map" || n === "Set") return Array.from(o);
  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}

function _nonIterableRest() {
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}

function _slicedToArray(arr, i) {
  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}

function _arrayWithoutHoles(arr) {
  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
}

function _iterableToArray(iter) {
  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
}

function _nonIterableSpread() {
  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}

function _toConsumableArray(arr) {
  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
}

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

function _defineProperties(target, props) {
  for (var i = 0; i < props.length; i++) {
    var descriptor = props[i];
    descriptor.enumerable = descriptor.enumerable || false;
    descriptor.configurable = true;
    if ("value" in descriptor) descriptor.writable = true;
    Object.defineProperty(target, descriptor.key, descriptor);
  }
}

function _createClass(Constructor, protoProps, staticProps) {
  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
  if (staticProps) _defineProperties(Constructor, staticProps);
  Object.defineProperty(Constructor, "prototype", {
    writable: false
  });
  return Constructor;
}

function _assertThisInitialized(self) {
  if (self === void 0) {
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  }

  return self;
}

function _setPrototypeOf(o, p) {
  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
    o.__proto__ = p;
    return o;
  };

  return _setPrototypeOf(o, p);
}

function _inherits(subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function");
  }

  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      writable: true,
      configurable: true
    }
  });
  Object.defineProperty(subClass, "prototype", {
    writable: false
  });
  if (superClass) _setPrototypeOf(subClass, superClass);
}

function _typeof(obj) {
  "@babel/helpers - typeof";

  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) {
  if (call && (_typeof(call) === "object" || typeof call === "function")) {
    return call;
  } else if (call !== void 0) {
    throw new TypeError("Derived constructors may only return object or undefined");
  }

  return _assertThisInitialized(self);
}

function _getPrototypeOf(o) {
  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
    return o.__proto__ || Object.getPrototypeOf(o);
  };
  return _getPrototypeOf(o);
}

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null) return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;

  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0) continue;
    target[key] = source[key];
  }

  return target;
}

function _objectWithoutProperties(source, excluded) {
  if (source == null) return {};
  var target = _objectWithoutPropertiesLoose(source, excluded);
  var key, i;

  if (Object.getOwnPropertySymbols) {
    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);

    for (i = 0; i < sourceSymbolKeys.length; i++) {
      key = sourceSymbolKeys[i];
      if (excluded.indexOf(key) >= 0) continue;
      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
      target[key] = source[key];
    }
  }

  return target;
}

function _createSuper$c(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$c(); 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); }; }

function _isNativeReflectConstruct$c() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
var RowRadioButton = /*#__PURE__*/function (_Component) {
  _inherits(RowRadioButton, _Component);

  var _super = _createSuper$c(RowRadioButton);

  function RowRadioButton(props) {
    var _this;

    _classCallCheck(this, RowRadioButton);

    _this = _super.call(this, props);
    _this.state = {
      focused: false
    };
    _this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
    _this.onFocus = _this.onFocus.bind(_assertThisInitialized(_this));
    _this.onBlur = _this.onBlur.bind(_assertThisInitialized(_this));
    _this.onChange = _this.onChange.bind(_assertThisInitialized(_this));
    _this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this));
    return _this;
  }

  _createClass(RowRadioButton, [{
    key: "onClick",
    value: function onClick(event) {
      if (!this.props.disabled) {
        this.props.onChange(event);
        this.input.focus();
      }
    }
  }, {
    key: "onFocus",
    value: function onFocus() {
      this.setState({
        focused: true
      });
    }
  }, {
    key: "onBlur",
    value: function onBlur() {
      this.setState({
        focused: false
      });
    }
  }, {
    key: "onChange",
    value: function onChange(event) {
      this.onClick(event);
    }
  }, {
    key: "onKeyDown",
    value: function onKeyDown(event) {
      if (event.code === 'Space') {
        this.onClick(event);
        event.preventDefault();
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      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: className
      }, /*#__PURE__*/React.createElement("div", {
        className: "p-hidden-accessible"
      }, /*#__PURE__*/React.createElement("input", {
        name: name,
        ref: function ref(el) {
          return _this2.input = el;
        },
        type: "radio",
        checked: this.props.checked,
        onFocus: this.onFocus,
        onBlur: this.onBlur,
        onChange: this.onChange,
        onKeyDown: this.onKeyDown
      })), /*#__PURE__*/React.createElement("div", {
        className: boxClassName,
        onClick: this.onClick,
        role: "radio",
        "aria-checked": this.props.checked
      }, /*#__PURE__*/React.createElement("div", {
        className: "p-radiobutton-icon"
      })));
    }
  }]);

  return RowRadioButton;
}(Component);

function _createSuper$b(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$b(); 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); }; }

function _isNativeReflectConstruct$b() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
var RowCheckbox = /*#__PURE__*/function (_Component) {
  _inherits(RowCheckbox, _Component);

  var _super = _createSuper$b(RowCheckbox);

  function RowCheckbox(props) {
    var _this;

    _classCallCheck(this, RowCheckbox);

    _this = _super.call(this, props);
    _this.state = {
      focused: false
    };
    _this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
    _this.onFocus = _this.onFocus.bind(_assertThisInitialized(_this));
    _this.onBlur = _this.onBlur.bind(_assertThisInitialized(_this));
    _this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this));
    return _this;
  }

  _createClass(RowCheckbox, [{
    key: "onClick",
    value: function onClick(event) {
      if (!this.props.disabled) {
        this.setState({
          focused: true
        });
        this.props.onChange(event);
      }
    }
  }, {
    key: "onFocus",
    value: function onFocus() {
      this.setState({
        focused: true
      });
    }
  }, {
    key: "onBlur",
    value: function onBlur() {
      this.setState({
        focused: false
      });
    }
  }, {
    key: "onKeyDown",
    value: function onKeyDown(event) {
      if (event.code === 'Space') {
        this.onClick(event);
        event.preventDefault();
      }
    }
  }, {
    key: "render",
    value: function render() {
      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
      });
      var iconClassName = classNames('p-checkbox-icon', {
        'pi pi-check': this.props.checked
      });
      var tabIndex = this.props.disabled ? null : '0';
      return /*#__PURE__*/React.createElement("div", {
        className: className,
        onClick: this.onClick
      }, /*#__PURE__*/React.createElement("div", {
        className: boxClassName,
        role: "checkbox",
        "aria-checked": this.props.checked,
        tabIndex: tabIndex,
        onKeyDown: this.onKeyDown,
        onFocus: this.onFocus,
        onBlur: this.onBlur
      }, /*#__PURE__*/React.createElement("span", {
        className: iconClassName
      })));
    }
  }]);

  return RowCheckbox;
}(Component);

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 = 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); }; }

function _isNativeReflectConstruct$a() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
var BodyCell = /*#__PURE__*/function (_Component) {
  _inherits(BodyCell, _Component);

  var _super = _createSuper$a(BodyCell);

  function BodyCell(props) {
    var _this;

    _classCallCheck(this, BodyCell);

    _this = _super.call(this, props);
    _this.state = {
      editing: props.editing,
      editingRowData: props.rowData,
      styleObject: {}
    };
    _this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
    _this.onMouseDown = _this.onMouseDown.bind(_assertThisInitialized(_this));
    _this.onMouseUp = _this.onMouseUp.bind(_assertThisInitialized(_this));
    _this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this));
    _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));
    _this.editorCallback = _this.editorCallback.bind(_assertThisInitialized(_this));
    return _this;
  }

  _createClass(BodyCell, [{
    key: "field",
    get: function get() {
      return this.getColumnProp('field') || "field_".concat(this.props.index);
    }
  }, {
    key: "isEditable",
    value: function isEditable() {
      return this.getColumnProp('editor');
    }
  }, {
    key: "isSelected",
    value: function isSelected() {
      return this.props.selection ? this.props.selection instanceof Array ? this.findIndex(this.props.selection) > -1 : this.equals(this.props.selection) : false;
    }
  }, {
    key: "equalsData",
    value: function equalsData(data) {
      return this.props.compareSelectionBy === 'equals' ? data === this.props.rowData : ObjectUtils.equals(data, this.props.rowData, this.props.dataKey);
    }
  }, {
    key: "equals",
    value: function equals(selectedCell) {
      return (selectedCell.rowIndex === this.props.rowIndex || this.equalsData(selectedCell.rowData)) && (selectedCell.field === this.field || selectedCell.cellIndex === this.props.index);
    }
  }, {
    key: "isOutsideClicked",
    value: function isOutsideClicked(target) {
      return this.el && !(this.el.isSameNode(target) || this.el.contains(target));
    }
  }, {
    key: "getColumnProp",
    value: function getColumnProp(prop) {
      return this.props.column ? this.props.column.props[prop] : null;
    }
  }, {
    key: "getVirtualScrollerOption",
    value: function getVirtualScrollerOption(option) {
      return this.props.virtualScrollerOptions ? this.props.virtualScrollerOptions[option] : null;
    }
  }, {
    key: "getStyle",
    value: function getStyle() {
      var bodyStyle = this.getColumnProp('bodyStyle');
      var columnStyle = this.getColumnProp('style');
      return this.getColumnProp('frozen') ? Object.assign({}, columnStyle, bodyStyle, this.state.styleObject) : Object.assign({}, columnStyle, bodyStyle);
    }
  }, {
    key: "getCellParams",
    value: function getCellParams() {
      return {
        value: this.resolveFieldData(),
        field: this.field,
        rowData: this.props.rowData,
        rowIndex: this.props.rowIndex,
        cellIndex: this.props.index,
        selected: this.isSelected(),
        column: this.props.column,
        props: this.props
      };
    }
  }, {
    key: "getCellCallbackParams",
    value: function getCellCallbackParams(event) {
      var params = this.getCellParams();
      return _objectSpread$7({
        originalEvent: event
      }, params);
    }
  }, {
    key: "resolveFieldData",
    value: function resolveFieldData(data) {
      return ObjectUtils.resolveFieldData(data || this.props.rowData, this.field);
    }
  }, {
    key: "getEditingRowData",
    value: function getEditingRowData() {
      return this.props.editingMeta && this.props.editingMeta[this.props.rowIndex] ? this.props.editingMeta[this.props.rowIndex].data : this.props.rowData;
    }
  }, {
    key: "getTabIndex",
    value: function getTabIndex(cellSelected) {
      return this.props.allowCellSelection ? cellSelected ? 0 : this.props.rowIndex === 0 && this.props.index === 0 ? this.props.tabIndex : -1 : null;
    }
  }, {
    key: "findIndex",
    value: function findIndex(collection) {
      var _this2 = this;

      return (collection || []).findIndex(function (data) {
        return _this2.equals(data);
      });
    }
  }, {
    key: "closeCell",
    value: function closeCell(event) {
      var _this3 = this;

      var params = this.getCellCallbackParams(event);
      var onBeforeCellEditHide = this.getColumnProp('onBeforeCellEditHide');

      if (onBeforeCellEditHide) {
        onBeforeCellEditHide(params);
      }
      /* When using the 'tab' key, the focus event of the next cell is not called in IE. */


      setTimeout(function () {
        _this3.setState({
          editing: false
        }, function () {
          _this3.unbindDocumentEditListener();

          OverlayService.off('overlay-click', _this3.overlayEventListener);
          _this3.overlayEventListener = null;
        });
      }, 1);
    }
  }, {
    key: "switchCellToViewMode",
    value: function switchCellToViewMode(event, submit) {
      var callbackParams = this.getCellCallbackParams(event);
      var newRowData = this.state.editingRowData;
      var newValue = this.resolveFieldData(newRowData);

      var params = _objectSpread$7(_objectSpread$7({}, callbackParams), {}, {
        newRowData: newRowData,
        newValue: newValue
      });

      var onCellEditCancel = this.getColumnProp('onCellEditCancel');
      var cellEditValidator = this.getColumnProp('cellEditValidator');
      var onCellEditComplete = this.getColumnProp('onCellEditComplete');

      if (!submit && onCellEditCancel) {
        onCellEditCancel(params);
      }

      var valid = true;

      if (cellEditValidator) {
        valid = cellEditValidator(params);
      }

      if (valid) {
        if (submit && onCellEditComplete) {
          onCellEditComplete(params);
        }

        this.closeCell(event);
      } else {
        event.preventDefault();
      }
    }
  }, {
    key: "findNextSelectableCell",
    value: function findNextSelectableCell(cell) {
      var nextCell = cell.nextElementSibling;
      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.findPrevSelectableCell(prevCell) : 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: "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",
    value: function changeTabIndex(currentCell, nextCell) {
      if (currentCell && nextCell) {
        currentCell.tabIndex = -1;
        nextCell.tabIndex = this.props.tabIndex;
      }
    }
  }, {
    key: "focusOnElement",
    value: function focusOnElement() {
      var _this4 = this;

      clearTimeout(this.tabindexTimeout);
      this.tabindexTimeout = setTimeout(function () {
        if (_this4.state.editing) {
          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() {
      if (this.getColumnProp('frozen')) {
        var styleObject = _objectSpread$7({}, this.state.styleObject);

        var align = this.getColumnProp('alignFrozen');

        if (align === 'right') {
          var right = 0;
          var next = this.el.nextElementSibling;

          if (next) {
            right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
          }

          styleObject['right'] = right + 'px';
        } else {
          var left = 0;
          var prev = this.el.previousElementSibling;

          if (prev) {
            left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
          }

          styleObject['left'] = left + 'px';
        }

        var isSameStyle = this.state.styleObject['left'] === styleObject['left'] && this.state.styleObject['right'] === styleObject['right'];
        !isSameStyle && this.setState({
          styleObject: styleObject
        });
      }
    }
  }, {
    key: "editorCallback",
    value: function editorCallback(val) {
      var editingRowData = _objectSpread$7({}, this.state.editingRowData);

      editingRowData[this.field] = val;
      this.setState({
        editingRowData: editingRowData
      }); // update editing meta for complete methods on row mode

      this.props.editingMeta[this.props.rowIndex].data[this.field] = val;
    }
  }, {
    key: "onClick",
    value: function onClick(event) {
      var _this6 = this;

      var params = this.getCellCallbackParams(event);

      if (this.props.editMode !== 'row' && this.isEditable() && !this.state.editing && (this.props.selectOnEdit || !this.props.selectOnEdit && this.props.selected)) {
        this.selfClick = true;
        var onBeforeCellEditShow = this.getColumnProp('onBeforeCellEditShow');
        var onCellEditInit = this.getColumnProp('onCellEditInit');
        var cellEditValidatorEvent = this.getColumnProp('cellEditValidatorEvent');

        if (onBeforeCellEditShow) {
          onBeforeCellEditShow(params);
        } // If the data is sorted using sort icon, it has been added to wait for the sort operation when any cell is wanted to be opened.


        setTimeout(function () {
          _this6.setState({
            editing: true
          }, function () {
            if (onCellEditInit) {
              onCellEditInit(params);
            }

            if (cellEditValidatorEvent === 'click') {
              _this6.bindDocumentEditListener();

              _this6.overlayEventListener = function (e) {
                if (!_this6.isOutsideClicked(e.target)) {
                  _this6.selfClick = true;
                }
              };

              OverlayService.on('overlay-click', _this6.overlayEventListener);
            }
          });
        }, 1);
      }

      if (this.props.allowCellSelection && this.props.onClick) {
        this.props.onClick(params);
      }
    }
  }, {
    key: "onMouseDown",
    value: function onMouseDown(event) {
      var params = this.getCellCallbackParams(event);

      if (this.props.onMouseDown) {
        this.props.onMouseDown(params);
      }
    }
  }, {
    key: "onMouseUp",
    value: function onMouseUp(event) {
      var params = this.getCellCallbackParams(event);

      if (this.props.onMouseUp) {
        this.props.onMouseUp(params);
      }
    }
  }, {
    key: "onKeyDown",
    value: function onKeyDown(event) {
      if (this.props.editMode !== 'row') {
        if (event.which === 13 || event.which === 9) {
          // tab || enter
          this.switchCellToViewMode(event, true);
        }

        if (event.which === 27) {
          // escape
          this.switchCellToViewMode(event, false);
        }
      }

      if (this.props.allowCellSelection) {
        var target = event.target,
            cell = event.currentTarget;

        switch (event.which) {
          //left arrow
          case 37:
            var prevCell = this.findPrevSelectableCell(cell);

            if (prevCell) {
              this.changeTabIndex(cell, prevCell);
              prevCell.focus();
            }

            event.preventDefault();
            break;
          //right arrow

          case 39:
            var nextCell = this.findNextSelectableCell(cell);

            if (nextCell) {
              this.changeTabIndex(cell, nextCell);
              nextCell.focus();
            }

            event.preventDefault();
            break;
          //up arrow

          case 38:
            var upCell = this.findUpSelectableCell(cell);

            if (upCell) {
              this.changeTabIndex(cell, upCell);
              upCell.focus();
            }

            event.preventDefault();
            break;
          //down arrow

          case 40:
            var downCell = this.findDownSelectableCell(cell);

            if (downCell) {
              this.changeTabIndex(cell, downCell);
              downCell.focus();
            }

            event.preventDefault();
            break;
          //enter

          case 13:
            // @deprecated
            if (!DomHandler.isClickable(target)) {
              this.onClick(event);
              event.preventDefault();
            }

            break;
          //space

          case 32:
            if (!DomHandler.isClickable(target) && !target.readOnly) {
              this.onClick(event);
              event.preventDefault();
            }

            break;
        }
      }
    }
  }, {
    key: "onBlur",
    value: function onBlur(event) {
      this.selfClick = false;

      if (this.props.editMode !== 'row' && this.state.editing && this.getColumnProp('cellEditValidatorEvent') === 'blur') {
        this.switchCellToViewMode(event, true);
      }
    }
  }, {
    key: "onEditorFocus",
    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) {
      this.props.onRowToggle({
        originalEvent: event,
        data: this.props.rowData
      });
      event.preventDefault();
    }
  }, {
    key: "onRowEditInit",
    value: function onRowEditInit(event) {
      this.props.onRowEditInit({
        originalEvent: event,
        data: this.props.rowData,
        newData: this.getEditingRowData(),
        field: this.field,
        index: this.props.rowIndex
      });
    }
  }, {
    key: "onRowEditSave",
    value: function onRowEditSave(event) {
      this.props.onRowEditSave({
        originalEvent: event,
        data: this.props.rowData,
        newData: this.getEditingRowData(),
        field: this.field,
        index: this.props.rowIndex
      });
      this.focusOnInit();
    }
  }, {
    key: "onRowEditCancel",
    value: function onRowEditCancel(event) {
      this.props.onRowEditCancel({
        originalEvent: event,
        data: this.props.rowData,
        newData: this.getEditingRowData(),
        field: this.field,
        index: this.props.rowIndex
      });
      this.focusOnInit();
    }
  }, {
    key: "bindDocumentEditListener",
    value: function bindDocumentEditListener() {
      var _this7 = this;

      if (!this.documentEditListener) {
        this.documentEditListener = function (e) {
          if (!_this7.selfClick && _this7.isOutsideClicked(e.target)) {
            _this7.switchCellToViewMode(e, true);
          }

          _this7.selfClick = false;
        };

        document.addEventListener('click', this.documentEditListener, true);
      }
    }
  }, {
    key: "unbindDocumentEditListener",
    value: function unbindDocumentEditListener() {
      if (this.documentEditListener) {
        document.removeEventListener('click', this.documentEditListener, true);
        this.documentEditListener = null;
        this.selfClick = false;
      }
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      if (this.getColumnProp('frozen')) {
        this.updateStickyPosition();
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps, prevState) {
      if (this.getColumnProp('frozen')) {
        this.updateStickyPosition();
      }

      if (this.props.editMode === 'cell' || this.props.editMode === 'row') {
        this.focusOnElement();

        if (prevProps.editingMeta !== this.props.editingMeta) {
          this.setState({
            editingRowData: this.getEditingRowData()
          });
        }

        if (prevState.editing !== this.state.editing) {
          var callbackParams = this.getCellCallbackParams();

          var params = _objectSpread$7(_objectSpread$7({}, callbackParams), {}, {
            editing: this.state.editing
          });

          this.props.onEditingMetaChange(params);
        }
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.unbindDocumentEditListener();

      if (this.overlayEventListener) {
        OverlayService.off('overlay-click', this.overlayEventListener);
        this.overlayEventListener = null;
      }
    }
  }, {
    key: "renderLoading",
    value: function renderLoading() {
      var options = this.getVirtualScrollerOption('getLoaderOptions')(this.props.rowIndex, {
        cellIndex: this.props.index,
        cellFirst: this.props.index === 0,
        cellLast: this.props.index === this.getVirtualScrollerOption('columns').length - 1,
        cellEven: this.props.index % 2 === 0,
        cellOdd: this.props.index % 2 !== 0,
        column: this.props.column,
        field: this.field
      });
      var content = ObjectUtils.getJSXElement(this.getVirtualScrollerOption('loadingTemplate'), options);
      return /*#__PURE__*/React.createElement("td", null, content);
    }
  }, {
    key: "renderElement",
    value: function renderElement() {
      var _this8 = this;

      var content, editorKeyHelper;
      var cellSelected = this.props.allowCellSelection && this.isSelected();
      var isRowEditor = this.props.editMode === 'row';
      var tabIndex = this.getTabIndex(cellSelected);
      var selectionMode = this.getColumnProp('selectionMode');
      var rowReorder = this.getColumnProp('rowReorder');
      var expander = this.getColumnProp('expander');
      var rowEditor = this.getColumnProp('rowEditor');
      var header = this.getColumnProp('header');
      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,
        column: this.props.column
      });
      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 && 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"
      }, ObjectUtils.getJSXElement(header, {
        props: this.props.tableProps
      }));

      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, {
          checked: this.props.selected,
          onChange: this.onRadioChange,
          tabIndex: this.props.tabIndex,
          tableSelector: this.props.tableSelector
        }), selectionMode === 'multiple' && /*#__PURE__*/React.createElement(RowCheckbox, {
          checked: this.props.selected,
          onChange: this.onCheckboxChange,
          tabIndex: this.props.tabIndex
        }));
      } else if (rowReorder) {
        var showReorder = this.props.showRowReorderElement ? this.props.showRowReorderElement(this.props.rowData, {
          rowIndex: this.props.rowIndex,
          props: this.props.tableProps
        }) : true;
        content = showReorder && /*#__PURE__*/React.createElement("i", {
          className: classNames('p-datatable-reorderablerow-handle', this.getColumnProp('rowReorderIcon'))
        });
      } else if (expander) {
        var iconClassName = classNames('p-row-toggler-icon', this.props.expanded ? this.props.expandedRowIcon : this.props.collapsedRowIcon);
        var ariaControls = "".concat(this.props.tableSelector, "_content_").concat(this.props.rowIndex, "_expanded");
        var expanderProps = {
          onClick: this.onRowToggle,
          className: 'p-row-toggler p-link',
          iconClassName: iconClassName
        };
        content = /*#__PURE__*/React.createElement("button", {
          className: expanderProps.className,
          onClick: expanderProps.onClick,
          type: "button",
          "aria-expanded": this.props.expanded,
          "aria-controls": ariaControls,
          tabIndex: this.props.tabIndex
        }, /*#__PURE__*/React.createElement("span", {
          className: expanderProps.iconClassName
        }), /*#__PURE__*/React.createElement(Ripple, null));

        if (body) {
          expanderProps['element'] = content;
          content = 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,
            expander: expanderProps
          });
        }
      } else if (isRowEditor && rowEditor) {
        var rowEditorProps = {};

        if (this.state.editing) {
          rowEditorProps = {
            editing: true,
            onSaveClick: this.onRowEditSave,
            saveClassName: 'p-row-editor-save p-link',
            saveIconClassName: 'p-row-editor-save-icon pi pi-fw pi-check',
            onCancelClick: this.onRowEditCancel,
            cancelClassName: 'p-row-editor-cancel p-link',
            cancelIconClassName: 'p-row-editor-cancel-icon pi pi-fw pi-times'
          };
          content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
            type: "button",
            onClick: rowEditorProps.onSaveClick,
            className: rowEditorProps.saveClassName,
            tabIndex: this.props.tabIndex
          }, /*#__PURE__*/React.createElement("span", {
            className: rowEditorProps.saveIconClassName
          }), /*#__PURE__*/React.createElement(Ripple, null)), /*#__PURE__*/React.createElement("button", {
            type: "button",
            onClick: rowEditorProps.onCancelClick,
            className: rowEditorProps.cancelClassName,
            tabIndex: this.props.tabIndex
          }, /*#__PURE__*/React.createElement("span", {
            className: rowEditorProps.cancelIconClassName
          }), /*#__PURE__*/React.createElement(Ripple, null)));
        } else {
          rowEditorProps = {
            editing: false,
            onInitClick: this.onRowEditInit,
            initClassName: 'p-row-editor-init p-link',
            initIconClassName: 'p-row-editor-init-icon pi pi-fw pi-pencil'
          };
          content = /*#__PURE__*/React.createElement("button", {
            type: "button",
            onClick: rowEditorProps.onInitClick,
            className: rowEditorProps.initClassName,
            tabIndex: this.props.tabIndex
          }, /*#__PURE__*/React.createElement("span", {
            className: rowEditorProps.initIconClassName
          }), /*#__PURE__*/React.createElement(Ripple, null));
        }

        if (body) {
          rowEditorProps['element'] = content;
          content = 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,
            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;
      }

      if (!isRowEditor && editor) {
        /* eslint-disable */
        editorKeyHelper = /*#__PURE__*/React.createElement("a", {
          tabIndex: "0",
          ref: function ref(el) {
            return _this8.keyHelper = el;
          },
          className: "p-cell-editor-key-helper p-hidden-accessible",
          onFocus: this.onEditorFocus
        }, /*#__PURE__*/React.createElement("span", null));
        /* eslint-enable */
      }

      return /*#__PURE__*/React.createElement("td", {
        ref: function ref(el) {
          return _this8.el = el;
        },
        style: style,
        className: className,
        rowSpan: this.props.rowSpan,
        tabIndex: tabIndex,
        role: "cell",
        onClick: this.onClick,
        onKeyDown: this.onKeyDown,
        onBlur: this.onBlur,
        onMouseDown: this.onMouseDown,
        onMouseUp: this.onMouseUp
      }, editorKeyHelper, title, content);
    }
  }, {
    key: "render",
    value: function render() {
      return this.getVirtualScrollerOption('loading') ? this.renderLoading() : this.renderElement();
    }
  }], [{
    key: "getDerivedStateFromProps",
    value: function getDerivedStateFromProps(nextProps, prevState) {
      if (nextProps.editMode === 'row' && nextProps.editing !== prevState.editing) {
        return {
          editing: nextProps.editing
        };
      }

      return null;
    }
  }]);

  return BodyCell;
}(Component);

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 = 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); }; }

function _isNativeReflectConstruct$9() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
var BodyRow = /*#__PURE__*/function (_Component) {
  _inherits(BodyRow, _Component);

  var _super = _createSuper$9(BodyRow);

  function BodyRow(props) {
    var _this;

    _classCallCheck(this, BodyRow);

    _this = _super.call(this, props);

    if (!_this.props.onRowEditChange) {
      _this.state = {
        editing: false
      };
    }

    _this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
    _this.onDoubleClick = _this.onDoubleClick.bind(_assertThisInitialized(_this));
    _this.onRightClick = _this.onRightClick.bind(_assertThisInitialized(_this));
    _this.onTouchEnd = _this.onTouchEnd.bind(_assertThisInitialized(_this));
    _this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this));
    _this.onMouseDown = _this.onMouseDown.bind(_assertThisInitialized(_this));
    _this.onMouseUp = _this.onMouseUp.bind(_assertThisInitialized(_this));
    _this.onDragStart = _this.onDragStart.bind(_assertThisInitialized(_this));
    _this.onDragEnd = _this.onDragEnd.bind(_assertThisInitialized(_this));
    _this.onDragOver = _this.onDragOver.bind(_assertThisInitialized(_this));
    _this.onDragLeave = _this.onDragLeave.bind(_assertThisInitialized(_this));
    _this.onDrop = _this.onDrop.bind(_assertThisInitialized(_this));
    _this.onEditInit = _this.onEditInit.bind(_assertThisInitialized(_this));
    _this.onEditSave = _this.onEditSave.bind(_assertThisInitialized(_this));
    _this.onEditCancel = _this.onEditCancel.bind(_assertThisInitialized(_this));
    return _this;
  }

  _createClass(BodyRow, [{
    key: "isFocusable",
    value: function isFocusable() {
      return this.props.selectionMode && this.props.selectionModeInColumn !== 'single' && this.props.selectionModeInColumn !== 'multiple';
    }
  }, {
    key: "isGrouped",
    value: function isGrouped(column) {
      if (this.props.groupRowsBy && this.getColumnProp(column, 'field')) {
        if (Array.isArray(this.props.groupRowsBy)) return this.props.groupRowsBy.indexOf(column.props.field) > -1;else return this.props.groupRowsBy === column.props.field;
      }

      return false;
    }
  }, {
    key: "equals",
    value: function equals(data1, data2) {
      return this.props.compareSelectionBy === 'equals' ? data1 === data2 : ObjectUtils.equals(data1, data2, this.props.dataKey);
    }
  }, {
    key: "getColumnProp",
    value: function getColumnProp(col, prop) {
      return col ? col.props[prop] : null;
    }
  }, {
    key: "getEditing",
    value: function getEditing() {
      return this.props.onRowEditChange ? this.props.editing : this.state.editing;
    }
  }, {
    key: "getTabIndex",
    value: function getTabIndex() {
      return this.isFocusable() && !this.props.allowCellSelection ? this.props.index === 0 ? this.props.tabIndex : -1 : null;
    }
  }, {
    key: "findIndex",
    value: function findIndex(collection, rowData) {
      var _this2 = this;

      return (collection || []).findIndex(function (data) {
        return _this2.equals(rowData, data);
      });
    }
  }, {
    key: "changeTabIndex",
    value: function changeTabIndex(currentRow, nextRow) {
      if (currentRow && nextRow) {
        currentRow.tabIndex = -1;
        nextRow.tabIndex = this.props.tabIndex;
      }
    }
  }, {
    key: "findNextSelectableRow",
    value: function findNextSelectableRow(row) {
      var nextRow = row.nextElementSibling;
      return nextRow ? DomHandler.hasClass(nextRow, 'p-selectable-row') ? nextRow : this.findNextSelectableRow(nextRow) : null;
    }
  }, {
    key: "findPrevSelectableRow",
    value: function findPrevSelectableRow(row) {
      var prevRow = row.previousElementSibling;
      return prevRow ? DomHandler.hasClass(prevRow, 'p-selectable-row') ? prevRow : this.findPrevSelectableRow(prevRow) : null;
    }
  }, {
    key: "shouldRenderBodyCell",
    value: function shouldRenderBodyCell(value, column, i) {
      if (this.getColumnProp(column, 'hidden')) {
        return false;
      } else if (this.props.rowGroupMode && this.props.rowGroupMode === 'rowspan' && this.isGrouped(column)) {
        var prevRowData = value[i - 1];

        if (prevRowData) {
          var currentRowFieldData = ObjectUtils.resolveFieldData(value[i], this.getColumnProp(column, 'field'));
          var previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, this.getColumnProp(column, 'field'));
          return currentRowFieldData !== previousRowFieldData;
        }
      }

      return true;
    }
  }, {
    key: "calculateRowGroupSize",
    value: function calculateRowGroupSize(value, column, index) {
      if (this.isGrouped(column)) {
        var currentRowFieldData = ObjectUtils.resolveFieldData(value[index], this.getColumnProp(column, 'field'));
        var nextRowFieldData = currentRowFieldData;
        var groupRowSpan = 0;

        while (currentRowFieldData === nextRowFieldData) {
          groupRowSpan++;
          var nextRowData = value[++index];

          if (nextRowData) {
            nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, this.getColumnProp(column, 'field'));
          } else {
            break;
          }
        }

        return groupRowSpan === 1 ? null : groupRowSpan;
      } else {
        return null;
      }
    }
  }, {
    key: "onClick",
    value: function onClick(event) {
      this.props.onRowClick({
        originalEvent: event,
        data: this.props.rowData,
        index: this.props.index
      });
    }
  }, {
    key: "onDoubleClick",
    value: function onDoubleClick(event) {
      this.props.onRowDoubleClick({
        originalEvent: event,
        data: this.props.rowData,
        index: this.props.index
      });
    }
  }, {
    key: "onRightClick",
    value: function onRightClick(event) {
      this.props.onRowRightClick({
        originalEvent: event,
        data: this.props.rowData,
        index: this.props.index
      });
    }
  }, {
    key: "onTouchEnd",
    value: function onTouchEnd(event) {
      this.props.onRowTouchEnd(event);
    }
  }, {
    key: "onKeyDown",
    value: function onKeyDown(event) {
      if (this.isFocusable() && !this.props.allowCellSelection) {
        var target = event.target,
            row = event.currentTarget;

        switch (event.which) {
          //down arrow
          case 40:
            var nextRow = this.findNextSelectableRow(row);

            if (nextRow) {
              this.changeTabIndex(row, nextRow);
              nextRow.focus();
            }

            event.preventDefault();
            break;
          //up arrow

          case 38:
            var prevRow = this.findPrevSelectableRow(row);

            if (prevRow) {
              this.changeTabIndex(row, prevRow);
              prevRow.focus();
            }

            event.preventDefault();
            break;
          //enter

          case 13:
            // @deprecated
            if (!DomHandler.isClickable(target)) {
              this.onClick(event);
              event.preventDefault();
            }

            break;
          //space

          case 32:
            if (!DomHandler.isClickable(target) && !target.readOnly) {
              this.onClick(event);
              event.preventDefault();
            }

            break;
        }
      }
    }
  }, {
    key: "onMouseDown",
    value: function onMouseDown(event) {
      this.props.onRowMouseDown({
        originalEvent: event,
        data: this.props.rowData,
        index: this.props.index
      });
    }
  }, {
    key: "onMouseUp",
    value: function onMouseUp(event) {
      this.props.onRowMouseUp({
        originalEvent: event,
        data: this.props.rowData,
        index: this.props.index
      });
    }
  }, {
    key: "onDragStart",
    value: function onDragStart(event) {
      this.props.onRowDragStart({
        originalEvent: event,
        data: this.props.rowData,
        index: this.props.index
      });
    }
  }, {
    key: "onDragOver",
    value: function onDragOver(event) {
      this.props.onRowDragOver({
        originalEvent: event,
        data: this.props.rowData,
        index: this.props.index
      });
    }
  }, {
    key: "onDragLeave",
    value: function onDragLeave(event) {
      this.props.onRowDragLeave({
        originalEvent: event,
        data: this.props.rowData,
        index: this.props.index
      });
    }
  }, {
    key: "onDragEnd",
    value: function onDragEnd(event) {
      this.props.onRowDragEnd({
        originalEvent: event,
        data: this.props.rowData,
        index: this.props.index
      });
    }
  }, {
    key: "onDrop",
    value: function onDrop(event) {
      this.props.onRowDrop({
        originalEvent: event,
        data: this.props.rowData,
        index: this.props.index
      });
    }
  }, {
    key: "onEditChange",
    value: function onEditChange(e, editing) {
      if (this.props.onRowEditChange) {
        var editingRows;
        var dataKey = this.props.dataKey;
        var originalEvent = e.originalEvent,
            data = e.data,
            index = e.index;

        if (dataKey) {
          var dataKeyValue = String(ObjectUtils.resolveFieldData(data, dataKey));
          editingRows = this.props.editingRows ? _objectSpread$6({}, this.props.editingRows) : {};
          if (editingRows[dataKeyValue] != null) delete editingRows[dataKeyValue];else editingRows[dataKeyValue] = true;
        } else {
          var editingRowIndex = this.findIndex(this.props.editingRows, data);
          editingRows = this.props.editingRows ? _toConsumableArray(this.props.editingRows) : [];
          if (editingRowIndex !== -1) editingRows = editingRows.filter(function (val, i) {
            return i !== editingRowIndex;
          });else editingRows.push(data);
        }

        this.props.onRowEditChange({
          originalEvent: originalEvent,
          data: editingRows,
          index: index
        });
      } else {
        this.setState({
          editing: editing
        });
      }
    }
  }, {
    key: "onEditInit",
    value: function onEditInit(e) {
      var event = e.originalEvent;

      if (this.props.onRowEditInit) {
        this.props.onRowEditInit({
          originalEvent: event,
          data: this.props.rowData,
          index: this.props.index
        });
      }

      this.onEditChange(e, true);
      event.preventDefault();
    }
  }, {
    key: "onEditSave",
    value: function onEditSave(e) {
      var event = e.originalEvent;
      var valid = this.props.rowEditValidator ? this.props.rowEditValidator(this.props.rowData, {
        props: this.props.tableProps
      }) : true;

      if (this.props.onRowEditSave) {
        this.props.onRowEditSave({
          originalEvent: event,
          data: this.props.rowData,
          index: this.props.index,
          valid: valid
        });
      }

      if (valid) {
        if (this.props.onRowEditComplete) {
          this.props.onRowEditComplete(e);
        }

        this.onEditChange(e, false);
      }

      event.preventDefault();
    }
  }, {
    key: "onEditCancel",
    value: function onEditCancel(e) {
      var event = e.originalEvent;

      if (this.props.onRowEditCancel) {
        this.props.onRowEditCancel({
          originalEvent: event,
          data: this.props.rowData,
          index: this.props.index
        });
      }

      this.onEditChange(e, false);
      event.preventDefault();
    }
  }, {
    key: "renderContent",
    value: function renderContent() {
      var _this3 = this;

      return this.props.columns.map(function (col, i) {
        if (_this3.shouldRenderBodyCell(_this3.props.value, col, _this3.props.index)) {
          var key = "".concat(_this3.getColumnProp(col, 'columnKey') || _this3.getColumnProp(col, 'field'), "_").concat(i);
          var rowSpan = _this3.props.rowGroupMode === 'rowspan' ? _this3.calculateRowGroupSize(_this3.props.value, col, _this3.props.index) : null;

          var editing = _this3.getEditing();

          return /*#__PURE__*/React.createElement(BodyCell, {
            key: key,
            value: _this3.props.value,
            tableProps: _this3.props.tableProps,
            tableSelector: _this3.props.tableSelector,
            column: col,
            rowData: _this3.props.rowData,
            rowIndex: _this3.props.index,
            index: i,
            rowSpan: rowSpan,
            dataKey: _this3.props.dataKey,
            editing: editing,
            editingMeta: _this3.props.editingMeta,
            editMode: _this3.props.editMode,
            onRowEditInit: _this3.onEditInit,
            onRowEditSave: _this3.onEditSave,
            onRowEditCancel: _this3.onEditCancel,
            onEditingMetaChange: _this3.props.onEditingMetaChange,
            onRowToggle: _this3.props.onRowToggle,
            selection: _this3.props.selection,
            allowCellSelection: _this3.props.allowCellSelection,
            compareSelectionBy: _this3.props.compareSelectionBy,
            selectOnEdit: _this3.props.selectOnEdit,
            selected: _this3.props.selected,
            onClick: _this3.props.onCellClick,
            onMouseDown: _this3.props.onCellMouseDown,
            onMouseUp: _this3.props.onCellMouseUp,
            tabIndex: _this3.props.tabIndex,
            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,
            onCheckboxChange: _this3.props.onCheckboxChange,
            expanded: _this3.props.expanded,
            expandedRowIcon: _this3.props.expandedRowIcon,
            collapsedRowIcon: _this3.props.collapsedRowIcon,
            virtualScrollerOptions: _this3.props.virtualScrollerOptions
          });
        }

        return null;
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this4 = this;

      var rowClassName = ObjectUtils.getPropValue(this.props.rowClassName, this.props.rowData, {
        props: this.props.tableProps
      });
      var className = classNames(rowClassName, {
        'p-highlight': !this.props.allowCellSelection && this.props.selected,
        'p-highlight-contextmenu': this.props.contextMenuSelected,
        'p-selectable-row': this.props.allowRowSelection && this.props.isSelectable({
          data: this.props.rowData,
          index: this.props.index
        }),
        'p-row-odd': this.props.index % 2 !== 0
      });
      var content = this.renderContent();
      var tabIndex = this.getTabIndex();
      return /*#__PURE__*/React.createElement("tr", {
        ref: function ref(el) {
          return _this4.el = el;
        },
        role: "row",
        tabIndex: tabIndex,
        className: className,
        onMouseDown: this.onMouseDown,
        onMouseUp: this.onMouseUp,
        onClick: this.onClick,
        onDoubleClick: this.onDoubleClick,
        onContextMenu: this.onRightClick,
        onTouchEnd: this.onTouchEnd,
        onKeyDown: this.onKeyDown,
        onDragStart: this.onDragStart,
        onDragOver: this.onDragOver,
        onDragLeave: this.onDragLeave,
        onDragEnd: this.onDragEnd,
        onDrop: this.onDrop
      }, content);
    }
  }]);

  return BodyRow;
}(Component);

function _createSuper$8(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$8(); 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); }; }

function _isNativeReflectConstruct$8() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
var RowTogglerButton = /*#__PURE__*/function (_Component) {
  _inherits(RowTogglerButton, _Component);

  var _super = _createSuper$8(RowTogglerButton);

  function RowTogglerButton(props) {
    var _this;

    _classCallCheck(this, RowTogglerButton);

    _this = _super.call(this, props);
    _this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
    return _this;
  }

  _createClass(RowTogglerButton, [{
    key: "onClick",
    value: function onClick(event) {
      this.props.onClick({
        originalEvent: event,
        data: this.props.rowData
      });
    }
  }, {
    key: "render",
    value: function render() {
      var iconClassName = classNames('p-row-toggler-icon', this.props.expanded ? this.props.expandedRowIcon : this.props.collapsedRowIcon);
      return /*#__PURE__*/React.createElement("button", {
        type: "button",
        onClick: this.onClick,
        className: "p-row-toggler p-link",
        tabIndex: this.props.tabIndex
      }, /*#__PURE__*/React.createElement("span", {
        className: iconClassName
      }), /*#__PURE__*/React.createElement(Ripple, null));
    }
  }]);

  return RowTogglerButton;
}(Component);

var _excluded = ["originalEvent"];

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 = 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); }; }

function _isNativeReflectConstruct$7() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
var TableBody = /*#__PURE__*/function (_Component) {
  _inherits(TableBody, _Component);

  var _super = _createSuper$7(TableBody);

  function TableBody(props) {
    var _this;

    _classCallCheck(this, TableBody);

    _this = _super.call(this, props);
    _this.state = {
      rowGroupHeaderStyleObject: {}
    }; // row

    _this.onRowClick = _this.onRowClick.bind(_assertThisInitialized(_this));
    _this.onRowDoubleClick = _this.onRowDoubleClick.bind(_assertThisInitialized(_this));
    _this.onRowRightClick = _this.onRowRightClick.bind(_assertThisInitialized(_this));
    _this.onRowTouchEnd = _this.onRowTouchEnd.bind(_assertThisInitialized(_this));
    _this.onRowMouseDown = _this.onRowMouseDown.bind(_assertThisInitialized(_this));
    _this.onRowMouseUp = _this.onRowMouseUp.bind(_assertThisInitialized(_this));
    _this.onRowToggle = _this.onRowToggle.bind(_assertThisInitialized(_this)); // drag

    _this.onRowDragStart = _this.onRowDragStart.bind(_assertThisInitialized(_this));
    _this.onRowDragOver = _this.onRowDragOver.bind(_assertThisInitialized(_this));
    _this.onRowDragLeave = _this.onRowDragLeave.bind(_assertThisInitialized(_this));
    _this.onRowDragEnd = _this.onRowDragEnd.bind(_assertThisInitialized(_this));
    _this.onRowDrop = _this.onRowDrop.bind(_assertThisInitialized(_this)); // selection

    _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));
    _this.isSelectable = _this.isSelectable.bind(_assertThisInitialized(_this)); // cell

    _this.onCellClick = _this.onCellClick.bind(_assertThisInitialized(_this));
    _this.onCellMouseDown = _this.onCellMouseDown.bind(_assertThisInitialized(_this));
    _this.onCellMouseUp = _this.onCellMouseUp.bind(_assertThisInitialized(_this));
    _this.ref = _this.ref.bind(_assertThisInitialized(_this));
    return _this;
  }

  _createClass(TableBody, [{
    key: "ref",
    value: function ref(el) {
      this.el = el;
      this.props.virtualScrollerContentRef && this.props.virtualScrollerContentRef(el);
    }
  }, {
    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.props.compareSelectionBy === 'equals' ? data1 === data2 : ObjectUtils.equals(data1, data2, this.props.dataKey);
    }
  }, {
    key: "isSubheaderGrouping",
    value: function isSubheaderGrouping() {
      return this.props.rowGroupMode && this.props.rowGroupMode === 'subheader';
    }
  }, {
    key: "isSelectionEnabled",
    value: function isSelectionEnabled() {
      return this.props.selectionMode || this.props.selectionModeInColumn !== null || this.props.columns && this.props.columns.some(function (col) {
        return col && !!col.props.selectionMode;
      });
    }
  }, {
    key: "isRadioSelectionMode",
    value: function isRadioSelectionMode() {
      return this.props.selectionMode === 'radiobutton';
    }
  }, {
    key: "isCheckboxSelectionMode",
    value: function isCheckboxSelectionMode() {
      return this.props.selectionMode === 'checkbox';
    }
  }, {
    key: "isRadioSelectionModeInColumn",
    value: function isRadioSelectionModeInColumn() {
      return this.props.selectionModeInColumn === 'single';
    }
  }, {
    key: "isCheckboxSelectionModeInColumn",
    value: function isCheckboxSelectionModeInColumn() {
      return this.props.selectionModeInColumn === 'multiple';
    }
  }, {
    key: "isSingleSelection",
    value: function isSingleSelection() {
      return this.props.selectionMode === 'single' && !this.isCheckboxSelectionModeInColumn() || !this.isRadioSelectionMode() && this.isRadioSelectionModeInColumn();
    }
  }, {
    key: "isMultipleSelection",
    value: function isMultipleSelection() {
      return this.props.selectionMode === 'multiple' && !this.isRadioSelectionModeInColumn() || this.isCheckboxSelectionModeInColumn();
    }
  }, {
    key: "isRadioOnlySelection",
    value: function isRadioOnlySelection() {
      return this.isRadioSelectionMode() && this.isRadioSelectionModeInColumn();
    }
  }, {
    key: "isCheckboxOnlySelection",
    value: function isCheckboxOnlySelection() {
      return this.isCheckboxSelectionMode() && this.isCheckboxSelectionModeInColumn();
    }
  }, {
    key: "isSelected",
    value: function isSelected(rowData) {
      if (rowData && this.props.selection) {
        return this.props.selection instanceof Array ? this.findIndex(this.props.selection, rowData) > -1 : this.equals(rowData, this.props.selection);
      }

      return false;
    }
  }, {
    key: "isContextMenuSelected",
    value: function isContextMenuSelected(rowData) {
      if (rowData && this.props.contextMenuSelection) {
        return this.equals(rowData, this.props.contextMenuSelection);
      }

      return false;
    }
  }, {
    key: "isSelectable",
    value: function isSelectable(options) {
      return this.props.isDataSelectable ? this.props.isDataSelectable(options) : true;
    }
  }, {
    key: "isRowExpanded",
    value: function isRowExpanded(rowData) {
      if (rowData && this.props.expandedRows) {
        if (this.isSubheaderGrouping() && this.props.expandableRowGroups) {
          return this.isRowGroupExpanded(rowData);
        } else {
          if (this.props.dataKey) return this.props.expandedRows ? this.props.expandedRows[ObjectUtils.resolveFieldData(rowData, this.props.dataKey)] !== undefined : false;else return this.findIndex(this.props.expandedRows, rowData) !== -1;
        }
      }

      return false;
    }
  }, {
    key: "isRowGroupExpanded",
    value: function isRowGroupExpanded(rowData) {
      var _this2 = this;

      if (this.props.dataKey === this.props.groupRowsBy) return Object.keys(this.props.expandedRows).some(function (data) {
        return ObjectUtils.equals(data, ObjectUtils.resolveFieldData(rowData, _this2.props.dataKey));
      });else return this.props.expandedRows.some(function (data) {
        return ObjectUtils.equals(data, rowData, _this2.props.groupRowsBy);
      });
    }
  }, {
    key: "isRowEditing",
    value: function isRowEditing(rowData) {
      if (this.props.editMode === 'row' && rowData && this.props.editingRows) {
        if (this.props.dataKey) return this.props.editingRows ? this.props.editingRows[ObjectUtils.resolveFieldData(rowData, this.props.dataKey)] !== undefined : false;else return this.findIndex(this.props.editingRows, rowData) !== -1;
      }

      return false;
    }
  }, {
    key: "allowDrag",
    value: function allowDrag(event) {
      return this.props.dragSelection && this.isMultipleSelection() && !event.originalEvent.shiftKey;
    }
  }, {
    key: "allowRowDrag",
    value: function allowRowDrag(event) {
      return !this.allowCellSelection() && this.allowDrag(event);
    }
  }, {
    key: "allowCellDrag",
    value: function allowCellDrag(event) {
      return this.allowCellSelection() && this.allowDrag(event);
    }
  }, {
    key: "allowSelection",
    value: function allowSelection(event) {
      return !DomHandler.isClickable(event.originalEvent.target);
    }
  }, {
    key: "allowMetaKeySelection",
    value: function allowMetaKeySelection(event) {
      return !this.rowTouched && (!this.props.metaKeySelection || this.props.metaKeySelection && (event.originalEvent.metaKey || event.originalEvent.ctrlKey));
    }
  }, {
    key: "allowRangeSelection",
    value: function allowRangeSelection(event) {
      return this.isMultipleSelection() && event.originalEvent.shiftKey && this.anchorRowIndex !== null;
    }
  }, {
    key: "allowRowSelection",
    value: function allowRowSelection() {
      return (this.props.selectionMode || this.props.selectionModeInColumn) && !this.isRadioOnlySelection() && !this.isCheckboxOnlySelection();
    }
  }, {
    key: "allowCellSelection",
    value: function allowCellSelection() {
      return this.props.cellSelection && !this.isRadioSelectionModeInColumn() && !this.isCheckboxSelectionModeInColumn();
    }
  }, {
    key: "getColumnsLength",
    value: function getColumnsLength() {
      return this.props.columns ? this.props.columns.length : 0;
    }
  }, {
    key: "getVirtualScrollerOption",
    value: function getVirtualScrollerOption(option, options) {
      options = options || this.props.virtualScrollerOptions;
      return options ? options[option] : null;
    }
  }, {
    key: "findIndex",
    value: function findIndex(collection, rowData) {
      var _this3 = this;

      return (collection || []).findIndex(function (data) {
        return _this3.equals(rowData, data);
      });
    }
  }, {
    key: "rowGroupHeaderStyle",
    value: function rowGroupHeaderStyle() {
      if (this.props.scrollable) {
        return {
          top: this.state.rowGroupHeaderStyleObject['top']
        };
      }

      return null;
    }
  }, {
    key: "getRowKey",
    value: function getRowKey(rowData, index) {
      return this.props.dataKey ? ObjectUtils.resolveFieldData(rowData, this.props.dataKey) + '_' + index : index;
    }
  }, {
    key: "shouldRenderRowGroupHeader",
    value: function shouldRenderRowGroupHeader(value, rowData, i) {
      var currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.props.groupRowsBy);
      var prevRowData = value[i - 1];

      if (prevRowData) {
        var previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, this.props.groupRowsBy);
        return currentRowFieldData !== previousRowFieldData;
      } else {
        return true;
      }
    }
  }, {
    key: "shouldRenderRowGroupFooter",
    value: function shouldRenderRowGroupFooter(value, rowData, i, expanded) {
      if (this.props.expandableRowGroups && !expanded) {
        return false;
      } else {
        var currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.props.groupRowsBy);
        var nextRowData = value[i + 1];

        if (nextRowData) {
          var nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, this.props.groupRowsBy);
          return currentRowFieldData !== nextRowFieldData;
        } else {
          return true;
        }
      }
    }
  }, {
    key: "updateFrozenRowStickyPosition",
    value: function updateFrozenRowStickyPosition() {
      this.el.style.top = DomHandler.getOuterHeight(this.el.previousElementSibling) + 'px';
    }
  }, {
    key: "updateFrozenRowGroupHeaderStickyPosition",
    value: function updateFrozenRowGroupHeaderStickyPosition() {
      var tableHeaderHeight = DomHandler.getOuterHeight(this.el.previousElementSibling);
      var top = tableHeaderHeight + 'px';

      if (this.state.rowGroupHeaderStyleObject && this.state.rowGroupHeaderStyleObject.top !== top) {
        this.setState({
          rowGroupHeaderStyleObject: {
            top: top
          }
        });
      }
    }
  }, {
    key: "updateVirtualScrollerPosition",
    value: function updateVirtualScrollerPosition() {
      var tableHeaderHeight = DomHandler.getOuterHeight(this.el.previousElementSibling);
      this.el.style.top = (this.el.style.top || 0) + tableHeaderHeight + 'px';
    }
  }, {
    key: "onSingleSelection",
    value: function onSingleSelection(_ref) {
      var originalEvent = _ref.originalEvent,
          data = _ref.data,
          index = _ref.index,
          toggleable = _ref.toggleable,
          type = _ref.type;

      if (!this.isSelectable({
        data: data,
        index: index
      })) {
        return;
      }

      var selected = this.isSelected(data);
      var selection = this.props.selection;

      if (selected) {
        if (toggleable) {
          selection = null;
          this.onUnselect({
            originalEvent: originalEvent,
            data: data,
            type: type
          });
        }
      } else {
        selection = data;
        this.onSelect({
          originalEvent: originalEvent,
          data: data,
          type: type
        });
      }

      this.focusOnElement(originalEvent, true);

      if (this.props.onSelectionChange && selection !== this.props.selection) {
        this.props.onSelectionChange({
          originalEvent: originalEvent,
          value: selection,
          type: type
        });
      }
    }
  }, {
    key: "onMultipleSelection",
    value: function onMultipleSelection(_ref2) {
      var _this4 = this;

      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 || [];

      if (selected) {
        if (toggleable) {
          var selectionIndex = this.findIndex(selection, data);
          selection = this.props.selection.filter(function (val, i) {
            return i !== selectionIndex;
          });
          this.onUnselect({
            originalEvent: originalEvent,
            data: data,
            type: type
          });
        } else if (selection.length) {
          this.props.selection.forEach(function (d) {
            return _this4.onUnselect({
              originalEvent: originalEvent,
              data: d,
              type: type
            });
          });
          selection = [data];
          this.onSelect({
            originalEvent: originalEvent,
            data: data,
            type: type
          });
        }
      } else {
        selection = toggleable && this.isMultipleSelection() ? [].concat(_toConsumableArray(selection), [data]) : [data];
        this.onSelect({
          originalEvent: originalEvent,
          data: data,
          type: type
        });
      }

      this.focusOnElement(originalEvent, true);

      if (this.props.onSelectionChange && selection !== this.props.selection) {
        this.props.onSelectionChange({
          originalEvent: originalEvent,
          value: selection,
          type: type
        });
      }
    }
  }, {
    key: "onRangeSelection",
    value: function onRangeSelection(event, type) {
      DomHandler.clearSelection();
      this.rangeRowIndex = this.allowCellSelection() ? event.rowIndex : event.index;
      var selectionInRange = this.selectRange(event);
      var selection = this.isMultipleSelection() ? _toConsumableArray(new Set([].concat(_toConsumableArray(this.props.selection || []), _toConsumableArray(selectionInRange)))) : selectionInRange;

      if (this.props.onSelectionChange && selection !== this.props.selection) {
        this.props.onSelectionChange({
          originalEvent: event.originalEvent,
          value: selection,
          type: type
        });
      }

      this.anchorRowIndex = this.rangeRowIndex;
      this.anchorCellIndex = event.cellIndex;
      this.focusOnElement(event.originalEvent, false);
    }
  }, {
    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;
        rangeEnd = this.rangeRowIndex;
      } else if (this.rangeRowIndex < this.anchorRowIndex) {
        rangeStart = this.rangeRowIndex;
        rangeEnd = this.anchorRowIndex;
      } else {
        rangeStart = rangeEnd = this.rangeRowIndex;
      }

      if (isLazyAndPaginator) {
        rangeStart = Math.max(rangeStart - this.props.first, 0);
        rangeEnd -= this.props.first;
      }

      return this.allowCellSelection() ? this.selectRangeOnCell(event, rangeStart, rangeEnd) : this.selectRangeOnRow(event, rangeStart, rangeEnd);
    }
  }, {
    key: "selectRangeOnRow",
    value: function selectRangeOnRow(event, rowRangeStart, rowRangeEnd) {
      var value = this.props.value;
      var selection = [];

      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,
          data: rangeRowData,
          type: 'row'
        });
      }

      return selection;
    }
  }, {
    key: "selectRangeOnCell",
    value: function selectRangeOnCell(event, rowRangeStart, rowRangeEnd) {
      var cellRangeStart,
          cellRangeEnd,
          cellIndex = event.cellIndex;

      if (cellIndex > this.anchorCellIndex) {
        cellRangeStart = this.anchorCellIndex;
        cellRangeEnd = cellIndex;
      } else if (cellIndex < this.anchorCellIndex) {
        cellRangeStart = cellIndex;
        cellRangeEnd = this.anchorCellIndex;
      } else {
        cellRangeStart = cellRangeEnd = cellIndex;
      }

      var value = this.props.value;
      var selection = [];

      for (var i = rowRangeStart; i <= rowRangeEnd; i++) {
        var rowData = value[i];
        var columns = this.props.columns;

        for (var j = cellRangeStart; j <= cellRangeEnd; j++) {
          var field = columns[j].props.field;

          var _value = ObjectUtils.resolveFieldData(rowData, field);

          var rangeRowData = {
            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,
            data: rangeRowData,
            type: 'cell'
          });
        }
      }

      return selection;
    }
  }, {
    key: "onSelect",
    value: function onSelect(event) {
      if (this.allowCellSelection()) this.props.onCellSelect && this.props.onCellSelect(_objectSpread$5(_objectSpread$5({
        originalEvent: event.originalEvent
      }, event.data), {}, {
        type: event.type
      }));else this.props.onRowSelect && this.props.onRowSelect(event);
    }
  }, {
    key: "onUnselect",
    value: function onUnselect(event) {
      if (this.allowCellSelection()) this.props.onCellUnselect && this.props.onCellUnselect(_objectSpread$5(_objectSpread$5({
        originalEvent: event.originalEvent
      }, event.data), {}, {
        type: event.type
      }));else this.props.onRowUnselect && this.props.onRowUnselect(event);
    }
  }, {
    key: "enableDragSelection",
    value: function enableDragSelection(event) {
      if (this.props.dragSelection && !this.dragSelectionHelper) {
        this.dragSelectionHelper = document.createElement('div');
        DomHandler.addClass(this.dragSelectionHelper, 'p-datatable-drag-selection-helper');
        this.initialDragPosition = {
          x: event.clientX,
          y: event.clientY
        };
        this.dragSelectionHelper.style.top = "".concat(event.pageY, "px");
        this.dragSelectionHelper.style.left = "".concat(event.pageX, "px");
        this.bindDragSelectionEvents();
      }
    }
  }, {
    key: "focusOnElement",
    value: function focusOnElement(event, isFocused) {
      var target = event.currentTarget;

      if (!this.allowCellSelection() && this.props.selectionAutoFocus) {
        if (this.isCheckboxSelectionModeInColumn()) {
          var checkbox = DomHandler.findSingle(target, 'td.p-selection-column .p-checkbox-box');
          checkbox && checkbox.focus();
        } else if (this.isRadioSelectionModeInColumn()) {
          var radio = DomHandler.findSingle(target, 'td.p-selection-column input[type="radio"]');
          radio && radio.focus();
        }
      }

      !isFocused && target && target.focus();
    }
  }, {
    key: "changeTabIndex",
    value: function changeTabIndex(event, type) {
      var target = event.currentTarget;
      var isSelectable = 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) {
      if (this.allowCellSelection() || !this.allowSelection(event)) {
        return;
      }

      this.props.onRowClick && this.props.onRowClick(event);

      if (this.allowRowSelection()) {
        if (this.allowRangeSelection(event)) {
          this.onRangeSelection(event, 'row');
        } else {
          var toggleable = this.isRadioSelectionModeInColumn() || this.isCheckboxSelectionModeInColumn() || this.allowMetaKeySelection(event);
          this.anchorRowIndex = event.index;
          this.rangeRowIndex = event.index;
          this.anchorRowFirst = this.props.first;

          if (this.isSingleSelection()) {
            this.onSingleSelection(_objectSpread$5(_objectSpread$5({}, event), {}, {
              toggleable: toggleable,
              type: 'row'
            }));
          } else {
            this.onMultipleSelection(_objectSpread$5(_objectSpread$5({}, event), {}, {
              toggleable: toggleable,
              type: 'row'
            }));
          }
        }

        this.changeTabIndex(event.originalEvent, 'row');
      } else {
        this.focusOnElement(event.originalEvent);
      }

      this.rowTouched = false;
    }
  }, {
    key: "onRowDoubleClick",
    value: function onRowDoubleClick(e) {
      var event = e.originalEvent;

      if (DomHandler.isClickable(event.target)) {
        return;
      }

      if (this.props.onRowDoubleClick) {
        this.props.onRowDoubleClick(e);
      }
    }
  }, {
    key: "onRowRightClick",
    value: function onRowRightClick(event) {
      if (this.props.onContextMenu || this.props.onContextMenuSelectionChange) {
        DomHandler.clearSelection();

        if (this.props.onContextMenuSelectionChange) {
          this.props.onContextMenuSelectionChange({
            originalEvent: event.originalEvent,
            value: event.data
          });
        }

        if (this.props.onContextMenu) {
          this.props.onContextMenu({
            originalEvent: event.originalEvent,
            data: event.data
          });
        }

        event.originalEvent.preventDefault();
      }
    }
  }, {
    key: "onRowTouchEnd",
    value: function onRowTouchEnd() {
      this.rowTouched = true;
    }
  }, {
    key: "onRowMouseDown",
    value: function onRowMouseDown(e) {
      DomHandler.clearSelection();
      var event = e.originalEvent;
      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, 'row');
        this.anchorRowIndex = e.index;
        this.rangeRowIndex = e.index;
        this.anchorRowFirst = this.props.first;
      }
    }
  }, {
    key: "onRowMouseUp",
    value: function onRowMouseUp(event) {
      var isSameRow = event.index === this.anchorRowIndex;

      if (this.allowRowDrag(event) && !isSameRow) {
        this.onRangeSelection(event, 'row');
      }
    }
  }, {
    key: "onRowToggle",
    value: function onRowToggle(event) {
      var expandedRows;
      var dataKey = this.props.dataKey;
      var hasDataKey = this.props.groupRowsBy ? dataKey === this.props.groupRowsBy : !!dataKey;

      if (hasDataKey) {
        var dataKeyValue = String(ObjectUtils.resolveFieldData(event.data, dataKey));
        expandedRows = this.props.expandedRows ? _objectSpread$5({}, this.props.expandedRows) : {};

        if (expandedRows[dataKeyValue] != null) {
          delete expandedRows[dataKeyValue];

          if (this.props.onRowCollapse) {
            this.props.onRowCollapse({
              originalEvent: event,
              data: event.data
            });
          }
        } else {
          expandedRows[dataKeyValue] = true;

          if (this.props.onRowExpand) {
            this.props.onRowExpand({
              originalEvent: event,
              data: event.data
            });
          }
        }
      } else {
        var expandedRowIndex = this.findIndex(this.props.expandedRows, event.data);
        expandedRows = this.props.expandedRows ? _toConsumableArray(this.props.expandedRows) : [];

        if (expandedRowIndex !== -1) {
          expandedRows = expandedRows.filter(function (val, i) {
            return i !== expandedRowIndex;
          });

          if (this.props.onRowCollapse) {
            this.props.onRowCollapse({
              originalEvent: event,
              data: event.data
            });
          }
        } else {
          expandedRows.push(event.data);

          if (this.props.onRowExpand) {
            this.props.onRowExpand({
              originalEvent: event,
              data: event.data
            });
          }
        }
      }

      if (this.props.onRowToggle) {
        this.props.onRowToggle({
          data: expandedRows
        });
      }
    }
  }, {
    key: "onRowDragStart",
    value: function onRowDragStart(e) {
      var event = e.originalEvent,
          index = e.index;
      this.rowDragging = true;
      this.draggedRowIndex = index;
      event.dataTransfer.setData('text', 'b'); // For firefox
    }
  }, {
    key: "onRowDragOver",
    value: function onRowDragOver(e) {
      var event = e.originalEvent,
          index = e.index;

      if (this.rowDragging && this.draggedRowIndex !== index) {
        var rowElement = event.currentTarget;
        var rowY = DomHandler.getOffset(rowElement).top + DomHandler.getWindowScrollTop();
        var pageY = event.pageY;
        var rowMidY = rowY + DomHandler.getOuterHeight(rowElement) / 2;
        var prevRowElement = rowElement.previousElementSibling;

        if (pageY < rowMidY) {
          DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
          this.droppedRowIndex = index;
          if (prevRowElement) DomHandler.addClass(prevRowElement, 'p-datatable-dragpoint-bottom');else DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
        } else {
          if (prevRowElement) DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');else DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
          this.droppedRowIndex = index + 1;
          DomHandler.addClass(rowElement, 'p-datatable-dragpoint-bottom');
        }
      }

      event.preventDefault();
    }
  }, {
    key: "onRowDragLeave",
    value: function onRowDragLeave(e) {
      var event = e.originalEvent;
      var rowElement = event.currentTarget;
      var prevRowElement = rowElement.previousElementSibling;

      if (prevRowElement) {
        DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
      }

      DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
      DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-top');
    }
  }, {
    key: "onRowDragEnd",
    value: function onRowDragEnd(e) {
      var event = e.originalEvent;
      this.rowDragging = false;
      this.draggedRowIndex = null;
      this.droppedRowIndex = null;
      event.currentTarget.draggable = false;
    }
  }, {
    key: "onRowDrop",
    value: function onRowDrop(e) {
      var event = e.originalEvent;

      if (this.droppedRowIndex != null) {
        var dropIndex = this.draggedRowIndex > this.droppedRowIndex ? this.droppedRowIndex : this.droppedRowIndex === 0 ? 0 : this.droppedRowIndex - 1;

        var val = _toConsumableArray(this.props.value);

        ObjectUtils.reorderArray(val, this.draggedRowIndex, dropIndex);

        if (this.props.onRowReorder) {
          this.props.onRowReorder({
            originalEvent: event,
            value: val,
            dragIndex: this.draggedRowIndex,
            dropIndex: this.droppedRowIndex
          });
        }
      } //cleanup


      this.onRowDragLeave(e);
      this.onRowDragEnd(e);
      event.preventDefault();
    }
  }, {
    key: "onRadioChange",
    value: function onRadioChange(event) {
      this.onSingleSelection(_objectSpread$5(_objectSpread$5({}, event), {}, {
        toggleable: true,
        type: 'radio'
      }));
    }
  }, {
    key: "onCheckboxChange",
    value: function onCheckboxChange(event) {
      this.onMultipleSelection(_objectSpread$5(_objectSpread$5({}, event), {}, {
        toggleable: true,
        type: 'checkbox'
      }));
    }
  }, {
    key: "onDragSelectionMouseMove",
    value: function onDragSelectionMouseMove(event) {
      var _this$initialDragPosi = this.initialDragPosition,
          x = _this$initialDragPosi.x,
          y = _this$initialDragPosi.y;
      var dx = event.clientX - x;
      var dy = event.clientY - y;
      if (dy < 0) this.dragSelectionHelper.style.top = "".concat(event.pageY + 5, "px");
      if (dx < 0) this.dragSelectionHelper.style.left = "".concat(event.pageX + 5, "px");
      this.dragSelectionHelper.style.height = "".concat(Math.abs(dy), "px");
      this.dragSelectionHelper.style.width = "".concat(Math.abs(dx), "px");
      event.preventDefault();
    }
  }, {
    key: "onDragSelectionMouseUp",
    value: function onDragSelectionMouseUp() {
      if (this.dragSelectionHelper) {
        this.dragSelectionHelper.remove();
        this.dragSelectionHelper = null;
      }

      document.removeEventListener('mousemove', this.onDragSelectionMouseMove);
      document.removeEventListener('mouseup', this.onDragSelectionMouseUp);
    }
  }, {
    key: "onCellClick",
    value: function onCellClick(event) {
      if (!this.allowSelection(event)) {
        return;
      }

      this.props.onCellClick && this.props.onCellClick(event);

      if (this.allowCellSelection()) {
        if (this.allowRangeSelection(event)) {
          this.onRangeSelection(event, 'cell');
        } else {
          var toggleable = this.allowMetaKeySelection(event);

          var originalEvent = event.originalEvent,
              data = _objectWithoutProperties(event, _excluded);

          this.anchorRowIndex = event.rowIndex;
          this.rangeRowIndex = event.rowIndex;
          this.anchorRowFirst = this.props.first;
          this.anchorCellIndex = event.cellIndex;

          if (this.isSingleSelection()) {
            this.onSingleSelection({
              originalEvent: originalEvent,
              data: data,
              index: event.rowIndex,
              toggleable: toggleable,
              type: 'cell'
            });
          } else {
            this.onMultipleSelection({
              originalEvent: originalEvent,
              data: data,
              index: event.rowIndex,
              toggleable: toggleable,
              type: 'cell'
            });
          }
        }

        this.changeTabIndex(event.originalEvent, 'cell');
      }

      this.rowTouched = false;
    }
  }, {
    key: "onCellMouseDown",
    value: function onCellMouseDown(event) {
      if (this.allowCellDrag(event)) {
        this.enableDragSelection(event.originalEvent);
        this.anchorRowIndex = event.rowIndex;
        this.rangeRowIndex = event.rowIndex;
        this.anchorRowFirst = this.props.first;
        this.anchorCellIndex = event.cellIndex;
      }
    }
  }, {
    key: "onCellMouseUp",
    value: function onCellMouseUp(event) {
      var isSameCell = event.rowIndex === this.anchorRowIndex && event.cellIndex === this.anchorCellIndex;

      if (this.allowCellDrag(event) && !isSameCell) {
        this.onRangeSelection(event, 'cell');
      }
    }
  }, {
    key: "bindDragSelectionEvents",
    value: function bindDragSelectionEvents() {
      document.addEventListener('mousemove', this.onDragSelectionMouseMove);
      document.addEventListener('mouseup', this.onDragSelectionMouseUp);
      document.body.appendChild(this.dragSelectionHelper);
    }
  }, {
    key: "unbindDragSelectionEvents",
    value: function unbindDragSelectionEvents() {
      this.onDragSelectionMouseUp();
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      if (this.props.frozenRow) {
        this.updateFrozenRowStickyPosition();
      }

      if (this.props.scrollable && this.props.rowGroupMode === 'subheader') {
        this.updateFrozenRowGroupHeaderStickyPosition();
      }

      if (!this.props.isVirtualScrollerDisabled && this.getVirtualScrollerOption('vertical')) {
        this.updateVirtualScrollerPosition();
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps, prevState) {
      if (this.props.frozenRow) {
        this.updateFrozenRowStickyPosition();
      }

      if (this.props.scrollable && this.props.rowGroupMode === 'subheader') {
        this.updateFrozenRowGroupHeaderStickyPosition();
      }

      if (!this.props.isVirtualScrollerDisabled && this.getVirtualScrollerOption('vertical') && this.getVirtualScrollerOption('itemSize', prevProps.virtualScrollerOptions) !== this.getVirtualScrollerOption('itemSize')) {
        this.updateVirtualScrollerPosition();
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      if (this.props.dragSelection) {
        this.unbindDragSelectionEvents();
      }
    }
  }, {
    key: "renderEmptyContent",
    value: function renderEmptyContent() {
      if (!this.props.loading) {
        var colSpan = this.getColumnsLength();
        var content = ObjectUtils.getJSXElement(this.props.emptyMessage, {
          props: this.props,
          frozen: this.props.frozenRow
        }) || localeOption('emptyMessage');
        return /*#__PURE__*/React.createElement("tr", {
          className: "p-datatable-emptymessage",
          role: "row"
        }, /*#__PURE__*/React.createElement("td", {
          colSpan: colSpan,
          role: "cell"
        }, content));
      }

      return null;
    }
  }, {
    key: "renderGroupHeader",
    value: function renderGroupHeader(rowData, index, expanded, isSubheaderGrouping, colSpan) {
      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,
          rowData: rowData,
          expanded: expanded,
          expandedRowIcon: this.props.expandedRowIcon,
          collapsedRowIcon: this.props.collapsedRowIcon
        });
        var content = ObjectUtils.getJSXElement(this.props.rowGroupHeaderTemplate, rowData, {
          index: index,
          props: this.props.tableProps
        });
        return /*#__PURE__*/React.createElement("tr", {
          className: "p-rowgroup-header",
          style: style,
          role: "row"
        }, /*#__PURE__*/React.createElement("td", {
          colSpan: colSpan
        }, toggler, /*#__PURE__*/React.createElement("span", {
          className: "p-rowgroup-header-name"
        }, content)));
      }

      return null;
    }
  }, {
    key: "renderRow",
    value: function renderRow(rowData, index, expanded) {
      if (!this.props.expandableRowGroups || expanded) {
        var selected = this.isSelectionEnabled() ? this.isSelected(rowData) : false;
        var contextMenuSelected = this.isContextMenuSelected(rowData);
        var allowRowSelection = this.allowRowSelection();
        var allowCellSelection = this.allowCellSelection();
        var editing = this.isRowEditing(rowData);
        return /*#__PURE__*/React.createElement(BodyRow, {
          tableProps: this.props.tableProps,
          tableSelector: this.props.tableSelector,
          value: this.props.value,
          columns: this.props.columns,
          rowData: rowData,
          index: index,
          selected: selected,
          contextMenuSelected: contextMenuSelected,
          onRowClick: this.onRowClick,
          onRowDoubleClick: this.onRowDoubleClick,
          onRowRightClick: this.onRowRightClick,
          tabIndex: this.props.tabIndex,
          isSelectable: this.isSelectable,
          onRowTouchEnd: this.onRowTouchEnd,
          onRowMouseDown: this.onRowMouseDown,
          onRowMouseUp: this.onRowMouseUp,
          onRowToggle: this.onRowToggle,
          onRowDragStart: this.onRowDragStart,
          onRowDragOver: this.onRowDragOver,
          onRowDragLeave: this.onRowDragLeave,
          onRowDragEnd: this.onRowDragEnd,
          onRowDrop: this.onRowDrop,
          onRadioChange: this.onRadioChange,
          onCheckboxChange: this.onCheckboxChange,
          onCellClick: this.onCellClick,
          onCellMouseDown: this.onCellMouseDown,
          onCellMouseUp: this.onCellMouseUp,
          editing: editing,
          editingRows: this.props.editingRows,
          editingMeta: this.props.editingMeta,
          editMode: this.props.editMode,
          onRowEditChange: this.props.onRowEditChange,
          onEditingMetaChange: this.props.onEditingMetaChange,
          groupRowsBy: this.props.groupRowsBy,
          compareSelectionBy: this.props.compareSelectionBy,
          dataKey: this.props.dataKey,
          rowGroupMode: this.props.rowGroupMode,
          onRowEditInit: this.props.onRowEditInit,
          rowEditValidator: this.props.rowEditValidator,
          onRowEditSave: this.props.onRowEditSave,
          onRowEditComplete: this.props.onRowEditComplete,
          onRowEditCancel: this.props.onRowEditCancel,
          selection: this.props.selection,
          allowRowSelection: allowRowSelection,
          allowCellSelection: allowCellSelection,
          selectOnEdit: this.props.selectOnEdit,
          selectionMode: this.props.selectionMode,
          selectionModeInColumn: this.props.selectionModeInColumn,
          cellClassName: this.props.cellClassName,
          responsiveLayout: this.props.responsiveLayout,
          frozenRow: this.props.frozenRow,
          showSelectionElement: this.props.showSelectionElement,
          showRowReorderElement: this.props.showRowReorderElement,
          expanded: expanded,
          expandedRowIcon: this.props.expandedRowIcon,
          collapsedRowIcon: this.props.collapsedRowIcon,
          rowClassName: this.props.rowClassName,
          virtualScrollerOptions: this.props.virtualScrollerOptions
        });
      }
    }
  }, {
    key: "renderExpansion",
    value: function renderExpansion(rowData, index, expanded, isSubheaderGrouping, colSpan) {
      if (expanded && !(isSubheaderGrouping && this.props.expandableRowGroups)) {
        var content = ObjectUtils.getJSXElement(this.props.rowExpansionTemplate, rowData, {
          index: index
        });
        var id = "".concat(this.props.tableSelector, "_content_").concat(index, "_expanded");
        return /*#__PURE__*/React.createElement("tr", {
          id: id,
          className: "p-datatable-row-expansion",
          role: "row"
        }, /*#__PURE__*/React.createElement("td", {
          role: "cell",
          colSpan: colSpan
        }, content));
      }

      return null;
    }
  }, {
    key: "renderGroupFooter",
    value: function renderGroupFooter(rowData, index, expanded, isSubheaderGrouping, colSpan) {
      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,
          props: this.props.tableProps
        });
        return /*#__PURE__*/React.createElement("tr", {
          className: "p-rowgroup-footer",
          role: "row"
        }, content);
      }

      return null;
    }
  }, {
    key: "renderContent",
    value: function renderContent() {
      var _this5 = this;

      return this.props.value.map(function (rowData, i) {
        var index = _this5.getVirtualScrollerOption('getItemOptions') ? _this5.getVirtualScrollerOption('getItemOptions')(i).index : _this5.props.first + i;

        var key = _this5.getRowKey(rowData, index);

        var expanded = _this5.isRowExpanded(rowData);

        var isSubheaderGrouping = _this5.isSubheaderGrouping();

        var colSpan = _this5.getColumnsLength();

        var groupHeader = _this5.renderGroupHeader(rowData, index, expanded, isSubheaderGrouping, colSpan);

        var row = _this5.renderRow(rowData, index, expanded);

        var expansion = _this5.renderExpansion(rowData, index, expanded, isSubheaderGrouping, colSpan);

        var groupFooter = _this5.renderGroupFooter(rowData, index, expanded, isSubheaderGrouping, colSpan);

        return /*#__PURE__*/React.createElement(React.Fragment, {
          key: key
        }, groupHeader, row, expansion, groupFooter);
      });
    }
  }, {
    key: "render",
    value: function render() {
      var className = classNames('p-datatable-tbody', this.props.className);
      var content = this.props.empty ? this.renderEmptyContent() : this.renderContent();
      return /*#__PURE__*/React.createElement("tbody", {
        ref: this.ref,
        className: className
      }, content);
    }
  }]);

  return TableBody;
}(Component);

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 = 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); }; }

function _isNativeReflectConstruct$6() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
var FooterCell = /*#__PURE__*/function (_Component) {
  _inherits(FooterCell, _Component);

  var _super = _createSuper$6(FooterCell);

  function FooterCell(props) {
    var _this;

    _classCallCheck(this, FooterCell);

    _this = _super.call(this, props);
    _this.state = {
      styleObject: {}
    };
    return _this;
  }

  _createClass(FooterCell, [{
    key: "getColumnProp",
    value: function getColumnProp(prop) {
      return this.props.column.props[prop];
    }
  }, {
    key: "getStyle",
    value: function getStyle() {
      var footerStyle = this.getColumnProp('footerStyle');
      var columnStyle = this.getColumnProp('style');
      return this.getColumnProp('frozen') ? Object.assign({}, columnStyle, footerStyle, this.state.styleObject) : Object.assign({}, columnStyle, footerStyle);
    }
  }, {
    key: "updateStickyPosition",
    value: function updateStickyPosition() {
      if (this.getColumnProp('frozen')) {
        var styleObject = _objectSpread$4({}, this.state.styleObject);

        var align = this.getColumnProp('alignFrozen');

        if (align === 'right') {
          var right = 0;
          var next = this.el.nextElementSibling;

          if (next) {
            right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
          }

          styleObject['right'] = right + 'px';
        } else {
          var left = 0;
          var prev = this.el.previousElementSibling;

          if (prev) {
            left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
          }

          styleObject['left'] = left + 'px';
        }

        this.setState({
          styleObject: styleObject
        });
      }
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      if (this.getColumnProp('frozen')) {
        this.updateStickyPosition();
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps, prevState) {
      if (this.getColumnProp('frozen')) {
        this.updateStickyPosition();
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var style = this.getStyle();
      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'), {
        props: this.props.tableProps
      });
      return /*#__PURE__*/React.createElement("td", {
        ref: function ref(el) {
          return _this2.el = el;
        },
        style: style,
        className: className,
        role: "cell",
        colSpan: colSpan,
        rowSpan: rowSpan
      }, content);
    }
  }]);

  return FooterCell;
}(Component);

function _createSuper$5(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$5(); 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); }; }

function _isNativeReflectConstruct$5() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
var TableFooter = /*#__PURE__*/function (_Component) {
  _inherits(TableFooter, _Component);

  var _super = _createSuper$5(TableFooter);

  function TableFooter() {
    _classCallCheck(this, TableFooter);

    return _super.apply(this, arguments);
  }

  _createClass(TableFooter, [{
    key: "hasFooter",
    value: function hasFooter() {
      return this.props.footerColumnGroup ? true : this.props.columns ? this.props.columns.some(function (col) {
        return col && col.props.footer;
      }) : false;
    }
  }, {
    key: "renderGroupFooterCells",
    value: function renderGroupFooterCells(row) {
      var columns = React.Children.toArray(row.props.children);
      return this.renderFooterCells(columns);
    }
  }, {
    key: "renderFooterCells",
    value: function renderFooterCells(columns) {
      var _this = this;

      return React.Children.map(columns, function (col, i) {
        var isVisible = col ? !col.props.hidden : true;
        var key = col ? col.props.columnKey || col.props.field || i : i;
        return isVisible && /*#__PURE__*/React.createElement(FooterCell, {
          key: key,
          tableProps: _this.props.tableProps,
          column: col
        });
      });
    }
  }, {
    key: "renderContent",
    value: function renderContent() {
      var _this2 = this;

      if (this.props.footerColumnGroup) {
        var rows = React.Children.toArray(this.props.footerColumnGroup.props.children);
        return rows.map(function (row, i) {
          return /*#__PURE__*/React.createElement("tr", {
            key: i,
            role: "row"
          }, _this2.renderGroupFooterCells(row));
        });
      }

      return /*#__PURE__*/React.createElement("tr", {
        role: "row"
      }, this.renderFooterCells(this.props.columns));
    }
  }, {
    key: "render",
    value: function render() {
      if (this.hasFooter()) {
        var content = this.renderContent();
        return /*#__PURE__*/React.createElement("tfoot", {
          className: "p-datatable-tfoot"
        }, content);
      }

      return null;
    }
  }]);

  return TableFooter;
}(Component);

function _createSuper$4(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$4(); 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); }; }

function _isNativeReflectConstruct$4() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
var HeaderCheckbox = /*#__PURE__*/function (_Component) {
  _inherits(HeaderCheckbox, _Component);

  var _super = _createSuper$4(HeaderCheckbox);

  function HeaderCheckbox(props) {
    var _this;

    _classCallCheck(this, HeaderCheckbox);

    _this = _super.call(this, props);
    _this.state = {
      focused: false
    };
    _this.onFocus = _this.onFocus.bind(_assertThisInitialized(_this));
    _this.onBlur = _this.onBlur.bind(_assertThisInitialized(_this));
    _this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
    _this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this));
    return _this;
  }

  _createClass(HeaderCheckbox, [{
    key: "onFocus",
    value: function onFocus() {
      this.setState({
        focused: true
      });
    }
  }, {
    key: "onBlur",
    value: function onBlur() {
      this.setState({
        focused: false
      });
    }
  }, {
    key: "onClick",
    value: function onClick(event) {
      if (!this.props.disabled) {
        this.setState({
          focused: true
        });
        this.props.onChange({
          originalEvent: event,
          checked: !this.props.checked
        });
      }
    }
  }, {
    key: "onKeyDown",
    value: function onKeyDown(event) {
      if (event.code === 'Space') {
        this.onClick(event);
        event.preventDefault();
      }
    }
  }, {
    key: "render",
    value: function render() {
      var boxClassName = classNames('p-checkbox-box p-component', {
        'p-highlight': this.props.checked,
        'p-disabled': this.props.disabled,
        'p-focus': this.state.focused
      });
      var iconClassName = classNames('p-checkbox-icon', {
        'pi pi-check': this.props.checked
      });
      var tabIndex = this.props.disabled ? null : 0;
      return /*#__PURE__*/React.createElement("div", {
        className: "p-checkbox p-component",
        onClick: this.onClick
      }, /*#__PURE__*/React.createElement("div", {
        className: boxClassName,
        role: "checkbox",
        "aria-checked": this.props.checked,
        tabIndex: tabIndex,
        onFocus: this.onFocus,
        onBlur: this.onBlur,
        onKeyDown: this.onKeyDown
      }, /*#__PURE__*/React.createElement("span", {
        className: iconClassName
      })));
    }
  }]);

  return HeaderCheckbox;
}(Component);

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 = 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); }; }

function _isNativeReflectConstruct$3() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
var ColumnFilter = /*#__PURE__*/function (_Component) {
  _inherits(ColumnFilter, _Component);

  var _super = _createSuper$3(ColumnFilter);

  function ColumnFilter(props) {
    var _this;

    _classCallCheck(this, ColumnFilter);

    _this = _super.call(this, props);
    _this.state = {
      overlayVisible: false
    };
    _this.overlayRef = /*#__PURE__*/React.createRef();
    _this.filterCallback = _this.filterCallback.bind(_assertThisInitialized(_this));
    _this.filterApplyCallback = _this.filterApplyCallback.bind(_assertThisInitialized(_this));
    _this.onOperatorChange = _this.onOperatorChange.bind(_assertThisInitialized(_this));
    _this.addConstraint = _this.addConstraint.bind(_assertThisInitialized(_this));
    _this.clearFilter = _this.clearFilter.bind(_assertThisInitialized(_this));
    _this.applyFilter = _this.applyFilter.bind(_assertThisInitialized(_this));
    _this.onInputChange = _this.onInputChange.bind(_assertThisInitialized(_this));
    _this.toggleMenu = _this.toggleMenu.bind(_assertThisInitialized(_this));
    _this.onOverlayEnter = _this.onOverlayEnter.bind(_assertThisInitialized(_this));
    _this.onOverlayExit = _this.onOverlayExit.bind(_assertThisInitialized(_this));
    _this.onOverlayExited = _this.onOverlayExited.bind(_assertThisInitialized(_this));
    _this.onContentKeyDown = _this.onContentKeyDown.bind(_assertThisInitialized(_this));
    _this.onContentClick = _this.onContentClick.bind(_assertThisInitialized(_this));
    _this.onContentMouseDown = _this.onContentMouseDown.bind(_assertThisInitialized(_this));
    return _this;
  }

  _createClass(ColumnFilter, [{
    key: "field",
    get: function get() {
      return this.getColumnProp('filterField') || this.getColumnProp('field');
    }
  }, {
    key: "overlay",
    get: function get() {
      return this.overlayRef ? this.overlayRef.current : null;
    }
  }, {
    key: "filterModel",
    get: function get() {
      return this.props.filters[this.field];
    }
  }, {
    key: "filterStoreModel",
    get: function get() {
      return this.props.filtersStore[this.field];
    }
  }, {
    key: "hasFilter",
    value: function hasFilter() {
      if (this.props.filtersStore) {
        var fieldFilter = this.props.filtersStore[this.field];
        return fieldFilter && (fieldFilter.operator ? !this.isFilterBlank(fieldFilter.constraints[0].value) : !this.isFilterBlank(fieldFilter.value));
      }

      return false;
    }
  }, {
    key: "hasRowFilter",
    value: function hasRowFilter() {
      return this.filterModel && !this.isFilterBlank(this.filterModel.value);
    }
  }, {
    key: "isFilterBlank",
    value: function isFilterBlank(filter) {
      return ObjectUtils.isEmpty(filter);
    }
  }, {
    key: "isRowMatchModeSelected",
    value: function isRowMatchModeSelected(matchMode) {
      return this.filterModel && this.filterModel.matchMode === matchMode;
    }
  }, {
    key: "showMenuButton",
    value: function showMenuButton() {
      return this.getColumnProp('showFilterMenu') && (this.props.display === 'row' ? this.getColumnProp('dataType') !== 'boolean' : true);
    }
  }, {
    key: "matchModes",
    value: function matchModes() {
      return this.getColumnProp('filterMatchModeOptions') || PrimeReact.filterMatchModeOptions[this.findDataType()].map(function (key) {
        return {
          label: localeOption(key),
          value: key
        };
      });
    }
  }, {
    key: "isShowMatchModes",
    value: function isShowMatchModes() {
      return this.getColumnProp('dataType') !== 'boolean' && this.getColumnProp('showFilterMatchModes') && this.matchModes() && this.getColumnProp('showFilterMenuOptions');
    }
  }, {
    key: "isShowOperator",
    value: function isShowOperator() {
      return this.getColumnProp('showFilterOperator') && this.filterModel && this.filterModel.operator && this.getColumnProp('showFilterMenuOptions');
    }
  }, {
    key: "showRemoveIcon",
    value: function showRemoveIcon() {
      return this.fieldConstraints().length > 1;
    }
  }, {
    key: "isShowAddConstraint",
    value: function isShowAddConstraint() {
      return this.getColumnProp('showAddButton') && this.filterModel && this.filterModel.operator && this.fieldConstraints() && this.fieldConstraints().length < this.getColumnProp('maxConstraints') && this.getColumnProp('showFilterMenuOptions');
    }
  }, {
    key: "isOutsideClicked",
    value: function isOutsideClicked(target) {
      return !this.isTargetClicked(target) && this.overlayRef && this.overlayRef.current && !(this.overlayRef.current.isSameNode(target) || this.overlayRef.current.contains(target));
    }
  }, {
    key: "isTargetClicked",
    value: function isTargetClicked(target) {
      return this.icon && (this.icon.isSameNode(target) || this.icon.contains(target));
    }
  }, {
    key: "getColumnProp",
    value: function getColumnProp(prop) {
      return this.props.column.props[prop];
    }
  }, {
    key: "getDefaultConstraint",
    value: function getDefaultConstraint() {
      if (this.props.filtersStore && this.filterStoreModel) {
        if (this.filterStoreModel.operator) {
          return {
            matchMode: this.filterStoreModel.constraints[0].matchMode,
            operator: this.filterStoreModel.operator
          };
        } else {
          return {
            matchMode: this.filterStoreModel.matchMode
          };
        }
      }
    }
  }, {
    key: "findDataType",
    value: function findDataType() {
      var dataType = this.getColumnProp('dataType');
      var matchMode = this.getColumnProp('filterMatchMode');

      var hasMatchMode = function hasMatchMode(key) {
        return PrimeReact.filterMatchModeOptions[key].some(function (mode) {
          return mode === matchMode;
        });
      };

      if (matchMode === 'custom' && !hasMatchMode(dataType)) {
        PrimeReact.filterMatchModeOptions[dataType].push(FilterMatchMode.CUSTOM);
        return dataType;
      } else if (matchMode) {
        return Object.keys(PrimeReact.filterMatchModeOptions).find(function (key) {
          return hasMatchMode(key);
        }) || dataType;
      }

      return dataType;
    }
  }, {
    key: "clearFilter",
    value: function clearFilter() {
      var field = this.field;
      var filterClearCallback = this.getColumnProp('onFilterClear');
      var defaultConstraint = this.getDefaultConstraint();

      var filters = _objectSpread$3({}, this.props.filters);

      if (filters[field].operator) {
        filters[field].constraints.splice(1);
        filters[field].operator = defaultConstraint.operator;
        filters[field].constraints[0] = {
          value: null,
          matchMode: defaultConstraint.matchMode
        };
      } else {
        filters[field].value = null;
        filters[field].matchMode = defaultConstraint.matchMode;
      }

      filterClearCallback && filterClearCallback();
      this.props.onFilterChange(filters);
      this.props.onFilterApply();
      this.hide();
    }
  }, {
    key: "applyFilter",
    value: function applyFilter() {
      var filterApplyClickCallback = this.getColumnProp('onFilterApplyClick');
      filterApplyClickCallback && filterApplyClickCallback({
        field: this.field,
        constraints: this.filterModel
      });
      this.props.onFilterApply();
      this.hide();
    }
  }, {
    key: "toggleMenu",
    value: function toggleMenu() {
      this.setState(function (prevState) {
        return {
          overlayVisible: !prevState.overlayVisible
        };
      });
    }
  }, {
    key: "onToggleButtonKeyDown",
    value: function onToggleButtonKeyDown(event) {
      switch (event.key) {
        case 'Escape':
        case 'Tab':
          this.hide();
          break;

        case 'ArrowDown':
          if (this.state.overlayVisible) {
            var focusable = DomHandler.getFirstFocusableElement(this.overlay);
            focusable && focusable.focus();
            event.preventDefault();
          } else if (event.altKey) {
            this.setState({
              overlayVisible: true
            });
            event.preventDefault();
          }

          break;
      }
    }
  }, {
    key: "onContentKeyDown",
    value: function onContentKeyDown(event) {
      if (event.key === 'Escape') {
        this.hide();
        this.icon && this.icon.focus();
      }
    }
  }, {
    key: "onInputChange",
    value: function onInputChange(event, index) {
      var filters = _objectSpread$3({}, this.props.filters);

      var value = event.target.value;

      if (this.props.display === 'menu') {
        filters[this.field].constraints[index].value = value;
      } else {
        filters[this.field].value = value;
      }

      this.props.onFilterChange(filters);

      if (!this.getColumnProp('showApplyButton') || this.props.display === 'row') {
        this.props.onFilterApply();
      }
    }
  }, {
    key: "onRowMatchModeChange",
    value: function onRowMatchModeChange(matchMode) {
      var filterMatchModeChangeCallback = this.getColumnProp('onFilterMatchModeChange');

      var filters = _objectSpread$3({}, this.props.filters);

      filters[this.field].matchMode = matchMode;
      filterMatchModeChangeCallback && filterMatchModeChangeCallback({
        field: this.field,
        matchMode: matchMode
      });
      this.props.onFilterChange(filters);
      this.props.onFilterApply();
      this.hide();
    }
  }, {
    key: "onRowMatchModeKeyDown",
    value: function onRowMatchModeKeyDown(event, matchMode, clear) {
      var item = event.target;

      switch (event.key) {
        case 'ArrowDown':
          var nextItem = this.findNextItem(item);

          if (nextItem) {
            item.removeAttribute('tabindex');
            nextItem.tabIndex = 0;
            nextItem.focus();
          }

          event.preventDefault();
          break;

        case 'ArrowUp':
          var prevItem = this.findPrevItem(item);

          if (prevItem) {
            item.removeAttribute('tabindex');
            prevItem.tabIndex = 0;
            prevItem.focus();
          }

          event.preventDefault();
          break;

        case 'Enter':
          clear ? this.clearFilter() : this.onRowMatchModeChange(matchMode.value);
          event.preventDefault();
          break;
      }
    }
  }, {
    key: "onOperatorChange",
    value: function onOperatorChange(e) {
      var filterOperationChangeCallback = this.getColumnProp('onFilterOperatorChange');
      var value = e.value;

      var filters = _objectSpread$3({}, this.props.filters);

      filters[this.field].operator = value;
      this.props.onFilterChange(filters);
      filterOperationChangeCallback && filterOperationChangeCallback({
        field: this.field,
        operator: value
      });

      if (!this.getColumnProp('showApplyButton')) {
        this.props.onFilterApply();
      }
    }
  }, {
    key: "onMenuMatchModeChange",
    value: function onMenuMatchModeChange(value, index) {
      var filterMatchModeChangeCallback = this.getColumnProp('onFilterMatchModeChange');

      var filters = _objectSpread$3({}, this.props.filters);

      filters[this.field].constraints[index].matchMode = value;
      this.props.onFilterChange(filters);
      filterMatchModeChangeCallback && filterMatchModeChangeCallback({
        field: this.field,
        matchMode: value,
        index: index
      });

      if (!this.getColumnProp('showApplyButton')) {
        this.props.onFilterApply();
      }
    }
  }, {
    key: "addConstraint",
    value: function addConstraint() {
      var filterConstraintAddCallback = this.getColumnProp('onFilterConstraintAdd');
      var defaultConstraint = this.getDefaultConstraint();

      var filters = _objectSpread$3({}, this.props.filters);

      var newConstraint = {
        value: null,
        matchMode: defaultConstraint.matchMode
      };
      filters[this.field].constraints.push(newConstraint);
      filterConstraintAddCallback && filterConstraintAddCallback({
        field: this.field,
        constraint: newConstraint
      });
      this.props.onFilterChange(filters);

      if (!this.getColumnProp('showApplyButton')) {
        this.props.onFilterApply();
      }
    }
  }, {
    key: "removeConstraint",
    value: function removeConstraint(index) {
      var filterConstraintRemoveCallback = this.getColumnProp('onFilterConstraintRemove');

      var filters = _objectSpread$3({}, this.props.filters);

      var removedConstraint = filters[this.field].constraints.splice(index, 1);
      filterConstraintRemoveCallback && filterConstraintRemoveCallback({
        field: this.field,
        constraint: removedConstraint
      });
      this.props.onFilterChange(filters);

      if (!this.getColumnProp('showApplyButton')) {
        this.props.onFilterApply();
      }
    }
  }, {
    key: "findNextItem",
    value: function findNextItem(item) {
      var nextItem = item.nextElementSibling;
      if (nextItem) return DomHandler.hasClass(nextItem, 'p-column-filter-separator') ? this.findNextItem(nextItem) : nextItem;else return item.parentElement.firstElementChild;
    }
  }, {
    key: "findPrevItem",
    value: function findPrevItem(item) {
      var prevItem = item.previousElementSibling;
      if (prevItem) return DomHandler.hasClass(prevItem, 'p-column-filter-separator') ? this.findPrevItem(prevItem) : prevItem;else return item.parentElement.lastElementChild;
    }
  }, {
    key: "hide",
    value: function hide() {
      this.setState({
        overlayVisible: false
      });
    }
  }, {
    key: "onContentClick",
    value: function onContentClick(event) {
      this.selfClick = true;
      OverlayService.emit('overlay-click', {
        originalEvent: event,
        target: this.overlay
      });
    }
  }, {
    key: "onContentMouseDown",
    value: function onContentMouseDown() {
      this.selfClick = true;
    }
  }, {
    key: "onOverlayEnter",
    value: function onOverlayEnter() {
      var _this2 = this;

      ZIndexUtils.set('overlay', this.overlay, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']);
      DomHandler.alignOverlay(this.overlay, this.icon, PrimeReact.appendTo, false);
      this.bindOutsideClickListener();
      this.bindScrollListener();
      this.bindResizeListener();

      this.overlayEventListener = function (e) {
        if (!_this2.isOutsideClicked(e.target)) {
          _this2.selfClick = true;
        }
      };

      OverlayService.on('overlay-click', this.overlayEventListener);
    }
  }, {
    key: "onOverlayExit",
    value: function onOverlayExit() {
      this.onOverlayHide();
    }
  }, {
    key: "onOverlayExited",
    value: function onOverlayExited() {
      ZIndexUtils.clear(this.overlay);
    }
  }, {
    key: "onOverlayHide",
    value: function onOverlayHide() {
      this.unbindOutsideClickListener();
      this.unbindResizeListener();
      this.unbindScrollListener();
      OverlayService.off('overlay-click', this.overlayEventListener);
      this.overlayEventListener = null;
    }
  }, {
    key: "bindOutsideClickListener",
    value: function bindOutsideClickListener() {
      var _this3 = this;

      if (!this.outsideClickListener) {
        this.outsideClickListener = function (event) {
          if (!_this3.selfClick && _this3.isOutsideClicked(event.target)) {
            _this3.hide();
          }

          _this3.selfClick = false;
        };

        document.addEventListener('click', this.outsideClickListener);
      }
    }
  }, {
    key: "unbindOutsideClickListener",
    value: function unbindOutsideClickListener() {
      if (this.outsideClickListener) {
        document.removeEventListener('click', this.outsideClickListener);
        this.outsideClickListener = null;
        this.selfClick = false;
      }
    }
  }, {
    key: "bindScrollListener",
    value: function bindScrollListener() {
      var _this4 = this;

      if (!this.scrollHandler) {
        this.scrollHandler = new ConnectedOverlayScrollHandler(this.icon, function () {
          if (_this4.state.overlayVisible) {
            _this4.hide();
          }
        });
      }

      this.scrollHandler.bindScrollListener();
    }
  }, {
    key: "unbindScrollListener",
    value: function unbindScrollListener() {
      if (this.scrollHandler) {
        this.scrollHandler.unbindScrollListener();
      }
    }
  }, {
    key: "bindResizeListener",
    value: function bindResizeListener() {
      var _this5 = this;

      if (!this.resizeListener) {
        this.resizeListener = function () {
          if (_this5.state.overlayVisible && !DomHandler.isTouchDevice()) {
            _this5.hide();
          }
        };

        window.addEventListener('resize', this.resizeListener);
      }
    }
  }, {
    key: "unbindResizeListener",
    value: function unbindResizeListener() {
      if (this.resizeListener) {
        window.removeEventListener('resize', this.resizeListener);
        this.resizeListener = null;
      }
    }
  }, {
    key: "fieldConstraints",
    value: function fieldConstraints() {
      return this.filterModel ? this.filterModel.constraints || [this.filterModel] : [];
    }
  }, {
    key: "operator",
    value: function operator() {
      return this.filterModel.operator;
    }
  }, {
    key: "operatorOptions",
    value: function operatorOptions() {
      return [{
        label: localeOption('matchAll'),
        value: FilterOperator.AND
      }, {
        label: localeOption('matchAny'),
        value: FilterOperator.OR
      }];
    }
  }, {
    key: "noFilterLabel",
    value: function noFilterLabel() {
      return localeOption('noFilter');
    }
  }, {
    key: "removeRuleButtonLabel",
    value: function removeRuleButtonLabel() {
      return localeOption('removeRule');
    }
  }, {
    key: "addRuleButtonLabel",
    value: function addRuleButtonLabel() {
      return localeOption('addRule');
    }
  }, {
    key: "clearButtonLabel",
    value: function clearButtonLabel() {
      return localeOption('clear');
    }
  }, {
    key: "applyButtonLabel",
    value: function applyButtonLabel() {
      return localeOption('apply');
    }
  }, {
    key: "filterCallback",
    value: function filterCallback(value) {
      var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;

      var filters = _objectSpread$3({}, this.props.filters);

      var meta = filters[this.field];
      this.props.display === 'menu' && meta && meta.operator ? filters[this.field].constraints[index].value = value : filters[this.field].value = value;
      this.props.onFilterChange(filters);
    }
  }, {
    key: "filterApplyCallback",
    value: function filterApplyCallback() {
      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
        args[_key] = arguments[_key];
      }

      args && this.filterCallback(args[0], args[1]);
      this.props.onFilterApply();
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps, prevState) {
      if (this.props.display === 'menu' && this.state.overlayVisible) {
        DomHandler.alignOverlay(this.overlay, this.icon, PrimeReact.appendTo, false);
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      if (this.overlayEventListener) {
        OverlayService.off('overlay-click', this.overlayEventListener);
        this.overlayEventListener = null;
      }

      if (this.overlay) {
        ZIndexUtils.clear(this.overlay);
        this.onOverlayHide();
      }
    }
  }, {
    key: "renderFilterElement",
    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: value,
        filterApplyCallback: this.filterApplyCallback,
        filterCallback: this.filterCallback
      }) : /*#__PURE__*/React.createElement(InputText, {
        type: this.getColumnProp('filterType'),
        value: value || '',
        onChange: function onChange(e) {
          return _this6.onInputChange(e, index);
        },
        className: "p-column-filter",
        placeholder: this.getColumnProp('filterPlaceholder'),
        maxLength: this.getColumnProp('filterMaxLength')
      });
    }
  }, {
    key: "renderRowFilterElement",
    value: function renderRowFilterElement() {
      if (this.props.display === 'row') {
        var content = this.renderFilterElement(this.filterModel, 0);
        return /*#__PURE__*/React.createElement("div", {
          className: "p-fluid p-column-filter-element"
        }, content);
      }

      return null;
    }
  }, {
    key: "renderMenuFilterElement",
    value: function renderMenuFilterElement(fieldConstraint, index) {
      if (this.props.display === 'menu') {
        return this.renderFilterElement(fieldConstraint, index);
      }

      return null;
    }
  }, {
    key: "renderMenuButton",
    value: function renderMenuButton() {
      var _this7 = this;

      if (this.showMenuButton()) {
        var className = classNames('p-column-filter-menu-button p-link', {
          'p-column-filter-menu-button-open': this.state.overlayVisible,
          'p-column-filter-menu-button-active': this.hasFilter()
        });
        return /*#__PURE__*/React.createElement("button", {
          ref: function ref(el) {
            return _this7.icon = el;
          },
          type: "button",
          className: className,
          "aria-haspopup": true,
          "aria-expanded": this.state.overlayVisible,
          onClick: this.toggleMenu,
          onKeyDown: this.onToggleButtonKeyDown
        }, /*#__PURE__*/React.createElement("span", {
          className: "pi pi-filter-icon pi-filter"
        }));
      }

      return null;
    }
  }, {
    key: "renderClearButton",
    value: function renderClearButton() {
      if (this.getColumnProp('showClearButton') && this.props.display === 'row') {
        var className = classNames('p-column-filter-clear-button p-link', {
          'p-hidden-space': !this.hasRowFilter()
        });
        return /*#__PURE__*/React.createElement("button", {
          className: className,
          type: "button",
          onClick: this.clearFilter
        }, /*#__PURE__*/React.createElement("span", {
          className: "pi pi-filter-slash"
        }));
      }

      return null;
    }
  }, {
    key: "renderRowItems",
    value: function renderRowItems() {
      var _this8 = this;

      if (this.isShowMatchModes()) {
        var matchModes = this.matchModes();
        var noFilterLabel = this.noFilterLabel();
        return /*#__PURE__*/React.createElement("ul", {
          className: "p-column-filter-row-items"
        }, matchModes.map(function (matchMode, i) {
          var value = matchMode.value,
              label = matchMode.label;
          var className = classNames('p-column-filter-row-item', {
            'p-highlight': _this8.isRowMatchModeSelected(value)
          });
          var tabIndex = i === 0 ? 0 : null;
          return /*#__PURE__*/React.createElement("li", {
            className: className,
            key: label,
            onClick: function onClick() {
              return _this8.onRowMatchModeChange(value);
            },
            onKeyDown: function onKeyDown(e) {
              return _this8.onRowMatchModeKeyDown(e, matchMode);
            },
            tabIndex: tabIndex
          }, label);
        }), /*#__PURE__*/React.createElement("li", {
          className: "p-column-filter-separator"
        }), /*#__PURE__*/React.createElement("li", {
          className: "p-column-filter-row-item",
          onClick: this.clearFilter,
          onKeyDown: function onKeyDown(e) {
            return _this8.onRowMatchModeKeyDown(e, null, true);
          }
        }, noFilterLabel));
      }

      return null;
    }
  }, {
    key: "renderOperator",
    value: function renderOperator() {
      if (this.isShowOperator()) {
        var options = this.operatorOptions();
        var value = this.operator();
        return /*#__PURE__*/React.createElement("div", {
          className: "p-column-filter-operator"
        }, /*#__PURE__*/React.createElement(Dropdown, {
          options: options,
          value: value,
          onChange: this.onOperatorChange,
          className: "p-column-filter-operator-dropdown"
        }));
      }

      return null;
    }
  }, {
    key: "renderMatchModeDropdown",
    value: function renderMatchModeDropdown(constraint, index) {
      var _this9 = this;

      if (this.isShowMatchModes()) {
        var options = this.matchModes();
        return /*#__PURE__*/React.createElement(Dropdown, {
          options: options,
          value: constraint.matchMode,
          onChange: function onChange(e) {
            return _this9.onMenuMatchModeChange(e.value, index);
          },
          className: "p-column-filter-matchmode-dropdown"
        });
      }

      return null;
    }
  }, {
    key: "renderRemoveButton",
    value: function renderRemoveButton(index) {
      var _this10 = this;

      if (this.showRemoveIcon()) {
        var removeRuleLabel = this.removeRuleButtonLabel();
        return /*#__PURE__*/React.createElement(Button, {
          type: "button",
          icon: "pi pi-trash",
          className: "p-column-filter-remove-button p-button-text p-button-danger p-button-sm",
          onClick: function onClick() {
            return _this10.removeConstraint(index);
          },
          label: removeRuleLabel
        });
      }

      return null;
    }
  }, {
    key: "renderConstraints",
    value: function renderConstraints() {
      var _this11 = this;

      var fieldConstraints = this.fieldConstraints();
      return /*#__PURE__*/React.createElement("div", {
        className: "p-column-filter-constraints"
      }, fieldConstraints.map(function (fieldConstraint, i) {
        var matchModeDropdown = _this11.renderMatchModeDropdown(fieldConstraint, i);

        var menuFilterElement = _this11.renderMenuFilterElement(fieldConstraint, i);

        var removeButton = _this11.renderRemoveButton(i);

        return /*#__PURE__*/React.createElement("div", {
          key: i,
          className: "p-column-filter-constraint"
        }, matchModeDropdown, menuFilterElement, /*#__PURE__*/React.createElement("div", null, removeButton));
      }));
    }
  }, {
    key: "renderAddRule",
    value: function renderAddRule() {
      if (this.isShowAddConstraint()) {
        var addRuleLabel = this.addRuleButtonLabel();
        return /*#__PURE__*/React.createElement("div", {
          className: "p-column-filter-add-rule"
        }, /*#__PURE__*/React.createElement(Button, {
          type: "button",
          label: addRuleLabel,
          icon: "pi pi-plus",
          className: "p-column-filter-add-button p-button-text p-button-sm",
          onClick: this.addConstraint
        }));
      }

      return null;
    }
  }, {
    key: "renderFilterClearButton",
    value: function renderFilterClearButton() {
      if (this.getColumnProp('showClearButton')) {
        if (!this.getColumnProp('filterClear')) {
          var clearLabel = this.clearButtonLabel();
          return /*#__PURE__*/React.createElement(Button, {
            type: "button",
            className: "p-button-outlined p-button-sm",
            onClick: this.clearFilter,
            label: clearLabel
          });
        }

        return ObjectUtils.getJSXElement(this.getColumnProp('filterClear'), {
          field: this.field,
          filterModel: this.filterModel,
          filterClearCallback: this.clearFilter
        });
      }

      return null;
    }
  }, {
    key: "renderFilterApplyButton",
    value: function renderFilterApplyButton() {
      if (this.getColumnProp('showApplyButton')) {
        if (!this.getColumnProp('filterApply')) {
          var applyLabel = this.applyButtonLabel();
          return /*#__PURE__*/React.createElement(Button, {
            type: "button",
            className: "p-button-sm",
            onClick: this.applyFilter,
            label: applyLabel
          });
        }

        return ObjectUtils.getJSXElement(this.getColumnProp('filterApply'), {
          field: this.field,
          filterModel: this.filterModel,
          filterApplyCallback: this.applyFilter
        });
      }

      return null;
    }
  }, {
    key: "renderButtonBar",
    value: function renderButtonBar() {
      var clearButton = this.renderFilterClearButton();
      var applyButton = this.renderFilterApplyButton();
      return /*#__PURE__*/React.createElement("div", {
        className: "p-column-filter-buttonbar"
      }, clearButton, applyButton);
    }
  }, {
    key: "renderItems",
    value: function renderItems() {
      var operator = this.renderOperator();
      var constraints = this.renderConstraints();
      var addRule = this.renderAddRule();
      var buttonBar = this.renderButtonBar();
      return /*#__PURE__*/React.createElement(React.Fragment, null, operator, constraints, addRule, buttonBar);
    }
  }, {
    key: "renderOverlay",
    value: function renderOverlay() {
      var style = this.getColumnProp('filterMenuStyle');
      var className = classNames('p-column-filter-overlay p-component p-fluid', this.getColumnProp('filterMenuClassName'), {
        'p-column-filter-overlay-menu': this.props.display === 'menu',
        'p-input-filled': PrimeReact.inputStyle === 'filled',
        'p-ripple-disabled': PrimeReact.ripple === false
      });
      var filterHeader = ObjectUtils.getJSXElement(this.getColumnProp('filterHeader'), {
        field: this.field,
        filterModel: this.filterModel,
        filterApplyCallback: this.filterApplyCallback
      });
      var filterFooter = ObjectUtils.getJSXElement(this.getColumnProp('filterFooter'), {
        field: this.field,
        filterModel: this.filterModel,
        filterApplyCallback: this.filterApplyCallback
      });
      var items = this.props.display === 'row' ? this.renderRowItems() : this.renderItems();
      return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(CSSTransition, {
        nodeRef: this.overlayRef,
        classNames: "p-connected-overlay",
        "in": this.state.overlayVisible,
        timeout: {
          enter: 120,
          exit: 100
        },
        unmountOnExit: true,
        onEnter: this.onOverlayEnter,
        onExit: this.onOverlayExit,
        onExited: this.onOverlayExited
      }, /*#__PURE__*/React.createElement("div", {
        ref: this.overlayRef,
        style: style,
        className: className,
        onKeyDown: this.onContentKeyDown,
        onClick: this.onContentClick,
        onMouseDown: this.onContentMouseDown
      }, filterHeader, items, filterFooter)));
    }
  }, {
    key: "render",
    value: function render() {
      var className = classNames('p-column-filter p-fluid', {
        'p-column-filter-row': this.props.display === 'row',
        'p-column-filter-menu': this.props.display === 'menu'
      });
      var rowFilterElement = this.renderRowFilterElement();
      var menuButton = this.renderMenuButton();
      var clearButton = this.renderClearButton();
      var overlay = this.renderOverlay();
      return /*#__PURE__*/React.createElement("div", {
        className: className
      }, rowFilterElement, menuButton, clearButton, overlay);
    }
  }]);

  return ColumnFilter;
}(Component);

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 = 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); }; }

function _isNativeReflectConstruct$2() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
var HeaderCell = /*#__PURE__*/function (_Component) {
  _inherits(HeaderCell, _Component);

  var _super = _createSuper$2(HeaderCell);

  function HeaderCell(props) {
    var _this;

    _classCallCheck(this, HeaderCell);

    _this = _super.call(this, props);
    _this.state = {
      styleObject: {}
    };
    _this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
    _this.onMouseDown = _this.onMouseDown.bind(_assertThisInitialized(_this));
    _this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this)); // drag

    _this.onDragStart = _this.onDragStart.bind(_assertThisInitialized(_this));
    _this.onDragOver = _this.onDragOver.bind(_assertThisInitialized(_this));
    _this.onDragLeave = _this.onDragLeave.bind(_assertThisInitialized(_this));
    _this.onDrop = _this.onDrop.bind(_assertThisInitialized(_this)); // resize

    _this.onResizerMouseDown = _this.onResizerMouseDown.bind(_assertThisInitialized(_this));
    _this.onResizerClick = _this.onResizerClick.bind(_assertThisInitialized(_this));
    _this.onResizerDoubleClick = _this.onResizerDoubleClick.bind(_assertThisInitialized(_this));
    return _this;
  }

  _createClass(HeaderCell, [{
    key: "isBadgeVisible",
    value: function isBadgeVisible() {
      return this.props.multiSortMeta && this.props.multiSortMeta.length > 1;
    }
  }, {
    key: "isSortableDisabled",
    value: function isSortableDisabled() {
      return !this.getColumnProp('sortable') || this.getColumnProp('sortable') && (this.props.allSortableDisabled || this.getColumnProp('sortableDisabled'));
    }
  }, {
    key: "getColumnProp",
    value: function getColumnProp() {
      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
        args[_key] = arguments[_key];
      }

      return this.props.column ? typeof args[0] === 'string' ? this.props.column.props[args[0]] : (args[0] || this.props.column).props[args[1]] : null;
    }
  }, {
    key: "getStyle",
    value: function getStyle() {
      var headerStyle = this.getColumnProp('headerStyle');
      var columnStyle = this.getColumnProp('style');
      return this.getColumnProp('frozen') ? Object.assign({}, columnStyle, headerStyle, this.state.styleObject) : Object.assign({}, columnStyle, headerStyle);
    }
  }, {
    key: "getMultiSortMetaIndex",
    value: function getMultiSortMetaIndex() {
      var _this2 = this;

      return this.props.multiSortMeta.findIndex(function (meta) {
        return meta.field === _this2.getColumnProp('field') || meta.field === _this2.getColumnProp('sortField');
      });
    }
  }, {
    key: "getSortMeta",
    value: function getSortMeta() {
      var sorted = false;
      var sortOrder = 0;
      var metaIndex = -1;

      if (this.props.sortMode === 'single') {
        sorted = this.props.sortField && (this.props.sortField === this.getColumnProp('field') || this.props.sortField === this.getColumnProp('sortField'));
        sortOrder = sorted ? this.props.sortOrder : 0;
      } else if (this.props.sortMode === 'multiple') {
        metaIndex = this.getMultiSortMetaIndex();

        if (metaIndex > -1) {
          sorted = true;
          sortOrder = this.props.multiSortMeta[metaIndex].order;
        }
      }

      return {
        sorted: sorted,
        sortOrder: sortOrder,
        metaIndex: metaIndex
      };
    }
  }, {
    key: "getAriaSort",
    value: function getAriaSort(_ref) {
      var sorted = _ref.sorted,
          sortOrder = _ref.sortOrder;

      if (this.getColumnProp('sortable')) {
        var sortIcon = sorted ? sortOrder < 0 ? 'pi-sort-amount-down' : 'pi-sort-amount-up-alt' : 'pi-sort-alt';
        if (sortIcon === 'pi-sort-amount-down') return 'descending';else if (sortIcon === 'pi-sort-amount-up-alt') return 'ascending';else return 'none';
      }

      return null;
    }
  }, {
    key: "updateStickyPosition",
    value: function updateStickyPosition() {
      if (this.getColumnProp('frozen')) {
        var styleObject = _objectSpread$2({}, this.state.styleObject);

        var align = this.getColumnProp('alignFrozen');

        if (align === 'right') {
          var right = 0;
          var next = this.el.nextElementSibling;

          if (next) {
            right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
          }

          styleObject['right'] = right + 'px';
        } else {
          var left = 0;
          var prev = this.el.previousElementSibling;

          if (prev) {
            left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
          }

          styleObject['left'] = left + 'px';
        }

        var filterRow = this.el.parentElement.nextElementSibling;

        if (filterRow) {
          var index = DomHandler.index(this.el);
          filterRow.children[index].style.left = styleObject['left'];
          filterRow.children[index].style.right = styleObject['right'];
        }

        var isSameStyle = this.state.styleObject['left'] === styleObject['left'] && this.state.styleObject['right'] === styleObject['right'];
        !isSameStyle && this.setState({
          styleObject: styleObject
        });
      }
    }
  }, {
    key: "updateSortableDisabled",
    value: function updateSortableDisabled(prevColumn) {
      if (this.getColumnProp(prevColumn, 'sortableDisabled') !== this.getColumnProp('sortableDisabled') || this.getColumnProp(prevColumn, 'sortable') !== this.getColumnProp('sortable')) {
        this.props.onSortableChange();
      }
    }
  }, {
    key: "onClick",
    value: function onClick(event) {
      if (!this.isSortableDisabled()) {
        var targetNode = event.target;

        if (DomHandler.hasClass(targetNode, 'p-sortable-column') || DomHandler.hasClass(targetNode, 'p-column-title') || DomHandler.hasClass(targetNode, 'p-column-header-content') || DomHandler.hasClass(targetNode, 'p-sortable-column-icon') || DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')) {
          DomHandler.clearSelection();
          this.props.onSortChange({
            originalEvent: event,
            column: this.props.column,
            sortableDisabledFields: this.props.sortableDisabledFields
          });
        }
      }
    }
  }, {
    key: "onMouseDown",
    value: function onMouseDown(event) {
      this.props.onColumnMouseDown({
        originalEvent: event,
        column: this.props.column
      });
    }
  }, {
    key: "onKeyDown",
    value: function onKeyDown(event) {
      if (event.key === 'Enter' && event.currentTarget === this.el && DomHandler.hasClass(event.currentTarget, 'p-sortable-column')) {
        this.onClick(event);
        event.preventDefault();
      }
    }
  }, {
    key: "onDragStart",
    value: function onDragStart(event) {
      this.props.onColumnDragStart({
        originalEvent: event,
        column: this.props.column
      });
    }
  }, {
    key: "onDragOver",
    value: function onDragOver(event) {
      this.props.onColumnDragOver({
        originalEvent: event,
        column: this.props.column
      });
    }
  }, {
    key: "onDragLeave",
    value: function onDragLeave(event) {
      this.props.onColumnDragLeave({
        originalEvent: event,
        column: this.props.column
      });
    }
  }, {
    key: "onDrop",
    value: function onDrop(event) {
      this.props.onColumnDrop({
        originalEvent: event,
        column: this.props.column
      });
    }
  }, {
    key: "onResizerMouseDown",
    value: function onResizerMouseDown(event) {
      this.props.onColumnResizeStart({
        originalEvent: event,
        column: this.props.column
      });
    }
  }, {
    key: "onResizerClick",
    value: function onResizerClick(event) {
      if (this.props.onColumnResizerClick) {
        this.props.onColumnResizerClick({
          originalEvent: event,
          element: event.currentTarget.parentElement,
          column: this.props.column
        });
        event.preventDefault();
      }
    }
  }, {
    key: "onResizerDoubleClick",
    value: function onResizerDoubleClick(event) {
      if (this.props.onColumnResizerDoubleClick) {
        this.props.onColumnResizerDoubleClick({
          originalEvent: event,
          element: event.currentTarget.parentElement,
          column: this.props.column
        });
        event.preventDefault();
      }
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      if (this.getColumnProp('frozen')) {
        this.updateStickyPosition();
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      if (this.getColumnProp('frozen')) {
        this.updateStickyPosition();
      }

      this.updateSortableDisabled(prevProps.column);
    }
  }, {
    key: "renderResizer",
    value: function renderResizer() {
      if (this.props.resizableColumns && !this.getColumnProp('frozen')) {
        return /*#__PURE__*/React.createElement("span", {
          className: "p-column-resizer",
          onMouseDown: this.onResizerMouseDown,
          onClick: this.onResizerClick,
          onDoubleClick: this.onResizerDoubleClick
        });
      }

      return null;
    }
  }, {
    key: "renderTitle",
    value: function renderTitle() {
      var title = ObjectUtils.getJSXElement(this.getColumnProp('header'), {
        props: this.props.tableProps
      });
      return /*#__PURE__*/React.createElement("span", {
        className: "p-column-title"
      }, title);
    }
  }, {
    key: "renderSortIcon",
    value: function renderSortIcon(_ref2) {
      var sorted = _ref2.sorted,
          sortOrder = _ref2.sortOrder;

      if (this.getColumnProp('sortable')) {
        var sortIcon = sorted ? sortOrder < 0 ? 'pi-sort-amount-down' : 'pi-sort-amount-up-alt' : 'pi-sort-alt';
        var className = classNames('p-sortable-column-icon pi pi-fw', sortIcon);
        return /*#__PURE__*/React.createElement("span", {
          className: className
        });
      }

      return null;
    }
  }, {
    key: "renderBadge",
    value: function renderBadge(_ref3) {
      var metaIndex = _ref3.metaIndex;

      if (metaIndex !== -1 && this.isBadgeVisible()) {
        var value = this.props.groupRowsBy && this.props.groupRowsBy === this.props.groupRowSortField ? metaIndex : metaIndex + 1;
        return /*#__PURE__*/React.createElement("span", {
          className: "p-sortable-column-badge"
        }, value);
      }

      return null;
    }
  }, {
    key: "renderCheckbox",
    value: function renderCheckbox() {
      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,
          onChange: this.props.onColumnCheckboxChange,
          disabled: this.props.empty
        });
      }

      return null;
    }
  }, {
    key: "renderFilter",
    value: function renderFilter() {
      if (this.props.filterDisplay === 'menu' && this.getColumnProp('filter')) {
        return /*#__PURE__*/React.createElement(ColumnFilter, {
          display: "menu",
          column: this.props.column,
          filters: this.props.filters,
          onFilterChange: this.props.onFilterChange,
          onFilterApply: this.props.onFilterApply,
          filtersStore: this.props.filtersStore
        });
      }

      return null;
    }
  }, {
    key: "renderHeader",
    value: function renderHeader(sortMeta) {
      var title = this.renderTitle();
      var sortIcon = this.renderSortIcon(sortMeta);
      var badge = this.renderBadge(sortMeta);
      var checkbox = this.renderCheckbox();
      var filter = this.renderFilter();
      return /*#__PURE__*/React.createElement("div", {
        className: "p-column-header-content"
      }, title, sortIcon, badge, checkbox, filter);
    }
  }, {
    key: "renderElement",
    value: function renderElement() {
      var _this3 = this;

      var isSortableDisabled = this.isSortableDisabled();
      var sortMeta = this.getSortMeta();
      var style = this.getStyle();
      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,
        'p-frozen-column': this.getColumnProp('frozen'),
        'p-selection-column': this.getColumnProp('selectionMode'),
        'p-sortable-disabled': this.getColumnProp('sortable') && isSortableDisabled,
        'p-reorderable-column': this.props.reorderableColumns && this.getColumnProp('reorderable')
      }, "p-align-".concat(align), !!align));
      var tabIndex = this.getColumnProp('sortable') && !isSortableDisabled ? this.props.tabIndex : null;
      var colSpan = this.getColumnProp('colSpan');
      var rowSpan = this.getColumnProp('rowSpan');
      var ariaSort = this.getAriaSort(sortMeta);
      var resizer = this.renderResizer();
      var header = this.renderHeader(sortMeta);
      return /*#__PURE__*/React.createElement("th", {
        ref: function ref(el) {
          return _this3.el = el;
        },
        style: style,
        className: className,
        tabIndex: tabIndex,
        role: "columnheader",
        onClick: this.onClick,
        onKeyDown: this.onKeyDown,
        onMouseDown: this.onMouseDown,
        onDragStart: this.onDragStart,
        onDragOver: this.onDragOver,
        onDragLeave: this.onDragLeave,
        onDrop: this.onDrop,
        colSpan: colSpan,
        rowSpan: rowSpan,
        "aria-sort": ariaSort
      }, resizer, header);
    }
  }, {
    key: "render",
    value: function render() {
      return this.renderElement();
    }
  }]);

  return HeaderCell;
}(Component);

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 = 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); }; }

function _isNativeReflectConstruct$1() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
var TableHeader = /*#__PURE__*/function (_Component) {
  _inherits(TableHeader, _Component);

  var _super = _createSuper$1(TableHeader);

  function TableHeader(props) {
    var _this;

    _classCallCheck(this, TableHeader);

    _this = _super.call(this, props);
    _this.state = {
      sortableDisabledFields: [],
      allSortableDisabled: false,
      styleObject: {}
    };
    _this.onSortableChange = _this.onSortableChange.bind(_assertThisInitialized(_this));
    _this.onCheckboxChange = _this.onCheckboxChange.bind(_assertThisInitialized(_this));
    return _this;
  }

  _createClass(TableHeader, [{
    key: "isSingleSort",
    value: function isSingleSort() {
      return this.props.sortMode === 'single';
    }
  }, {
    key: "isMultipleSort",
    value: function isMultipleSort() {
      return this.props.sortMode === 'multiple';
    }
  }, {
    key: "isAllSortableDisabled",
    value: function isAllSortableDisabled() {
      return this.isSingleSort() && this.state.allSortableDisabled;
    }
  }, {
    key: "isColumnSorted",
    value: function isColumnSorted(column) {
      return this.props.sortField !== null ? column.props.field === this.props.sortField || column.props.sortField === this.props.sortField : false;
    }
  }, {
    key: "updateSortableDisabled",
    value: function updateSortableDisabled() {
      var _this2 = this;

      if (this.isSingleSort() || this.isMultipleSort() && this.props.onSortChange) {
        var sortableDisabledFields = [];
        var allSortableDisabled = false;
        this.props.columns.forEach(function (column) {
          if (column.props.sortableDisabled) {
            sortableDisabledFields.push(column.props.sortField || column.props.field);

            if (!allSortableDisabled && _this2.isColumnSorted(column)) {
              allSortableDisabled = true;
            }
          }
        });
        this.setState({
          sortableDisabledFields: sortableDisabledFields,
          allSortableDisabled: allSortableDisabled
        });
      }
    }
  }, {
    key: "onSortableChange",
    value: function onSortableChange() {
      this.updateSortableDisabled();
    }
  }, {
    key: "onCheckboxChange",
    value: function onCheckboxChange(e) {
      this.props.onColumnCheckboxChange(e, this.props.value);
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      this.updateSortableDisabled();
    }
  }, {
    key: "renderGroupHeaderCells",
    value: function renderGroupHeaderCells(row) {
      var columns = React.Children.toArray(row.props.children);
      return this.renderHeaderCells(columns);
    }
  }, {
    key: "renderHeaderCells",
    value: function renderHeaderCells(columns) {
      var _this3 = this;

      return React.Children.map(columns, function (col, i) {
        var isVisible = col ? !col.props.hidden : true;
        var key = col ? col.props.columnKey || col.props.field || i : i;
        return isVisible && /*#__PURE__*/React.createElement(HeaderCell, {
          key: key,
          value: _this3.props.value,
          tableProps: _this3.props.tableProps,
          column: col,
          tabIndex: _this3.props.tabIndex,
          empty: _this3.props.empty,
          resizableColumns: _this3.props.resizableColumns,
          groupRowsBy: _this3.props.groupRowsBy,
          groupRowSortField: _this3.props.groupRowSortField,
          sortMode: _this3.props.sortMode,
          sortField: _this3.props.sortField,
          sortOrder: _this3.props.sortOrder,
          multiSortMeta: _this3.props.multiSortMeta,
          allSortableDisabled: _this3.isAllSortableDisabled(),
          onSortableChange: _this3.onSortableChange,
          sortableDisabledFields: _this3.state.sortableDisabledFields,
          filterDisplay: _this3.props.filterDisplay,
          filters: _this3.props.filters,
          filtersStore: _this3.props.filtersStore,
          onFilterChange: _this3.props.onFilterChange,
          onFilterApply: _this3.props.onFilterApply,
          onColumnMouseDown: _this3.props.onColumnMouseDown,
          onColumnDragStart: _this3.props.onColumnDragStart,
          onColumnDragOver: _this3.props.onColumnDragOver,
          onColumnDragLeave: _this3.props.onColumnDragLeave,
          onColumnDrop: _this3.props.onColumnDrop,
          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,
          onSortChange: _this3.props.onSortChange
        });
      });
    }
  }, {
    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() {
      var _this4 = this;

      return React.Children.map(this.props.columns, function (col, i) {
        var isVisible = !col.props.hidden;

        if (isVisible) {
          var _col$props = col.props,
              filterHeaderStyle = _col$props.filterHeaderStyle,
              style = _col$props.style,
              filterHeaderClassName = _col$props.filterHeaderClassName,
              className = _col$props.className,
              frozen = _col$props.frozen,
              columnKey = _col$props.columnKey,
              field = _col$props.field,
              selectionMode = _col$props.selectionMode,
              filter = _col$props.filter;

          var colStyle = _objectSpread$1(_objectSpread$1({}, filterHeaderStyle || {}), style || {});

          var colClassName = classNames('p-filter-column', filterHeaderClassName, className, {
            'p-frozen-column': frozen
          });
          var colKey = columnKey || field || i;

          var checkbox = _this4.renderCheckbox(selectionMode);

          var filterRow = _this4.renderFilter(col, filter);

          return /*#__PURE__*/React.createElement("th", {
            key: colKey,
            style: colStyle,
            className: colClassName
          }, checkbox, filterRow);
        }

        return null;
      });
    }
  }, {
    key: "renderContent",
    value: function renderContent() {
      var _this5 = this;

      if (this.props.headerColumnGroup) {
        var rows = React.Children.toArray(this.props.headerColumnGroup.props.children);
        return rows.map(function (row, i) {
          return /*#__PURE__*/React.createElement("tr", {
            key: i,
            role: "row"
          }, _this5.renderGroupHeaderCells(row));
        });
      } else {
        var headerRow = /*#__PURE__*/React.createElement("tr", {
          role: "row"
        }, this.renderHeaderCells(this.props.columns));
        var filterRow = this.props.filterDisplay === 'row' && /*#__PURE__*/React.createElement("tr", {
          role: "row"
        }, this.renderFilterCells());
        return /*#__PURE__*/React.createElement(React.Fragment, null, headerRow, filterRow);
      }
    }
  }, {
    key: "render",
    value: function render() {
      var content = this.renderContent();
      return /*#__PURE__*/React.createElement("thead", {
        className: "p-datatable-thead"
      }, content);
    }
  }]);

  return TableHeader;
}(Component);

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 = 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); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
var DataTable = /*#__PURE__*/function (_Component) {
  _inherits(DataTable, _Component);

  var _super = _createSuper(DataTable);

  function DataTable(props) {
    var _this;

    _classCallCheck(this, DataTable);

    _this = _super.call(this, props);
    _this.state = {
      d_rows: props.rows,
      columnOrder: [],
      groupRowsSortMeta: null,
      editingMeta: {},
      attributeSelector: null
    };

    if (!_this.props.onPage) {
      _this.state.first = props.first;
      _this.state.rows = props.rows;
    }

    if (!_this.props.onSort) {
      _this.state.sortField = props.sortField;
      _this.state.sortOrder = props.sortOrder;
      _this.state.multiSortMeta = props.multiSortMeta;
    }

    _this.state.d_filters = _this.cloneFilters(props.filters);

    if (!_this.props.onFilter) {
      _this.state.filters = props.filters;
    } // header


    _this.onSortChange = _this.onSortChange.bind(_assertThisInitialized(_this));
    _this.onFilterChange = _this.onFilterChange.bind(_assertThisInitialized(_this));
    _this.onFilterApply = _this.onFilterApply.bind(_assertThisInitialized(_this));
    _this.onColumnHeaderMouseDown = _this.onColumnHeaderMouseDown.bind(_assertThisInitialized(_this));
    _this.onColumnHeaderDragStart = _this.onColumnHeaderDragStart.bind(_assertThisInitialized(_this));
    _this.onColumnHeaderDragOver = _this.onColumnHeaderDragOver.bind(_assertThisInitialized(_this));
    _this.onColumnHeaderDragLeave = _this.onColumnHeaderDragLeave.bind(_assertThisInitialized(_this));
    _this.onColumnHeaderDrop = _this.onColumnHeaderDrop.bind(_assertThisInitialized(_this));
    _this.onColumnResizeStart = _this.onColumnResizeStart.bind(_assertThisInitialized(_this));
    _this.onColumnHeaderCheckboxChange = _this.onColumnHeaderCheckboxChange.bind(_assertThisInitialized(_this));
    _this.allRowsSelected = _this.allRowsSelected.bind(_assertThisInitialized(_this)); // body

    _this.onEditingMetaChange = _this.onEditingMetaChange.bind(_assertThisInitialized(_this)); //paginator

    _this.onPageChange = _this.onPageChange.bind(_assertThisInitialized(_this));
    return _this;
  }

  _createClass(DataTable, [{
    key: "isCustomStateStorage",
    value: function isCustomStateStorage() {
      return this.props.stateStorage === 'custom';
    }
  }, {
    key: "isStateful",
    value: function isStateful() {
      return this.props.stateKey != null || this.isCustomStateStorage();
    }
  }, {
    key: "isVirtualScrollerDisabled",
    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() {
      return ObjectUtils.isNotEmpty(this.getFilters()) || this.props.globalFilter;
    }
  }, {
    key: "getFirst",
    value: function getFirst() {
      return this.props.onPage ? this.props.first : this.state.first;
    }
  }, {
    key: "getRows",
    value: function getRows() {
      return this.props.onPage ? this.props.rows : this.state.rows;
    }
  }, {
    key: "getSortField",
    value: function getSortField() {
      return this.props.onSort ? this.props.sortField : this.state.sortField;
    }
  }, {
    key: "getSortOrder",
    value: function getSortOrder() {
      return this.props.onSort ? this.props.sortOrder : this.state.sortOrder;
    }
  }, {
    key: "getMultiSortMeta",
    value: function getMultiSortMeta() {
      return (this.props.onSort ? this.props.multiSortMeta : this.state.multiSortMeta) || [];
    }
  }, {
    key: "getFilters",
    value: function getFilters() {
      return this.props.onFilter ? this.props.filters : this.state.filters;
    }
  }, {
    key: "getColumnProp",
    value: function getColumnProp(col, prop) {
      return col.props[prop];
    }
  }, {
    key: "getColumns",
    value: function getColumns(ignoreReorderable) {
      var _this2 = this;

      var columns = React.Children.toArray(this.props.children);

      if (!columns) {
        return null;
      }

      if (!ignoreReorderable && this.props.reorderableColumns && this.state.columnOrder) {
        var orderedColumns = this.state.columnOrder.reduce(function (arr, columnKey) {
          var column = _this2.findColumnByKey(columns, columnKey);

          column && arr.push(column);
          return arr;
        }, []);
        return [].concat(_toConsumableArray(orderedColumns), _toConsumableArray(columns.filter(function (col) {
          return orderedColumns.indexOf(col) < 0;
        })));
      }

      return columns;
    }
  }, {
    key: "getStorage",
    value: function getStorage() {
      switch (this.props.stateStorage) {
        case 'local':
          return window.localStorage;

        case 'session':
          return window.sessionStorage;

        case 'custom':
          return null;

        default:
          throw new Error(this.props.stateStorage + ' is not a valid value for the state storage, supported values are "local", "session" and "custom".');
      }
    }
  }, {
    key: "saveState",
    value: function saveState() {
      var state = {};

      if (this.props.paginator) {
        state.first = this.getFirst();
        state.rows = this.getRows();
      }

      var sortField = this.getSortField();

      if (sortField) {
        state.sortField = sortField;
        state.sortOrder = this.getSortOrder();
      }

      var multiSortMeta = this.getMultiSortMeta();

      if (multiSortMeta) {
        state.multiSortMeta = multiSortMeta;
      }

      if (this.hasFilter()) {
        state.filters = this.getFilters();
      }

      if (this.props.resizableColumns) {
        this.saveColumnWidths(state);
      }

      if (this.props.reorderableColumns) {
        state.columnOrder = this.state.columnOrder;
      }

      if (this.props.expandedRows) {
        state.expandedRows = this.props.expandedRows;
      }

      if (this.props.selection && this.props.onSelectionChange) {
        state.selection = this.props.selection;
      }

      if (this.isCustomStateStorage()) {
        if (this.props.customSaveState) {
          this.props.customSaveState(state);
        }
      } else {
        var storage = this.getStorage();

        if (ObjectUtils.isNotEmpty(state)) {
          storage.setItem(this.props.stateKey, JSON.stringify(state));
        }
      }

      if (this.props.onStateSave) {
        this.props.onStateSave(state);
      }
    }
  }, {
    key: "clearState",
    value: function clearState() {
      var storage = this.getStorage();

      if (storage && this.props.stateKey) {
        storage.removeItem(this.props.stateKey);
      }
    }
  }, {
    key: "restoreState",
    value: function restoreState(state) {
      var restoredState = {};

      if (this.isCustomStateStorage()) {
        if (this.props.customRestoreState) {
          restoredState = this.props.customRestoreState();
        }
      } else {
        var storage = this.getStorage();
        var stateString = storage.getItem(this.props.stateKey);
        var dateFormat = /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/;

        var reviver = function reviver(key, value) {
          return typeof value === "string" && dateFormat.test(value) ? new Date(value) : value;
        };

        if (stateString) {
          restoredState = JSON.parse(stateString, reviver);
        }
      }

      this._restoreState(restoredState, state);
    }
  }, {
    key: "restoreTableState",
    value: function restoreTableState(restoredState) {
      var state = this._restoreState(restoredState);

      if (ObjectUtils.isNotEmpty(state)) {
        this.setState(state);
      }
    }
  }, {
    key: "_restoreState",
    value: function _restoreState(restoredState) {
      var _this3 = this;

      var state = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

      if (ObjectUtils.isNotEmpty(restoredState)) {
        if (this.props.paginator) {
          if (this.props.onPage) {
            var getOnPageParams = function getOnPageParams(first, rows) {
              var totalRecords = _this3.getTotalRecords(_this3.processedData());

              var pageCount = Math.ceil(totalRecords / rows) || 1;
              var page = Math.floor(first / rows);
              return {
                first: first,
                rows: rows,
                page: page,
                pageCount: pageCount
              };
            };

            this.props.onPage(this.createEvent(getOnPageParams(restoredState.first, restoredState.rows)));
          } else {
            state.first = restoredState.first;
            state.rows = restoredState.rows;
          }
        }

        if (restoredState.sortField) {
          if (this.props.onSort) {
            this.props.onSort(this.createEvent({
              sortField: restoredState.sortField,
              sortOrder: restoredState.sortOrder
            }));
          } else {
            state.sortField = restoredState.sortField;
            state.sortOrder = restoredState.sortOrder;
          }
        }

        if (restoredState.multiSortMeta) {
          if (this.props.onSort) {
            this.props.onSort(this.createEvent({
              multiSortMeta: restoredState.multiSortMeta
            }));
          } else {
            state.multiSortMeta = restoredState.multiSortMeta;
          }
        }

        if (restoredState.filters) {
          state.d_filters = this.cloneFilters(restoredState.filters);

          if (this.props.onFilter) {
            this.props.onFilter(this.createEvent({
              filters: restoredState.filters
            }));
          } else {
            state.filters = this.cloneFilters(restoredState.filters);
          }
        }

        if (this.props.resizableColumns) {
          this.columnWidthsState = restoredState.columnWidths;
          this.tableWidthState = restoredState.tableWidth;
        }

        if (this.props.reorderableColumns) {
          state.columnOrder = restoredState.columnOrder;
        }

        if (restoredState.expandedRows && this.props.onRowToggle) {
          this.props.onRowToggle({
            data: restoredState.expandedRows
          });
        }

        if (restoredState.selection && this.props.onSelectionChange) {
          this.props.onSelectionChange({
            value: restoredState.selection
          });
        }

        if (this.props.onStateRestore) {
          this.props.onStateRestore(restoredState);
        }
      }

      return state;
    }
  }, {
    key: "saveColumnWidths",
    value: function saveColumnWidths(state) {
      var widths = [];
      var headers = DomHandler.find(this.el, '.p-datatable-thead > tr > th');
      headers.forEach(function (header) {
        return widths.push(DomHandler.getOuterWidth(header));
      });
      state.columnWidths = widths.join(',');

      if (this.props.columnResizeMode === 'expand') {
        state.tableWidth = DomHandler.getOuterWidth(this.table) + 'px';
      }
    }
  }, {
    key: "restoreColumnWidths",
    value: function restoreColumnWidths() {
      var _this4 = this;

      if (this.columnWidthsState) {
        var widths = this.columnWidthsState.split(',');

        if (this.props.columnResizeMode === 'expand' && this.tableWidthState) {
          this.table.style.width = this.tableWidthState;
          this.table.style.minWidth = this.tableWidthState;
          this.el.style.width = this.tableWidthState;
        }

        if (ObjectUtils.isNotEmpty(widths)) {
          this.createStyleElement();
          var innerHTML = '';
          widths.forEach(function (width, index) {
            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;
        }
      }
    }
  }, {
    key: "findParentHeader",
    value: function findParentHeader(element) {
      if (element.nodeName === 'TH') {
        return element;
      } else {
        var parent = element.parentElement;

        while (parent.nodeName !== 'TH') {
          parent = parent.parentElement;
          if (!parent) break;
        }

        return parent;
      }
    }
  }, {
    key: "getGroupRowSortField",
    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 _this6 = this;

      if (this.props.onSelectAllChange) {
        return this.props.selectAll;
      } else {
        var data = this.props.selectionPageOnly ? this.dataToRender(processedData) : processedData;
        var val = this.props.frozenValue ? [].concat(_toConsumableArray(this.props.frozenValue), _toConsumableArray(data)) : data;
        var selectableVal = this.getSelectableData(val);
        return selectableVal && this.props.selection && selectableVal.every(function (sv) {
          return _this6.props.selection.some(function (s) {
            return _this6.isEquals(s, sv);
          });
        });
      }
    }
  }, {
    key: "getSelectionModeInColumn",
    value: function getSelectionModeInColumn(columns) {
      if (columns) {
        var col = columns.find(function (c) {
          return !!c.props.selectionMode;
        });
        return col ? col.props.selectionMode : null;
      }

      return null;
    }
  }, {
    key: "findColumnByKey",
    value: function findColumnByKey(columns, key) {
      return ObjectUtils.isNotEmpty(columns) ? columns.find(function (col) {
        return col.props.columnKey === key || col.props.field === key;
      }) : null;
    }
  }, {
    key: "getTotalRecords",
    value: function getTotalRecords(data) {
      return this.props.lazy ? this.props.totalRecords : data ? data.length : 0;
    }
  }, {
    key: "onEditingMetaChange",
    value: function onEditingMetaChange(e) {
      var rowData = e.rowData,
          field = e.field,
          rowIndex = e.rowIndex,
          editing = e.editing;

      var editingMeta = _objectSpread({}, this.state.editingMeta);

      var meta = editingMeta[rowIndex];

      if (editing) {
        !meta && (meta = editingMeta[rowIndex] = {
          data: _objectSpread({}, rowData),
          fields: []
        });
        meta['fields'].push(field);
      } else if (meta) {
        var fields = meta['fields'].filter(function (f) {
          return f !== field;
        });
        !fields.length ? delete editingMeta[rowIndex] : meta['fields'] = fields;
      }

      this.setState({
        editingMeta: editingMeta
      });
    }
  }, {
    key: "clearEditingMetaData",
    value: function clearEditingMetaData() {
      if (this.props.editMode && ObjectUtils.isNotEmpty(this.state.editingMeta)) {
        this.setState({
          editingMeta: {}
        });
      }
    }
  }, {
    key: "onColumnResizeStart",
    value: function onColumnResizeStart(e) {
      var event = e.originalEvent,
          column = e.column;
      var containerLeft = DomHandler.getOffset(this.el).left;
      this.resizeColumn = column;
      this.resizeColumnElement = event.currentTarget.parentElement;
      this.columnResizing = true;
      this.lastResizeHelperX = event.pageX - containerLeft + this.el.scrollLeft;
      this.bindColumnResizeEvents();
    }
  }, {
    key: "onColumnResize",
    value: function onColumnResize(event) {
      var containerLeft = DomHandler.getOffset(this.el).left;
      DomHandler.addClass(this.el, 'p-unselectable-text');
      this.resizeHelper.style.height = this.el.offsetHeight + 'px';
      this.resizeHelper.style.top = 0 + 'px';
      this.resizeHelper.style.left = event.pageX - containerLeft + this.el.scrollLeft + 'px';
      this.resizeHelper.style.display = 'block';
    }
  }, {
    key: "onColumnResizeEnd",
    value: function onColumnResizeEnd() {
      var delta = this.resizeHelper.offsetLeft - this.lastResizeHelperX;
      var columnWidth = this.resizeColumnElement.offsetWidth;
      var newColumnWidth = columnWidth + delta;
      var minWidth = this.resizeColumnElement.style.minWidth || 15;

      if (columnWidth + delta > parseInt(minWidth, 10)) {
        if (this.props.columnResizeMode === 'fit') {
          var nextColumn = this.resizeColumnElement.nextElementSibling;
          var nextColumnWidth = nextColumn.offsetWidth - delta;

          if (newColumnWidth > 15 && nextColumnWidth > 15) {
            this.resizeTableCells(newColumnWidth, nextColumnWidth);
          }
        } else if (this.props.columnResizeMode === 'expand') {
          var tableWidth = this.table.offsetWidth + delta + 'px';
          this.table.style.width = tableWidth;
          this.table.style.minWidth = tableWidth;
          this.resizeTableCells(newColumnWidth);
        }

        if (this.props.onColumnResizeEnd) {
          this.props.onColumnResizeEnd({
            element: this.resizeColumnElement,
            column: this.resizeColumn,
            delta: delta
          });
        }

        if (this.isStateful()) {
          this.saveState();
        }
      }

      this.resizeHelper.style.display = 'none';
      this.resizeColumn = null;
      this.resizeColumnElement = null;
      DomHandler.removeClass(this.el, 'p-unselectable-text');
      this.unbindColumnResizeEvents();
    }
  }, {
    key: "resizeTableCells",
    value: function resizeTableCells(newColumnWidth, nextColumnWidth) {
      var _this7 = this;

      var widths = [];
      var colIndex = DomHandler.index(this.resizeColumnElement);
      var headers = DomHandler.find(this.table, '.p-datatable-thead > tr > th');
      headers.forEach(function (header) {
        return widths.push(DomHandler.getOuterWidth(header));
      });
      this.destroyStyleElement();
      this.createStyleElement();
      var innerHTML = '';
      widths.forEach(function (width, index) {
        var colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width;
        var style = _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 _this8 = this;

      if (!this.documentColumnResizeListener) {
        this.documentColumnResizeListener = document.addEventListener('mousemove', function (event) {
          if (_this8.columnResizing) {
            _this8.onColumnResize(event);
          }
        });
      }

      if (!this.documentColumnResizeEndListener) {
        this.documentColumnResizeEndListener = document.addEventListener('mouseup', function () {
          if (_this8.columnResizing) {
            _this8.columnResizing = false;

            _this8.onColumnResizeEnd();
          }
        });
      }
    }
  }, {
    key: "unbindColumnResizeEvents",
    value: function unbindColumnResizeEvents() {
      if (this.documentColumnResizeListener) {
        document.removeEventListener('document', this.documentColumnResizeListener);
        this.documentColumnResizeListener = null;
      }

      if (this.documentColumnResizeEndListener) {
        document.removeEventListener('document', this.documentColumnResizeEndListener);
        this.documentColumnResizeEndListener = null;
      }
    }
  }, {
    key: "onColumnHeaderMouseDown",
    value: function onColumnHeaderMouseDown(e) {
      DomHandler.clearSelection();
      var event = e.originalEvent,
          column = e.column;

      if (this.props.reorderableColumns && this.getColumnProp(column, 'reorderable') !== false) {
        if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA' || DomHandler.hasClass(event.target, 'p-column-resizer')) event.currentTarget.draggable = false;else event.currentTarget.draggable = true;
      }
    }
  }, {
    key: "onColumnHeaderCheckboxChange",
    value: function onColumnHeaderCheckboxChange(e, processedData) {
      var _this9 = this;

      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(selection), _toConsumableArray(this.props.frozenValue), _toConsumableArray(data)) : [].concat(_toConsumableArray(selection), _toConsumableArray(data));
          selection = this.getSelectableData(selection);
          this.props.onAllRowsSelect && this.props.onAllRowsSelect({
            originalEvent: originalEvent,
            data: selection,
            type: 'all'
          });
        } else {
          this.props.onAllRowsUnselect && this.props.onAllRowsUnselect({
            originalEvent: originalEvent,
            data: selection,
            type: 'all'
          });
        }

        if (this.props.onSelectionChange) {
          this.props.onSelectionChange({
            originalEvent: originalEvent,
            value: selection,
            type: 'all'
          });
        }
      }
    }
  }, {
    key: "onColumnHeaderDragStart",
    value: function onColumnHeaderDragStart(e) {
      var event = e.originalEvent,
          column = e.column;

      if (this.columnResizing) {
        event.preventDefault();
        return;
      }

      this.colReorderIconWidth = DomHandler.getHiddenElementOuterWidth(this.reorderIndicatorUp);
      this.colReorderIconHeight = DomHandler.getHiddenElementOuterHeight(this.reorderIndicatorUp);
      this.draggedColumn = column;
      this.draggedColumnElement = this.findParentHeader(event.currentTarget);
      event.dataTransfer.setData('text', 'b'); // Firefox requires this to make dragging possible
    }
  }, {
    key: "onColumnHeaderDragOver",
    value: function onColumnHeaderDragOver(e) {
      var event = e.originalEvent;
      var dropHeader = this.findParentHeader(event.currentTarget);

      if (this.props.reorderableColumns && this.draggedColumnElement && dropHeader) {
        event.preventDefault();

        if (this.draggedColumnElement !== dropHeader) {
          var containerOffset = DomHandler.getOffset(this.el);
          var dropHeaderOffset = DomHandler.getOffset(dropHeader);
          var targetLeft = dropHeaderOffset.left - containerOffset.left;
          var columnCenter = dropHeaderOffset.left + dropHeader.offsetWidth / 2;
          this.reorderIndicatorUp.style.top = dropHeaderOffset.top - containerOffset.top - (this.colReorderIconHeight - 1) + 'px';
          this.reorderIndicatorDown.style.top = dropHeaderOffset.top - containerOffset.top + dropHeader.offsetHeight + 'px';

          if (event.pageX > columnCenter) {
            this.reorderIndicatorUp.style.left = targetLeft + dropHeader.offsetWidth - Math.ceil(this.colReorderIconWidth / 2) + 'px';
            this.reorderIndicatorDown.style.left = targetLeft + dropHeader.offsetWidth - Math.ceil(this.colReorderIconWidth / 2) + 'px';
            this.dropPosition = 1;
          } else {
            this.reorderIndicatorUp.style.left = targetLeft - Math.ceil(this.colReorderIconWidth / 2) + 'px';
            this.reorderIndicatorDown.style.left = targetLeft - Math.ceil(this.colReorderIconWidth / 2) + 'px';
            this.dropPosition = -1;
          }

          this.reorderIndicatorUp.style.display = 'block';
          this.reorderIndicatorDown.style.display = 'block';
        }
      }
    }
  }, {
    key: "onColumnHeaderDragLeave",
    value: function onColumnHeaderDragLeave(e) {
      var event = e.originalEvent;

      if (this.props.reorderableColumns && this.draggedColumnElement) {
        event.preventDefault();
        this.reorderIndicatorUp.style.display = 'none';
        this.reorderIndicatorDown.style.display = 'none';
      }
    }
  }, {
    key: "onColumnHeaderDrop",
    value: function onColumnHeaderDrop(e) {
      var _this10 = this;

      var event = e.originalEvent,
          column = e.column;
      event.preventDefault();

      if (this.draggedColumnElement) {
        var dragIndex = DomHandler.index(this.draggedColumnElement);
        var dropIndex = DomHandler.index(this.findParentHeader(event.currentTarget));
        var allowDrop = dragIndex !== dropIndex;

        if (allowDrop && (dropIndex - dragIndex === 1 && this.dropPosition === -1 || dragIndex - dropIndex === 1 && this.dropPosition === 1)) {
          allowDrop = false;
        }

        if (allowDrop) {
          var columns = this.getColumns();

          var isSameColumn = function isSameColumn(col1, col2) {
            return col1.props.columnKey || col2.props.columnKey ? ObjectUtils.equals(col1.props, col2.props, 'columnKey') : ObjectUtils.equals(col1.props, col2.props, 'field');
          };

          var dragColIndex = columns.findIndex(function (child) {
            return isSameColumn(child, _this10.draggedColumn);
          });
          var dropColIndex = columns.findIndex(function (child) {
            return isSameColumn(child, column);
          });

          if (dropColIndex < dragColIndex && this.dropPosition === 1) {
            dropColIndex++;
          }

          if (dropColIndex > dragColIndex && this.dropPosition === -1) {
            dropColIndex--;
          }

          ObjectUtils.reorderArray(columns, dragColIndex, dropColIndex);
          var columnOrder = columns.reduce(function (orders, col) {
            orders.push(col.props.columnKey || col.props.field);
            return orders;
          }, []);
          this.setState({
            columnOrder: columnOrder
          });

          if (this.props.onColReorder) {
            this.props.onColReorder({
              originalEvent: event,
              dragIndex: dragColIndex,
              dropIndex: dropColIndex,
              columns: columns
            });
          }
        }

        this.reorderIndicatorUp.style.display = 'none';
        this.reorderIndicatorDown.style.display = 'none';
        this.draggedColumnElement.draggable = false;
        this.draggedColumnElement = null;
        this.draggedColumn = null;
        this.dropPosition = null;
      }
    }
  }, {
    key: "createStyleElement",
    value: function createStyleElement() {
      this.styleElement = DomHandler.createInlineStyle(PrimeReact.nonce);
    }
  }, {
    key: "createResponsiveStyle",
    value: function createResponsiveStyle() {
      if (!this.responsiveStyleElement) {
        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() {
      this.responsiveStyleElement = DomHandler.removeInlineStyle(this.responsiveStyleElement);
    }
  }, {
    key: "destroyStyleElement",
    value: function destroyStyleElement() {
      this.styleElement = DomHandler.removeInlineStyle(this.styleElement);
    }
  }, {
    key: "onPageChange",
    value: function onPageChange(e) {
      this.clearEditingMetaData();
      if (this.props.onPage) this.props.onPage(this.createEvent(e));else this.setState({
        first: e.first,
        rows: e.rows
      });

      if (this.props.onValueChange) {
        this.props.onValueChange(this.processedData());
      }
    }
  }, {
    key: "onSortChange",
    value: function onSortChange(e) {
      this.clearEditingMetaData();
      var event = e.originalEvent,
          column = e.column,
          sortableDisabledFields = e.sortableDisabledFields;
      var sortField = column.props.sortField || column.props.field;
      var sortOrder = this.props.defaultSortOrder;
      var multiSortMeta;
      var eventMeta;
      this.columnSortable = column.props.sortable;
      this.columnSortFunction = column.props.sortFunction;
      this.columnField = column.props.sortField;

      if (this.props.sortMode === 'multiple') {
        var metaKey = event.metaKey || event.ctrlKey;
        multiSortMeta = _toConsumableArray(this.getMultiSortMeta());
        var sortMeta = multiSortMeta.find(function (sortMeta) {
          return sortMeta.field === sortField;
        });
        sortOrder = sortMeta ? this.getCalculatedSortOrder(sortMeta.order) : sortOrder;
        var newMetaData = {
          field: sortField,
          order: sortOrder
        };

        if (sortOrder) {
          multiSortMeta = metaKey ? multiSortMeta : multiSortMeta.filter(function (meta) {
            return sortableDisabledFields.some(function (field) {
              return field === meta.field;
            });
          });
          this.addSortMeta(newMetaData, multiSortMeta);
        } else if (this.props.removableSort) {
          this.removeSortMeta(newMetaData, multiSortMeta);
        }

        eventMeta = {
          multiSortMeta: multiSortMeta
        };
      } else {
        sortOrder = this.getSortField() === sortField ? this.getCalculatedSortOrder(this.getSortOrder()) : sortOrder;

        if (this.props.removableSort) {
          sortField = sortOrder ? sortField : null;
        }

        eventMeta = {
          sortField: sortField,
          sortOrder: sortOrder
        };
      }

      if (this.props.onSort) {
        this.props.onSort(this.createEvent(eventMeta));
      } else {
        eventMeta.first = 0;
        this.setState(eventMeta);
      }

      if (this.props.onValueChange) {
        this.props.onValueChange(this.processedData({
          sortField: sortField,
          sortOrder: sortOrder,
          multiSortMeta: multiSortMeta
        }));
      }
    }
  }, {
    key: "getCalculatedSortOrder",
    value: function getCalculatedSortOrder(currentOrder) {
      return this.props.removableSort ? this.props.defaultSortOrder === currentOrder ? currentOrder * -1 : 0 : currentOrder * -1;
    }
  }, {
    key: "compareValuesOnSort",
    value: function compareValuesOnSort(value1, value2) {
      var result = null;
      if (value1 == null && value2 != null) result = -1;else if (value1 != null && value2 == null) result = 1;else if (value1 == null && value2 == null) result = 0;else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2, undefined, {
        numeric: true
      });else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
      return result;
    }
  }, {
    key: "addSortMeta",
    value: function addSortMeta(meta, multiSortMeta) {
      var index = multiSortMeta.findIndex(function (sortMeta) {
        return sortMeta.field === meta.field;
      });
      if (index >= 0) multiSortMeta[index] = meta;else multiSortMeta.push(meta);
    }
  }, {
    key: "removeSortMeta",
    value: function removeSortMeta(meta, multiSortMeta) {
      var index = multiSortMeta.findIndex(function (sortMeta) {
        return sortMeta.field === meta.field;
      });

      if (index >= 0) {
        multiSortMeta.splice(index, 1);
      }

      multiSortMeta = multiSortMeta.length > 0 ? multiSortMeta : null;
    }
  }, {
    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,
          order: this.props.sortOrder || this.props.defaultSortOrder
        }];
        this.props.sortField !== field && multiSortMeta.push({
          field: field,
          order: order
        });
        return this.sortMultiple(data, multiSortMeta);
      }

      var value = _toConsumableArray(data);

      if (this.columnSortable && this.columnSortFunction) {
        value = this.columnSortFunction({
          field: field,
          order: order
        });
      } else {
        value.sort(function (data1, data2) {
          var value1 = ObjectUtils.resolveFieldData(data1, field);
          var value2 = ObjectUtils.resolveFieldData(data2, field);

          var result = _this11.compareValuesOnSort(value1, value2);

          return order * result;
        });
      }

      return value;
    }
  }, {
    key: "sortMultiple",
    value: function sortMultiple(data) {
      var _this12 = this;

      var multiSortMeta = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];

      if (this.props.groupRowsBy && (this.groupRowsSortMeta || multiSortMeta.length && this.props.groupRowsBy === multiSortMeta[0].field)) {
        var firstSortMeta = multiSortMeta[0];
        !this.groupRowsSortMeta && (this.groupRowsSortMeta = firstSortMeta);

        if (firstSortMeta.field !== this.groupRowsSortMeta.field) {
          multiSortMeta = [this.groupRowsSortMeta].concat(_toConsumableArray(multiSortMeta));
        }
      }

      var value = _toConsumableArray(data);

      if (this.columnSortable && this.columnSortFunction) {
        var meta = multiSortMeta.find(function (meta) {
          return meta.field === _this12.columnField;
        });
        var field = this.columnField;
        var order = meta ? meta.order : this.defaultSortOrder;
        value = this.columnSortFunction({
          field: field,
          order: order
        });
      } else {
        value.sort(function (data1, data2) {
          return _this12.multisortField(data1, data2, multiSortMeta, 0);
        });
      }

      return value;
    }
  }, {
    key: "multisortField",
    value: function multisortField(data1, data2, multiSortMeta, index) {
      var value1 = ObjectUtils.resolveFieldData(data1, multiSortMeta[index].field);
      var value2 = ObjectUtils.resolveFieldData(data2, multiSortMeta[index].field);

      if (value1 === value2) {
        return multiSortMeta.length - 1 > index ? this.multisortField(data1, data2, multiSortMeta, index + 1) : 0;
      }

      var result = this.compareValuesOnSort(value1, value2);
      return multiSortMeta[index].order * result;
    }
  }, {
    key: "onFilterChange",
    value: function onFilterChange(filters) {
      this.clearEditingMetaData();
      this.setState({
        d_filters: filters
      });
    }
  }, {
    key: "onFilterApply",
    value: function onFilterApply() {
      var _this13 = this;

      clearTimeout(this.filterTimeout);
      this.filterTimeout = setTimeout(function () {
        var filters = _this13.cloneFilters(_this13.state.d_filters);

        if (_this13.props.onFilter) {
          _this13.props.onFilter(_this13.createEvent({
            filters: filters
          }));
        } else {
          _this13.setState({
            first: 0,
            filters: filters
          });
        }

        if (_this13.props.onValueChange) {
          _this13.props.onValueChange(_this13.processedData({
            filters: filters
          }));
        }
      }, this.props.filterDelay);
    }
  }, {
    key: "filterLocal",
    value: function filterLocal(data, filters) {
      if (!data) return;
      filters = filters || {};
      var columns = this.getColumns();
      var filteredValue = [];
      var isGlobalFilter = filters['global'] || this.props.globalFilter;
      var globalFilterFieldsArray;

      if (isGlobalFilter) {
        globalFilterFieldsArray = this.props.globalFilterFields || columns.filter(function (col) {
          return !col.props.excludeGlobalFilter;
        }).map(function (col) {
          return col.props.filterField || col.props.field;
        });
      }

      for (var i = 0; i < data.length; i++) {
        var localMatch = true;
        var globalMatch = false;
        var localFiltered = false;

        for (var prop in filters) {
          if (Object.prototype.hasOwnProperty.call(filters, prop) && prop !== 'global') {
            localFiltered = true;
            var filterField = prop;
            var filterMeta = filters[filterField];

            if (filterMeta.operator) {
              for (var j = 0; j < filterMeta.constraints.length; j++) {
                var filterConstraint = filterMeta.constraints[j];
                localMatch = this.executeLocalFilter(filterField, data[i], filterConstraint, j);

                if (filterMeta.operator === FilterOperator.OR && localMatch || filterMeta.operator === FilterOperator.AND && !localMatch) {
                  break;
                }
              }
            } else {
              localMatch = this.executeLocalFilter(filterField, data[i], filterMeta, 0);
            }

            if (!localMatch) {
              break;
            }
          }
        }

        if (isGlobalFilter && !globalMatch && globalFilterFieldsArray) {
          for (var _j = 0; _j < globalFilterFieldsArray.length; _j++) {
            var globalFilterField = globalFilterFieldsArray[_j];
            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);

            if (globalMatch) {
              break;
            }
          }
        }

        var matches = void 0;

        if (isGlobalFilter) {
          matches = localFiltered ? localFiltered && localMatch && globalMatch : globalMatch;
        } else {
          matches = localFiltered && localMatch;
        }

        if (matches) {
          filteredValue.push(data[i]);
        }
      }

      if (filteredValue.length === this.props.value.length) {
        filteredValue = data;
      }

      return filteredValue;
    }
  }, {
    key: "executeLocalFilter",
    value: function executeLocalFilter(field, rowData, filterMeta, index) {
      var filterValue = filterMeta.value;
      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);
    }
  }, {
    key: "cloneFilters",
    value: function cloneFilters(filters) {
      var _this14 = this;

      filters = filters || this.props.filters;
      var cloned = {};

      if (filters) {
        Object.entries(filters).forEach(function (_ref) {
          var _ref2 = _slicedToArray(_ref, 2),
              prop = _ref2[0],
              value = _ref2[1];

          cloned[prop] = value.operator ? {
            operator: value.operator,
            constraints: value.constraints.map(function (constraint) {
              return _objectSpread({}, constraint);
            })
          } : _objectSpread({}, value);
        });
      } else {
        var columns = this.getColumns();
        cloned = columns.reduce(function (_filters, col) {
          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
          };

          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];
              }

              return filterFunction.apply(void 0, args.concat([{
                column: col
              }]));
            });
          }

          _filters[field] = _this14.props.filterDisplay === 'menu' ? {
            operator: FilterOperator.AND,
            constraints: [constraint]
          } : constraint;
          return _filters;
        }, {});
      }

      return cloned;
    }
  }, {
    key: "filter",
    value: function filter(value, field, matchMode) {
      var index = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;

      var filters = _objectSpread({}, this.state.d_filters);

      var meta = filters[field];
      var constraint = meta && meta.operator ? meta.constraints[index] : meta;
      constraint = meta ? {
        value: value,
        matchMode: matchMode || constraint.matchMode
      } : {
        value: value,
        matchMode: matchMode
      };
      this.props.filterDisplay === 'menu' && meta && meta.operator ? filters[field].constraints[index] = constraint : filters[field] = constraint;
      this.setState({
        d_filters: filters
      }, this.onFilterApply);
    }
  }, {
    key: "reset",
    value: function reset() {
      var state = {
        d_rows: this.props.rows,
        d_filters: this.cloneFilters(this.props.filters),
        groupRowsSortMeta: null,
        editingMeta: {}
      };

      if (!this.props.onPage) {
        state.first = this.props.first;
        state.rows = this.props.rows;
      }

      if (!this.props.onSort) {
        state.sortField = this.props.sortField;
        state.sortOrder = this.props.sortOrder;
        state.multiSortMeta = this.props.multiSortMeta;
      }

      if (!this.props.onFilter) {
        state.filters = this.props.filters;
      }

      this.resetColumnOrder();
      this.setState(state);
    }
  }, {
    key: "resetColumnOrder",
    value: function resetColumnOrder() {
      var columns = this.getColumns(true);
      var columnOrder = [];

      if (columns) {
        columnOrder = columns.reduce(function (orders, col) {
          orders.push(col.props.columnKey || col.props.field);
          return orders;
        }, []);
      }

      this.setState({
        columnOrder: columnOrder
      });
    }
  }, {
    key: "exportCSV",
    value: function exportCSV(options) {
      var _this15 = this;

      var data;
      var csv = "\uFEFF";
      var columns = this.getColumns();

      if (options && options.selectionOnly) {
        data = this.props.selection || [];
      } else {
        data = [].concat(_toConsumableArray(this.props.frozenValue || []), _toConsumableArray(this.processedData() || []));
      } //headers


      columns.forEach(function (column, i) {
        var _column$props = column.props,
            field = _column$props.field,
            header = _column$props.header,
            exportable = _column$props.exportable;

        if (exportable && field) {
          csv += '"' + (header || field) + '"';

          if (i < columns.length - 1) {
            csv += _this15.props.csvSeparator;
          }
        }
      }); //body

      data.forEach(function (record) {
        csv += '\n';
        columns.forEach(function (column, i) {
          var _column$props2 = column.props,
              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 = _this15.props.exportFunction ? _this15.props.exportFunction({
                data: cellData,
                field: field,
                rowData: record,
                column: column
              }) : String(cellData).replace(/"/g, '""');
            } else cellData = '';

            csv += '"' + cellData + '"';

            if (i < columns.length - 1) {
              csv += _this15.props.csvSeparator;
            }
          }
        });
      });
      DomHandler.exportCSV(csv, this.props.exportFilename);
    }
  }, {
    key: "closeEditingCell",
    value: function closeEditingCell() {
      if (this.props.editMode !== "row") {
        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) {
      var data = this.props.value || [];

      if (!this.props.lazy) {
        if (data && data.length) {
          var filters = localState && localState.filters || this.getFilters();
          var sortField = localState && localState.sortField || this.getSortField();
          var sortOrder = localState && localState.sortOrder || this.getSortOrder();
          var multiSortMeta = localState && localState.multiSortMeta || this.getMultiSortMeta();

          if (ObjectUtils.isNotEmpty(filters) || this.props.globalFilter) {
            data = this.filterLocal(data, filters);
          }

          if (sortField || ObjectUtils.isNotEmpty(multiSortMeta)) {
            if (this.props.sortMode === 'single') data = this.sortSingle(data, sortField, sortOrder);else if (this.props.sortMode === 'multiple') data = this.sortMultiple(data, multiSortMeta);
          }
        }
      }

      return data;
    }
  }, {
    key: "dataToRender",
    value: function dataToRender(data) {
      if (data && this.props.paginator) {
        var first = this.props.lazy ? 0 : this.getFirst();
        return data.slice(first, first + this.getRows());
      }

      return data;
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this16 = this;

      this.setState({
        attributeSelector: UniqueComponentId()
      }, function () {
        _this16.el.setAttribute(_this16.state.attributeSelector, '');
      });

      if (this.props.responsiveLayout === 'stack' && !this.props.scrollable) {
        this.createResponsiveStyle();
      }

      if (this.isStateful()) {
        this.setState(this.restoreState(this.state));

        if (this.props.resizableColumns) {
          this.restoreColumnWidths();
        }
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps, prevState) {
      if (this.isStateful()) {
        this.saveState();
      }

      if (prevProps.responsiveLayout !== this.props.responsiveLayout) {
        this.destroyResponsiveStyle();

        if (this.props.responsiveLayout === 'stack' && !this.props.scrollable) {
          this.createResponsiveStyle();
        }
      }

      if (prevProps.filters !== this.props.filters) {
        this.setState({
          filters: this.cloneFilters(this.props.filters),
          d_filters: this.cloneFilters(this.props.filters)
        });
      }

      if (prevProps.globalFilter !== this.props.globalFilter) {
        this.filter(this.props.globalFilter, 'global', 'contains');
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.unbindColumnResizeEvents();
      this.destroyStyleElement();
      this.destroyResponsiveStyle();
    }
  }, {
    key: "renderLoader",
    value: function renderLoader() {
      if (this.props.loading) {
        var iconClassName = classNames('p-datatable-loading-icon pi-spin', this.props.loadingIcon);
        return /*#__PURE__*/React.createElement("div", {
          className: "p-datatable-loading-overlay p-component-overlay"
        }, /*#__PURE__*/React.createElement("i", {
          className: iconClassName
        }));
      }

      return null;
    }
  }, {
    key: "renderHeader",
    value: function renderHeader() {
      if (this.props.header) {
        var content = ObjectUtils.getJSXElement(this.props.header, {
          props: this.props
        });
        return /*#__PURE__*/React.createElement("div", {
          className: "p-datatable-header"
        }, content);
      }

      return null;
    }
  }, {
    key: "renderTableHeader",
    value: function renderTableHeader(options, empty) {
      var sortField = this.getSortField();
      var sortOrder = this.getSortOrder();

      var multiSortMeta = _toConsumableArray(this.getMultiSortMeta());

      var groupRowSortField = this.getGroupRowSortField();
      var filters = this.state.d_filters;
      var filtersStore = this.getFilters();
      var processedData = options.items,
          columns = options.columns;
      return /*#__PURE__*/React.createElement(TableHeader, {
        value: processedData,
        tableProps: this.props,
        columns: columns,
        tabIndex: this.props.tabIndex,
        empty: empty,
        headerColumnGroup: this.props.headerColumnGroup,
        resizableColumns: this.props.resizableColumns,
        onColumnResizeStart: this.onColumnResizeStart,
        onColumnResizerClick: this.props.onColumnResizerClick,
        onColumnResizerDoubleClick: this.props.onColumnResizerDoubleClick,
        sortMode: this.props.sortMode,
        sortField: sortField,
        sortOrder: sortOrder,
        multiSortMeta: multiSortMeta,
        groupRowsBy: this.props.groupRowsBy,
        groupRowSortField: groupRowSortField,
        onSortChange: this.onSortChange,
        filterDisplay: this.props.filterDisplay,
        filters: filters,
        filtersStore: filtersStore,
        onFilterChange: this.onFilterChange,
        onFilterApply: this.onFilterApply,
        showSelectAll: this.props.showSelectAll,
        allRowsSelected: this.allRowsSelected,
        onColumnCheckboxChange: this.onColumnHeaderCheckboxChange,
        onColumnMouseDown: this.onColumnHeaderMouseDown,
        onColumnDragStart: this.onColumnHeaderDragStart,
        onColumnDragOver: this.onColumnHeaderDragOver,
        onColumnDragLeave: this.onColumnHeaderDragLeave,
        onColumnDrop: this.onColumnHeaderDrop,
        rowGroupMode: this.props.rowGroupMode,
        reorderableColumns: this.props.reorderableColumns
      });
    }
  }, {
    key: "renderTableBody",
    value: function renderTableBody(options, selectionModeInColumn, empty, isVirtualScrollerDisabled) {
      var tableSelector = this.state.attributeSelector;
      var first = this.getFirst();
      var editingMeta = this.state.editingMeta;
      var rows = options.rows,
          columns = options.columns,
          contentRef = options.contentRef,
          className = options.className;
      var frozenBody = this.props.frozenValue && /*#__PURE__*/React.createElement(TableBody, {
        value: this.props.frozenValue,
        className: "p-datatable-frozen-tbody",
        frozenRow: true,
        tableProps: this.props,
        tableSelector: tableSelector,
        columns: columns,
        selectionModeInColumn: selectionModeInColumn,
        first: first,
        editingMeta: editingMeta,
        onEditingMetaChange: this.onEditingMetaChange,
        tabIndex: this.props.tabIndex,
        onRowClick: this.props.onRowClick,
        onRowDoubleClick: this.props.onRowDoubleClick,
        onCellClick: this.props.onCellClick,
        selection: this.props.selection,
        onSelectionChange: this.props.onSelectionChange,
        lazy: this.props.lazy,
        paginator: this.props.paginator,
        onCellSelect: this.props.onCellSelect,
        onCellUnselect: this.props.onCellUnselect,
        onRowSelect: this.props.onRowSelect,
        onRowUnselect: this.props.onRowUnselect,
        dragSelection: this.props.dragSelection,
        onContextMenu: this.props.onContextMenu,
        onContextMenuSelectionChange: this.props.onContextMenuSelectionChange,
        metaKeySelection: this.props.metaKeySelection,
        selectionMode: this.props.selectionMode,
        cellSelection: this.props.cellSelection,
        contextMenuSelection: this.props.contextMenuSelection,
        dataKey: this.props.dataKey,
        expandedRows: this.props.expandedRows,
        onRowCollapse: this.props.onRowCollapse,
        onRowExpand: this.props.onRowExpand,
        onRowToggle: this.props.onRowToggle,
        editMode: this.props.editMode,
        editingRows: this.props.editingRows,
        onRowReorder: this.props.onRowReorder,
        scrollable: this.props.scrollable,
        rowGroupMode: this.props.rowGroupMode,
        groupRowsBy: this.props.groupRowsBy,
        expandableRowGroups: this.props.expandableRowGroups,
        loading: this.props.loading,
        emptyMessage: this.props.emptyMessage,
        rowGroupHeaderTemplate: this.props.rowGroupHeaderTemplate,
        rowExpansionTemplate: this.props.rowExpansionTemplate,
        rowGroupFooterTemplate: this.props.rowGroupFooterTemplate,
        onRowEditChange: this.props.onRowEditChange,
        compareSelectionBy: this.props.compareSelectionBy,
        selectOnEdit: this.props.selectOnEdit,
        onRowEditInit: this.props.onRowEditInit,
        rowEditValidator: this.props.rowEditValidator,
        onRowEditSave: this.props.onRowEditSave,
        onRowEditComplete: this.props.onRowEditComplete,
        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,
        collapsedRowIcon: this.props.collapsedRowIcon,
        rowClassName: this.props.rowClassName,
        isVirtualScrollerDisabled: true
      });
      var body = /*#__PURE__*/React.createElement(TableBody, {
        value: this.dataToRender(rows),
        className: className,
        empty: empty,
        frozenRow: false,
        tableProps: this.props,
        tableSelector: tableSelector,
        columns: columns,
        selectionModeInColumn: selectionModeInColumn,
        first: first,
        editingMeta: editingMeta,
        onEditingMetaChange: this.onEditingMetaChange,
        tabIndex: this.props.tabIndex,
        onRowClick: this.props.onRowClick,
        onRowDoubleClick: this.props.onRowDoubleClick,
        onCellClick: this.props.onCellClick,
        selection: this.props.selection,
        onSelectionChange: this.props.onSelectionChange,
        lazy: this.props.lazy,
        paginator: this.props.paginator,
        onCellSelect: this.props.onCellSelect,
        onCellUnselect: this.props.onCellUnselect,
        onRowSelect: this.props.onRowSelect,
        onRowUnselect: this.props.onRowUnselect,
        dragSelection: this.props.dragSelection,
        onContextMenu: this.props.onContextMenu,
        onContextMenuSelectionChange: this.props.onContextMenuSelectionChange,
        metaKeySelection: this.props.metaKeySelection,
        selectionMode: this.props.selectionMode,
        cellSelection: this.props.cellSelection,
        contextMenuSelection: this.props.contextMenuSelection,
        dataKey: this.props.dataKey,
        expandedRows: this.props.expandedRows,
        onRowCollapse: this.props.onRowCollapse,
        onRowExpand: this.props.onRowExpand,
        onRowToggle: this.props.onRowToggle,
        editMode: this.props.editMode,
        editingRows: this.props.editingRows,
        onRowReorder: this.props.onRowReorder,
        scrollable: this.props.scrollable,
        rowGroupMode: this.props.rowGroupMode,
        groupRowsBy: this.props.groupRowsBy,
        expandableRowGroups: this.props.expandableRowGroups,
        loading: this.props.loading,
        emptyMessage: this.props.emptyMessage,
        rowGroupHeaderTemplate: this.props.rowGroupHeaderTemplate,
        rowExpansionTemplate: this.props.rowExpansionTemplate,
        rowGroupFooterTemplate: this.props.rowGroupFooterTemplate,
        onRowEditChange: this.props.onRowEditChange,
        compareSelectionBy: this.props.compareSelectionBy,
        selectOnEdit: this.props.selectOnEdit,
        onRowEditInit: this.props.onRowEditInit,
        rowEditValidator: this.props.rowEditValidator,
        onRowEditSave: this.props.onRowEditSave,
        onRowEditComplete: this.props.onRowEditComplete,
        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,
        collapsedRowIcon: this.props.collapsedRowIcon,
        rowClassName: this.props.rowClassName,
        virtualScrollerContentRef: contentRef,
        virtualScrollerOptions: options,
        isVirtualScrollerDisabled: isVirtualScrollerDisabled
      });
      return /*#__PURE__*/React.createElement(React.Fragment, null, frozenBody, body);
    }
  }, {
    key: "renderTableFooter",
    value: function renderTableFooter(options) {
      var columns = options.columns;
      return /*#__PURE__*/React.createElement(TableFooter, {
        tableProps: this.props,
        columns: columns,
        footerColumnGroup: this.props.footerColumnGroup
      });
    }
  }, {
    key: "renderContent",
    value: function renderContent(processedData, columns, selectionModeInColumn, empty) {
      var _this17 = this;

      if (!columns) return;
      var isVirtualScrollerDisabled = this.isVirtualScrollerDisabled();
      var virtualScrollerOptions = this.props.virtualScrollerOptions || {};
      return /*#__PURE__*/React.createElement("div", {
        className: "p-datatable-wrapper",
        style: {
          maxHeight: isVirtualScrollerDisabled ? this.props.scrollHeight : null
        }
      }, /*#__PURE__*/React.createElement(VirtualScroller, _extends({}, virtualScrollerOptions, {
        items: processedData,
        columns: columns,
        scrollHeight: this.props.scrollHeight,
        disabled: isVirtualScrollerDisabled,
        loaderDisabled: true,
        showSpacer: false,
        contentTemplate: function contentTemplate(options) {
          var ref = function ref(el) {
            _this17.table = el;
            options.spacerRef && options.spacerRef(el);
          };

          var tableClassName = classNames('p-datatable-table', _this17.props.tableClassName);

          var tableHeader = _this17.renderTableHeader(options, empty);

          var tableBody = _this17.renderTableBody(options, selectionModeInColumn, empty, isVirtualScrollerDisabled);

          var tableFooter = _this17.renderTableFooter(options);

          return /*#__PURE__*/React.createElement("table", {
            ref: ref,
            style: _this17.props.tableStyle,
            className: tableClassName,
            role: "table"
          }, tableHeader, tableBody, tableFooter);
        }
      })));
    }
  }, {
    key: "renderFooter",
    value: function renderFooter() {
      if (this.props.footer) {
        var content = ObjectUtils.getJSXElement(this.props.footer, {
          props: this.props
        });
        return /*#__PURE__*/React.createElement("div", {
          className: "p-datatable-footer"
        }, content);
      }

      return null;
    }
  }, {
    key: "renderPaginator",
    value: function renderPaginator(position, totalRecords) {
      var className = classNames('p-paginator-' + position, this.props.paginatorClassName);
      return /*#__PURE__*/React.createElement(Paginator, {
        first: this.getFirst(),
        rows: this.getRows(),
        pageLinkSize: this.props.pageLinkSize,
        className: className,
        onPageChange: this.onPageChange,
        template: this.props.paginatorTemplate,
        totalRecords: totalRecords,
        rowsPerPageOptions: this.props.rowsPerPageOptions,
        currentPageReportTemplate: this.props.currentPageReportTemplate,
        leftContent: this.props.paginatorLeft,
        rightContent: this.props.paginatorRight,
        alwaysShow: this.props.alwaysShowPaginator,
        dropdownAppendTo: this.props.paginatorDropdownAppendTo
      });
    }
  }, {
    key: "renderPaginatorTop",
    value: function renderPaginatorTop(totalRecords) {
      if (this.props.paginator && this.props.paginatorPosition !== 'bottom') {
        return this.renderPaginator('top', totalRecords);
      }

      return null;
    }
  }, {
    key: "renderPaginatorBottom",
    value: function renderPaginatorBottom(totalRecords) {
      if (this.props.paginator && this.props.paginatorPosition !== 'top') {
        return this.renderPaginator('bottom', totalRecords);
      }

      return null;
    }
  }, {
    key: "renderResizeHelper",
    value: function renderResizeHelper() {
      var _this18 = this;

      if (this.props.resizableColumns) {
        return /*#__PURE__*/React.createElement("div", {
          ref: function ref(el) {
            return _this18.resizeHelper = el;
          },
          className: "p-column-resizer-helper",
          style: {
            display: 'none'
          }
        });
      }

      return null;
    }
  }, {
    key: "renderReorderIndicators",
    value: function renderReorderIndicators() {
      var _this19 = this;

      if (this.props.reorderableColumns) {
        var style = {
          position: 'absolute',
          display: 'none'
        };
        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
          ref: function ref(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 _this19.reorderIndicatorDown = el;
          },
          className: "pi pi-arrow-up p-datatable-reorder-indicator-down",
          style: style
        }));
      }

      return null;
    }
  }, {
    key: "render",
    value: function render() {
      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,
        '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',
        'p-datatable-scrollable': this.props.scrollable,
        'p-datatable-scrollable-vertical': this.props.scrollable && this.props.scrollDirection === 'vertical',
        'p-datatable-scrollable-horizontal': this.props.scrollable && this.props.scrollDirection === 'horizontal',
        'p-datatable-scrollable-both': this.props.scrollable && this.props.scrollDirection === 'both',
        'p-datatable-flex-scrollable': this.props.scrollable && this.props.scrollHeight === 'flex',
        'p-datatable-responsive-stack': this.props.responsiveLayout === 'stack',
        'p-datatable-responsive-scroll': this.props.responsiveLayout === 'scroll',
        'p-datatable-striped': this.props.stripedRows,
        'p-datatable-gridlines': this.props.showGridlines,
        'p-datatable-grouped-header': this.props.headerColumnGroup != null,
        'p-datatable-grouped-footer': this.props.footerColumnGroup != null,
        'p-datatable-sm': this.props.size === 'small',
        'p-datatable-lg': this.props.size === 'large'
      }, this.props.className);
      var loader = this.renderLoader();
      var header = this.renderHeader();
      var paginatorTop = this.renderPaginatorTop(totalRecords);
      var content = this.renderContent(processedData, columns, selectionModeInColumn, empty);
      var paginatorBottom = this.renderPaginatorBottom(totalRecords);
      var footer = this.renderFooter();
      var resizeHelper = this.renderResizeHelper();
      var reorderIndicators = this.renderReorderIndicators();
      return /*#__PURE__*/React.createElement("div", {
        ref: function ref(el) {
          return _this20.el = el;
        },
        id: this.props.id,
        className: className,
        style: this.props.style,
        "data-scrollselectors": ".p-datatable-wrapper"
      }, loader, header, paginatorTop, content, paginatorBottom, footer, resizeHelper, reorderIndicators);
    }
  }], [{
    key: "getDerivedStateFromProps",
    value: function getDerivedStateFromProps(nextProps, prevState) {
      if (nextProps.rows !== prevState.d_rows && !nextProps.onPage) {
        return {
          rows: nextProps.rows,
          d_rows: nextProps.rows
        };
      }

      return null;
    }
  }]);

  return DataTable;
}(Component);

_defineProperty(DataTable, "defaultProps", {
  id: null,
  value: null,
  header: null,
  footer: null,
  style: null,
  className: null,
  tableStyle: null,
  tableClassName: null,
  paginator: false,
  paginatorPosition: 'bottom',
  alwaysShowPaginator: true,
  paginatorClassName: null,
  paginatorTemplate: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown',
  paginatorLeft: null,
  paginatorRight: null,
  paginatorDropdownAppendTo: null,
  pageLinkSize: 5,
  rowsPerPageOptions: null,
  currentPageReportTemplate: '({currentPage} of {totalPages})',
  first: 0,
  rows: null,
  totalRecords: null,
  lazy: false,
  sortField: null,
  sortOrder: null,
  multiSortMeta: null,
  sortMode: 'single',
  defaultSortOrder: 1,
  removableSort: false,
  emptyMessage: null,
  selectionMode: null,
  dragSelection: false,
  cellSelection: false,
  selection: null,
  onSelectionChange: null,
  contextMenuSelection: null,
  onContextMenuSelectionChange: null,
  compareSelectionBy: 'deepEquals',
  dataKey: null,
  metaKeySelection: true,
  selectOnEdit: true,
  selectionPageOnly: false,
  selectionAutoFocus: true,
  showSelectAll: true,
  selectAll: false,
  onSelectAllChange: null,
  headerColumnGroup: null,
  footerColumnGroup: null,
  rowExpansionTemplate: null,
  expandedRows: null,
  onRowToggle: null,
  resizableColumns: false,
  columnResizeMode: 'fit',
  reorderableColumns: false,
  filters: null,
  globalFilter: null,
  filterDelay: 300,
  filterLocale: undefined,
  scrollable: false,
  scrollHeight: null,
  scrollDirection: 'vertical',
  virtualScrollerOptions: null,
  frozenWidth: null,
  frozenValue: null,
  csvSeparator: ',',
  exportFilename: 'download',
  rowGroupMode: null,
  autoLayout: false,
  rowClassName: null,
  cellClassName: null,
  rowGroupHeaderTemplate: null,
  rowGroupFooterTemplate: null,
  loading: false,
  loadingIcon: 'pi pi-spinner',
  tabIndex: 0,
  stateKey: null,
  stateStorage: 'session',
  groupRowsBy: null,
  editMode: 'cell',
  editingRows: null,
  expandableRowGroups: false,
  rowHover: false,
  showGridlines: false,
  stripedRows: false,
  size: 'normal',
  responsiveLayout: 'stack',
  breakpoint: '960px',
  filterDisplay: 'menu',
  expandedRowIcon: 'pi pi-chevron-down',
  collapsedRowIcon: 'pi pi-chevron-right',
  onRowEditComplete: null,
  globalFilterFields: null,
  showSelectionElement: null,
  showRowReorderElement: null,
  isDataSelectable: null,
  onColumnResizeEnd: null,
  onColumnResizerClick: null,
  onColumnResizerDoubleClick: null,
  onSort: null,
  onPage: null,
  onFilter: null,
  onAllRowsSelect: null,
  onAllRowsUnselect: null,
  onRowClick: null,
  onRowDoubleClick: null,
  onRowSelect: null,
  onRowUnselect: null,
  onRowExpand: null,
  onRowCollapse: null,
  onContextMenu: null,
  onColReorder: null,
  onCellClick: null,
  onCellSelect: null,
  onCellUnselect: null,
  onRowReorder: null,
  onValueChange: null,
  rowEditValidator: null,
  onRowEditInit: null,
  onRowEditSave: null,
  onRowEditCancel: null,
  onRowEditChange: null,
  exportFunction: null,
  customSaveState: null,
  customRestoreState: null,
  onStateSave: null,
  onStateRestore: null
});

export { DataTable };