primereact 9.3.1 → 9.5.0

package/datatable/datatable.js

@@ -1,5 +1,5 @@
 this.primereact = this.primereact || {};
-this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks, arrowdown, arrowup, spinner, paginator, virtualscroller, overlayservice, ripple, check, times, pencil, chevrondown, chevronright, bars, button, csstransition, dropdown, inputtext, portal, filter, filterslash, trash, plus, tooltip, sortalt, sortamountdown, sortamountupalt) {
+this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks, arrowdown, arrowup, spinner, paginator, virtualscroller, bars, check, chevrondown, chevronright, pencil, times, overlayservice, ripple, button, csstransition, dropdown, filter, filterslash, plus, trash, inputtext, portal, sortalt, sortamountdown, sortamountupalt, tooltip) {
   'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -249,9 +249,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       __TYPE: 'DataTable',
       alwaysShowPaginator: true,
       breakpoint: '960px',
-      checkIcon: null,
       cellClassName: null,
       cellSelection: false,
+      checkIcon: null,
       className: null,
       collapsedRowIcon: null,
       columnResizeMode: 'fit',
@@ -272,8 +272,10 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       expandedRows: null,
       exportFilename: 'download',
       exportFunction: null,
+      filterClearIcon: null,
       filterDelay: 300,
       filterDisplay: 'menu',
+      filterIcon: null,
       filterLocale: undefined,
       filters: null,
       first: 0,
@@ -308,8 +310,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       onFilter: null,
       onPage: null,
       onRowClick: null,
-      onRowMouseEnter: null,
-      onRowMouseLeave: null,
       onRowCollapse: null,
       onRowDoubleClick: null,
       onRowEditCancel: null,
@@ -318,6 +318,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       onRowEditInit: null,
       onRowEditSave: null,
       onRowExpand: null,
+      onRowMouseEnter: null,
+      onRowMouseLeave: null,
       onRowReorder: null,
       onRowSelect: null,
       onRowToggle: null,
@@ -337,10 +339,10 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       paginatorRight: null,
       paginatorTemplate: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown',
       removableSort: false,
-      reorderableColumns: false,
-      reorderableRows: false,
       reorderIndicatorDownIcon: null,
       reorderIndicatorUpIcon: null,
+      reorderableColumns: false,
+      reorderableRows: false,
       resizableColumns: false,
       responsiveLayout: 'scroll',
       rowClassName: null,
@@ -365,6 +367,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       selectionMode: null,
       selectionPageOnly: false,
       showGridlines: false,
+      showHeaders: true,
       showRowReorderElement: null,
       showSelectAll: true,
       showSelectionElement: null,
@@ -765,14 +768,29 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         var onCellEditInit = getColumnProp('onCellEditInit');
         var cellEditValidatorEvent = getColumnProp('cellEditValidatorEvent');
         if (onBeforeCellEditShow) {
-          onBeforeCellEditShow(params);
+          // if user returns false do not show the editor
+          if (onBeforeCellEditShow(params) === false) {
+            return;
+          }
+
+          // if user prevents default stop the editor
+          if (event && event.defaultPrevented) {
+            return;
+          }
         }
 
         // If the data is sorted using sort icon, it has been added to wait for the sort operation when any cell is wanted to be opened.
         setTimeout(function () {
           setEditingState(true);
           if (onCellEditInit) {
-            onCellEditInit(params);
+            if (onCellEditInit(params) === false) {
+              return;
+            }
+
+            // if user prevents default stop the editor
+            if (event && event.defaultPrevented) {
+              return;
+            }
           }
           if (cellEditValidatorEvent === 'click') {
             bindDocumentClickListener();
@@ -944,7 +962,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       }
     }, [props.editingMeta]);
     React__namespace.useEffect(function () {
-      if (props.editMode === 'row') {
+      if (props.editMode === 'cell' || props.editMode === 'row') {
         var callbackParams = getCellCallbackParams();
         var params = _objectSpread$8(_objectSpread$8({}, callbackParams), {}, {
           editing: editingState,
@@ -1508,45 +1526,48 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
           var rowSpan = props.rowGroupMode === 'rowspan' ? calculateRowGroupSize(props.value, col, props.index) : null;
           return /*#__PURE__*/React__namespace.createElement(BodyCell, {
             key: key,
-            value: props.value,
-            tableProps: props.tableProps,
-            tableSelector: props.tableSelector,
+            allowCellSelection: props.allowCellSelection,
+            cellClassName: props.cellClassName,
+            checkIcon: props.checkIcon,
+            collapsedRowIcon: props.collapsedRowIcon,
             column: col,
-            rowData: props.rowData,
-            rowIndex: props.rowIndex,
-            index: i,
-            rowSpan: rowSpan,
+            compareSelectionBy: props.compareSelectionBy,
             dataKey: props.dataKey,
+            editMode: props.editMode,
             editing: editing,
             editingMeta: props.editingMeta,
-            editMode: props.editMode,
+            expanded: props.expanded,
+            expandedRowIcon: props.expandedRowIcon,
+            frozenRow: props.frozenRow,
+            index: i,
+            isSelectable: props.isSelectable,
+            onCheckboxChange: props.onCheckboxChange,
+            onClick: props.onCellClick,
+            onEditingMetaChange: props.onEditingMetaChange,
+            onMouseDown: props.onCellMouseDown,
+            onMouseUp: props.onCellMouseUp,
+            onRadioChange: props.onRadioChange,
+            onRowEditCancel: onEditCancel,
             onRowEditInit: onEditInit,
             onRowEditSave: onEditSave,
-            onRowEditCancel: onEditCancel,
-            onEditingMetaChange: props.onEditingMetaChange,
             onRowToggle: props.onRowToggle,
-            selection: props.selection,
-            selectionAriaLabel: props.tableProps.selectionAriaLabel,
-            allowCellSelection: props.allowCellSelection,
-            compareSelectionBy: props.compareSelectionBy,
+            responsiveLayout: props.responsiveLayout,
+            rowData: props.rowData,
+            rowEditorCancelIcon: props.rowEditorCancelIcon,
+            rowEditorInitIcon: props.rowEditorInitIcon,
+            rowEditorSaveIcon: props.rowEditorSaveIcon,
+            rowIndex: props.rowIndex,
+            rowSpan: rowSpan,
             selectOnEdit: props.selectOnEdit,
             selected: props.selected,
-            onClick: props.onCellClick,
-            onMouseDown: props.onCellMouseDown,
-            onMouseUp: props.onCellMouseUp,
-            tabIndex: props.tabIndex,
-            cellClassName: props.cellClassName,
-            responsiveLayout: props.responsiveLayout,
-            frozenRow: props.frozenRow,
-            isSelectable: props.isSelectable,
-            showSelectionElement: props.showSelectionElement,
+            selection: props.selection,
+            selectionAriaLabel: props.tableProps.selectionAriaLabel,
             showRowReorderElement: props.showRowReorderElement,
-            onRadioChange: props.onRadioChange,
-            onCheckboxChange: props.onCheckboxChange,
-            expanded: props.expanded,
-            expandedRowIcon: props.expandedRowIcon,
-            collapsedRowIcon: props.collapsedRowIcon,
-            checkIcon: props.checkIcon,
+            showSelectionElement: props.showSelectionElement,
+            tabIndex: props.tabIndex,
+            tableProps: props.tableProps,
+            tableSelector: props.tableSelector,
+            value: props.value,
             virtualScrollerOptions: props.virtualScrollerOptions
           });
         }
@@ -1689,7 +1710,22 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         if (isSubheaderGrouping && props.expandableRowGroups) {
           return isRowGroupExpanded(rowData);
         } else {
-          if (props.dataKey) return props.expandedRows ? props.expandedRows[utils.ObjectUtils.resolveFieldData(rowData, props.dataKey)] !== undefined : false;else return findIndex(props.expandedRows, rowData) !== -1;
+          if (props.dataKey) {
+            var rowId = utils.ObjectUtils.resolveFieldData(rowData, props.dataKey);
+            var expanded = false;
+            if (props.expandedRows) {
+              if (Array.isArray(props.expandedRows)) {
+                expanded = props.expandedRows.some(function (row) {
+                  return utils.ObjectUtils.resolveFieldData(row, props.dataKey) === rowId;
+                });
+              } else {
+                expanded = props.expandedRows[rowId] !== undefined;
+              }
+            }
+            return expanded;
+          } else {
+            return findIndex(props.expandedRows, rowData) !== -1;
+          }
         }
       }
       return false;
@@ -2414,67 +2450,70 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         var _allowCellSelection = allowCellSelection();
         var editing = isRowEditing(rowData);
         return /*#__PURE__*/React__namespace.createElement(BodyRow, {
-          tableProps: props.tableProps,
-          tableSelector: props.tableSelector,
-          value: props.value,
+          allowCellSelection: _allowCellSelection,
+          allowRowSelection: _allowRowSelection,
+          cellClassName: props.cellClassName,
+          checkIcon: props.checkIcon,
+          collapsedRowIcon: props.collapsedRowIcon,
           columns: props.columns,
-          rowData: rowData,
-          rowIndex: rowIndex,
-          index: index,
-          selected: selected,
+          compareSelectionBy: props.compareSelectionBy,
           contextMenuSelected: contextMenuSelected,
-          onRowClick: onRowClick,
-          onRowDoubleClick: onRowDoubleClick,
-          onRowRightClick: onRowRightClick,
-          onRowMouseEnter: onRowMouseEnter,
-          onRowMouseLeave: onRowMouseLeave,
-          tabIndex: props.tabIndex,
+          dataKey: props.dataKey,
+          editMode: props.editMode,
+          editing: editing,
+          editingMeta: props.editingMeta,
+          editingRows: props.editingRows,
+          expanded: expanded,
+          expandedRowIcon: props.expandedRowIcon,
+          frozenRow: props.frozenRow,
+          groupRowsBy: props.groupRowsBy,
+          index: index,
           isSelectable: isSelectable,
-          onRowTouchEnd: onRowTouchEnd,
-          onRowMouseDown: onRowMouseDown,
-          onRowMouseUp: onRowMouseUp,
-          onRowToggle: onRowToggle,
-          onRowDragStart: onRowDragStart,
-          onRowDragOver: onRowDragOver,
-          onRowDragLeave: onRowDragLeave,
-          onRowDragEnd: onRowDragEnd,
-          onRowDrop: onRowDrop,
-          onRadioChange: onRadioChange,
-          onCheckboxChange: onCheckboxChange,
           onCellClick: onCellClick,
           onCellMouseDown: onCellMouseDown,
           onCellMouseUp: onCellMouseUp,
-          editing: editing,
-          editingRows: props.editingRows,
-          editingMeta: props.editingMeta,
-          editMode: props.editMode,
-          onRowEditChange: props.onRowEditChange,
+          onCheckboxChange: onCheckboxChange,
           onEditingMetaChange: props.onEditingMetaChange,
-          groupRowsBy: props.groupRowsBy,
-          compareSelectionBy: props.compareSelectionBy,
-          dataKey: props.dataKey,
-          rowGroupMode: props.rowGroupMode,
+          onRadioChange: onRadioChange,
+          onRowClick: onRowClick,
+          onRowDoubleClick: onRowDoubleClick,
+          onRowDragEnd: onRowDragEnd,
+          onRowDragLeave: onRowDragLeave,
+          onRowDragOver: onRowDragOver,
+          onRowDragStart: onRowDragStart,
+          onRowDrop: onRowDrop,
+          onRowEditCancel: props.onRowEditCancel,
+          onRowEditChange: props.onRowEditChange,
+          onRowEditComplete: props.onRowEditComplete,
           onRowEditInit: props.onRowEditInit,
-          rowEditValidator: props.rowEditValidator,
           onRowEditSave: props.onRowEditSave,
-          onRowEditComplete: props.onRowEditComplete,
-          onRowEditCancel: props.onRowEditCancel,
-          selection: props.selection,
-          allowRowSelection: _allowRowSelection,
-          allowCellSelection: _allowCellSelection,
+          onRowMouseDown: onRowMouseDown,
+          onRowMouseEnter: onRowMouseEnter,
+          onRowMouseLeave: onRowMouseLeave,
+          onRowMouseUp: onRowMouseUp,
+          onRowRightClick: onRowRightClick,
+          onRowToggle: onRowToggle,
+          onRowTouchEnd: onRowTouchEnd,
+          responsiveLayout: props.responsiveLayout,
+          rowClassName: props.rowClassName,
+          rowData: rowData,
+          rowEditValidator: props.rowEditValidator,
+          rowEditorCancelIcon: props.rowEditorCancelIcon,
+          rowEditorInitIcon: props.rowEditorInitIcon,
+          rowEditorSaveIcon: props.rowEditorSaveIcon,
+          rowGroupMode: props.rowGroupMode,
+          rowIndex: rowIndex,
           selectOnEdit: props.selectOnEdit,
+          selected: selected,
+          selection: props.selection,
           selectionMode: props.selectionMode,
           selectionModeInColumn: props.selectionModeInColumn,
-          cellClassName: props.cellClassName,
-          responsiveLayout: props.responsiveLayout,
-          frozenRow: props.frozenRow,
-          showSelectionElement: props.showSelectionElement,
           showRowReorderElement: props.showRowReorderElement,
-          expanded: expanded,
-          expandedRowIcon: props.expandedRowIcon,
-          collapsedRowIcon: props.collapsedRowIcon,
-          checkIcon: props.checkIcon,
-          rowClassName: props.rowClassName,
+          showSelectionElement: props.showSelectionElement,
+          tabIndex: props.tabIndex,
+          tableProps: props.tableProps,
+          tableSelector: props.tableSelector,
+          value: props.value,
           virtualScrollerOptions: props.virtualScrollerOptions
         });
       }
@@ -3115,7 +3154,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       var iconProps = {
         'aria-hidden': true
       };
-      var icon = props.columnFilterIcon || /*#__PURE__*/React__namespace.createElement(filter.FilterIcon, iconProps);
+      var icon = props.filterIcon || /*#__PURE__*/React__namespace.createElement(filter.FilterIcon, iconProps);
       var columnFilterIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$3({}, iconProps), {
         props: props
       });
@@ -3627,21 +3666,15 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         sortOrder = _ref2.sortOrder;
       if (getColumnProp('sortable')) {
         var iconClassName = 'p-sortable-column-icon';
-        var icon = sorted ? sortOrder < 0 ? /*#__PURE__*/React__namespace.createElement(sortamountdown.SortAmountDownIcon, {
-          className: iconClassName
-        }) : /*#__PURE__*/React__namespace.createElement(sortamountupalt.SortAmountUpAltIcon, {
-          className: iconClassName
-        }) : /*#__PURE__*/React__namespace.createElement(sortalt.SortAltIcon, {
-          className: iconClassName
-        });
-        var sortIcon = utils.IconUtils.getJSXIcon(props.sortIcon || icon, {
-          className: iconClassName
-        }, {
+        var icon = sorted ? sortOrder < 0 ? /*#__PURE__*/React__namespace.createElement(sortamountdown.SortAmountDownIcon, null) : /*#__PURE__*/React__namespace.createElement(sortamountupalt.SortAmountUpAltIcon, null) : /*#__PURE__*/React__namespace.createElement(sortalt.SortAltIcon, null);
+        var sortIcon = utils.IconUtils.getJSXIcon(props.sortIcon || icon, undefined, {
           props: props,
           sorted: sorted,
           sortOrder: sortOrder
         });
-        return sortIcon;
+        return /*#__PURE__*/React__namespace.createElement("span", {
+          className: iconClassName
+        }, sortIcon);
       }
       return null;
     };
@@ -3674,7 +3707,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
           filters: props.filters,
           onFilterChange: props.onFilterChange,
           onFilterApply: props.onFilterApply,
-          filtersStore: props.filtersStore
+          filtersStore: props.filtersStore,
+          filterIcon: props.filterIcon,
+          filterClearIcon: props.filterClearIcon
         });
       }
       return null;
@@ -3793,41 +3828,43 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         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,
-          tableProps: props.tableProps,
+          allRowsSelected: props.allRowsSelected,
+          allSortableDisabled: isAllSortableDisabled,
           column: col,
-          tabIndex: props.tabIndex,
           empty: props.empty,
-          resizableColumns: props.resizableColumns,
-          groupRowsBy: props.groupRowsBy,
-          groupRowSortField: props.groupRowSortField,
-          sortMode: props.sortMode,
-          sortIcon: props.sortIcon,
-          sortField: props.sortField,
-          sortOrder: props.sortOrder,
-          multiSortMeta: props.multiSortMeta,
-          allSortableDisabled: isAllSortableDisabled,
-          onSortableChange: onSortableChange,
-          sortableDisabledFields: sortableDisabledFieldsState,
+          filterClearIcon: props.filterClearIcon,
           filterDisplay: props.filterDisplay,
+          filterIcon: props.filterIcon,
           filters: props.filters,
           filtersStore: props.filtersStore,
-          onFilterChange: props.onFilterChange,
-          onFilterApply: props.onFilterApply,
-          onColumnMouseDown: props.onColumnMouseDown,
-          onColumnDragStart: props.onColumnDragStart,
-          onColumnDragOver: props.onColumnDragOver,
+          groupRowSortField: props.groupRowSortField,
+          groupRowsBy: props.groupRowsBy,
+          key: key,
+          multiSortMeta: props.multiSortMeta,
+          onColumnCheckboxChange: onCheckboxChange,
           onColumnDragLeave: props.onColumnDragLeave,
+          onColumnDragOver: props.onColumnDragOver,
+          onColumnDragStart: props.onColumnDragStart,
           onColumnDrop: props.onColumnDrop,
+          onColumnMouseDown: props.onColumnMouseDown,
           onColumnResizeStart: props.onColumnResizeStart,
           onColumnResizerClick: props.onColumnResizerClick,
           onColumnResizerDoubleClick: props.onColumnResizerDoubleClick,
-          showSelectAll: props.showSelectAll,
-          allRowsSelected: props.allRowsSelected,
-          onColumnCheckboxChange: onCheckboxChange,
+          onFilterApply: props.onFilterApply,
+          onFilterChange: props.onFilterChange,
+          onSortChange: props.onSortChange,
+          onSortableChange: onSortableChange,
           reorderableColumns: props.reorderableColumns,
-          onSortChange: props.onSortChange
+          resizableColumns: props.resizableColumns,
+          showSelectAll: props.showSelectAll,
+          sortField: props.sortField,
+          sortIcon: props.sortIcon,
+          sortMode: props.sortMode,
+          sortOrder: props.sortOrder,
+          sortableDisabledFields: sortableDisabledFieldsState,
+          tabIndex: props.tabIndex,
+          tableProps: props.tableProps,
+          value: props.value
         });
       });
     };
@@ -3951,18 +3988,15 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       _React$useState18 = _slicedToArray(_React$useState17, 2),
       editingMetaState = _React$useState18[0],
       setEditingMetaState = _React$useState18[1];
-    var _React$useState19 = React__namespace.useState(null),
+    var _React$useState19 = React__namespace.useState(props.rows),
       _React$useState20 = _slicedToArray(_React$useState19, 2),
-      attributeSelectorState = _React$useState20[0],
-      setAttributeSelectorState = _React$useState20[1];
-    var _React$useState21 = React__namespace.useState(props.rows),
+      d_rowsState = _React$useState20[0],
+      setD_rowsState = _React$useState20[1];
+    var _React$useState21 = React__namespace.useState({}),
       _React$useState22 = _slicedToArray(_React$useState21, 2),
-      d_rowsState = _React$useState22[0],
-      setD_rowsState = _React$useState22[1];
-    var _React$useState23 = React__namespace.useState({}),
-      _React$useState24 = _slicedToArray(_React$useState23, 2),
-      d_filtersState = _React$useState24[0],
-      setD_filtersState = _React$useState24[1];
+      d_filtersState = _React$useState22[0],
+      setD_filtersState = _React$useState22[1];
+    var attributeSelector = React__namespace.useRef('');
     var elementRef = React__namespace.useRef(null);
     var tableRef = React__namespace.useRef(null);
     var wrapperRef = React__namespace.useRef(null);
@@ -4250,7 +4284,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         if (utils.ObjectUtils.isNotEmpty(widths)) {
           createStyleElement();
           var innerHTML = '';
-          var selector = ".p-datatable[".concat(attributeSelectorState, "] > .p-datatable-wrapper ").concat(isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller', " > .p-datatable-table");
+          var selector = ".p-datatable[".concat(attributeSelector.current, "] > .p-datatable-wrapper ").concat(isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller', " > .p-datatable-table");
           widths.forEach(function (width, index) {
             var style = "width: ".concat(width, "px !important; max-width: ").concat(width, "px !important");
             innerHTML += "\n                        ".concat(selector, " > .p-datatable-thead > tr > th:nth-child(").concat(index + 1, "),\n                        ").concat(selector, " > .p-datatable-tbody > tr > td:nth-child(").concat(index + 1, "),\n                        ").concat(selector, " > .p-datatable-tfoot > tr > td:nth-child(").concat(index + 1, ") {\n                            ").concat(style, "\n                        }\n                    ");
@@ -4384,6 +4418,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
           var updateTableWidth = function updateTableWidth(el) {
             !!el && (el.style.width = el.style.minWidth = tableWidth);
           };
+
+          // https://github.com/primefaces/primereact/issues/3970 Reasoning: resize table cells before updating the table width so that it can use existing computed cell widths and adjust only the one column.
+          resizeTableCells(newColumnWidth);
           updateTableWidth(tableRef.current);
           if (!isVirtualScrollerDisabled()) {
             updateTableWidth(bodyRef.current);
@@ -4392,7 +4429,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
               updateTableWidth(utils.DomHandler.findSingle(wrapperRef.current, '.p-virtualscroller-content'));
             }
           }
-          resizeTableCells(newColumnWidth);
         }
         if (props.onColumnResizeEnd) {
           props.onColumnResizeEnd({
@@ -4421,7 +4457,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       destroyStyleElement();
       createStyleElement();
       var innerHTML = '';
-      var selector = ".p-datatable[".concat(attributeSelectorState, "] > .p-datatable-wrapper ").concat(isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller', " > .p-datatable-table");
+      var selector = ".p-datatable[".concat(attributeSelector.current, "] > .p-datatable-wrapper ").concat(isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller', " > .p-datatable-table");
       widths.forEach(function (width, index) {
         var colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width;
         var style = "width: ".concat(colWidth, "px !important; max-width: ").concat(colWidth, "px !important");
@@ -4589,8 +4625,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       if (!responsiveStyleElement.current) {
         responsiveStyleElement.current = utils.DomHandler.createInlineStyle(PrimeReact__default["default"].nonce);
         var tableSelector = ".p-datatable-wrapper ".concat(isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller', " > .p-datatable-table");
-        var selector = ".p-datatable[".concat(attributeSelectorState, "] > ").concat(tableSelector);
-        var gridLinesSelector = ".p-datatable[".concat(attributeSelectorState, "].p-datatable-gridlines > ").concat(tableSelector);
+        var selector = ".p-datatable[".concat(attributeSelector.current, "] > ").concat(tableSelector);
+        var gridLinesSelector = ".p-datatable[".concat(attributeSelector.current, "].p-datatable-gridlines > ").concat(tableSelector);
         var innerHTML = "\n@media screen and (max-width: ".concat(props.breakpoint, ") {\n    ").concat(selector, " > .p-datatable-thead > tr > th,\n    ").concat(selector, " > .p-datatable-tfoot > tr > td {\n        display: none !important;\n    }\n\n    ").concat(selector, " > .p-datatable-tbody > tr > td {\n        display: flex;\n        width: 100% !important;\n        align-items: center;\n        justify-content: space-between;\n    }\n\n    ").concat(selector, " > .p-datatable-tbody > tr > td:not(:last-child) {\n        border: 0 none;\n    }\n\n    ").concat(gridLinesSelector, " > .p-datatable-tbody > tr > td:last-child {\n        border-top: 0;\n        border-right: 0;\n        border-left: 0;\n    }\n\n    ").concat(selector, " > .p-datatable-tbody > tr > td > .p-column-title {\n        display: block;\n    }\n}\n");
         responsiveStyleElement.current.innerHTML = innerHTML;
       }
@@ -4977,12 +5013,13 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
 
       //headers
       columns.forEach(function (column, i) {
-        var _ref3 = [getColumnProp(column, 'field'), getColumnProp(column, 'header'), getColumnProp(column, 'exportable')],
+        var _ref3 = [getColumnProp(column, 'field'), getColumnProp(column, 'header'), getColumnProp(column, 'exportHeader'), getColumnProp(column, 'exportable')],
           field = _ref3[0],
           header = _ref3[1],
-          exportable = _ref3[2];
+          exportHeader = _ref3[2],
+          exportable = _ref3[3];
         if (exportable && field) {
-          var columnHeader = String(header || field).replace(/"/g, '""').replace(/\n/g, "\u2028");
+          var columnHeader = String(exportHeader || header || field).replace(/"/g, '""').replace(/\n/g, "\u2028");
           csv += '"' + columnHeader + '"';
           if (i < columns.length - 1) {
             csv += props.csvSeparator;
@@ -5071,7 +5108,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       return data;
     };
     hooks.useMountEffect(function () {
-      !attributeSelectorState && setAttributeSelectorState(utils.UniqueComponentId());
+      attributeSelector.current = utils.UniqueComponentId();
 
       //setFiltersState(cloneFilters(props.filters)); // Github #4248
       setD_filtersState(cloneFilters(props.filters));
@@ -5083,16 +5120,14 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       }
     });
     hooks.useUpdateEffect(function () {
-      if (attributeSelectorState) {
-        elementRef.current.setAttribute(attributeSelectorState, '');
-        if (props.responsiveLayout === 'stack' && !props.scrollable) {
-          createResponsiveStyle();
-        }
+      elementRef.current.setAttribute(attributeSelector.current, '');
+      if (props.responsiveLayout === 'stack' && !props.scrollable) {
+        createResponsiveStyle();
       }
       return function () {
         destroyResponsiveStyle();
       };
-    }, [attributeSelectorState, props.breakpoint]);
+    }, [props.breakpoint]);
     hooks.useUpdateEffect(function () {
       var filters = cloneFilters(props.filters);
       setFiltersState(filters);
@@ -5182,6 +5217,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       return null;
     };
     var createTableHeader = function createTableHeader(options, empty, _isVirtualScrollerDisabled) {
+      if (props.showHeaders === false) {
+        return null;
+      }
       var sortField = getSortField();
       var sortOrder = getSortOrder();
       var multiSortMeta = _toConsumableArray(getMultiSortMeta());
@@ -5214,6 +5252,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         filterDisplay: props.filterDisplay,
         filters: filters,
         filtersStore: filtersStore,
+        filterIcon: props.filterIcon,
+        filterClearIcon: props.filterClearIcon,
         onFilterChange: onFilterChange,
         onFilterApply: onFilterApply,
         showSelectAll: props.showSelectAll,
@@ -5239,75 +5279,78 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         itemSize = options.itemSize;
       var frozenBody = utils.ObjectUtils.isNotEmpty(props.frozenValue) && /*#__PURE__*/React__namespace.createElement(TableBody, {
         ref: frozenBodyRef,
-        value: props.frozenValue,
+        cellClassName: props.cellClassName,
+        cellSelection: props.cellSelection,
+        checkIcon: props.checkIcon,
         className: "p-datatable-tbody p-datatable-frozen-tbody",
-        frozenRow: true,
-        tableProps: props,
-        tableSelector: attributeSelectorState,
+        collapsedRowIcon: props.collapsedRowIcon,
         columns: columns,
-        selectionModeInColumn: selectionModeInColumn,
-        first: first,
+        compareSelectionBy: props.compareSelectionBy,
+        contextMenuSelection: props.contextMenuSelection,
+        dataKey: props.dataKey,
+        dragSelection: props.dragSelection,
+        editMode: props.editMode,
         editingMeta: editingMetaState,
-        onEditingMetaChange: onEditingMetaChange,
-        tabIndex: props.tabIndex,
-        onRowClick: props.onRowClick,
-        onRowDoubleClick: props.onRowDoubleClick,
-        onRowMouseEnter: props.onRowMouseEnter,
-        onRowMouseLeave: props.onRowMouseLeave,
-        onCellClick: props.onCellClick,
-        selection: props.selection,
-        onSelectionChange: props.onSelectionChange,
+        editingRows: props.editingRows,
+        emptyMessage: props.emptyMessage,
+        expandableRowGroups: props.expandableRowGroups,
+        expandedRowIcon: props.expandedRowIcon,
+        expandedRows: props.expandedRows,
+        first: first,
+        frozenRow: true,
+        groupRowsBy: props.groupRowsBy,
+        isDataSelectable: props.isDataSelectable,
+        isVirtualScrollerDisabled: true,
         lazy: props.lazy,
-        paginator: props.paginator,
+        loading: props.loading,
+        metaKeySelection: props.metaKeySelection,
+        onCellClick: props.onCellClick,
         onCellSelect: props.onCellSelect,
         onCellUnselect: props.onCellUnselect,
-        onRowSelect: props.onRowSelect,
-        onRowUnselect: props.onRowUnselect,
-        dragSelection: props.dragSelection,
         onContextMenu: props.onContextMenu,
         onContextMenuSelectionChange: props.onContextMenuSelectionChange,
-        metaKeySelection: props.metaKeySelection,
-        selectionMode: props.selectionMode,
-        cellSelection: props.cellSelection,
-        contextMenuSelection: props.contextMenuSelection,
-        dataKey: props.dataKey,
-        expandedRows: props.expandedRows,
+        onEditingMetaChange: onEditingMetaChange,
+        onRowClick: props.onRowClick,
         onRowCollapse: props.onRowCollapse,
+        onRowDoubleClick: props.onRowDoubleClick,
+        onRowEditCancel: props.onRowEditCancel,
+        onRowEditChange: props.onRowEditChange,
+        onRowEditComplete: props.onRowEditComplete,
+        onRowEditInit: props.onRowEditInit,
+        onRowEditSave: props.onRowEditSave,
         onRowExpand: props.onRowExpand,
-        onRowToggle: props.onRowToggle,
-        editMode: props.editMode,
-        editingRows: props.editingRows,
+        onRowMouseEnter: props.onRowMouseEnter,
+        onRowMouseLeave: props.onRowMouseLeave,
         onRowReorder: props.onRowReorder,
+        onRowSelect: props.onRowSelect,
+        onRowToggle: props.onRowToggle,
+        onRowUnselect: props.onRowUnselect,
+        onSelectionChange: props.onSelectionChange,
+        paginator: props.paginator,
         reorderableRows: props.reorderableRows,
-        scrollable: props.scrollable,
-        rowGroupMode: props.rowGroupMode,
-        groupRowsBy: props.groupRowsBy,
-        expandableRowGroups: props.expandableRowGroups,
-        loading: props.loading,
-        emptyMessage: props.emptyMessage,
-        rowGroupHeaderTemplate: props.rowGroupHeaderTemplate,
+        responsiveLayout: props.responsiveLayout,
+        rowClassName: props.rowClassName,
+        rowEditValidator: props.rowEditValidator,
+        rowEditorCancelIcon: props.rowEditorCancelIcon,
+        rowEditorInitIcon: props.rowEditorInitIcon,
+        rowEditorSaveIcon: props.rowEditorSaveIcon,
         rowExpansionTemplate: props.rowExpansionTemplate,
         rowGroupFooterTemplate: props.rowGroupFooterTemplate,
-        onRowEditChange: props.onRowEditChange,
-        compareSelectionBy: props.compareSelectionBy,
+        rowGroupHeaderTemplate: props.rowGroupHeaderTemplate,
+        rowGroupMode: props.rowGroupMode,
+        scrollable: props.scrollable,
         selectOnEdit: props.selectOnEdit,
-        onRowEditInit: props.onRowEditInit,
-        rowEditValidator: props.rowEditValidator,
-        onRowEditSave: props.onRowEditSave,
-        onRowEditComplete: props.onRowEditComplete,
-        onRowEditCancel: props.onRowEditCancel,
-        cellClassName: props.cellClassName,
-        responsiveLayout: props.responsiveLayout,
+        selection: props.selection,
         selectionAutoFocus: props.selectionAutoFocus,
-        isDataSelectable: props.isDataSelectable,
-        showSelectionElement: props.showSelectionElement,
+        selectionMode: props.selectionMode,
+        selectionModeInColumn: selectionModeInColumn,
         showRowReorderElement: props.showRowReorderElement,
-        expandedRowIcon: props.expandedRowIcon,
-        collapsedRowIcon: props.collapsedRowIcon,
-        checkIcon: props.checkIcon,
-        rowClassName: props.rowClassName,
-        virtualScrollerOptions: options,
-        isVirtualScrollerDisabled: true
+        showSelectionElement: props.showSelectionElement,
+        tabIndex: props.tabIndex,
+        tableProps: props,
+        tableSelector: attributeSelector.current,
+        value: props.frozenValue,
+        virtualScrollerOptions: options
       });
       var body = /*#__PURE__*/React__namespace.createElement(TableBody, {
         ref: bodyRef,
@@ -5317,7 +5360,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         empty: empty,
         frozenRow: false,
         tableProps: props,
-        tableSelector: attributeSelectorState,
+        tableSelector: attributeSelector.current,
         columns: columns,
         selectionModeInColumn: selectionModeInColumn,
         first: first,
@@ -5576,4 +5619,4 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
 
   return exports;
 
-})({}, React, primereact.api, primereact.utils, primereact.hooks, primereact.icons.arrowdown, primereact.icons.arrowup, primereact.icons.spinner, primereact.paginator, primereact.virtualscroller, primereact.overlayservice, primereact.ripple, primereact.icons.check, primereact.icons.times, primereact.icons.pencil, primereact.icons.chevrondown, primereact.icons.chevronright, primereact.icons.bars, primereact.button, primereact.csstransition, primereact.dropdown, primereact.inputtext, primereact.portal, primereact.icons.filter, primereact.icons.filterslash, primereact.icons.trash, primereact.icons.plus, primereact.tooltip, primereact.icons.sortalt, primereact.icons.sortamountdown, primereact.icons.sortamountupalt);
+})({}, React, primereact.api, primereact.utils, primereact.hooks, primereact.icons.arrowdown, primereact.icons.arrowup, primereact.icons.spinner, primereact.paginator, primereact.virtualscroller, primereact.icons.bars, primereact.icons.check, primereact.icons.chevrondown, primereact.icons.chevronright, primereact.icons.pencil, primereact.icons.times, primereact.overlayservice, primereact.ripple, primereact.button, primereact.csstransition, primereact.dropdown, primereact.icons.filter, primereact.icons.filterslash, primereact.icons.plus, primereact.icons.trash, primereact.inputtext, primereact.portal, primereact.icons.sortalt, primereact.icons.sortamountdown, primereact.icons.sortamountupalt, primereact.tooltip);