primereact 9.3.1 → 9.5.0

package/datatable/datatable.esm.js

@@ -7,27 +7,27 @@ import { ArrowUpIcon } from 'primereact/icons/arrowup';
 import { SpinnerIcon } from 'primereact/icons/spinner';
 import { Paginator } from 'primereact/paginator';
 import { VirtualScroller } from 'primereact/virtualscroller';
-import { OverlayService } from 'primereact/overlayservice';
-import { Ripple } from 'primereact/ripple';
+import { BarsIcon } from 'primereact/icons/bars';
 import { CheckIcon } from 'primereact/icons/check';
-import { TimesIcon } from 'primereact/icons/times';
-import { PencilIcon } from 'primereact/icons/pencil';
 import { ChevronDownIcon } from 'primereact/icons/chevrondown';
 import { ChevronRightIcon } from 'primereact/icons/chevronright';
-import { BarsIcon } from 'primereact/icons/bars';
+import { PencilIcon } from 'primereact/icons/pencil';
+import { TimesIcon } from 'primereact/icons/times';
+import { OverlayService } from 'primereact/overlayservice';
+import { Ripple } from 'primereact/ripple';
 import { Button } from 'primereact/button';
 import { CSSTransition } from 'primereact/csstransition';
 import { Dropdown } from 'primereact/dropdown';
-import { InputText } from 'primereact/inputtext';
-import { Portal } from 'primereact/portal';
 import { FilterIcon } from 'primereact/icons/filter';
 import { FilterSlashIcon } from 'primereact/icons/filterslash';
-import { TrashIcon } from 'primereact/icons/trash';
 import { PlusIcon } from 'primereact/icons/plus';
-import { Tooltip } from 'primereact/tooltip';
+import { TrashIcon } from 'primereact/icons/trash';
+import { InputText } from 'primereact/inputtext';
+import { Portal } from 'primereact/portal';
 import { SortAltIcon } from 'primereact/icons/sortalt';
 import { SortAmountDownIcon } from 'primereact/icons/sortamountdown';
 import { SortAmountUpAltIcon } from 'primereact/icons/sortamountupalt';
+import { Tooltip } from 'primereact/tooltip';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -253,9 +253,9 @@ var DataTableBase = {
     __TYPE: 'DataTable',
     alwaysShowPaginator: true,
     breakpoint: '960px',
-    checkIcon: null,
     cellClassName: null,
     cellSelection: false,
+    checkIcon: null,
     className: null,
     collapsedRowIcon: null,
     columnResizeMode: 'fit',
@@ -276,8 +276,10 @@ var DataTableBase = {
     expandedRows: null,
     exportFilename: 'download',
     exportFunction: null,
+    filterClearIcon: null,
     filterDelay: 300,
     filterDisplay: 'menu',
+    filterIcon: null,
     filterLocale: undefined,
     filters: null,
     first: 0,
@@ -312,8 +314,6 @@ var DataTableBase = {
     onFilter: null,
     onPage: null,
     onRowClick: null,
-    onRowMouseEnter: null,
-    onRowMouseLeave: null,
     onRowCollapse: null,
     onRowDoubleClick: null,
     onRowEditCancel: null,
@@ -322,6 +322,8 @@ var DataTableBase = {
     onRowEditInit: null,
     onRowEditSave: null,
     onRowExpand: null,
+    onRowMouseEnter: null,
+    onRowMouseLeave: null,
     onRowReorder: null,
     onRowSelect: null,
     onRowToggle: null,
@@ -341,10 +343,10 @@ var DataTableBase = {
     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,
@@ -369,6 +371,7 @@ var DataTableBase = {
     selectionMode: null,
     selectionPageOnly: false,
     showGridlines: false,
+    showHeaders: true,
     showRowReorderElement: null,
     showSelectAll: true,
     showSelectionElement: null,
@@ -769,14 +772,29 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
       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();
@@ -948,7 +966,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
     }
   }, [props.editingMeta]);
   React.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,
@@ -1512,45 +1530,48 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
         var rowSpan = props.rowGroupMode === 'rowspan' ? calculateRowGroupSize(props.value, col, props.index) : null;
         return /*#__PURE__*/React.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
         });
       }
@@ -1693,7 +1714,22 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       if (isSubheaderGrouping && props.expandableRowGroups) {
         return isRowGroupExpanded(rowData);
       } else {
-        if (props.dataKey) return props.expandedRows ? props.expandedRows[ObjectUtils.resolveFieldData(rowData, props.dataKey)] !== undefined : false;else return findIndex(props.expandedRows, rowData) !== -1;
+        if (props.dataKey) {
+          var rowId = ObjectUtils.resolveFieldData(rowData, props.dataKey);
+          var expanded = false;
+          if (props.expandedRows) {
+            if (Array.isArray(props.expandedRows)) {
+              expanded = props.expandedRows.some(function (row) {
+                return ObjectUtils.resolveFieldData(row, props.dataKey) === rowId;
+              });
+            } else {
+              expanded = props.expandedRows[rowId] !== undefined;
+            }
+          }
+          return expanded;
+        } else {
+          return findIndex(props.expandedRows, rowData) !== -1;
+        }
       }
     }
     return false;
@@ -2418,67 +2454,70 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       var _allowCellSelection = allowCellSelection();
       var editing = isRowEditing(rowData);
       return /*#__PURE__*/React.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
       });
     }
@@ -3119,7 +3158,7 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
     var iconProps = {
       'aria-hidden': true
     };
-    var icon = props.columnFilterIcon || /*#__PURE__*/React.createElement(FilterIcon, iconProps);
+    var icon = props.filterIcon || /*#__PURE__*/React.createElement(FilterIcon, iconProps);
     var columnFilterIcon = IconUtils.getJSXIcon(icon, _objectSpread$3({}, iconProps), {
       props: props
     });
@@ -3631,21 +3670,15 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
       sortOrder = _ref2.sortOrder;
     if (getColumnProp('sortable')) {
       var iconClassName = 'p-sortable-column-icon';
-      var icon = sorted ? sortOrder < 0 ? /*#__PURE__*/React.createElement(SortAmountDownIcon, {
-        className: iconClassName
-      }) : /*#__PURE__*/React.createElement(SortAmountUpAltIcon, {
-        className: iconClassName
-      }) : /*#__PURE__*/React.createElement(SortAltIcon, {
-        className: iconClassName
-      });
-      var sortIcon = IconUtils.getJSXIcon(props.sortIcon || icon, {
-        className: iconClassName
-      }, {
+      var icon = sorted ? sortOrder < 0 ? /*#__PURE__*/React.createElement(SortAmountDownIcon, null) : /*#__PURE__*/React.createElement(SortAmountUpAltIcon, null) : /*#__PURE__*/React.createElement(SortAltIcon, null);
+      var sortIcon = IconUtils.getJSXIcon(props.sortIcon || icon, undefined, {
         props: props,
         sorted: sorted,
         sortOrder: sortOrder
       });
-      return sortIcon;
+      return /*#__PURE__*/React.createElement("span", {
+        className: iconClassName
+      }, sortIcon);
     }
     return null;
   };
@@ -3678,7 +3711,9 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
         filters: props.filters,
         onFilterChange: props.onFilterChange,
         onFilterApply: props.onFilterApply,
-        filtersStore: props.filtersStore
+        filtersStore: props.filtersStore,
+        filterIcon: props.filterIcon,
+        filterClearIcon: props.filterClearIcon
       });
     }
     return null;
@@ -3797,41 +3832,43 @@ var TableHeader = /*#__PURE__*/React.memo(function (props) {
       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,
-        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
       });
     });
   };
@@ -3955,18 +3992,15 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     _React$useState18 = _slicedToArray(_React$useState17, 2),
     editingMetaState = _React$useState18[0],
     setEditingMetaState = _React$useState18[1];
-  var _React$useState19 = React.useState(null),
+  var _React$useState19 = React.useState(props.rows),
     _React$useState20 = _slicedToArray(_React$useState19, 2),
-    attributeSelectorState = _React$useState20[0],
-    setAttributeSelectorState = _React$useState20[1];
-  var _React$useState21 = React.useState(props.rows),
+    d_rowsState = _React$useState20[0],
+    setD_rowsState = _React$useState20[1];
+  var _React$useState21 = React.useState({}),
     _React$useState22 = _slicedToArray(_React$useState21, 2),
-    d_rowsState = _React$useState22[0],
-    setD_rowsState = _React$useState22[1];
-  var _React$useState23 = React.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.useRef('');
   var elementRef = React.useRef(null);
   var tableRef = React.useRef(null);
   var wrapperRef = React.useRef(null);
@@ -4254,7 +4288,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       if (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                    ");
@@ -4388,6 +4422,9 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
         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);
@@ -4396,7 +4433,6 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
             updateTableWidth(DomHandler.findSingle(wrapperRef.current, '.p-virtualscroller-content'));
           }
         }
-        resizeTableCells(newColumnWidth);
       }
       if (props.onColumnResizeEnd) {
         props.onColumnResizeEnd({
@@ -4425,7 +4461,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     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");
@@ -4593,8 +4629,8 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     if (!responsiveStyleElement.current) {
       responsiveStyleElement.current = DomHandler.createInlineStyle(PrimeReact.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;
     }
@@ -4981,12 +5017,13 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
 
     //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;
@@ -5075,7 +5112,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     return data;
   };
   useMountEffect(function () {
-    !attributeSelectorState && setAttributeSelectorState(UniqueComponentId());
+    attributeSelector.current = UniqueComponentId();
 
     //setFiltersState(cloneFilters(props.filters)); // Github #4248
     setD_filtersState(cloneFilters(props.filters));
@@ -5087,16 +5124,14 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     }
   });
   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]);
   useUpdateEffect(function () {
     var filters = cloneFilters(props.filters);
     setFiltersState(filters);
@@ -5186,6 +5221,9 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     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());
@@ -5218,6 +5256,8 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       filterDisplay: props.filterDisplay,
       filters: filters,
       filtersStore: filtersStore,
+      filterIcon: props.filterIcon,
+      filterClearIcon: props.filterClearIcon,
       onFilterChange: onFilterChange,
       onFilterApply: onFilterApply,
       showSelectAll: props.showSelectAll,
@@ -5243,75 +5283,78 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       itemSize = options.itemSize;
     var frozenBody = ObjectUtils.isNotEmpty(props.frozenValue) && /*#__PURE__*/React.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.createElement(TableBody, {
       ref: bodyRef,
@@ -5321,7 +5364,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       empty: empty,
       frozenRow: false,
       tableProps: props,
-      tableSelector: attributeSelectorState,
+      tableSelector: attributeSelector.current,
       columns: columns,
       selectionModeInColumn: selectionModeInColumn,
       first: first,