diff --git a/packages/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx index 1f71824e507fa..b8e38ff9df4a6 100644 --- a/packages/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx @@ -86,10 +86,10 @@ describe(' - Detail panel', () => { await microtasks(); const virtualScrollerContent = $('.MuiDataGrid-virtualScrollerContent')!; - expect(virtualScrollerContent).toHaveInlineStyle({ - width: 'auto', + expect(virtualScrollerContent).toHaveComputedStyle({ height: `${rowHeight + detailPanelHeight}px`, }); + expect(virtualScrollerContent).toHaveInlineStyle({ width: 'auto' }); const detailPanels = $$('.MuiDataGrid-detailPanel'); expect(detailPanels[0]).toHaveComputedStyle({ @@ -128,11 +128,9 @@ describe(' - Detail panel', () => { }); await waitFor(() => { - expect(virtualScrollerContent).toHaveInlineStyle({ - width: 'auto', - height: `${rowHeight + 100}px`, - }); + expect(virtualScrollerContent).toHaveComputedStyle({ height: `${rowHeight + 100}px` }); }); + expect(virtualScrollerContent).toHaveInlineStyle({ width: 'auto' }); const detailPanels = $$('.MuiDataGrid-detailPanel'); expect(detailPanels[0]).toHaveComputedStyle({ @@ -142,11 +140,9 @@ describe(' - Detail panel', () => { fireEvent.click(screen.getByRole('button', { name: 'Increase' })); await waitFor(() => { - expect(virtualScrollerContent).toHaveInlineStyle({ - width: 'auto', - height: `${rowHeight + 200}px`, - }); + expect(virtualScrollerContent).toHaveComputedStyle({ height: `${rowHeight + 200}px` }); }); + expect(virtualScrollerContent).toHaveInlineStyle({ width: 'auto' }); expect(detailPanels[0]).toHaveComputedStyle({ height: `200px`, diff --git a/packages/x-data-grid/src/components/containers/GridRootStyles.ts b/packages/x-data-grid/src/components/containers/GridRootStyles.ts index 86b93de0962d6..eb1ccdc749965 100644 --- a/packages/x-data-grid/src/components/containers/GridRootStyles.ts +++ b/packages/x-data-grid/src/components/containers/GridRootStyles.ts @@ -743,7 +743,7 @@ export const GridRootStyles = styled('div', { }, [`& .${c.filler}`]: { - flex: 1, + flex: '1 0 auto', }, [`& .${c['filler--borderBottom']}`]: { borderBottom: '1px solid var(--DataGrid-rowBorderColor)', diff --git a/packages/x-data-grid/src/components/virtualization/GridBottomContainer.tsx b/packages/x-data-grid/src/components/virtualization/GridBottomContainer.tsx index ca0c0d5179eb3..cc2a9c8c1789f 100644 --- a/packages/x-data-grid/src/components/virtualization/GridBottomContainer.tsx +++ b/packages/x-data-grid/src/components/virtualization/GridBottomContainer.tsx @@ -3,9 +3,6 @@ import clsx from 'clsx'; import { styled } from '@mui/system'; import composeClasses from '@mui/utils/composeClasses'; import { gridClasses, getDataGridUtilityClass } from '../../constants/gridClasses'; -import { gridDimensionsSelector } from '../../hooks/features/dimensions/gridDimensionsSelectors'; -import { useGridApiContext } from '../../hooks/utils/useGridApiContext'; -import { useGridSelector } from '../../hooks/utils/useGridSelector'; const useUtilityClasses = () => { const slots = { @@ -23,25 +20,10 @@ const Element = styled('div')({ export function GridBottomContainer(props: React.PropsWithChildren) { const classes = useUtilityClasses(); - const apiRef = useGridApiContext(); - const { viewportOuterSize, minimumSize, hasScrollX, scrollbarSize } = useGridSelector( - apiRef, - gridDimensionsSelector, - ); - const scrollHeight = hasScrollX ? scrollbarSize : 0; - const offset = Math.max( - viewportOuterSize.height - - minimumSize.height - - // Subtract scroll height twice to account for GridVirtualScrollerFiller and horizontal scrollbar - 2 * scrollHeight, - 0, - ); - return ( ); diff --git a/packages/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx b/packages/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx index 16dd85280208e..38859f1f89181 100644 --- a/packages/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx +++ b/packages/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx @@ -51,6 +51,8 @@ const Scroller = styled('div', { flexGrow: 1, overflow: 'scroll', scrollbarWidth: 'none' /* Firefox */, + display: 'flex', + flexDirection: 'column', '&::-webkit-scrollbar': { display: 'none' /* Safari and Chrome */, }, diff --git a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index 7ba0db4ac5da9..59c8e1418af4e 100644 --- a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -534,7 +534,8 @@ export const useGridVirtualScroller = () => { const contentSize = React.useMemo(() => { const size: React.CSSProperties = { width: needsHorizontalScrollbar ? columnsTotalWidth : 'auto', - height: contentHeight, + flexBasis: contentHeight, + flexShrink: 0, }; if (rootProps.autoHeight && currentPage.rows.length === 0) { diff --git a/packages/x-data-grid/src/tests/rows.DataGrid.test.tsx b/packages/x-data-grid/src/tests/rows.DataGrid.test.tsx index 2efc26c7c9c34..0952929261989 100644 --- a/packages/x-data-grid/src/tests/rows.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/rows.DataGrid.test.tsx @@ -645,11 +645,9 @@ describe(' - Rows', () => { ); const expectedHeight = baselineProps.rows.length * (contentHeight + border); await waitFor(() => { - expect(virtualScrollerContent).toHaveInlineStyle({ - width: 'auto', - height: `${expectedHeight}px`, - }); + expect(virtualScrollerContent).toHaveComputedStyle({ height: `${expectedHeight}px` }); }); + expect(virtualScrollerContent).toHaveInlineStyle({ width: 'auto' }); }); it('should use the default row height to calculate the content size when the row has not been measured yet', async () => { @@ -674,11 +672,9 @@ describe(' - Rows', () => { border + // Measured rows also include the border (baselineProps.rows.length - 1) * defaultRowHeight; await waitFor(() => { - expect(virtualScrollerContent).toHaveInlineStyle({ - width: 'auto', - height: `${expectedHeight}px`, - }); + expect(virtualScrollerContent).toHaveComputedStyle({ height: `${expectedHeight}px` }); }); + expect(virtualScrollerContent).toHaveInlineStyle({ width: 'auto' }); }); it('should use the value from getEstimatedRowHeight to estimate the content size', async () => { @@ -703,11 +699,9 @@ describe(' - Rows', () => { const expectedHeight = firstRowHeight + (baselineProps.rows.length - 1) * estimatedRowHeight; await waitFor(() => { - expect(virtualScrollerContent).toHaveInlineStyle({ - width: 'auto', - height: `${expectedHeight}px`, - }); + expect(virtualScrollerContent).toHaveComputedStyle({ height: `${expectedHeight}px` }); }); + expect(virtualScrollerContent).toHaveInlineStyle({ width: 'auto' }); }); it('should recalculate the content size when the rows prop changes', async () => { @@ -723,18 +717,14 @@ describe(' - Rows', () => { '.MuiDataGrid-virtualScrollerContent', ); await waitFor(() => { - expect(virtualScrollerContent).toHaveInlineStyle({ - width: 'auto', - height: '101px', - }); + expect(virtualScrollerContent).toHaveComputedStyle({ height: '101px' }); }); + expect(virtualScrollerContent).toHaveInlineStyle({ width: 'auto' }); setProps({ rows: [{ clientId: 'c1', expanded: true }] }); await waitFor(() => { - expect(virtualScrollerContent).toHaveInlineStyle({ - width: 'auto', - height: '201px', - }); + expect(virtualScrollerContent).toHaveComputedStyle({ height: '201px' }); }); + expect(virtualScrollerContent).toHaveInlineStyle({ width: 'auto' }); }); it('should set minHeight to "auto" in all rows with dynamic row height', () => { @@ -813,11 +803,11 @@ describe(' - Rows', () => { '.MuiDataGrid-virtualScrollerContent', )!; await waitFor(() => { - expect(virtualScrollerContent).toHaveInlineStyle({ - width: 'auto', + expect(virtualScrollerContent).toHaveComputedStyle({ height: `${Math.floor(expectedHeight)}px`, }); }); + expect(virtualScrollerContent).toHaveInlineStyle({ width: 'auto' }); }); it('should position correctly the render zone when the 2nd page has less rows than the 1st page', async function test() { @@ -968,7 +958,11 @@ describe(' - Rows', () => { }); }); - it('should consider the spacing when computing the content size', () => { + it('should consider the spacing when computing the content size', function test() { + if (isJSDOM) { + // Need layouting + this.skip(); + } const spacingTop = 5; const spacingBottom = 10; const rowHeight = 50; @@ -981,13 +975,15 @@ describe(' - Rows', () => { ); const virtualScrollerContent = document.querySelector('.MuiDataGrid-virtualScrollerContent'); const expectedHeight = rows.length * (rowHeight + spacingTop + spacingBottom); - expect(virtualScrollerContent).toHaveInlineStyle({ - width: 'auto', - height: `${expectedHeight}px`, - }); + expect(virtualScrollerContent).toHaveComputedStyle({ height: `${expectedHeight}px` }); + expect(virtualScrollerContent).toHaveInlineStyle({ width: 'auto' }); }); - it('should update the content size when getRowSpacing is removed', () => { + it('should update the content size when getRowSpacing is removed', function test() { + if (isJSDOM) { + // Need layouting + this.skip(); + } const spacingTop = 5; const spacingBottom = 10; const rowHeight = 50; @@ -1000,15 +996,13 @@ describe(' - Rows', () => { ); const virtualScrollerContent = document.querySelector('.MuiDataGrid-virtualScrollerContent'); const expectedHeight = rows.length * (rowHeight + spacingTop + spacingBottom); - expect(virtualScrollerContent).toHaveInlineStyle({ - width: 'auto', - height: `${expectedHeight}px`, - }); + expect(virtualScrollerContent).toHaveComputedStyle({ height: `${expectedHeight}px` }); + expect(virtualScrollerContent).toHaveInlineStyle({ width: 'auto' }); setProps({ getRowSpacing: null }); - expect(virtualScrollerContent).toHaveInlineStyle({ - width: 'auto', + expect(virtualScrollerContent).toHaveComputedStyle({ height: `${rows.length * rowHeight}px`, }); + expect(virtualScrollerContent).toHaveInlineStyle({ width: 'auto' }); }); it('should set the row margin to the value returned by getRowSpacing if rowSpacingType is not defined', () => { diff --git a/test/regressions/data-grid/DataGridPinnedColumns.js b/test/regressions/data-grid/DataGridPinnedColumns.js new file mode 100644 index 0000000000000..743f70a7386f8 --- /dev/null +++ b/test/regressions/data-grid/DataGridPinnedColumns.js @@ -0,0 +1,62 @@ +import * as React from 'react'; +import DeleteIcon from '@mui/icons-material/Delete'; +import EditIcon from '@mui/icons-material/Edit'; +import { DataGridPro, GridActionsCellItem } from '@mui/x-data-grid-pro'; +import { + randomCreatedDate, + randomTraderName, + randomEmail, + randomUpdatedDate, +} from '@mui/x-data-grid-generator'; + +const columns = [ + { field: 'name', headerName: 'Name', width: 160, editable: true }, + { field: 'email', headerName: 'Email', width: 200, editable: true }, + { field: 'age', headerName: 'Age', type: 'number', editable: true }, + { + field: 'dateCreated', + headerName: 'Date Created', + type: 'date', + width: 180, + editable: true, + }, + { + field: 'lastLogin', + headerName: 'Last Login', + type: 'dateTime', + width: 220, + editable: true, + }, + { + field: 'actions', + type: 'actions', + width: 100, + getActions: () => [ + } label="Edit" />, + } label="Delete" />, + ], + }, +]; + +const rows = [ + { + id: 1, + name: randomTraderName(), + email: randomEmail(), + age: 25, + dateCreated: randomCreatedDate(), + lastLogin: randomUpdatedDate(), + }, +]; + +export default function BasicColumnPinning() { + return ( +
+ +
+ ); +}