primereact 9.1.1 → 9.2.1

package/datatable/datatable.cjs.js

@@ -263,7 +263,6 @@ var DataTableBase = {
   defaultProps: {
     __TYPE: 'DataTable',
     alwaysShowPaginator: true,
-    autoLayout: false,
     breakpoint: '960px',
     cellClassName: null,
     cellSelection: false,
@@ -355,7 +354,7 @@ var DataTableBase = {
     reorderableColumns: false,
     reorderableRows: false,
     resizableColumns: false,
-    responsiveLayout: 'stack',
+    responsiveLayout: 'scroll',
     rowClassName: null,
     rowEditValidator: null,
     rowExpansionTemplate: null,
@@ -365,7 +364,6 @@ var DataTableBase = {
     rowHover: false,
     rows: null,
     rowsPerPageOptions: null,
-    scrollDirection: 'vertical',
     scrollHeight: null,
     scrollable: false,
     selectAll: false,
@@ -1219,7 +1217,7 @@ var BodyRow = /*#__PURE__*/React__namespace.memo(function (props) {
     return props.compareSelectionBy === 'equals' ? data1 === data2 : utils.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) {
@@ -1276,35 +1274,35 @@ var BodyRow = /*#__PURE__*/React__namespace.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) {
@@ -1358,49 +1356,49 @@ var BodyRow = /*#__PURE__*/React__namespace.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) {
@@ -1444,7 +1442,7 @@ var BodyRow = /*#__PURE__*/React__namespace.memo(function (props) {
       props.onRowEditInit({
         originalEvent: event,
         data: props.rowData,
-        index: props.index
+        index: props.rowIndex
       });
     }
     onEditChange(e, true);
@@ -1460,7 +1458,7 @@ var BodyRow = /*#__PURE__*/React__namespace.memo(function (props) {
       props.onRowEditSave({
         originalEvent: event,
         data: props.rowData,
-        index: props.index,
+        index: props.rowIndex,
         valid: valid
       });
     }
@@ -1478,7 +1476,7 @@ var BodyRow = /*#__PURE__*/React__namespace.memo(function (props) {
       props.onRowEditCancel({
         originalEvent: event,
         data: props.rowData,
-        index: props.index
+        index: props.rowIndex
       });
     }
     onEditChange(e, false);
@@ -1496,7 +1494,7 @@ var BodyRow = /*#__PURE__*/React__namespace.memo(function (props) {
           tableSelector: props.tableSelector,
           column: col,
           rowData: props.rowData,
-          rowIndex: props.index,
+          rowIndex: props.rowIndex,
           index: i,
           rowSpan: rowSpan,
           dataKey: props.dataKey,
@@ -1543,9 +1541,9 @@ var BodyRow = /*#__PURE__*/React__namespace.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
@@ -1620,7 +1618,6 @@ var TableBody = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
   var rowDragging = React__namespace.useRef(false);
   var draggedRowIndex = React__namespace.useRef(null);
   var droppedRowIndex = React__namespace.useRef(null);
-  var prevVirtualScrollerOptions = hooks.usePrevious(props.virtualScrollerOptions);
   var isSubheaderGrouping = props.rowGroupMode && props.rowGroupMode === 'subheader';
   var isRadioSelectionMode = props.selectionMode === 'radiobutton';
   var isCheckboxSelectionMode = props.selectionMode === 'checkbox';
@@ -1770,10 +1767,6 @@ var TableBody = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
       });
     }
   };
-  var updateVirtualScrollerPosition = function updateVirtualScrollerPosition() {
-    var tableHeaderHeight = utils.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,
@@ -2327,16 +2320,6 @@ var TableBody = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
       updateFrozenRowGroupHeaderStickyPosition();
     }
   });
-  hooks.useMountEffect(function () {
-    if (!props.isVirtualScrollerDisabled && getVirtualScrollerOption('vertical')) {
-      updateVirtualScrollerPosition();
-    }
-  });
-  hooks.useUpdateEffect(function () {
-    if (!props.isVirtualScrollerDisabled && getVirtualScrollerOption('vertical') && getVirtualScrollerOption('itemSize', prevVirtualScrollerOptions) !== getVirtualScrollerOption('itemSize')) {
-      updateVirtualScrollerPosition();
-    }
-  }, [props.virtualScrollerOptions]);
   hooks.useUpdateEffect(function () {
     if (props.paginator && isMultipleSelection()) {
       anchorRowIndex.current = null;
@@ -2364,9 +2347,8 @@ var TableBody = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
     }
     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__namespace.createElement(RowTogglerButton, {
         onClick: onRowToggle,
@@ -2375,9 +2357,11 @@ var TableBody = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
         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 = utils.ObjectUtils.getJSXElement(props.rowGroupHeaderTemplate, rowData, options);
 
       // check if the user wants complete control of the rendering
@@ -2396,7 +2380,7 @@ var TableBody = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
     }
     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);
@@ -2409,6 +2393,7 @@ var TableBody = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
         value: props.value,
         columns: props.columns,
         rowData: rowData,
+        rowIndex: rowIndex,
         index: index,
         selected: selected,
         contextMenuSelected: contextMenuSelected,
@@ -2467,11 +2452,11 @@ var TableBody = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
       });
     }
   };
-  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 = utils.ObjectUtils.getJSXElement(props.rowExpansionTemplate, rowData, options);
@@ -2491,10 +2476,10 @@ var TableBody = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
     }
     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 = utils.ObjectUtils.getJSXElement(props.rowGroupFooterTemplate, rowData, {
-        index: index,
+        index: rowIndex,
         colSpan: colSpan,
         props: props.tableProps
       });
@@ -2506,25 +2491,25 @@ var TableBody = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
     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__namespace.createElement(React__namespace.Fragment, {
         key: key
       }, groupHeader, row, expansion, groupFooter);
     });
   };
-  var className = utils.classNames('p-datatable-tbody', props.className);
   var content = props.empty ? createEmptyContent() : createContent();
   return /*#__PURE__*/React__namespace.createElement("tbody", {
     ref: refCallback,
-    className: className
+    style: props.style,
+    className: props.className
   }, content);
 }));
 TableBody.displayName = 'TableBody';
@@ -4215,9 +4200,10 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
       if (utils.ObjectUtils.isNotEmpty(widths)) {
         createStyleElement();
         var innerHTML = '';
+        var selector = ".p-datatable[".concat(attributeSelectorState, "] > .p-datatable-wrapper ").concat(isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller', " > .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;
       }
@@ -4385,10 +4371,11 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
     destroyStyleElement();
     createStyleElement();
     var innerHTML = '';
+    var selector = ".p-datatable[".concat(attributeSelectorState, "] > .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 = 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;
   };
@@ -4551,7 +4538,10 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
   var createResponsiveStyle = function createResponsiveStyle() {
     if (!responsiveStyleElement.current) {
       responsiveStyleElement.current = utils.DomHandler.createInlineStyle(PrimeReact__default["default"].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 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 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;
     }
   };
@@ -5028,7 +5018,7 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
     return data;
   };
   hooks.useMountEffect(function () {
-    setAttributeSelectorState(utils.UniqueComponentId());
+    !attributeSelectorState && setAttributeSelectorState(utils.UniqueComponentId());
     setFiltersState(cloneFilters(props.filters));
     setD_filtersState(cloneFilters(props.filters));
     if (isStateful()) {
@@ -5039,11 +5029,16 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
     }
   });
   hooks.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]);
   hooks.useUpdateEffect(function () {
     var filters = cloneFilters(props.filters);
     setFiltersState(filters);
@@ -5125,7 +5120,7 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
     }
     return null;
   };
-  var createTableHeader = function createTableHeader(options, empty) {
+  var createTableHeader = function createTableHeader(options, empty, _isVirtualScrollerDisabled) {
     var sortField = getSortField();
     var sortOrder = getSortOrder();
     var multiSortMeta = _toConsumableArray(getMultiSortMeta());
@@ -5133,9 +5128,11 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
     var filters = d_filtersState;
     var filtersStore = !props.onFilter && props.filters || getFilters();
     var processedData = options.items,
+      virtualScrollerProps = options.props,
       columns = options.columns;
+    var data = _isVirtualScrollerDisabled || virtualScrollerProps.lazy ? processedData : virtualScrollerProps.items;
     return /*#__PURE__*/React__namespace.createElement(TableHeader, {
-      value: processedData,
+      value: data,
       tableProps: props,
       columns: columns,
       tabIndex: props.tabIndex,
@@ -5174,12 +5171,14 @@ var DataTable = /*#__PURE__*/React__namespace.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 = utils.ObjectUtils.isNotEmpty(props.frozenValue) && /*#__PURE__*/React__namespace.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,
@@ -5250,7 +5249,8 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
     var body = /*#__PURE__*/React__namespace.createElement(TableBody, {
       ref: bodyRef,
       value: dataToRender(rows),
-      className: className,
+      style: style,
+      className: utils.classNames('p-datatable-tbody', className),
       empty: empty,
       frozenRow: false,
       tableProps: props,
@@ -5320,7 +5320,13 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
       virtualScrollerOptions: options,
       isVirtualScrollerDisabled: isVirtualScrollerDisabled
     });
-    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, frozenBody, body);
+    var spacerBody = utils.ObjectUtils.isNotEmpty(spacerStyle) ? /*#__PURE__*/React__namespace.createElement(TableBody, {
+      style: {
+        height: "calc(".concat(spacerStyle.height, " - ").concat(rows.length * itemSize, "px)")
+      },
+      className: "p-datatable-virtualscroller-spacer"
+    }) : null;
+    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, frozenBody, body, spacerBody);
   };
   var createTableFooter = function createTableFooter(options) {
     var columns = options.columns;
@@ -5351,14 +5357,20 @@ var DataTable = /*#__PURE__*/React__namespace.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 = utils.classNames('p-datatable-table', props.tableClassName);
-        var tableHeader = createTableHeader(options, empty);
+        var tableClassName = utils.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, _isVirtualScrollerDisabled);
         var tableBody = createTableBody(options, selectionModeInColumn, empty, _isVirtualScrollerDisabled);
         var tableFooter = createTableFooter(options);
         return /*#__PURE__*/React__namespace.createElement("table", {
@@ -5452,13 +5464,9 @@ var DataTable = /*#__PURE__*/React__namespace.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',