Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DataGridPro] Keep bottom pinned row at the bottom #13313

Merged
merged 15 commits into from
Jul 9, 2024
Merged

[DataGridPro] Keep bottom pinned row at the bottom #13313

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
ef71664
fix: it
romgrk May 30, 2024
937d64a
fix: overlay height
romgrk Jun 18, 2024
710aa2d
fix: argos
romgrk Jun 18, 2024
2dff02f
lint
romgrk Jun 18, 2024
b609a82
tests: fix warning
romgrk Jun 19, 2024
18db7f7
test: add regression test
romgrk Jun 19, 2024
ac2db52
test: fix one
romgrk Jun 21, 2024
bda12ed
fix: test
romgrk Jul 5, 2024
e26c5ab
core: karma chrome bin
romgrk Jul 5, 2024
c378131
Merge branch 'master' into fix-bottom-pinned-row
romgrk Jul 5, 2024
da1a6ab
Merge branch 'master' into fix-bottom-pinned-row
romgrk Jul 8, 2024
24a8285
test: fix
romgrk Jul 8, 2024
aa46d51
lint
romgrk Jul 9, 2024
20080f7
test: fix
romgrk Jul 9, 2024
e1a1337
ci: run
romgrk Jul 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion packages/x-data-grid/src/components/base/GridOverlays.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,8 @@ function GridOverlayWrapper(props: React.PropsWithChildren<{ overlayType: string

let height: React.CSSProperties['height'] =
dimensions.viewportOuterSize.height -
dimensions.headersTotalHeight -
dimensions.topContainerHeight -
dimensions.bottomContainerHeight -
(dimensions.hasScrollX ? dimensions.scrollbarSize : 0);

if ((rootProps.autoHeight && currentPage.rows.length === 0) || height === 0) {
Expand Down
2 changes: 1 addition & 1 deletion packages/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx
View file
Open in desktop
romgrk marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ function GridVirtualScroller(props: GridVirtualScrollerProps) {
</RenderZone>
</Content>

{rows.length > 0 && <SpaceFiller />}
<SpaceFiller rowsLength={rows.length} />

<BottomContainer>
<rootProps.slots.pinnedRows position="bottom" virtualScroller={virtualScroller} />
Expand Down
26 changes: 20 additions & 6 deletions packages/x-data-grid/src/components/virtualization/GridVirtualScrollerFiller.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,24 +17,29 @@ const Pinned = styled('div')({
position: 'sticky',
height: '100%',
boxSizing: 'border-box',
borderTop: '1px solid var(--DataGrid-rowBorderColor)',
borderTop: '1px solid var(--rowBorderColor)',
backgroundColor: 'var(--DataGrid-pinnedBackground)',
});
const PinnedLeft = styled(Pinned)({
left: 0,
borderRight: '1px solid var(--DataGrid-rowBorderColor)',
borderRight: '1px solid var(--rowBorderColor)',
});
const PinnedRight = styled(Pinned)({
right: 0,
borderLeft: '1px solid var(--DataGrid-rowBorderColor)',
borderLeft: '1px solid var(--rowBorderColor)',
});

const Main = styled('div')({
flexGrow: 1,
borderTop: '1px solid var(--DataGrid-rowBorderColor)',
borderTop: '1px solid var(--rowBorderColor)',
});

function GridVirtualScrollerFiller() {
type Props = {
/** The number of rows */
rowsLength: number;
};

function GridVirtualScrollerFiller({ rowsLength }: Props) {
const apiRef = useGridApiContext();
const {
viewportOuterSize,
Expand All @@ -54,7 +59,16 @@ function GridVirtualScrollerFiller() {
}

return (
<Filler className={gridClasses.filler} role="presentation" style={{ height }}>
<Filler
className={gridClasses.filler}
role="presentation"
style={
{
height,
'--rowBorderColor': rowsLength === 0 ? 'transparent' : 'var(--DataGrid-rowBorderColor)',
} as React.CSSProperties
}
>
{leftPinnedWidth > 0 && (
<PinnedLeft
className={gridClasses['filler--pinnedLeft']}
Expand Down
15 changes: 3 additions & 12 deletions packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -513,22 +513,13 @@ export const useGridVirtualScroller = () => {
);

const contentSize = React.useMemo(() => {
// In cases where the columns exceed the available width,
// the horizontal scrollbar should be shown even when there're no rows.
// Keeping 1px as minimum height ensures that the scrollbar will visible if necessary.
const height = Math.max(contentHeight, 1);

Comment on lines -520 to -524
Copy link
Contributor Author

@romgrk romgrk Jun 19, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this code was preventing this 0-height warning from running in some cases, so fixing it broke some tests all over the place that didn't have explicit dimensions on the grid container. I'll need to debug & update those tests before merging this PR. The test runner also doesn't seem to match the warning to which test it originated from precisely, so sometimes it marks one test as failed but the warning came from another test. As in if I run the test with .only it succeeds, but if I run the test suite as a whole it fails. Lots of fun ahead.

const size: React.CSSProperties = {
width: needsHorizontalScrollbar ? columnsTotalWidth : 'auto',
height,
height: contentHeight,
};

if (rootProps.autoHeight) {
if (currentPage.rows.length === 0) {
size.height = getMinimalContentHeight(apiRef); // Give room to show the overlay when there no rows.
} else {
size.height = contentHeight;
}
if (rootProps.autoHeight && currentPage.rows.length === 0) {
size.height = getMinimalContentHeight(apiRef); // Give room to show the overlay when there no rows.
}

return size;
Expand Down
Loading