primereact 10.9.5 → 10.9.7

package/datatable/datatable.cjs.js

@@ -19,7 +19,6 @@ var chevrondown = require('primereact/icons/chevrondown');
 var chevronright = require('primereact/icons/chevronright');
 var pencil = require('primereact/icons/pencil');
 var times = require('primereact/icons/times');
-var overlayservice = require('primereact/overlayservice');
 var ripple = require('primereact/ripple');
 var tooltip = require('primereact/tooltip');
 var button = require('primereact/button');
@@ -30,6 +29,7 @@ var filterslash = require('primereact/icons/filterslash');
 var plus = require('primereact/icons/plus');
 var trash = require('primereact/icons/trash');
 var inputtext = require('primereact/inputtext');
+var overlayservice = require('primereact/overlayservice');
 var portal = require('primereact/portal');
 var sortalt = require('primereact/icons/sortalt');
 var sortamountdown = require('primereact/icons/sortamountdown');
@@ -489,6 +489,9 @@ var DataTableBase = componentbase.ComponentBase.extend({
     alwaysShowPaginator: true,
     breakpoint: '960px',
     cellClassName: null,
+    cellMemo: true,
+    cellMemoProps: ['rowData', 'field', 'allowCellSelection', 'isCellSelected', 'editMode', 'index', 'tabIndex', 'editing', 'expanded', 'editingMeta', 'frozenCol', 'alignFrozenCol'],
+    cellMemoPropsDepth: 1,
     cellSelection: false,
     checkIcon: null,
     className: null,
@@ -1191,8 +1194,6 @@ var Cell = function Cell(props) {
     setStyleObjectState = _React$useState6[1];
   var elementRef = React__namespace.useRef(null);
   var keyHelperRef = React__namespace.useRef(null);
-  var overlayEventListener = React__namespace.useRef(null);
-  var selfClick = React__namespace.useRef(false);
   var focusTimeout = React__namespace.useRef(null);
   var initFocusTimeout = React__namespace.useRef(null);
   var editingRowDataStateRef = React__namespace.useRef(null);
@@ -1229,17 +1230,20 @@ var Cell = function Cell(props) {
   var cellEditValidateOnClose = function cellEditValidateOnClose() {
     return getColumnProp('cellEditValidateOnClose');
   };
+  var isIgnoredElement = function isIgnoredElement(element) {
+    var isOverlay = function isOverlay(el) {
+      return el.getAttribute && el.getAttribute('data-pr-is-overlay');
+    };
+    return isOverlay(element) || utils.DomHandler.getParents(element).find(function (el) {
+      return isOverlay(el);
+    });
+  };
   var _useEventListener = hooks.useEventListener({
       type: 'click',
       listener: function listener(e) {
-        setTimeout(function () {
-          if (!selfClick.current && isOutsideClicked(e.target)) {
-            // #2666 for overlay components and outside is clicked
-
-            switchCellToViewMode(e, true);
-          }
-        }, 0);
-        selfClick.current = false;
+        if (!isIgnoredElement(e.target) && isOutsideClicked(e.target)) {
+          switchCellToViewMode(e, true);
+        }
       },
       options: true,
       when: isEditable()
@@ -1284,10 +1288,6 @@ var Cell = function Cell(props) {
     setTimeout(function () {
       setEditingState(false);
       unbindDocumentClickListener();
-      overlayservice.OverlayService.off('overlay-click', overlayEventListener.current);
-      overlayEventListener.current = null;
-      editingRowDataStateRef.current = null;
-      selfClick.current = false;
     }, 1);
   };
   var switchCellToViewMode = function switchCellToViewMode(event, submit) {
@@ -1331,7 +1331,7 @@ var Cell = function Cell(props) {
     editingRowDataStateRef.current = editingRowData;
   };
   var _onClick = function onClick(event) {
-    props.onClick(event, getCellCallbackParams(event), isEditable(), editingState, setEditingState, selfClick, props.column, bindDocumentClickListener, overlayEventListener);
+    props.onClick(event, getCellCallbackParams(event), isEditable(), editingState, setEditingState, props.column, bindDocumentClickListener);
   };
   var _onMouseDown = function onMouseDown(event) {
     var params = getCellCallbackParams(event);
@@ -1403,7 +1403,6 @@ var Cell = function Cell(props) {
     }
   };
   var _onBlur = function onBlur(event) {
-    selfClick.current = false;
     if (props.editMode !== 'row' && editingState && getColumnProp('cellEditValidatorEvent') === 'blur') {
       switchCellToViewMode(event, true);
     }
@@ -1453,7 +1452,7 @@ var Cell = function Cell(props) {
       field: props.field,
       index: props.rowIndex
     });
-    props.focusOnInit();
+    props.focusOnInit(initFocusTimeout, elementRef);
   };
   React__namespace.useEffect(function () {
     if (props.frozenCol) props.updateStickyPosition(elementRef, props.frozenCol, props.alignFrozenCol, styleObjectState, setStyleObjectState);
@@ -1484,9 +1483,8 @@ var Cell = function Cell(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editingState]);
   hooks.useUnmountEffect(function () {
-    if (overlayEventListener.current) {
-      overlayservice.OverlayService.off('overlay-click', overlayEventListener.current);
-      overlayEventListener.current = null;
+    if (editingRowDataStateRef.current) {
+      editingRowDataStateRef.current = null;
     }
   });
   var createLoading = function createLoading() {
@@ -1790,15 +1788,23 @@ var Cell = function Cell(props) {
 var RadioCheckCell = /*#__PURE__*/React__namespace.memo(function (props) {
   return /*#__PURE__*/React__namespace.createElement(Cell, props);
 }, function (prevProps, nextProps) {
+  if (nextProps.cellMemo === false) return false;
   var keysToCompare = ['isRowSelected', 'field', 'allowCellSelection', 'isCellSelected', 'editMode', 'index', 'tabIndex', 'editing', 'expanded', 'editingMeta', 'rowData'];
   return utils.ObjectUtils.selectiveCompare(prevProps, nextProps, keysToCompare);
 });
 RadioCheckCell.displayName = 'RadioCheckCell';
+var defaultKeysToCompare = ['rowData', 'field', 'allowCellSelection', 'isCellSelected', 'editMode', 'index', 'tabIndex', 'editing', 'expanded', 'editingMeta', 'frozenCol', 'alignFrozenCol'];
 var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
   return /*#__PURE__*/React__namespace.createElement(Cell, props);
 }, function (prevProps, nextProps) {
-  var keysToCompare = ['field', 'allowCellSelection', 'isCellSelected', 'editMode', 'index', 'tabIndex', 'editing', 'expanded', 'editingMeta', 'rowData', 'frozenCol', 'alignFrozenCol'];
-  return utils.ObjectUtils.selectiveCompare(prevProps, nextProps, keysToCompare);
+  if (nextProps.cellMemo === false) return false;
+  var memoProps = nextProps.cellMemoProps;
+  var keysToCompare = Array.isArray(memoProps) && memoProps.every(function (prop) {
+    return typeof prop === 'string';
+  }) ? memoProps : defaultKeysToCompare;
+  var memoPropsDepth = nextProps.cellMemoPropsDepth;
+  var depth = typeof memoPropsDepth === 'number' && memoPropsDepth > 0 ? memoPropsDepth : 1;
+  return utils.ObjectUtils.selectiveCompare(prevProps, nextProps, keysToCompare, depth);
 });
 BodyCell.displayName = 'BodyCell';
 
@@ -2266,8 +2272,13 @@ var BodyRow = /*#__PURE__*/React__namespace.memo(function (props) {
       } else {
         var left = 0;
         var prev = elementRef.current && elementRef.current.previousElementSibling;
-        if (prev && prev.classList.contains('p-frozen-column')) {
-          left = utils.DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
+        while (prev) {
+          if (prev.classList.contains('p-frozen-column')) {
+            left = utils.DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
+            elementRef.current.style.left = left + 'px';
+            break;
+          }
+          prev = prev.previousElementSibling;
         }
         styleObject.left = left + 'px';
       }
@@ -2275,9 +2286,8 @@ var BodyRow = /*#__PURE__*/React__namespace.memo(function (props) {
       !isSameStyle && setStyleObjectState(styleObject);
     }
   }, []);
-  var onCellClick = function onCellClick(event, params, isEditable, editingState, setEditingState, selfClick, column, bindDocumentClickListener, overlayEventListener) {
+  var onCellClick = function onCellClick(event, params, isEditable, editingState, setEditingState, column, bindDocumentClickListener) {
     if (props.editMode !== 'row' && isEditable && !editingState && (props.selectOnEdit || !props.selectOnEdit && props.isRowSelected)) {
-      selfClick.current = true;
       var onBeforeCellEditShow = getColumnProp(column, 'onBeforeCellEditShow');
       var onCellEditInit = getColumnProp(column, 'onCellEditInit');
       var cellEditValidatorEvent = getColumnProp(column, 'cellEditValidatorEvent');
@@ -2308,12 +2318,6 @@ var BodyRow = /*#__PURE__*/React__namespace.memo(function (props) {
         }
         if (cellEditValidatorEvent === 'click') {
           bindDocumentClickListener();
-          overlayEventListener.current = function (e) {
-            if (!isOutsideClicked(e.target)) {
-              selfClick.current = true;
-            }
-          };
-          overlayservice.OverlayService.on('overlay-click', overlayEventListener.current);
         }
       }, 1);
     }
@@ -2334,6 +2338,9 @@ var BodyRow = /*#__PURE__*/React__namespace.memo(function (props) {
         var cellProps = mergeProps({
           hostName: props.hostName,
           allowCellSelection: props.allowCellSelection,
+          cellMemo: props.cellMemo,
+          cellMemoProps: props.cellMemoProps,
+          cellMemoPropsDepth: props.cellMemoPropsDepth,
           cellClassName: props.cellClassName,
           checkIcon: props.checkIcon,
           collapsedRowIcon: props.collapsedRowIcon,
@@ -2701,9 +2708,6 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
     options = options || props.virtualScrollerOptions;
     return options ? options[option] : null;
   };
-  var getProcessedDataIndex = function getProcessedDataIndex(rowIndex) {
-    return props.lazy ? rowIndex - props.first : rowIndex;
-  };
   var findIndex = function findIndex(collection, rowData) {
     return (collection || []).findIndex(function (data) {
       return equals(rowData, data);
@@ -2874,16 +2878,14 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
     var rangeStart;
     var rangeEnd;
     var isAllowCellSelection = allowCellSelection();
-    var rangeRowIndexInProcessedData = getProcessedDataIndex(rangeRowIndex.current);
-    var anchorRowIndexInProcessedData = getProcessedDataIndex(anchorRowIndex.current);
-    if (rangeRowIndexInProcessedData > anchorRowIndexInProcessedData) {
-      rangeStart = anchorRowIndexInProcessedData;
-      rangeEnd = rangeRowIndexInProcessedData;
-    } else if (rangeRowIndexInProcessedData < anchorRowIndexInProcessedData) {
-      rangeStart = rangeRowIndexInProcessedData;
-      rangeEnd = anchorRowIndexInProcessedData;
+    if (rangeRowIndex.current > anchorRowIndex.current) {
+      rangeStart = anchorRowIndex.current;
+      rangeEnd = rangeRowIndex.current;
+    } else if (rangeRowIndex.current < anchorRowIndex.current) {
+      rangeStart = rangeRowIndex.current;
+      rangeEnd = anchorRowIndex.current;
     } else {
-      rangeStart = rangeEnd = rangeRowIndexInProcessedData;
+      rangeStart = rangeEnd = rangeRowIndex.current;
     }
     return isAllowCellSelection ? selectRangeOnCell(event, rangeStart, rangeEnd) : selectRangeOnRow(event, rangeStart, rangeEnd);
   };
@@ -2924,7 +2926,7 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
     for (var i = rowRangeStart; i <= rowRangeEnd; i++) {
       var rowData = value[i];
       var columns = props.columns;
-      var rowIndex = props.lazy ? i + props.first : i;
+      var rowIndex = props.paginator ? i + props.first : i;
       for (var j = cellRangeStart; j <= cellRangeEnd; j++) {
         var field = getColumnProp(columns[j], 'field');
         var _value = utils.ObjectUtils.resolveFieldData(rowData, field);
@@ -3123,13 +3125,17 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
       onRangeSelection(event, 'row');
     }
   };
+  var expandedRowsRef = React__namespace.useRef(props.expandedRows);
+  React__namespace.useEffect(function () {
+    expandedRowsRef.current = props.expandedRows;
+  }, [props.expandedRows]);
   var onRowToggle = function onRowToggle(event) {
     var expandedRows;
     var dataKey = props.dataKey;
     var hasDataKey = props.groupRowsBy ? dataKey === props.groupRowsBy : !!dataKey;
     if (hasDataKey) {
       var dataKeyValue = String(utils.ObjectUtils.resolveFieldData(event.data, dataKey));
-      expandedRows = props.expandedRows ? _objectSpread$8({}, props.expandedRows) : {};
+      expandedRows = expandedRowsRef.current ? _objectSpread$8({}, expandedRowsRef.current) : {};
       if (expandedRows[dataKeyValue] != null) {
         delete expandedRows[dataKeyValue];
         if (props.onRowCollapse) {
@@ -3148,8 +3154,8 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
         }
       }
     } else {
-      var expandedRowIndex = findIndex(props.expandedRows, event.data);
-      expandedRows = props.expandedRows ? _toConsumableArray(props.expandedRows) : [];
+      var expandedRowIndex = findIndex(expandedRowsRef.current, event.data);
+      expandedRows = expandedRowsRef.current ? _toConsumableArray(expandedRowsRef.current) : [];
       if (expandedRowIndex !== -1) {
         expandedRows = expandedRows.filter(function (_, i) {
           return i !== expandedRowIndex;
@@ -3399,7 +3405,7 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
     return null;
   };
   var createGroupHeader = function createGroupHeader(rowData, rowIndex, expanded, colSpan) {
-    if (isSubheaderGrouping && shouldRenderRowGroupHeader(props.value, rowData, getProcessedDataIndex(rowIndex))) {
+    if (isSubheaderGrouping && shouldRenderRowGroupHeader(props.value, rowData, rowIndex - props.first)) {
       var style = rowGroupHeaderStyle();
       var toggler = props.expandableRowGroups && /*#__PURE__*/React__namespace.createElement(RowTogglerButton, {
         hostName: props.hostName,
@@ -3449,6 +3455,9 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
         hostName: props.hostName,
         allowCellSelection: _allowCellSelection,
         allowRowSelection: _allowRowSelection,
+        cellMemo: props.cellMemo,
+        cellMemoProps: props.cellMemoProps,
+        cellMemoPropsDepth: props.cellMemoPropsDepth,
         cellClassName: props.cellClassName,
         checkIcon: props.checkIcon,
         collapsedRowIcon: props.collapsedRowIcon,
@@ -3668,16 +3677,21 @@ var FooterCell = /*#__PURE__*/React__namespace.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 && next.classList.contains('p-frozen-column')) {
           right = utils.DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
         }
         styleObject.right = right + 'px';
       } else {
         var left = 0;
-        var prev = elementRef.current.previousElementSibling;
-        if (prev && prev.classList.contains('p-frozen-column')) {
-          left = utils.DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
+        var prev = elementRef.current && elementRef.current.previousElementSibling;
+        while (prev) {
+          if (prev && prev.classList.contains('p-frozen-column')) {
+            left = utils.DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
+            elementRef.current.style.left = left + 'px';
+            break;
+          }
+          prev = prev.previousElementSibling;
         }
         styleObject.left = left + 'px';
       }
@@ -3841,6 +3855,7 @@ var FilterMatchMode = Object.freeze({
   EQUALS: 'equals',
   NOT_EQUALS: 'notEquals',
   IN: 'in',
+  NOT_IN: 'notIn',
   LESS_THAN: 'lt',
   LESS_THAN_OR_EQUAL_TO: 'lte',
   GREATER_THAN: 'gt',
@@ -3929,6 +3944,7 @@ var locales = {
     emptySelectionMessage: 'No selected item',
     endsWith: 'Ends with',
     equals: 'Equals',
+    fileChosenMessage: '{0} files',
     fileSizeTypes: ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
     filter: 'Filter',
     firstDayOfWeek: 0,
@@ -3947,6 +3963,7 @@ var locales = {
     nextMonth: 'Next Month',
     nextSecond: 'Next Second',
     nextYear: 'Next Year',
+    noFileChosenMessage: 'No file chosen',
     noFilter: 'No Filter',
     notContains: 'Not contains',
     notEquals: 'Not equals',
@@ -3974,8 +3991,10 @@ var locales = {
     aria: {
       cancelEdit: 'Cancel Edit',
       close: 'Close',
+      collapseLabel: 'Collapse',
       collapseRow: 'Row Collapsed',
       editRow: 'Edit Row',
+      expandLabel: 'Expand',
       expandRow: 'Row Expanded',
       falseLabel: 'False',
       filterConstraint: 'Filter Constraint',
@@ -4000,18 +4019,20 @@ var locales = {
       next: 'Next',
       nextPageLabel: 'Next Page',
       nullLabel: 'Not Selected',
-      pageLabel: 'Page {page}',
       otpLabel: 'Please enter one time password character {0}',
+      pageLabel: 'Page {page}',
       passwordHide: 'Hide Password',
       passwordShow: 'Show Password',
       previous: 'Previous',
       prevPageLabel: 'Previous Page',
+      removeLabel: 'Remove',
       rotateLeft: 'Rotate Left',
       rotateRight: 'Rotate Right',
       rowsPerPageLabel: 'Rows per page',
       saveEdit: 'Save Edit',
       scrollTop: 'Scroll Top',
       selectAll: 'All items selected',
+      selectLabel: 'Select',
       selectRow: 'Row Selected',
       showFilterMenu: 'Show Filter Menu',
       slide: 'Slide',
@@ -4020,6 +4041,7 @@ var locales = {
       stars: '{star} stars',
       trueLabel: 'True',
       unselectAll: 'All items unselected',
+      unselectLabel: 'Unselect',
       unselectRow: 'Row Unselected',
       zoomImage: 'Zoom Image',
       zoomIn: 'Zoom In',
@@ -4352,7 +4374,7 @@ var ColumnFilter = /*#__PURE__*/React__namespace.memo(function (props) {
       };
     } else {
       filters[field].value = null;
-      filters[field].matchMode = defaultConstraint.matchMode;
+      filters[field].matchMode = defaultConstraint ? defaultConstraint.matchMode : filters[field].matchMode;
     }
     filterClearCallback && filterClearCallback();
     props.onFilterChange(filters);
@@ -4419,6 +4441,7 @@ var ColumnFilter = /*#__PURE__*/React__namespace.memo(function (props) {
     }
   };
   var onRowMatchModeChange = function onRowMatchModeChange(matchMode) {
+    var _iconRef$current;
     var filterMatchModeChangeCallback = getColumnProp('onFilterMatchModeChange');
     var filters = _objectSpread$4({}, props.filters);
     filters[field].matchMode = matchMode;
@@ -4429,6 +4452,7 @@ var ColumnFilter = /*#__PURE__*/React__namespace.memo(function (props) {
     props.onFilterChange(filters);
     props.onFilterApply();
     hide();
+    (_iconRef$current = iconRef.current) === null || _iconRef$current === void 0 || _iconRef$current.focus();
   };
   var onRowMatchModeKeyDown = function onRowMatchModeKeyDown(event, matchMode, clear) {
     var item = event.target;
@@ -5188,16 +5212,21 @@ var HeaderCell = /*#__PURE__*/React__namespace.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 && next.classList.contains('p-frozen-column')) {
           right = utils.DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
         }
         styleObject.right = right + 'px';
       } else {
         var left = 0;
-        var prev = elementRef.current.previousElementSibling;
-        if (prev && prev.classList.contains('p-frozen-column')) {
-          left = utils.DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
+        var prev = elementRef.current && elementRef.current.previousElementSibling;
+        while (prev) {
+          if (prev && prev.classList.contains('p-frozen-column')) {
+            left = utils.DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
+            elementRef.current.style.left = left + 'px';
+            break;
+          }
+          prev = prev.previousElementSibling;
         }
         styleObject.left = left + 'px';
       }
@@ -6048,6 +6077,20 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
             multiSortMeta: restoredState.multiSortMeta
           }));
         } else {
+          var lastMeta = restoredState.multiSortMeta[restoredState.multiSortMeta.length - 1];
+          var field = lastMeta && lastMeta.field ? lastMeta.field : null;
+          if (field) {
+            var sortColumn = findColumnByKey(getColumns(), field);
+            if (sortColumn) {
+              var sortFunction = getColumnProp(sortColumn, 'sortFunction');
+              var sortable = getColumnProp(sortColumn, 'sortable');
+              if (sortFunction && sortable) {
+                columnSortFunction.current = sortFunction;
+                columnSortable.current = sortable;
+                columnField.current = field;
+              }
+            }
+          }
           setMultiSortMetaState(restoredState.multiSortMeta);
         }
       }
@@ -6946,58 +6989,60 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
   var exportCSV = function exportCSV(options) {
     var data;
     var csv = "\uFEFF";
-    var columns = getColumns();
     if (options && options.selectionOnly) {
       data = props.selection || [];
     } else {
       data = [].concat(_toConsumableArray(props.frozenValue || []), _toConsumableArray(processedData() || []));
     }
 
-    //headers
-    columns.forEach(function (column, i) {
-      var _ref5 = [getColumnProp(column, 'field'), getColumnProp(column, 'header'), getColumnProp(column, 'exportHeader'), getColumnProp(column, 'exportable')],
+    // First build collection of exportable columns
+    var exportableColumns = getColumns().filter(function (column) {
+      var exportable = getColumnProp(column, 'exportable');
+      var field = getColumnProp(column, 'field');
+
+      // Column must be exportable (or undefined/not set) and have a field defined
+      return exportable !== false && field;
+    });
+
+    // headers
+    exportableColumns.forEach(function (column, i) {
+      var _ref5 = [getColumnProp(column, 'field'), getColumnProp(column, 'header'), getColumnProp(column, 'exportHeader')],
         field = _ref5[0],
         header = _ref5[1],
-        exportHeader = _ref5[2],
-        exportable = _ref5[3];
-      if (exportable && field) {
-        var columnHeader = String(exportHeader || header || field).replace(/"/g, '""').replace(/\n/g, "\u2028");
-        csv = csv + ('"' + columnHeader + '"');
-        if (i < columns.length - 1) {
-          csv = csv + props.csvSeparator;
-        }
+        exportHeader = _ref5[2];
+      var columnHeader = String(exportHeader || header || field).replace(/"/g, '""').replace(/\n/g, "\u2028");
+      csv = csv + ('"' + columnHeader + '"');
+      if (i < exportableColumns.length - 1) {
+        csv = csv + props.csvSeparator;
       }
     });
 
-    //body
+    // body
     data.forEach(function (record) {
       csv = csv + '\n';
-      columns.forEach(function (column, i) {
-        var _ref6 = [getColumnProp(column, 'field'), getColumnProp(column, 'exportField'), getColumnProp(column, 'exportable')],
+      exportableColumns.forEach(function (column, i) {
+        var _ref6 = [getColumnProp(column, 'field'), getColumnProp(column, 'exportField')],
           colField = _ref6[0],
-          exportField = _ref6[1],
-          exportable = _ref6[2];
+          exportField = _ref6[1];
         var field = exportField || colField;
-        if (exportable && field) {
-          var cellData = utils.ObjectUtils.resolveFieldData(record, field);
-          if (cellData != null) {
-            if (props.exportFunction) {
-              cellData = props.exportFunction({
-                data: cellData,
-                field: field,
-                rowData: record,
-                column: column
-              });
-            } else {
-              cellData = String(cellData).replace(/"/g, '""').replace(/\n/g, "\u2028");
-            }
+        var cellData = utils.ObjectUtils.resolveFieldData(record, field);
+        if (cellData != null) {
+          if (props.exportFunction) {
+            cellData = props.exportFunction({
+              data: cellData,
+              field: field,
+              rowData: record,
+              column: column
+            });
           } else {
-            cellData = '';
-          }
-          csv = csv + ('"' + cellData + '"');
-          if (i < columns.length - 1) {
-            csv = csv + props.csvSeparator;
+            cellData = String(cellData).replace(/"/g, '""').replace(/\n/g, "\u2028");
           }
+        } else {
+          cellData = '';
+        }
+        csv = csv + ('"' + cellData + '"');
+        if (i < exportableColumns.length - 1) {
+          csv = csv + props.csvSeparator;
         }
       });
     });
@@ -7161,6 +7206,9 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
       },
       getVirtualScroller: function getVirtualScroller() {
         return virtualScrollerRef.current;
+      },
+      getProcessedData: function getProcessedData() {
+        return processedData();
       }
     };
   });
@@ -7262,6 +7310,9 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
     var frozenBody = utils.ObjectUtils.isNotEmpty(props.frozenValue) && /*#__PURE__*/React__namespace.createElement(TableBody, {
       hostName: "DataTable",
       ref: frozenBodyRef,
+      cellMemo: props.cellMemo,
+      cellMemoProps: props.cellMemoProps,
+      cellMemoPropsDepth: props.cellMemoPropsDepth,
       cellClassName: props.cellClassName,
       cellSelection: props.cellSelection,
       checkIcon: props.checkIcon,
@@ -7346,6 +7397,9 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
     var body = /*#__PURE__*/React__namespace.createElement(TableBody, {
       hostName: "DataTable",
       ref: bodyRef,
+      cellMemo: props.cellMemo,
+      cellMemoProps: props.cellMemoProps,
+      cellMemoPropsDepth: props.cellMemoPropsDepth,
       cellClassName: props.cellClassName,
       cellSelection: props.cellSelection,
       checkIcon: props.checkIcon,