Open nlafleur opened 2 years ago
This improvement was in my TODO for quite long time but I never took an action because it didn't know if someone would use it. I'm glad that there's need for it now. Related to https://github.com/mui/mui-x/issues/1911#issuecomment-861915818
We would also be interested in this π€©
48838
Is there any plan to implement this "behavior", "block", "inline" parameters? I would also like this feature to be implemented.
+1
The feature isn't planned at the moment due to low number of upvotes (4 at the moment), but this doesn't seem too hard to implement. Any external contribution will be welcomed for this feature, the scrolling code is in useGridScroll.
Hello, don't have time for contribution. but maybe these code could help someone with contribution or in general
center to the scrolled rowIndex
import {GridApiCommon} from "@mui/x-data-grid";
export const muiDataGridScroll = (apiRef: GridApiCommon, rowIndex: number) => {
const dimensions = apiRef.state.dimensions;
const virtualScrollerRef = apiRef.rootElementRef.current!.querySelector(".MuiDataGrid-virtualScroller")!;
const rowsMeta = apiRef.state.rowsMeta;
const targetOffsetHeight = rowsMeta.positions[rowIndex + 1]
? rowsMeta.positions[rowIndex + 1] - rowsMeta.positions[rowIndex]
: rowsMeta.currentPageTotalHeight - rowsMeta.positions[rowIndex];
const top = scrollIntoView({
clientHeight: dimensions.viewportInnerSize.height,
scrollTop: virtualScrollerRef.scrollTop,
offsetHeight: targetOffsetHeight,
offsetTop: rowsMeta.positions[rowIndex],
});
apiRef.scroll({top: top});
}
function scrollIntoView(dimensions: {
clientHeight: number;
scrollTop: number;
offsetHeight: number;
offsetTop: number;
}) {
const { clientHeight, scrollTop, offsetHeight, offsetTop } = dimensions;
const elementBottom = offsetTop + offsetHeight;
// Always scroll to top when cell is higher than viewport to avoid scroll jump
// See https://github.com/mui/mui-x/issues/4513 and https://github.com/mui/mui-x/issues/4514
if (offsetHeight > clientHeight) {
return offsetTop;
}
if (elementBottom - clientHeight > scrollTop) {
return elementBottom - clientHeight + Math.round(clientHeight / 2) - Math.round(offsetHeight / 2);
}
if (offsetTop < scrollTop) {
return offsetTop - Math.round(clientHeight / 2) + Math.round(offsetHeight / 2);
}
return undefined;
}
Duplicates
Latest version
Summary π‘
Just like the "scrollIntoView" function (https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView)
Examples π
It would be usefull to allow the 3 parameters scrollIntoView also allows,
I used an alternative way to animate the scroll by adding the following style to the DataGrid:
Which works fine, but I also want to center the scrolled row.
Current behaviour is that it stops whenever the row is visible
Motivation π¦
No response
Order ID π³ (optional)
No response