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 1 commit
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
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
Loading