primereact 9.1.0 → 9.2.0

package/datatable/datatable.esm.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PrimeReact, { FilterMatchMode, ariaLabel, localeOption, FilterOperator, FilterService } from 'primereact/api';
 import { ObjectUtils, classNames, DomHandler, ZIndexUtils, UniqueComponentId } from 'primereact/utils';
-import { useEventListener, useUpdateEffect, useUnmountEffect, usePrevious, useMountEffect, useOverlayListener } from 'primereact/hooks';
+import { useEventListener, useUpdateEffect, useUnmountEffect, useOverlayListener, usePrevious, useMountEffect } from 'primereact/hooks';
 import { Paginator } from 'primereact/paginator';
 import { VirtualScroller } from 'primereact/virtualscroller';
 import { OverlayService } from 'primereact/overlayservice';
@@ -236,7 +236,6 @@ var DataTableBase = {
   defaultProps: {
     __TYPE: 'DataTable',
     alwaysShowPaginator: true,
-    autoLayout: false,
     breakpoint: '960px',
     cellClassName: null,
     cellSelection: false,
@@ -328,7 +327,7 @@ var DataTableBase = {
     reorderableColumns: false,
     reorderableRows: false,
     resizableColumns: false,
-    responsiveLayout: 'stack',
+    responsiveLayout: 'scroll',
     rowClassName: null,
     rowEditValidator: null,
     rowExpansionTemplate: null,
@@ -338,7 +337,6 @@ var DataTableBase = {
     rowHover: false,
     rows: null,
     rowsPerPageOptions: null,
-    scrollDirection: 'vertical',
     scrollHeight: null,
     scrollable: false,
     selectAll: false,
@@ -1192,7 +1190,7 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
     return props.compareSelectionBy === 'equals' ? data1 === data2 : ObjectUtils.equals(data1, data2, props.dataKey);
   };
   var getTabIndex = function getTabIndex() {
-    return isFocusable() && !props.allowCellSelection ? props.index === 0 ? props.tabIndex : -1 : null;
+    return isFocusable() && !props.allowCellSelection ? props.rowIndex === 0 ? props.tabIndex : -1 : null;
   };
   var findIndex = function findIndex(collection, rowData) {
     return (collection || []).findIndex(function (data) {
@@ -1249,35 +1247,35 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
     props.onRowClick({
       originalEvent: event,
       data: props.rowData,
-      index: props.index
+      index: props.rowIndex
     });
   };
   var onDoubleClick = function onDoubleClick(event) {
     props.onRowDoubleClick({
       originalEvent: event,
       data: props.rowData,
-      index: props.index
+      index: props.rowIndex
     });
   };
   var onRightClick = function onRightClick(event) {
     props.onRowRightClick({
       originalEvent: event,
       data: props.rowData,
-      index: props.index
+      index: props.rowIndex
     });
   };
   var onMouseEnter = function onMouseEnter(event) {
     props.onRowMouseEnter({
       originalEvent: event,
       data: props.rowData,
-      index: props.index
+      index: props.rowIndex
     });
   };
   var onMouseLeave = function onMouseLeave(event) {
     props.onRowMouseLeave({
       originalEvent: event,
       data: props.rowData,
-      index: props.index
+      index: props.rowIndex
     });
   };
   var onTouchEnd = function onTouchEnd(event) {
@@ -1331,49 +1329,49 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
     props.onRowMouseDown({
       originalEvent: event,
       data: props.rowData,
-      index: props.index
+      index: props.rowIndex
     });
   };
   var onMouseUp = function onMouseUp(event) {
     props.onRowMouseUp({
       originalEvent: event,
       data: props.rowData,
-      index: props.index
+      index: props.rowIndex
     });
   };
   var onDragStart = function onDragStart(event) {
     props.onRowDragStart({
       originalEvent: event,
       data: props.rowData,
-      index: props.index
+      index: props.rowIndex
     });
   };
   var onDragOver = function onDragOver(event) {
     props.onRowDragOver({
       originalEvent: event,
       data: props.rowData,
-      index: props.index
+      index: props.rowIndex
     });
   };
   var onDragLeave = function onDragLeave(event) {
     props.onRowDragLeave({
       originalEvent: event,
       data: props.rowData,
-      index: props.index
+      index: props.rowIndex
     });
   };
   var onDragEnd = function onDragEnd(event) {
     props.onRowDragEnd({
       originalEvent: event,
       data: props.rowData,
-      index: props.index
+      index: props.rowIndex
     });
   };
   var onDrop = function onDrop(event) {
     props.onRowDrop({
       originalEvent: event,
       data: props.rowData,
-      index: props.index
+      index: props.rowIndex
     });
   };
   var onEditChange = function onEditChange(e, isEditing) {
@@ -1417,7 +1415,7 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
       props.onRowEditInit({
         originalEvent: event,
         data: props.rowData,
-        index: props.index
+        index: props.rowIndex
       });
     }
     onEditChange(e, true);
@@ -1433,7 +1431,7 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
       props.onRowEditSave({
         originalEvent: event,
         data: props.rowData,
-        index: props.index,
+        index: props.rowIndex,
         valid: valid
       });
     }
@@ -1451,7 +1449,7 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
       props.onRowEditCancel({
         originalEvent: event,
         data: props.rowData,
-        index: props.index
+        index: props.rowIndex
       });
     }
     onEditChange(e, false);
@@ -1469,7 +1467,7 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
           tableSelector: props.tableSelector,
           column: col,
           rowData: props.rowData,
-          rowIndex: props.index,
+          rowIndex: props.rowIndex,
           index: i,
           rowSpan: rowSpan,
           dataKey: props.dataKey,
@@ -1516,9 +1514,9 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
     'p-highlight-contextmenu': props.contextMenuSelected,
     'p-selectable-row': props.allowRowSelection && props.isSelectable({
       data: props.rowData,
-      index: props.index
+      index: props.rowIndex
     }),
-    'p-row-odd': props.index % 2 !== 0
+    'p-row-odd': props.rowIndex % 2 !== 0
   });
   var style = {
     height: props.virtualScrollerOptions ? props.virtualScrollerOptions.itemSize : undefined
@@ -1593,7 +1591,6 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
   var rowDragging = React.useRef(false);
   var draggedRowIndex = React.useRef(null);
   var droppedRowIndex = React.useRef(null);
-  var prevVirtualScrollerOptions = usePrevious(props.virtualScrollerOptions);
   var isSubheaderGrouping = props.rowGroupMode && props.rowGroupMode === 'subheader';
   var isRadioSelectionMode = props.selectionMode === 'radiobutton';
   var isCheckboxSelectionMode = props.selectionMode === 'checkbox';
@@ -1743,10 +1740,6 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       });
     }
   };
-  var updateVirtualScrollerPosition = function updateVirtualScrollerPosition() {
-    var tableHeaderHeight = DomHandler.getOuterHeight(elementRef.current.previousElementSibling);
-    elementRef.current.style.top = (elementRef.current.style.top || 0) + tableHeaderHeight + 'px';
-  };
   var onSingleSelection = function onSingleSelection(_ref) {
     var originalEvent = _ref.originalEvent,
       data = _ref.data,
@@ -2300,16 +2293,6 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       updateFrozenRowGroupHeaderStickyPosition();
     }
   });
-  useMountEffect(function () {
-    if (!props.isVirtualScrollerDisabled && getVirtualScrollerOption('vertical')) {
-      updateVirtualScrollerPosition();
-    }
-  });
-  useUpdateEffect(function () {
-    if (!props.isVirtualScrollerDisabled && getVirtualScrollerOption('vertical') && getVirtualScrollerOption('itemSize', prevVirtualScrollerOptions) !== getVirtualScrollerOption('itemSize')) {
-      updateVirtualScrollerPosition();
-    }
-  }, [props.virtualScrollerOptions]);
   useUpdateEffect(function () {
     if (props.paginator && isMultipleSelection()) {
       anchorRowIndex.current = null;
@@ -2337,9 +2320,8 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     }
     return null;
   };
-  var createGroupHeader = function createGroupHeader(rowData, index, expanded, colSpan) {
-    if (isSubheaderGrouping && shouldRenderRowGroupHeader(props.value, rowData, index - props.first)) {
-      var _options;
+  var createGroupHeader = function createGroupHeader(rowData, rowIndex, expanded, colSpan) {
+    if (isSubheaderGrouping && shouldRenderRowGroupHeader(props.value, rowData, rowIndex - props.first)) {
       var style = rowGroupHeaderStyle();
       var toggler = props.expandableRowGroups && /*#__PURE__*/React.createElement(RowTogglerButton, {
         onClick: onRowToggle,
@@ -2348,9 +2330,11 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         expandedRowIcon: props.expandedRowIcon,
         collapsedRowIcon: props.collapsedRowIcon
       });
-      var options = (_options = {
-        index: index
-      }, _defineProperty(_options, "index", index), _defineProperty(_options, "props", props.tableProps), _defineProperty(_options, "customRendering", false), _options);
+      var options = {
+        index: rowIndex,
+        props: props.tableProps,
+        customRendering: false
+      };
       var _content2 = ObjectUtils.getJSXElement(props.rowGroupHeaderTemplate, rowData, options);
 
       // check if the user wants complete control of the rendering
@@ -2369,7 +2353,7 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     }
     return null;
   };
-  var createRow = function createRow(rowData, index, expanded) {
+  var createRow = function createRow(rowData, rowIndex, index, expanded) {
     if (!props.expandableRowGroups || expanded) {
       var selected = isSelectionEnabled() ? isSelected(rowData) : false;
       var contextMenuSelected = isContextMenuSelected(rowData);
@@ -2382,6 +2366,7 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         value: props.value,
         columns: props.columns,
         rowData: rowData,
+        rowIndex: rowIndex,
         index: index,
         selected: selected,
         contextMenuSelected: contextMenuSelected,
@@ -2440,11 +2425,11 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       });
     }
   };
-  var createExpansion = function createExpansion(rowData, index, expanded, colSpan) {
+  var createExpansion = function createExpansion(rowData, rowIndex, expanded, colSpan) {
     if (expanded && !(isSubheaderGrouping && props.expandableRowGroups)) {
-      var id = "".concat(props.tableSelector, "_content_").concat(index, "_expanded");
+      var id = "".concat(props.tableSelector, "_content_").concat(rowIndex, "_expanded");
       var options = {
-        index: index,
+        index: rowIndex,
         customRendering: false
       };
       var _content3 = ObjectUtils.getJSXElement(props.rowExpansionTemplate, rowData, options);
@@ -2464,10 +2449,10 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     }
     return null;
   };
-  var createGroupFooter = function createGroupFooter(rowData, index, expanded, colSpan) {
-    if (isSubheaderGrouping && shouldRenderRowGroupFooter(props.value, rowData, index - props.first, expanded)) {
+  var createGroupFooter = function createGroupFooter(rowData, rowIndex, expanded, colSpan) {
+    if (isSubheaderGrouping && shouldRenderRowGroupFooter(props.value, rowData, rowIndex - props.first, expanded)) {
       var _content4 = ObjectUtils.getJSXElement(props.rowGroupFooterTemplate, rowData, {
-        index: index,
+        index: rowIndex,
         colSpan: colSpan,
         props: props.tableProps
       });
@@ -2479,25 +2464,25 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     return null;
   };
   var createContent = function createContent() {
-    return props.value.map(function (rowData, i) {
-      var index = getVirtualScrollerOption('getItemOptions') ? getVirtualScrollerOption('getItemOptions')(i).index : props.first + i;
-      var key = getRowKey(rowData, index);
+    return props.value && props.value.map(function (rowData, index) {
+      var rowIndex = getVirtualScrollerOption('getItemOptions') ? getVirtualScrollerOption('getItemOptions')(index).index : props.first + index;
+      var key = getRowKey(rowData, rowIndex);
       var expanded = isRowExpanded(rowData);
       var colSpan = getColumnsLength();
-      var groupHeader = createGroupHeader(rowData, index, expanded, colSpan);
-      var row = createRow(rowData, index, expanded);
-      var expansion = createExpansion(rowData, index, expanded, colSpan);
-      var groupFooter = createGroupFooter(rowData, index, expanded, colSpan);
+      var groupHeader = createGroupHeader(rowData, rowIndex, expanded, colSpan);
+      var row = createRow(rowData, rowIndex, index, expanded);
+      var expansion = createExpansion(rowData, rowIndex, expanded, colSpan);
+      var groupFooter = createGroupFooter(rowData, rowIndex, expanded, colSpan);
       return /*#__PURE__*/React.createElement(React.Fragment, {
         key: key
       }, groupHeader, row, expansion, groupFooter);
     });
   };
-  var className = classNames('p-datatable-tbody', props.className);
   var content = props.empty ? createEmptyContent() : createContent();
   return /*#__PURE__*/React.createElement("tbody", {
     ref: refCallback,
-    className: className
+    style: props.style,
+    className: props.className
   }, content);
 }));
 TableBody.displayName = 'TableBody';
@@ -4188,9 +4173,10 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       if (ObjectUtils.isNotEmpty(widths)) {
         createStyleElement();
         var innerHTML = '';
+        var selector = ".p-datatable[".concat(attributeSelectorState, "] > .p-datatable-wrapper > .p-datatable-table");
         widths.forEach(function (width, index) {
-          var style = props.scrollable ? "flex: 1 1 ".concat(width, "px !important") : "width: ".concat(width, "px !important");
-          innerHTML += "\n                        .p-datatable[".concat(attributeSelectorState, "] .p-datatable-thead > tr > th:nth-child(").concat(index + 1, "),\n                        .p-datatable[").concat(attributeSelectorState, "] .p-datatable-tbody > tr > td:nth-child(").concat(index + 1, "),\n                        .p-datatable[").concat(attributeSelectorState, "] .p-datatable-tfoot > tr > td:nth-child(").concat(index + 1, ") {\n                            ").concat(style, "\n                        }\n                    ");
+          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                    ");
         });
         styleElement.current.innerHTML = innerHTML;
       }
@@ -4358,10 +4344,11 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     destroyStyleElement();
     createStyleElement();
     var innerHTML = '';
+    var selector = ".p-datatable[".concat(attributeSelectorState, "] > .p-datatable-wrapper > .p-datatable-table");
     widths.forEach(function (width, index) {
       var colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width;
-      var style = props.scrollable ? "flex: 1 1 ".concat(colWidth, "px !important") : "width: ".concat(colWidth, "px !important");
-      innerHTML += "\n                .p-datatable[".concat(attributeSelectorState, "] .p-datatable-thead > tr > th:nth-child(").concat(index + 1, "),\n                .p-datatable[").concat(attributeSelectorState, "] .p-datatable-tbody > tr > td:nth-child(").concat(index + 1, "),\n                .p-datatable[").concat(attributeSelectorState, "] .p-datatable-tfoot > tr > td:nth-child(").concat(index + 1, ") {\n                    ").concat(style, "\n                }\n            ");
+      var style = "width: ".concat(colWidth, "px !important; max-width: ").concat(colWidth, "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            ");
     });
     styleElement.current.innerHTML = innerHTML;
   };
@@ -4524,7 +4511,9 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var createResponsiveStyle = function createResponsiveStyle() {
     if (!responsiveStyleElement.current) {
       responsiveStyleElement.current = DomHandler.createInlineStyle(PrimeReact.nonce);
-      var innerHTML = "\n@media screen and (max-width: ".concat(props.breakpoint, ") {\n    .p-datatable[").concat(attributeSelectorState, "] .p-datatable-thead > tr > th,\n    .p-datatable[").concat(attributeSelectorState, "] .p-datatable-tfoot > tr > td {\n        display: none !important;\n    }\n\n    .p-datatable[").concat(attributeSelectorState, "] .p-datatable-tbody > tr > td {\n        display: flex;\n        width: 100% !important;\n        align-items: center;\n        justify-content: space-between;\n    }\n\n    .p-datatable[").concat(attributeSelectorState, "] .p-datatable-tbody > tr > td:not(:last-child) {\n        border: 0 none;\n    }\n\n    .p-datatable[").concat(attributeSelectorState, "].p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {\n        border-top: 0;\n        border-right: 0;\n        border-left: 0;\n    }\n\n    .p-datatable[").concat(attributeSelectorState, "] .p-datatable-tbody > tr > td > .p-column-title {\n        display: block;\n    }\n}\n");
+      var selector = ".p-datatable[".concat(attributeSelectorState, "] > .p-datatable-wrapper > .p-datatable-table");
+      var gridLinesSelector = ".p-datatable[".concat(attributeSelectorState, "].p-datatable-gridlines > .p-datatable-wrapper > .p-datatable-table");
+      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;
     }
   };
@@ -5001,7 +4990,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     return data;
   };
   useMountEffect(function () {
-    setAttributeSelectorState(UniqueComponentId());
+    !attributeSelectorState && setAttributeSelectorState(UniqueComponentId());
     setFiltersState(cloneFilters(props.filters));
     setD_filtersState(cloneFilters(props.filters));
     if (isStateful()) {
@@ -5012,11 +5001,16 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     }
   });
   useUpdateEffect(function () {
-    elementRef.current.setAttribute(attributeSelectorState, '');
-    if (props.responsiveLayout === 'stack' && !props.scrollable) {
-      createResponsiveStyle();
+    if (attributeSelectorState) {
+      elementRef.current.setAttribute(attributeSelectorState, '');
+      if (props.responsiveLayout === 'stack' && !props.scrollable) {
+        createResponsiveStyle();
+      }
     }
-  }, [attributeSelectorState]);
+    return function () {
+      destroyResponsiveStyle();
+    };
+  }, [attributeSelectorState, props.breakpoint]);
   useUpdateEffect(function () {
     var filters = cloneFilters(props.filters);
     setFiltersState(filters);
@@ -5147,12 +5141,14 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     var rows = options.rows,
       columns = options.columns,
       contentRef = options.contentRef,
-      className = options.className;
-      options.itemSize;
+      style = options.style,
+      className = options.className,
+      spacerStyle = options.spacerStyle,
+      itemSize = options.itemSize;
     var frozenBody = ObjectUtils.isNotEmpty(props.frozenValue) && /*#__PURE__*/React.createElement(TableBody, {
       ref: frozenBodyRef,
       value: props.frozenValue,
-      className: "p-datatable-frozen-tbody",
+      className: "p-datatable-tbody p-datatable-frozen-tbody",
       frozenRow: true,
       tableProps: props,
       tableSelector: attributeSelectorState,
@@ -5223,7 +5219,8 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     var body = /*#__PURE__*/React.createElement(TableBody, {
       ref: bodyRef,
       value: dataToRender(rows),
-      className: className,
+      style: style,
+      className: classNames('p-datatable-tbody', className),
       empty: empty,
       frozenRow: false,
       tableProps: props,
@@ -5293,7 +5290,13 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       virtualScrollerOptions: options,
       isVirtualScrollerDisabled: isVirtualScrollerDisabled
     });
-    return /*#__PURE__*/React.createElement(React.Fragment, null, frozenBody, body);
+    var spacerBody = ObjectUtils.isNotEmpty(spacerStyle) ? /*#__PURE__*/React.createElement(TableBody, {
+      style: {
+        height: "calc(".concat(spacerStyle.height, " - ").concat(rows.length * itemSize, "px)")
+      },
+      className: "p-datatable-virtualscroller-spacer"
+    }) : null;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, frozenBody, body, spacerBody);
   };
   var createTableFooter = function createTableFooter(options) {
     var columns = options.columns;
@@ -5324,13 +5327,19 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       scrollHeight: props.scrollHeight !== 'flex' ? undefined : '100%',
       disabled: _isVirtualScrollerDisabled,
       loaderDisabled: true,
+      inline: true,
+      autoSize: true,
       showSpacer: false,
       contentTemplate: function contentTemplate(options) {
         var ref = function ref(el) {
           tableRef.current = el;
           options.spacerRef && options.spacerRef(el);
         };
-        var tableClassName = classNames('p-datatable-table', props.tableClassName);
+        var tableClassName = classNames('p-datatable-table', {
+          'p-datatable-scrollable-table': props.scrollable,
+          'p-datatable-resizable-table': props.resizableColumns,
+          'p-datatable-resizable-table-fit': props.resizableColumns && props.columnResizeMode === 'fit'
+        }, props.tableClassName);
         var tableHeader = createTableHeader(options, empty);
         var tableBody = createTableBody(options, selectionModeInColumn, empty, _isVirtualScrollerDisabled);
         var tableFooter = createTableFooter(options);
@@ -5425,13 +5434,9 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     'p-datatable-hoverable-rows': props.rowHover,
     'p-datatable-selectable': selectable && !props.cellSelection,
     'p-datatable-selectable-cell': selectable && props.cellSelection,
-    'p-datatable-auto-layout': props.autoLayout,
     'p-datatable-resizable': props.resizableColumns,
     'p-datatable-resizable-fit': props.resizableColumns && props.columnResizeMode === 'fit',
     'p-datatable-scrollable': props.scrollable,
-    'p-datatable-scrollable-vertical': props.scrollable && props.scrollDirection === 'vertical',
-    'p-datatable-scrollable-horizontal': props.scrollable && props.scrollDirection === 'horizontal',
-    'p-datatable-scrollable-both': props.scrollable && props.scrollDirection === 'both',
     'p-datatable-flex-scrollable': props.scrollable && props.scrollHeight === 'flex',
     'p-datatable-responsive-stack': props.responsiveLayout === 'stack',
     'p-datatable-responsive-scroll': props.responsiveLayout === 'scroll',