primereact 9.1.1 → 9.2.1

package/datatable/datatable.js

@@ -248,7 +248,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
     defaultProps: {
       __TYPE: 'DataTable',
       alwaysShowPaginator: true,
-      autoLayout: false,
       breakpoint: '960px',
       cellClassName: null,
       cellSelection: false,
@@ -340,7 +339,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       reorderableColumns: false,
       reorderableRows: false,
       resizableColumns: false,
-      responsiveLayout: 'stack',
+      responsiveLayout: 'scroll',
       rowClassName: null,
       rowEditValidator: null,
       rowExpansionTemplate: null,
@@ -350,7 +349,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       rowHover: false,
       rows: null,
       rowsPerPageOptions: null,
-      scrollDirection: 'vertical',
       scrollHeight: null,
       scrollable: false,
       selectAll: false,
@@ -1204,7 +1202,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       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) {
@@ -1261,35 +1259,35 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       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) {
@@ -1343,49 +1341,49 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       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) {
@@ -1429,7 +1427,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         props.onRowEditInit({
           originalEvent: event,
           data: props.rowData,
-          index: props.index
+          index: props.rowIndex
         });
       }
       onEditChange(e, true);
@@ -1445,7 +1443,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         props.onRowEditSave({
           originalEvent: event,
           data: props.rowData,
-          index: props.index,
+          index: props.rowIndex,
           valid: valid
         });
       }
@@ -1463,7 +1461,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         props.onRowEditCancel({
           originalEvent: event,
           data: props.rowData,
-          index: props.index
+          index: props.rowIndex
         });
       }
       onEditChange(e, false);
@@ -1481,7 +1479,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
             tableSelector: props.tableSelector,
             column: col,
             rowData: props.rowData,
-            rowIndex: props.index,
+            rowIndex: props.rowIndex,
             index: i,
             rowSpan: rowSpan,
             dataKey: props.dataKey,
@@ -1528,9 +1526,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       '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
@@ -1605,7 +1603,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
     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';
@@ -1755,10 +1752,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         });
       }
     };
-    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,
@@ -2312,16 +2305,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         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;
@@ -2349,9 +2332,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       }
       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,
@@ -2360,9 +2342,11 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
           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
@@ -2381,7 +2365,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       }
       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);
@@ -2394,6 +2378,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
           value: props.value,
           columns: props.columns,
           rowData: rowData,
+          rowIndex: rowIndex,
           index: index,
           selected: selected,
           contextMenuSelected: contextMenuSelected,
@@ -2452,11 +2437,11 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         });
       }
     };
-    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);
@@ -2476,10 +2461,10 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       }
       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
         });
@@ -2491,25 +2476,25 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       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';
@@ -4200,9 +4185,10 @@ 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");
           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;
         }
@@ -4370,10 +4356,11 @@ 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");
       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;
     };
@@ -4536,7 +4523,10 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
     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;
       }
     };
@@ -5013,7 +5003,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       return data;
     };
     hooks.useMountEffect(function () {
-      setAttributeSelectorState(utils.UniqueComponentId());
+      !attributeSelectorState && setAttributeSelectorState(utils.UniqueComponentId());
       setFiltersState(cloneFilters(props.filters));
       setD_filtersState(cloneFilters(props.filters));
       if (isStateful()) {
@@ -5024,11 +5014,16 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       }
     });
     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);
@@ -5110,7 +5105,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       }
       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());
@@ -5118,9 +5113,11 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       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,
@@ -5159,12 +5156,14 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       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,
@@ -5235,7 +5234,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       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,
@@ -5305,7 +5305,13 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         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;
@@ -5336,14 +5342,20 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         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", {
@@ -5437,13 +5449,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       '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',

package/datatable/datatable.min.css

@@ -1 +1 @@
-.p-datatable{position:relative}.p-datatable table{border-collapse:collapse;min-width:100%;table-layout:fixed}.p-datatable .p-sortable-column{cursor:pointer;user-select:none}.p-datatable .p-sortable-disabled{cursor:auto}.p-datatable .p-sortable-column .p-column-title,.p-datatable .p-sortable-column .p-sortable-column-icon,.p-datatable .p-sortable-column .p-sortable-column-badge{vertical-align:middle}.p-datatable .p-sortable-column .p-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center}.p-datatable-responsive-scroll>.p-datatable-wrapper{overflow-x:auto}.p-datatable-responsive-scroll>.p-datatable-wrapper>table,.p-datatable-auto-layout>.p-datatable-wrapper>table{table-layout:auto}.p-datatable-selectable .p-selectable-row,.p-datatable-selectable-cell .p-selectable-cell{cursor:pointer}.p-datatable-drag-selection-helper{position:absolute;z-index:99999999}.p-datatable-scrollable .p-datatable-wrapper{position:relative;overflow:auto}.p-datatable-scrollable .p-datatable-thead,.p-datatable-scrollable .p-datatable-tbody,.p-datatable-scrollable .p-datatable-tfoot{display:block}.p-datatable-scrollable .p-datatable-thead>tr,.p-datatable-scrollable .p-datatable-tbody>tr,.p-datatable-scrollable .p-datatable-tfoot>tr{display:flex;flex-wrap:nowrap;width:100%}.p-datatable-scrollable .p-datatable-thead>tr>th,.p-datatable-scrollable .p-datatable-tbody>tr>td,.p-datatable-scrollable .p-datatable-tfoot>tr>td{display:flex;flex:1 1 0;align-items:center}.p-datatable-scrollable .p-datatable-thead{position:sticky;top:0;z-index:1}.p-datatable-scrollable .p-datatable-frozen-tbody{position:sticky;z-index:1}.p-datatable-scrollable .p-datatable-tfoot{position:sticky;bottom:0;z-index:1}.p-datatable-scrollable .p-frozen-column{position:sticky;background:inherit}.p-datatable-scrollable th.p-frozen-column{z-index:1}.p-datatable-scrollable-both .p-datatable-thead>tr>th,.p-datatable-scrollable-both .p-datatable-tbody>tr>td,.p-datatable-scrollable-both .p-datatable-tfoot>tr>td,.p-datatable-scrollable-horizontal .p-datatable-thead>tr>th .p-datatable-scrollable-horizontal .p-datatable-tbody>tr>td,.p-datatable-scrollable-horizontal .p-datatable-tfoot>tr>td{flex:0 0 auto}.p-datatable-flex-scrollable{display:flex;flex-direction:column;height:100%}.p-datatable-flex-scrollable .p-datatable-wrapper{display:flex;flex-direction:column;flex:1;height:100%}.p-datatable-scrollable .p-rowgroup-header{position:sticky;z-index:1}.p-datatable-scrollable.p-datatable-grouped-header .p-datatable-thead,.p-datatable-scrollable.p-datatable-grouped-footer .p-datatable-tfoot{display:table;border-collapse:collapse;width:100%;table-layout:fixed}.p-datatable-scrollable.p-datatable-grouped-header .p-datatable-thead>tr,.p-datatable-scrollable.p-datatable-grouped-footer .p-datatable-tfoot>tr{display:table-row}.p-datatable-scrollable.p-datatable-grouped-header .p-datatable-thead>tr>th,.p-datatable-scrollable.p-datatable-grouped-footer .p-datatable-tfoot>tr>td{display:table-cell}.p-datatable-virtual-table{position:absolute}.p-datatable-scrollable .p-virtualscroller>.p-datatable-table{display:inline-block}.p-datatable-resizable>.p-datatable-wrapper{overflow-x:auto}.p-datatable-resizable .p-datatable-thead>tr>th,.p-datatable-resizable .p-datatable-tfoot>tr>td,.p-datatable-resizable .p-datatable-tbody>tr>td{overflow:hidden;white-space:nowrap}.p-datatable-resizable .p-resizable-column{background-clip:padding-box;position:relative}.p-datatable-resizable-fit .p-resizable-column:last-child .p-column-resizer{display:none}.p-datatable .p-column-resizer{display:block;position:absolute !important;top:0;right:0;margin:0;width:.5rem;height:100%;padding:0;cursor:col-resize;border:1px solid transparent}.p-datatable .p-column-header-content{display:flex;align-items:center}.p-datatable .p-column-resizer-helper{width:1px;position:absolute;z-index:10;display:none}.p-datatable .p-row-editor-init,.p-datatable .p-row-editor-save,.p-datatable .p-row-editor-cancel{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.p-datatable .p-row-toggler{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.p-datatable-reorder-indicator-up,.p-datatable-reorder-indicator-down{position:absolute;display:none}.p-reorderable-column,.p-datatable-reorderablerow-handle{cursor:move}.p-datatable .p-datatable-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:2}.p-column-filter-row{display:flex;align-items:center;width:100%}.p-column-filter-menu{display:inline-flex;margin-left:auto}.p-column-filter-row .p-column-filter-element{flex:1 1 auto;width:1%}.p-column-filter-menu-button,.p-column-filter-clear-button{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;text-decoration:none;overflow:hidden;position:relative}.p-column-filter-overlay{position:absolute;top:0;left:0}.p-column-filter-row-items{margin:0;padding:0;list-style:none}.p-column-filter-row-item{cursor:pointer}.p-column-filter-add-button,.p-column-filter-remove-button{justify-content:center}.p-column-filter-add-button .p-button-label,.p-column-filter-remove-button .p-button-label{flex-grow:0}.p-column-filter-buttonbar{display:flex;align-items:center;justify-content:space-between}.p-column-filter-buttonbar .p-button:not(.p-button-icon-only){width:auto}.p-datatable .p-datatable-tbody>tr>td>.p-column-title{display:none}.p-datatable .p-virtualscroller-loading{transform:none !important;min-height:0;position:sticky;top:0;left:0}.p-datatable .p-datatable-thead>tr>th.p-align-left>.p-column-header-content,.p-datatable .p-datatable-tbody>tr>td.p-align-left,.p-datatable .p-datatable-tfoot>tr>td.p-align-left{text-align:left;justify-content:flex-start}.p-datatable .p-datatable-thead>tr>th.p-align-right>.p-column-header-content,.p-datatable .p-datatable-tbody>tr>td.p-align-right,.p-datatable .p-datatable-tfoot>tr>td.p-align-right{text-align:right;justify-content:flex-end}.p-datatable .p-datatable-thead>tr>th.p-align-center>.p-column-header-content,.p-datatable .p-datatable-tbody>tr>td.p-align-center,.p-datatable .p-datatable-tfoot>tr>td.p-align-center{text-align:center;justify-content:center}
+.p-datatable{position:relative}.p-datatable>.p-datatable-wrapper{overflow:auto}.p-datatable-table{border-spacing:0;width:100%}.p-datatable .p-sortable-disabled{cursor:auto}.p-datatable .p-sortable-column{cursor:pointer;user-select:none}.p-datatable .p-sortable-column .p-column-title,.p-datatable .p-sortable-column .p-sortable-column-icon,.p-datatable .p-sortable-column .p-sortable-column-badge{vertical-align:middle}.p-datatable .p-sortable-column .p-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center}.p-datatable-selectable .p-selectable-row,.p-datatable-selectable-cell .p-selectable-cell{cursor:pointer}.p-datatable-drag-selection-helper{position:absolute;z-index:99999999}.p-datatable-scrollable>.p-datatable-wrapper{position:relative}.p-datatable-scrollable-table>.p-datatable-thead{position:sticky;top:0;z-index:1}.p-datatable-scrollable-table>.p-datatable-frozen-tbody{position:sticky;z-index:1}.p-datatable-scrollable-table>.p-datatable-tfoot{position:sticky;bottom:0;z-index:1}.p-datatable-scrollable .p-frozen-column{position:sticky;background:inherit}.p-datatable-scrollable th.p-frozen-column{z-index:1}.p-datatable-flex-scrollable{display:flex;flex-direction:column;height:100%}.p-datatable-flex-scrollable>.p-datatable-wrapper{display:flex;flex-direction:column;flex:1;height:100%}.p-datatable-scrollable-table>.p-datatable-tbody>.p-rowgroup-header{position:sticky;z-index:1}.p-datatable-resizable-table>.p-datatable-thead>tr>th,.p-datatable-resizable-table>.p-datatable-tfoot>tr>td,.p-datatable-resizable-table>.p-datatable-tbody>tr>td{overflow:hidden;white-space:nowrap}.p-datatable-resizable-table>.p-datatable-thead>tr>th.p-resizable-column:not(.p-frozen-column){background-clip:padding-box;position:relative}.p-datatable-resizable-table-fit>.p-datatable-thead>tr>th.p-resizable-column:last-child .p-column-resizer{display:none}.p-datatable .p-column-resizer{display:block;position:absolute !important;top:0;right:0;margin:0;width:.5rem;height:100%;padding:0;cursor:col-resize;border:1px solid transparent}.p-datatable .p-column-header-content{display:flex;align-items:center}.p-datatable .p-column-resizer-helper{width:1px;position:absolute;z-index:10;display:none}.p-datatable .p-row-editor-init,.p-datatable .p-row-editor-save,.p-datatable .p-row-editor-cancel{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.p-datatable .p-row-toggler{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.p-datatable-reorder-indicator-up,.p-datatable-reorder-indicator-down{position:absolute;display:none}.p-reorderable-column,.p-datatable-reorderablerow-handle{cursor:move}.p-datatable .p-datatable-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:2}.p-column-filter-row{display:flex;align-items:center;width:100%}.p-column-filter-menu{display:inline-flex;margin-left:auto}.p-column-filter-row .p-column-filter-element{flex:1 1 auto;width:1%}.p-column-filter-menu-button,.p-column-filter-clear-button{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;text-decoration:none;overflow:hidden;position:relative}.p-column-filter-overlay{position:absolute;top:0;left:0}.p-column-filter-row-items{margin:0;padding:0;list-style:none}.p-column-filter-row-item{cursor:pointer}.p-column-filter-add-button,.p-column-filter-remove-button{justify-content:center}.p-column-filter-add-button .p-button-label,.p-column-filter-remove-button .p-button-label{flex-grow:0}.p-column-filter-buttonbar{display:flex;align-items:center;justify-content:space-between}.p-column-filter-buttonbar .p-button:not(.p-button-icon-only){width:auto}.p-datatable .p-datatable-tbody>tr>td>.p-column-title{display:none}.p-datatable-virtualscroller-spacer{display:flex}.p-datatable .p-virtualscroller .p-virtualscroller-loading{transform:none !important;min-height:0;position:sticky;top:0;left:0}.p-datatable .p-datatable-thead>tr>th.p-align-left>.p-column-header-content,.p-datatable .p-datatable-tbody>tr>td.p-align-left,.p-datatable .p-datatable-tfoot>tr>td.p-align-left{text-align:left;justify-content:flex-start}.p-datatable .p-datatable-thead>tr>th.p-align-right>.p-column-header-content,.p-datatable .p-datatable-tbody>tr>td.p-align-right,.p-datatable .p-datatable-tfoot>tr>td.p-align-right{text-align:right;justify-content:flex-end}.p-datatable .p-datatable-thead>tr>th.p-align-center>.p-column-header-content,.p-datatable .p-datatable-tbody>tr>td.p-align-center,.p-datatable .p-datatable-tfoot>tr>td.p-align-center{text-align:center;justify-content:center}