primereact 8.7.3 → 9.0.0-rc.1

package/datatable/datatable.esm.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import PrimeReact, { ariaLabel, localeOption, FilterMatchMode, FilterOperator, FilterService } from 'primereact/api';
+import PrimeReact, { FilterMatchMode, ariaLabel, localeOption, FilterOperator, FilterService } from 'primereact/api';
+import { ObjectUtils, classNames, DomHandler, ZIndexUtils, UniqueComponentId } from 'primereact/utils';
 import { useEventListener, useUpdateEffect, useUnmountEffect, usePrevious, useMountEffect, useOverlayListener } from 'primereact/hooks';
 import { Paginator } from 'primereact/paginator';
-import { classNames, DomHandler, ObjectUtils, ZIndexUtils, UniqueComponentId } from 'primereact/utils';
 import { VirtualScroller } from 'primereact/virtualscroller';
 import { OverlayService } from 'primereact/overlayservice';
 import { Ripple } from 'primereact/ripple';
@@ -71,9 +71,7 @@ function _defineProperty(obj, key, value) {
 
 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;
 }
 
@@ -120,9 +118,7 @@ function _iterableToArrayLimit(arr, i) {
       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 {
@@ -144,6 +140,242 @@ function _slicedToArray(arr, i) {
   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 ObjectUtils.getComponentProp(column, name, ColumnBase.defaultProps);
+  },
+  getCProps: function getCProps(column) {
+    return ObjectUtils.getComponentProps(column, ColumnBase.defaultProps);
+  },
+  getCOtherProps: function getCOtherProps(column) {
+    return 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: 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 ObjectUtils.getMergedProps(props, DataTableBase.defaultProps);
+  },
+  getOtherProps: function getOtherProps(props) {
+    return ObjectUtils.getDiffProps(props, DataTableBase.defaultProps);
+  }
+};
+
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -191,7 +423,8 @@ var RowCheckbox = /*#__PURE__*/React.memo(function (props) {
     }
   };
   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();
     }
@@ -245,7 +478,8 @@ var RowRadioButton = /*#__PURE__*/React.memo(function (props) {
     }
   };
   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();
     }
@@ -308,11 +542,11 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
   var selfClick = React.useRef(false);
   var tabindexTimeout = React.useRef(null);
   var initFocusTimeout = React.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 = useEventListener({
       type: 'click',
       listener: function listener(e) {
@@ -339,7 +573,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
     return props.compareSelectionBy === 'equals' ? data === props.rowData : 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));
@@ -474,14 +708,14 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
       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 = 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 = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
         }
@@ -497,7 +731,10 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
     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);
@@ -938,21 +1175,22 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
     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 : 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;
   };
@@ -1366,7 +1604,7 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
   };
   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() {
@@ -1446,6 +1684,9 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
   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;
@@ -1464,7 +1705,7 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     return null;
   };
   var getRowKey = function getRowKey(rowData, index) {
-    return props.dataKey ? ObjectUtils.resolveFieldData(rowData, props.dataKey) + '_' + index : index;
+    return props.dataKey ? ObjectUtils.resolveFieldData(rowData, props.dataKey) : index;
   };
   var shouldRenderRowGroupHeader = function shouldRenderRowGroupHeader(value, rowData, i) {
     var currentRowFieldData = ObjectUtils.resolveFieldData(rowData, props.groupRowsBy);
@@ -1675,7 +1916,7 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       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 = ObjectUtils.resolveFieldData(rowData, field);
         var rangeRowData = {
           value: _value,
@@ -1941,14 +2182,14 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     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);
       ObjectUtils.reorderArray(val, draggedRowIndex.current, dropIndex);
       if (props.onRowReorder) {
         props.onRowReorder({
           originalEvent: event,
           value: val,
           dragIndex: draggedRowIndex.current,
-          dropIndex: droppedRowIndex.current
+          dropIndex: dropIndex
         });
       }
     }
@@ -2261,6 +2502,37 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
 }));
 TableBody.displayName = 'TableBody';
 
+var ColumnGroupBase = {
+  defaultProps: {
+    __TYPE: 'ColumnGroup',
+    children: undefined
+  },
+  getCProp: function getCProp(group, name) {
+    return ObjectUtils.getComponentProp(group, name, ColumnGroupBase.defaultProps);
+  },
+  getCProps: function getCProps(group) {
+    return ObjectUtils.getComponentProps(group, ColumnGroupBase.defaultProps);
+  }
+};
+
+var RowBase = {
+  defaultProps: {
+    __TYPE: 'Row',
+    style: null,
+    className: null,
+    children: undefined
+  },
+  getProps: function getProps(props) {
+    return ObjectUtils.getMergedProps(props, RowBase.defaultProps);
+  },
+  getOtherProps: function getOtherProps(props) {
+    return ObjectUtils.getDiffProps(props, RowBase.defaultProps);
+  },
+  getCProp: function getCProp(row, name) {
+    return 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.memo(function (props) {
@@ -2269,8 +2541,8 @@ var FooterCell = /*#__PURE__*/React.memo(function (props) {
     styleObjectState = _React$useState2[0],
     setStyleObjectState = _React$useState2[1];
   var elementRef = React.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');
@@ -2329,17 +2601,20 @@ FooterCell.displayName = 'FooterCell';
 var TableFooter = /*#__PURE__*/React.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.Children.toArray(row.props.children);
+    var columns = React.Children.toArray(RowBase.getCProp(row, 'children'));
     return createFooterCells(columns);
   };
   var createFooterCells = function createFooterCells(columns) {
     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;
+      var isVisible = col ? !getColumnProp(col, 'hidden') : true;
+      var key = col ? getColumnProp(col, 'columnKey') || getColumnProp(col, 'field') || i : i;
       return isVisible && /*#__PURE__*/React.createElement(FooterCell, {
         key: key,
         tableProps: props.tableProps,
@@ -2349,7 +2624,7 @@ var TableFooter = /*#__PURE__*/React.memo(function (props) {
   };
   var createContent = function createContent() {
     if (props.footerColumnGroup) {
-      var rows = React.Children.toArray(props.footerColumnGroup.props.children);
+      var rows = React.Children.toArray(ColumnGroupBase.getCProp(props.footerColumnGroup, 'children'));
       return rows.map(function (row, i) {
         return /*#__PURE__*/React.createElement("tr", {
           key: i,
@@ -2382,8 +2657,8 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
   var iconRef = React.useRef(null);
   var selfClick = React.useRef(false);
   var overlayEventListener = React.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];
@@ -3074,7 +3349,8 @@ var HeaderCheckbox = /*#__PURE__*/React.memo(function (props) {
     }
   };
   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();
     }
@@ -3121,10 +3397,7 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
     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');
@@ -3419,16 +3692,19 @@ var TableHeader = /*#__PURE__*/React.memo(function (props) {
   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;
           }
@@ -3448,13 +3724,13 @@ var TableHeader = /*#__PURE__*/React.memo(function (props) {
     updateSortableDisabled();
   });
   var createGroupHeaderCells = function createGroupHeaderCells(row) {
-    var columns = React.Children.toArray(row.props.children);
+    var columns = React.Children.toArray(RowBase.getCProp(row, 'children'));
     return createHeaderCells(columns);
   };
   var createHeaderCells = function createHeaderCells(columns) {
     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;
+      var isVisible = col ? !getColumnProp(col, 'hidden') : true;
+      var key = col ? getColumnProp(col, 'columnKey') || getColumnProp(col, 'field') || i : i;
       return isVisible && /*#__PURE__*/React.createElement(HeaderCell, {
         key: key,
         value: props.value,
@@ -3519,18 +3795,18 @@ var TableHeader = /*#__PURE__*/React.memo(function (props) {
   };
   var createFilterCells = function createFilterCells() {
     return React.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 = classNames('p-filter-column', filterHeaderClassName, className, {
           'p-frozen-column': frozen
@@ -3549,7 +3825,7 @@ var TableHeader = /*#__PURE__*/React.memo(function (props) {
   };
   var createContent = function createContent() {
     if (props.headerColumnGroup) {
-      var rows = React.Children.toArray(props.headerColumnGroup.props.children);
+      var rows = React.Children.toArray(ColumnGroupBase.getCProp(props.headerColumnGroup, 'children'));
       return rows.map(function (row, i) {
         return /*#__PURE__*/React.createElement("tr", {
           key: i,
@@ -3575,7 +3851,8 @@ TableHeader.displayName = 'TableHeader';
 
 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.forwardRef(function (props, ref) {
+var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
+  var props = DataTableBase.getProps(inProps);
   var _React$useState = React.useState(props.first),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     firstState = _React$useState2[0],
@@ -3710,8 +3987,8 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
   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.Children.toArray(props.children);
@@ -3956,7 +4233,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return props.selectAll;
     } else {
       var _data = props.selectionPageOnly ? dataToRender(processedData) : processedData;
-      var val = props.frozenValue ? [].concat(_toConsumableArray(props.frozenValue), _toConsumableArray(_data)) : _data;
+      var val = 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) {
@@ -3968,15 +4245,15 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
   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 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) {
@@ -4117,7 +4394,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
         });
       }) : [];
       if (checked) {
-        selection = props.frozenValue ? [].concat(_toConsumableArray(selection), _toConsumableArray(props.frozenValue), _toConsumableArray(_data2)) : [].concat(_toConsumableArray(selection), _toConsumableArray(_data2));
+        selection = 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,
@@ -4204,7 +4481,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       if (allowDrop) {
         var _columns = 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');
+          return getColumnProp(col1, 'columnKey') || getColumnProp(col2, 'columnKey') ? ObjectUtils.equals(col1.props, col2.props, 'columnKey') : ObjectUtils.equals(col1.props, col2.props, 'field');
         };
         var dragColIndex = _columns.findIndex(function (child) {
           return isSameColumn(child, draggedColumn.current);
@@ -4220,7 +4497,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
         }
         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);
@@ -4274,12 +4551,12 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
     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;
@@ -4455,9 +4732,9 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
     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++) {
@@ -4465,6 +4742,9 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       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;
@@ -4536,10 +4816,10 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
     } 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.filterMatchModeOptions[dataType] ? PrimeReact.filterMatchModeOptions[dataType][0] : 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.filterMatchModeOptions[dataType] ? PrimeReact.filterMatchModeOptions[dataType][0] : FilterMatchMode.STARTS_WITH);
         var constraint = {
           value: null,
           matchMode: matchMode
@@ -4609,7 +4889,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
     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;
       }, []);
     }
@@ -4627,12 +4907,13 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
     //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;
         }
@@ -4643,20 +4924,24 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
     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 = 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) {
@@ -4692,11 +4977,11 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
         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 (ObjectUtils.isNotEmpty(filters) || props.globalFilter) {
           data = filterLocal(data, filters);
@@ -4756,8 +5041,11 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
   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]);
   useUnmountEffect(function () {
     unbindColumnResizeEvents();
     destroyStyleElement();
@@ -4861,7 +5149,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       contentRef = options.contentRef,
       className = options.className;
       options.itemSize;
-    var frozenBody = props.frozenValue && /*#__PURE__*/React.createElement(TableBody, {
+    var frozenBody = ObjectUtils.isNotEmpty(props.frozenValue) && /*#__PURE__*/React.createElement(TableBody, {
       ref: frozenBodyRef,
       value: props.frozenValue,
       className: "p-datatable-frozen-tbody",
@@ -5132,7 +5420,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var empty = ObjectUtils.isEmpty(data);
   var selectionModeInColumn = getSelectionModeInColumn(columns);
   var selectable = props.selectionMode || selectionModeInColumn;
-  var otherProps = ObjectUtils.findDiffKeys(props, DataTable.defaultProps);
+  var otherProps = DataTableBase.getOtherProps(props);
   var className = classNames('p-datatable p-component', {
     'p-datatable-hoverable-rows': props.rowHover,
     'p-datatable-selectable': selectable && !props.cellSelection,
@@ -5172,139 +5460,5 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), 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: 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
-};
 
 export { DataTable };