primereact 8.7.3 → 9.0.0-rc.1

package/datatable/datatable.js

@@ -1,5 +1,5 @@
 this.primereact = this.primereact || {};
-this.primereact.datatable = (function (exports, React, PrimeReact, hooks, paginator, utils, virtualscroller, overlayservice, ripple, button, csstransition, dropdown, inputtext, portal, tooltip) {
+this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks, paginator, virtualscroller, overlayservice, ripple, button, csstransition, dropdown, inputtext, portal, tooltip) {
   'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -83,9 +83,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
 
   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];
-    }
+    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
     return arr2;
   }
 
@@ -132,9 +130,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
         if (_x = (_i = _i.call(arr)).next, 0 === i) {
           if (Object(_i) !== _i) return;
           _n = !1;
-        } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) {
-          ;
-        }
+        } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
       } catch (err) {
         _d = !0, _e = err;
       } finally {
@@ -156,6 +152,242 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
   }
 
+  var ColumnBase = {
+    defaultProps: {
+      __TYPE: 'Column',
+      align: null,
+      alignFrozen: 'left',
+      alignHeader: null,
+      body: null,
+      bodyClassName: null,
+      bodyStyle: null,
+      cellEditValidator: null,
+      cellEditValidatorEvent: 'click',
+      className: null,
+      colSpan: null,
+      columnKey: null,
+      dataType: 'text',
+      editor: null,
+      excludeGlobalFilter: false,
+      expander: false,
+      exportField: null,
+      exportable: true,
+      field: null,
+      filter: false,
+      filterApply: null,
+      filterClear: null,
+      filterElement: null,
+      filterField: null,
+      filterFooter: null,
+      filterFunction: null,
+      filterHeader: null,
+      filterHeaderClassName: null,
+      filterHeaderStyle: null,
+      filterMatchMode: null,
+      filterMatchModeOptions: null,
+      filterMaxLength: null,
+      filterMenuClassName: null,
+      filterMenuStyle: null,
+      filterPlaceholder: null,
+      filterType: 'text',
+      footer: null,
+      footerClassName: null,
+      footerStyle: null,
+      frozen: false,
+      header: null,
+      headerClassName: null,
+      headerStyle: null,
+      headerTooltip: null,
+      headerTooltipOptions: null,
+      hidden: false,
+      maxConstraints: 2,
+      onBeforeCellEditHide: null,
+      onBeforeCellEditShow: null,
+      onCellEditCancel: null,
+      onCellEditComplete: null,
+      onCellEditInit: null,
+      onFilterApplyClick: null,
+      onFilterClear: null,
+      onFilterConstraintAdd: null,
+      onFilterConstraintRemove: null,
+      onFilterMatchModeChange: null,
+      onFilterOperatorChange: null,
+      reorderable: true,
+      resizeable: true,
+      rowEditor: false,
+      rowReorder: false,
+      rowReorderIcon: 'pi pi-bars',
+      rowSpan: null,
+      selectionMode: null,
+      showAddButton: true,
+      showApplyButton: true,
+      showClearButton: true,
+      showFilterMatchModes: true,
+      showFilterMenu: true,
+      showFilterMenuOptions: true,
+      showFilterOperator: true,
+      sortField: null,
+      sortFunction: null,
+      sortable: false,
+      sortableDisabled: false,
+      style: null,
+      children: undefined
+    },
+    getCProp: function getCProp(column, name) {
+      return utils.ObjectUtils.getComponentProp(column, name, ColumnBase.defaultProps);
+    },
+    getCProps: function getCProps(column) {
+      return utils.ObjectUtils.getComponentProps(column, ColumnBase.defaultProps);
+    },
+    getCOtherProps: function getCOtherProps(column) {
+      return utils.ObjectUtils.getComponentDiffProps(column, ColumnBase.defaultProps);
+    }
+  };
+
+  var DataTableBase = {
+    defaultProps: {
+      __TYPE: 'DataTable',
+      alwaysShowPaginator: true,
+      autoLayout: false,
+      breakpoint: '960px',
+      cellClassName: null,
+      cellSelection: false,
+      className: null,
+      collapsedRowIcon: 'pi pi-chevron-right',
+      columnResizeMode: 'fit',
+      compareSelectionBy: 'deepEquals',
+      contextMenuSelection: null,
+      csvSeparator: ',',
+      currentPageReportTemplate: '({currentPage} of {totalPages})',
+      customRestoreState: null,
+      customSaveState: null,
+      dataKey: null,
+      defaultSortOrder: 1,
+      dragSelection: false,
+      editMode: 'cell',
+      editingRows: null,
+      emptyMessage: null,
+      expandableRowGroups: false,
+      expandedRowIcon: 'pi pi-chevron-down',
+      expandedRows: null,
+      exportFilename: 'download',
+      exportFunction: null,
+      filterDelay: 300,
+      filterDisplay: 'menu',
+      filterLocale: undefined,
+      filters: null,
+      first: 0,
+      footer: null,
+      footerColumnGroup: null,
+      frozenValue: null,
+      frozenWidth: null,
+      globalFilter: null,
+      globalFilterFields: null,
+      globalFilterMatchMode: PrimeReact.FilterMatchMode.CONTAINS,
+      groupRowsBy: null,
+      header: null,
+      headerColumnGroup: null,
+      id: null,
+      isDataSelectable: null,
+      lazy: false,
+      loading: false,
+      loadingIcon: 'pi pi-spinner',
+      metaKeySelection: true,
+      multiSortMeta: null,
+      onAllRowsSelect: null,
+      onAllRowsUnselect: null,
+      onCellClick: null,
+      onCellSelect: null,
+      onCellUnselect: null,
+      onColReorder: null,
+      onColumnResizeEnd: null,
+      onColumnResizerClick: null,
+      onColumnResizerDoubleClick: null,
+      onContextMenu: null,
+      onContextMenuSelectionChange: null,
+      onFilter: null,
+      onPage: null,
+      onRowClick: null,
+      onRowMouseEnter: null,
+      onRowMouseLeave: null,
+      onRowCollapse: null,
+      onRowDoubleClick: null,
+      onRowEditCancel: null,
+      onRowEditChange: null,
+      onRowEditComplete: null,
+      onRowEditInit: null,
+      onRowEditSave: null,
+      onRowExpand: null,
+      onRowReorder: null,
+      onRowSelect: null,
+      onRowToggle: null,
+      onRowUnselect: null,
+      onSelectAllChange: null,
+      onSelectionChange: null,
+      onSort: null,
+      onStateRestore: null,
+      onStateSave: null,
+      onValueChange: null,
+      pageLinkSize: 5,
+      paginator: false,
+      paginatorClassName: null,
+      paginatorDropdownAppendTo: null,
+      paginatorLeft: null,
+      paginatorPosition: 'bottom',
+      paginatorRight: null,
+      paginatorTemplate: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown',
+      removableSort: false,
+      reorderableColumns: false,
+      reorderableRows: false,
+      resizableColumns: false,
+      responsiveLayout: 'stack',
+      rowClassName: null,
+      rowEditValidator: null,
+      rowExpansionTemplate: null,
+      rowGroupFooterTemplate: null,
+      rowGroupHeaderTemplate: null,
+      rowGroupMode: null,
+      rowHover: false,
+      rows: null,
+      rowsPerPageOptions: null,
+      scrollDirection: 'vertical',
+      scrollHeight: null,
+      scrollable: false,
+      selectAll: false,
+      selectOnEdit: true,
+      selection: null,
+      selectionAriaLabel: null,
+      selectionAutoFocus: true,
+      selectionMode: null,
+      selectionPageOnly: false,
+      showGridlines: false,
+      showRowReorderElement: null,
+      showSelectAll: true,
+      showSelectionElement: null,
+      size: 'normal',
+      sortField: null,
+      sortMode: 'single',
+      sortOrder: null,
+      stateKey: null,
+      stateStorage: 'session',
+      stripedRows: false,
+      style: null,
+      tabIndex: 0,
+      tableClassName: null,
+      tableStyle: null,
+      totalRecords: null,
+      value: null,
+      virtualScrollerOptions: null,
+      children: undefined
+    },
+    getProps: function getProps(props) {
+      return utils.ObjectUtils.getMergedProps(props, DataTableBase.defaultProps);
+    },
+    getOtherProps: function getOtherProps(props) {
+      return utils.ObjectUtils.getDiffProps(props, DataTableBase.defaultProps);
+    }
+  };
+
   function _objectWithoutPropertiesLoose(source, excluded) {
     if (source == null) return {};
     var target = {};
@@ -203,7 +435,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
       }
     };
     var onKeyDown = function onKeyDown(event) {
-      if (event.code === 'Space') {
+      if (event.code === 'Space' || event.key === ' ') {
+        // event.key is for Android support
         onClick(event);
         event.preventDefault();
       }
@@ -257,7 +490,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
       }
     };
     var onKeyDown = function onKeyDown(event) {
-      if (event.code === 'Space') {
+      if (event.code === 'Space' || event.key === ' ') {
+        // event.key is for Android support
         onClick(event);
         event.preventDefault();
       }
@@ -320,11 +554,11 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
     var selfClick = React__namespace.useRef(false);
     var tabindexTimeout = React__namespace.useRef(null);
     var initFocusTimeout = React__namespace.useRef(null);
-    var getColumnProp = function getColumnProp(prop) {
-      return props.column ? props.column.props[prop] : null;
+    var getColumnProp = function getColumnProp(name) {
+      return ColumnBase.getCProp(props.column, name);
     };
     var field = getColumnProp('field') || "field_".concat(props.index);
-    var editingKey = props.dataKey ? props.rowData[props.dataKey] || props.rowIndex : props.rowIndex;
+    var editingKey = props.dataKey ? props.rowData && props.rowData[props.dataKey] || props.rowIndex : props.rowIndex;
     var _useEventListener = hooks.useEventListener({
         type: 'click',
         listener: function listener(e) {
@@ -351,7 +585,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
       return props.compareSelectionBy === 'equals' ? data === props.rowData : utils.ObjectUtils.equals(data, props.rowData, props.dataKey);
     };
     var equals = function equals(selectedCell) {
-      return (selectedCell.rowIndex === props.rowIndex || equalsData(selectedCell.rowData)) && (selectedCell.field === field || selectedCell.cellIndex === props.index);
+      return selectedCell && (selectedCell.rowIndex === props.rowIndex || equalsData(selectedCell.rowData)) && (selectedCell.field === field || selectedCell.cellIndex === props.index);
     };
     var isOutsideClicked = function isOutsideClicked(target) {
       return elementRef.current && !(elementRef.current.isSameNode(target) || elementRef.current.contains(target));
@@ -486,14 +720,14 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
         var align = getColumnProp('alignFrozen');
         if (align === 'right') {
           var right = 0;
-          var next = elementRef.current.nextElementSibling;
+          var next = elementRef.current && elementRef.current.nextElementSibling;
           if (next) {
             right = utils.DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
           }
           styleObject['right'] = right + 'px';
         } else {
           var left = 0;
-          var prev = elementRef.current.previousElementSibling;
+          var prev = elementRef.current && elementRef.current.previousElementSibling;
           if (prev) {
             left = utils.DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
           }
@@ -509,7 +743,10 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
       setEditingRowDataState(editingRowData);
 
       // update editing meta for complete methods on row mode
-      props.editingMeta[editingKey].data[field] = val;
+      var currentData = getEditingRowData();
+      if (currentData) {
+        currentData[field] = val;
+      }
     };
     var onClick = function onClick(event) {
       var params = getCellCallbackParams(event);
@@ -950,21 +1187,22 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
       editingState = _React$useState2[0],
       setEditingState = _React$useState2[1];
     var editing = props.onRowEditChange ? props.editing : editingState;
+    var getColumnProp = function getColumnProp(column, name) {
+      return ColumnBase.getCProp(column, name);
+    };
     var isFocusable = function isFocusable() {
       return props.selectionMode && props.selectionModeInColumn !== 'single' && props.selectionModeInColumn !== 'multiple';
     };
     var isGrouped = function isGrouped(column) {
-      if (props.groupRowsBy && getColumnProp(column, 'field')) {
-        return Array.isArray(props.groupRowsBy) ? props.groupRowsBy.indexOf(column.props.field) > -1 : props.groupRowsBy === column.props.field;
+      var columnField = getColumnProp(column, 'field');
+      if (props.groupRowsBy && columnField) {
+        return Array.isArray(props.groupRowsBy) ? props.groupRowsBy.indexOf(columnField) > -1 : props.groupRowsBy === columnField;
       }
       return false;
     };
     var equals = function equals(data1, data2) {
       return props.compareSelectionBy === 'equals' ? data1 === data2 : utils.ObjectUtils.equals(data1, data2, props.dataKey);
     };
-    var getColumnProp = function getColumnProp(col, prop) {
-      return col ? col.props[prop] : null;
-    };
     var getTabIndex = function getTabIndex() {
       return isFocusable() && !props.allowCellSelection ? props.index === 0 ? props.tabIndex : -1 : null;
     };
@@ -1378,7 +1616,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
     };
     var isSelectionEnabled = function isSelectionEnabled() {
       return props.selectionMode || props.selectionModeInColumn !== null || props.columns && props.columns.some(function (col) {
-        return col && !!col.props.selectionMode;
+        return col && !!getColumnProp(col, 'selectionMode');
       });
     };
     var isSingleSelection = function isSingleSelection() {
@@ -1458,6 +1696,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
     var getColumnsLength = function getColumnsLength() {
       return props.columns ? props.columns.length : 0;
     };
+    var getColumnProp = function getColumnProp(column, name) {
+      return ColumnBase.getCProp(column, name);
+    };
     var getVirtualScrollerOption = function getVirtualScrollerOption(option, options) {
       options = options || props.virtualScrollerOptions;
       return options ? options[option] : null;
@@ -1476,7 +1717,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
       return null;
     };
     var getRowKey = function getRowKey(rowData, index) {
-      return props.dataKey ? utils.ObjectUtils.resolveFieldData(rowData, props.dataKey) + '_' + index : index;
+      return props.dataKey ? utils.ObjectUtils.resolveFieldData(rowData, props.dataKey) : index;
     };
     var shouldRenderRowGroupHeader = function shouldRenderRowGroupHeader(value, rowData, i) {
       var currentRowFieldData = utils.ObjectUtils.resolveFieldData(rowData, props.groupRowsBy);
@@ -1687,7 +1928,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
         var columns = props.columns;
         var rowIndex = props.paginator ? i + props.first : i;
         for (var j = cellRangeStart; j <= cellRangeEnd; j++) {
-          var field = columns[j].props.field;
+          var field = getColumnProp(columns[j], 'field');
           var _value = utils.ObjectUtils.resolveFieldData(rowData, field);
           var rangeRowData = {
             value: _value,
@@ -1953,14 +2194,14 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
       var event = e.originalEvent;
       if (droppedRowIndex.current != null) {
         var dropIndex = draggedRowIndex.current > droppedRowIndex.current ? droppedRowIndex.current : droppedRowIndex.current === 0 ? 0 : droppedRowIndex.current - 1;
-        var val = _toConsumableArray(props.value);
+        var val = _toConsumableArray(props.tableProps.value);
         utils.ObjectUtils.reorderArray(val, draggedRowIndex.current, dropIndex);
         if (props.onRowReorder) {
           props.onRowReorder({
             originalEvent: event,
             value: val,
             dragIndex: draggedRowIndex.current,
-            dropIndex: droppedRowIndex.current
+            dropIndex: dropIndex
           });
         }
       }
@@ -2273,6 +2514,37 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
   }));
   TableBody.displayName = 'TableBody';
 
+  var ColumnGroupBase = {
+    defaultProps: {
+      __TYPE: 'ColumnGroup',
+      children: undefined
+    },
+    getCProp: function getCProp(group, name) {
+      return utils.ObjectUtils.getComponentProp(group, name, ColumnGroupBase.defaultProps);
+    },
+    getCProps: function getCProps(group) {
+      return utils.ObjectUtils.getComponentProps(group, ColumnGroupBase.defaultProps);
+    }
+  };
+
+  var RowBase = {
+    defaultProps: {
+      __TYPE: 'Row',
+      style: null,
+      className: null,
+      children: undefined
+    },
+    getProps: function getProps(props) {
+      return utils.ObjectUtils.getMergedProps(props, RowBase.defaultProps);
+    },
+    getOtherProps: function getOtherProps(props) {
+      return utils.ObjectUtils.getDiffProps(props, RowBase.defaultProps);
+    },
+    getCProp: function getCProp(row, name) {
+      return utils.ObjectUtils.getComponentProp(row, name, RowBase.defaultProps);
+    }
+  };
+
   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; }
   var FooterCell = /*#__PURE__*/React__namespace.memo(function (props) {
@@ -2281,8 +2553,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
       styleObjectState = _React$useState2[0],
       setStyleObjectState = _React$useState2[1];
     var elementRef = React__namespace.useRef(null);
-    var getColumnProp = function getColumnProp(prop) {
-      return props.column.props[prop];
+    var getColumnProp = function getColumnProp(name) {
+      return ColumnBase.getCProp(props.column, name);
     };
     var getStyle = function getStyle() {
       var footerStyle = getColumnProp('footerStyle');
@@ -2341,17 +2613,20 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
   var TableFooter = /*#__PURE__*/React__namespace.memo(function (props) {
     var hasFooter = function hasFooter() {
       return props.footerColumnGroup ? true : props.columns ? props.columns.some(function (col) {
-        return col && col.props.footer;
+        return col && getColumnProp(col, 'footer');
       }) : false;
     };
+    var getColumnProp = function getColumnProp(column, name) {
+      return ColumnBase.getCProp(column, name);
+    };
     var createGroupFooterCells = function createGroupFooterCells(row) {
-      var columns = React__namespace.Children.toArray(row.props.children);
+      var columns = React__namespace.Children.toArray(RowBase.getCProp(row, 'children'));
       return createFooterCells(columns);
     };
     var createFooterCells = function createFooterCells(columns) {
       return React__namespace.Children.map(columns, function (col, i) {
-        var isVisible = col ? !col.props.hidden : true;
-        var key = col ? col.props.columnKey || col.props.field || i : i;
+        var isVisible = col ? !getColumnProp(col, 'hidden') : true;
+        var key = col ? getColumnProp(col, 'columnKey') || getColumnProp(col, 'field') || i : i;
         return isVisible && /*#__PURE__*/React__namespace.createElement(FooterCell, {
           key: key,
           tableProps: props.tableProps,
@@ -2361,7 +2636,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
     };
     var createContent = function createContent() {
       if (props.footerColumnGroup) {
-        var rows = React__namespace.Children.toArray(props.footerColumnGroup.props.children);
+        var rows = React__namespace.Children.toArray(ColumnGroupBase.getCProp(props.footerColumnGroup, 'children'));
         return rows.map(function (row, i) {
           return /*#__PURE__*/React__namespace.createElement("tr", {
             key: i,
@@ -2394,8 +2669,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
     var iconRef = React__namespace.useRef(null);
     var selfClick = React__namespace.useRef(false);
     var overlayEventListener = React__namespace.useRef(null);
-    var getColumnProp = function getColumnProp(prop) {
-      return props.column.props[prop];
+    var getColumnProp = function getColumnProp(name) {
+      return ColumnBase.getCProp(props.column, name);
     };
     var field = getColumnProp('filterField') || getColumnProp('field');
     var filterModel = props.filters[field];
@@ -3086,7 +3361,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
       }
     };
     var onKeyDown = function onKeyDown(event) {
-      if (event.code === 'Space') {
+      if (event.code === 'Space' || event.key === ' ') {
+        // event.key is for Android support
         onClick(event);
         event.preventDefault();
       }
@@ -3133,10 +3409,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
       return !getColumnProp('sortable') || getColumnProp('sortable') && (props.allSortableDisabled || getColumnProp('sortableDisabled'));
     };
     var getColumnProp = function getColumnProp() {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      return props.column ? typeof args[0] === 'string' ? props.column.props[args[0]] : (args[0] || props.column).props[args[1]] : null;
+      return props.column ? typeof (arguments.length <= 0 ? undefined : arguments[0]) === 'string' ? ColumnBase.getCProp(props.column, arguments.length <= 0 ? undefined : arguments[0]) : ColumnBase.getCProp((arguments.length <= 0 ? undefined : arguments[0]) || props.column, arguments.length <= 1 ? undefined : arguments[1]) : null;
     };
     var getStyle = function getStyle() {
       var headerStyle = getColumnProp('headerStyle');
@@ -3431,16 +3704,19 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
     var isSingleSort = props.sortMode === 'single';
     var isMultipleSort = props.sortMode === 'multiple';
     var isAllSortableDisabled = isSingleSort && allSortableDisabledState;
+    var getColumnProp = function getColumnProp(column, name) {
+      return ColumnBase.getCProp(column, name);
+    };
     var isColumnSorted = function isColumnSorted(column) {
-      return props.sortField !== null ? column.props.field === props.sortField || column.props.sortField === props.sortField : false;
+      return props.sortField !== null ? getColumnProp(column, 'field') === props.sortField || getColumnProp(column, 'sortField') === props.sortField : false;
     };
     var updateSortableDisabled = function updateSortableDisabled() {
       if (isSingleSort || isMultipleSort && props.onSortChange) {
         var sortableDisabledFields = [];
         var allSortableDisabled = false;
         props.columns.forEach(function (column) {
-          if (column.props.sortableDisabled) {
-            sortableDisabledFields.push(column.props.sortField || column.props.field);
+          if (getColumnProp(column, 'sortableDisabled')) {
+            sortableDisabledFields.push(getColumnProp(column, 'sortField') || getColumnProp(column, 'field'));
             if (!allSortableDisabled && isColumnSorted(column)) {
               allSortableDisabled = true;
             }
@@ -3460,13 +3736,13 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
       updateSortableDisabled();
     });
     var createGroupHeaderCells = function createGroupHeaderCells(row) {
-      var columns = React__namespace.Children.toArray(row.props.children);
+      var columns = React__namespace.Children.toArray(RowBase.getCProp(row, 'children'));
       return createHeaderCells(columns);
     };
     var createHeaderCells = function createHeaderCells(columns) {
       return React__namespace.Children.map(columns, function (col, i) {
-        var isVisible = col ? !col.props.hidden : true;
-        var key = col ? col.props.columnKey || col.props.field || i : i;
+        var isVisible = col ? !getColumnProp(col, 'hidden') : true;
+        var key = col ? getColumnProp(col, 'columnKey') || getColumnProp(col, 'field') || i : i;
         return isVisible && /*#__PURE__*/React__namespace.createElement(HeaderCell, {
           key: key,
           value: props.value,
@@ -3531,18 +3807,18 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
     };
     var createFilterCells = function createFilterCells() {
       return React__namespace.Children.map(props.columns, function (col, i) {
-        var isVisible = !col.props.hidden;
+        var isVisible = !getColumnProp(col, '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 _ColumnBase$getCProps = ColumnBase.getCProps(col),
+            filterHeaderStyle = _ColumnBase$getCProps.filterHeaderStyle,
+            style = _ColumnBase$getCProps.style,
+            filterHeaderClassName = _ColumnBase$getCProps.filterHeaderClassName,
+            className = _ColumnBase$getCProps.className,
+            frozen = _ColumnBase$getCProps.frozen,
+            columnKey = _ColumnBase$getCProps.columnKey,
+            field = _ColumnBase$getCProps.field,
+            selectionMode = _ColumnBase$getCProps.selectionMode,
+            filter = _ColumnBase$getCProps.filter;
           var colStyle = _objectSpread$1(_objectSpread$1({}, filterHeaderStyle || {}), style || {});
           var colClassName = utils.classNames('p-filter-column', filterHeaderClassName, className, {
             'p-frozen-column': frozen
@@ -3561,7 +3837,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
     };
     var createContent = function createContent() {
       if (props.headerColumnGroup) {
-        var rows = React__namespace.Children.toArray(props.headerColumnGroup.props.children);
+        var rows = React__namespace.Children.toArray(ColumnGroupBase.getCProp(props.headerColumnGroup, 'children'));
         return rows.map(function (row, i) {
           return /*#__PURE__*/React__namespace.createElement("tr", {
             key: i,
@@ -3587,7 +3863,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
 
   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; }
-  var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
+  var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
+    var props = DataTableBase.getProps(inProps);
     var _React$useState = React__namespace.useState(props.first),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       firstState = _React$useState2[0],
@@ -3722,8 +3999,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
     var getFilters = function getFilters() {
       return props.onFilter ? props.filters : filtersState;
     };
-    var getColumnProp = function getColumnProp(col, prop) {
-      return col.props[prop];
+    var getColumnProp = function getColumnProp(column, name) {
+      return ColumnBase.getCProp(column, name);
     };
     var getColumns = function getColumns(ignoreReorderable) {
       var columns = React__namespace.Children.toArray(props.children);
@@ -3968,7 +4245,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
         return props.selectAll;
       } else {
         var _data = props.selectionPageOnly ? dataToRender(processedData) : processedData;
-        var val = props.frozenValue ? [].concat(_toConsumableArray(props.frozenValue), _toConsumableArray(_data)) : _data;
+        var val = utils.ObjectUtils.isNotEmpty(props.frozenValue) ? [].concat(_toConsumableArray(props.frozenValue), _toConsumableArray(_data)) : _data;
         var selectableVal = getSelectableData(val);
         return selectableVal && props.selection && selectableVal.every(function (sv) {
           return props.selection.some(function (s) {
@@ -3980,15 +4257,15 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
     var getSelectionModeInColumn = function getSelectionModeInColumn(columns) {
       if (columns) {
         var col = columns.find(function (c) {
-          return !!c.props.selectionMode;
+          return !!getColumnProp(c, 'selectionMode');
         });
-        return col ? col.props.selectionMode : null;
+        return col ? getColumnProp(col, 'selectionMode') : null;
       }
       return null;
     };
     var findColumnByKey = function findColumnByKey(columns, key) {
       return utils.ObjectUtils.isNotEmpty(columns) ? columns.find(function (col) {
-        return col.props.columnKey === key || col.props.field === key;
+        return getColumnProp(col, 'columnKey') === key || getColumnProp(col, 'field') === key;
       }) : null;
     };
     var getTotalRecords = function getTotalRecords(data) {
@@ -4129,7 +4406,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
           });
         }) : [];
         if (checked) {
-          selection = props.frozenValue ? [].concat(_toConsumableArray(selection), _toConsumableArray(props.frozenValue), _toConsumableArray(_data2)) : [].concat(_toConsumableArray(selection), _toConsumableArray(_data2));
+          selection = utils.ObjectUtils.isNotEmpty(props.frozenValue) ? [].concat(_toConsumableArray(selection), _toConsumableArray(props.frozenValue), _toConsumableArray(_data2)) : [].concat(_toConsumableArray(selection), _toConsumableArray(_data2));
           selection = getSelectableData(selection);
           props.onAllRowsSelect && props.onAllRowsSelect({
             originalEvent: originalEvent,
@@ -4216,7 +4493,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
         if (allowDrop) {
           var _columns = getColumns();
           var isSameColumn = function isSameColumn(col1, col2) {
-            return col1.props.columnKey || col2.props.columnKey ? utils.ObjectUtils.equals(col1.props, col2.props, 'columnKey') : utils.ObjectUtils.equals(col1.props, col2.props, 'field');
+            return getColumnProp(col1, 'columnKey') || getColumnProp(col2, 'columnKey') ? utils.ObjectUtils.equals(col1.props, col2.props, 'columnKey') : utils.ObjectUtils.equals(col1.props, col2.props, 'field');
           };
           var dragColIndex = _columns.findIndex(function (child) {
             return isSameColumn(child, draggedColumn.current);
@@ -4232,7 +4509,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
           }
           utils.ObjectUtils.reorderArray(_columns, dragColIndex, dropColIndex);
           var columnOrder = _columns.reduce(function (orders, col) {
-            orders.push(col.props.columnKey || col.props.field);
+            orders.push(getColumnProp(col, 'columnKey') || getColumnProp(col, 'field'));
             return orders;
           }, []);
           setColumnOrderState(columnOrder);
@@ -4286,12 +4563,12 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
       var event = e.originalEvent,
         column = e.column,
         sortableDisabledFields = e.sortableDisabledFields;
-      var sortField = column.props.sortField || column.props.field;
+      var sortField = getColumnProp(column, 'sortField') || getColumnProp(column, 'field');
       var sortOrder = props.defaultSortOrder;
       var multiSortMeta;
       var eventMeta;
-      columnSortable.current = column.props.sortable;
-      columnSortFunction.current = column.props.sortFunction;
+      columnSortable.current = getColumnProp(column, 'sortable');
+      columnSortFunction.current = getColumnProp(column, 'sortFunction');
       columnField.current = sortField;
       if (props.sortMode === 'multiple') {
         var metaKey = event.metaKey || event.ctrlKey;
@@ -4467,9 +4744,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
       var globalFilterFieldsArray;
       if (isGlobalFilter) {
         globalFilterFieldsArray = props.globalFilterFields || columns.filter(function (col) {
-          return !col.props.excludeGlobalFilter;
+          return !getColumnProp(col, 'excludeGlobalFilter');
         }).map(function (col) {
-          return col.props.filterField || col.props.field;
+          return getColumnProp(col, 'filterField') || getColumnProp(col, 'field');
         });
       }
       for (var i = 0; i < data.length; i++) {
@@ -4477,6 +4754,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
         var globalMatch = false;
         var localFiltered = false;
         for (var prop in filters) {
+          if (prop === 'null') {
+            continue;
+          }
           if (Object.prototype.hasOwnProperty.call(filters, prop) && prop !== 'global') {
             localFiltered = true;
             var filterField = prop;
@@ -4548,10 +4828,10 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
       } else {
         var _columns2 = getColumns();
         cloned = _columns2.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__default["default"].filterMatchModeOptions[dataType] ? PrimeReact__default["default"].filterMatchModeOptions[dataType][0] : PrimeReact.FilterMatchMode.STARTS_WITH);
+          var field = getColumnProp(col, 'filterField') || getColumnProp(col, 'field');
+          var filterFunction = getColumnProp(col, 'filterFunction');
+          var dataType = getColumnProp(col, 'dataType');
+          var matchMode = getColumnProp(col, 'filterMatchMode') || (PrimeReact__default["default"].filterMatchModeOptions[dataType] ? PrimeReact__default["default"].filterMatchModeOptions[dataType][0] : PrimeReact.FilterMatchMode.STARTS_WITH);
           var constraint = {
             value: null,
             matchMode: matchMode
@@ -4621,7 +4901,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
       var columnOrder = [];
       if (columns) {
         columnOrder = columns.reduce(function (orders, col) {
-          orders.push(col.props.columnKey || col.props.field);
+          orders.push(getColumnProp(col, 'columnKey') || getColumnProp(col, 'field'));
           return orders;
         }, []);
       }
@@ -4639,12 +4919,13 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
 
       //headers
       columns.forEach(function (column, i) {
-        var _column$props = column.props,
-          field = _column$props.field,
-          header = _column$props.header,
-          exportable = _column$props.exportable;
+        var _ref3 = [getColumnProp(column, 'field'), getColumnProp(column, 'header'), getColumnProp(column, 'exportable')],
+          field = _ref3[0],
+          header = _ref3[1],
+          exportable = _ref3[2];
         if (exportable && field) {
-          csv += '"' + (header || field) + '"';
+          var columnHeader = String(header || field).replace(/"/g, '""').replace(/\n/g, "\u2028");
+          csv += '"' + columnHeader + '"';
           if (i < columns.length - 1) {
             csv += props.csvSeparator;
           }
@@ -4655,20 +4936,24 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
       data.forEach(function (record) {
         csv += '\n';
         columns.forEach(function (column, i) {
-          var _column$props2 = column.props,
-            colField = _column$props2.field,
-            exportField = _column$props2.exportField,
-            exportable = _column$props2.exportable;
+          var _ref4 = [getColumnProp(column, 'field'), getColumnProp(column, 'exportField'), getColumnProp(column, 'exportable')],
+            colField = _ref4[0],
+            exportField = _ref4[1],
+            exportable = _ref4[2];
           var field = exportField || colField;
           if (exportable && field) {
             var cellData = utils.ObjectUtils.resolveFieldData(record, field);
             if (cellData != null) {
-              cellData = props.exportFunction ? props.exportFunction({
-                data: cellData,
-                field: field,
-                rowData: record,
-                column: column
-              }) : String(cellData).replace(/"/g, '""');
+              if (props.exportFunction) {
+                cellData = props.exportFunction({
+                  data: cellData,
+                  field: field,
+                  rowData: record,
+                  column: column
+                });
+              } else {
+                cellData = String(cellData).replace(/"/g, '""').replace(/\n/g, "\u2028");
+              }
             } else cellData = '';
             csv += '"' + cellData + '"';
             if (i < columns.length - 1) {
@@ -4704,11 +4989,11 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
           var multiSortMeta = localState && localState.multiSortMeta || getMultiSortMeta();
           var _columns3 = getColumns();
           var sortColumn = _columns3.find(function (col) {
-            return col.props.field === sortField;
+            return getColumnProp(col, 'field') === sortField;
           });
           if (sortColumn) {
-            columnSortable.current = sortColumn.props.sortable;
-            columnSortFunction.current = sortColumn.props.sortFunction;
+            columnSortable.current = getColumnProp(sortColumn, 'sortable');
+            columnSortFunction.current = getColumnProp(sortColumn, 'sortFunction');
           }
           if (utils.ObjectUtils.isNotEmpty(filters) || props.globalFilter) {
             data = filterLocal(data, filters);
@@ -4768,8 +5053,11 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
     hooks.useUpdateEffect(function () {
       if (props.globalFilter) {
         filter(props.globalFilter, 'global', props.globalFilterMatchMode);
+      } else {
+        // #3819 was filtering but now reset filter state
+        setFiltersState(props.filters);
       }
-    }, [props.globalFilter]);
+    }, [props.globalFilter, props.globalFilterMatchMode]);
     hooks.useUnmountEffect(function () {
       unbindColumnResizeEvents();
       destroyStyleElement();
@@ -4873,7 +5161,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
         contentRef = options.contentRef,
         className = options.className;
         options.itemSize;
-      var frozenBody = props.frozenValue && /*#__PURE__*/React__namespace.createElement(TableBody, {
+      var frozenBody = utils.ObjectUtils.isNotEmpty(props.frozenValue) && /*#__PURE__*/React__namespace.createElement(TableBody, {
         ref: frozenBodyRef,
         value: props.frozenValue,
         className: "p-datatable-frozen-tbody",
@@ -5144,7 +5432,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
     var empty = utils.ObjectUtils.isEmpty(data);
     var selectionModeInColumn = getSelectionModeInColumn(columns);
     var selectable = props.selectionMode || selectionModeInColumn;
-    var otherProps = utils.ObjectUtils.findDiffKeys(props, DataTable.defaultProps);
+    var otherProps = DataTableBase.getOtherProps(props);
     var className = utils.classNames('p-datatable p-component', {
       'p-datatable-hoverable-rows': props.rowHover,
       'p-datatable-selectable': selectable && !props.cellSelection,
@@ -5184,140 +5472,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
     }), loader, header, paginatorTop, content, paginatorBottom, footer, resizeHelper, reorderIndicators);
   });
   DataTable.displayName = 'DataTable';
-  DataTable.defaultProps = {
-    __TYPE: 'DataTable',
-    alwaysShowPaginator: true,
-    autoLayout: false,
-    breakpoint: '960px',
-    cellClassName: null,
-    cellSelection: false,
-    className: null,
-    collapsedRowIcon: 'pi pi-chevron-right',
-    columnResizeMode: 'fit',
-    compareSelectionBy: 'deepEquals',
-    contextMenuSelection: null,
-    csvSeparator: ',',
-    currentPageReportTemplate: '({currentPage} of {totalPages})',
-    customRestoreState: null,
-    customSaveState: null,
-    dataKey: null,
-    defaultSortOrder: 1,
-    dragSelection: false,
-    editMode: 'cell',
-    editingRows: null,
-    emptyMessage: null,
-    expandableRowGroups: false,
-    expandedRowIcon: 'pi pi-chevron-down',
-    expandedRows: null,
-    exportFilename: 'download',
-    exportFunction: null,
-    filterDelay: 300,
-    filterDisplay: 'menu',
-    filterLocale: undefined,
-    filters: null,
-    first: 0,
-    footer: null,
-    footerColumnGroup: null,
-    frozenValue: null,
-    frozenWidth: null,
-    globalFilter: null,
-    globalFilterFields: null,
-    globalFilterMatchMode: PrimeReact.FilterMatchMode.CONTAINS,
-    groupRowsBy: null,
-    header: null,
-    headerColumnGroup: null,
-    id: null,
-    isDataSelectable: null,
-    lazy: false,
-    loading: false,
-    loadingIcon: 'pi pi-spinner',
-    metaKeySelection: true,
-    multiSortMeta: null,
-    onAllRowsSelect: null,
-    onAllRowsUnselect: null,
-    onCellClick: null,
-    onCellSelect: null,
-    onCellUnselect: null,
-    onColReorder: null,
-    onColumnResizeEnd: null,
-    onColumnResizerClick: null,
-    onColumnResizerDoubleClick: null,
-    onContextMenu: null,
-    onContextMenuSelectionChange: null,
-    onFilter: null,
-    onPage: null,
-    onRowClick: null,
-    onRowMouseEnter: null,
-    onRowMouseLeave: null,
-    onRowCollapse: null,
-    onRowDoubleClick: null,
-    onRowEditCancel: null,
-    onRowEditChange: null,
-    onRowEditComplete: null,
-    onRowEditInit: null,
-    onRowEditSave: null,
-    onRowExpand: null,
-    onRowReorder: null,
-    onRowSelect: null,
-    onRowToggle: null,
-    onRowUnselect: null,
-    onSelectAllChange: null,
-    onSelectionChange: null,
-    onSort: null,
-    onStateRestore: null,
-    onStateSave: null,
-    onValueChange: null,
-    pageLinkSize: 5,
-    paginator: false,
-    paginatorClassName: null,
-    paginatorDropdownAppendTo: null,
-    paginatorLeft: null,
-    paginatorPosition: 'bottom',
-    paginatorRight: null,
-    paginatorTemplate: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown',
-    removableSort: false,
-    reorderableColumns: false,
-    reorderableRows: false,
-    resizableColumns: false,
-    responsiveLayout: 'stack',
-    rowClassName: null,
-    rowEditValidator: null,
-    rowExpansionTemplate: null,
-    rowGroupFooterTemplate: null,
-    rowGroupHeaderTemplate: null,
-    rowGroupMode: null,
-    rowHover: false,
-    rows: null,
-    rowsPerPageOptions: null,
-    scrollDirection: 'vertical',
-    scrollHeight: null,
-    scrollable: false,
-    selectAll: false,
-    selectOnEdit: true,
-    selection: null,
-    selectionAriaLabel: null,
-    selectionAutoFocus: true,
-    selectionMode: null,
-    selectionPageOnly: false,
-    showGridlines: false,
-    showRowReorderElement: null,
-    showSelectAll: true,
-    showSelectionElement: null,
-    size: 'normal',
-    sortField: null,
-    sortMode: 'single',
-    sortOrder: null,
-    stateKey: null,
-    stateStorage: 'session',
-    stripedRows: false,
-    style: null,
-    tabIndex: 0,
-    tableClassName: null,
-    tableStyle: null,
-    totalRecords: null,
-    value: null,
-    virtualScrollerOptions: null
-  };
 
   exports.DataTable = DataTable;
 
@@ -5325,4 +5479,4 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
 
   return exports;
 
-})({}, React, primereact.api, primereact.hooks, primereact.paginator, primereact.utils, primereact.virtualscroller, primereact.overlayservice, primereact.ripple, primereact.button, primereact.csstransition, primereact.dropdown, primereact.inputtext, primereact.portal, primereact.tooltip);
+})({}, React, primereact.api, primereact.utils, primereact.hooks, primereact.paginator, primereact.virtualscroller, primereact.overlayservice, primereact.ripple, primereact.button, primereact.csstransition, primereact.dropdown, primereact.inputtext, primereact.portal, primereact.tooltip);