Clicking on a table element reset's the location of the scrollbar

[ManoloTonto1]

Hello there, I've been dealing with an issue with Virtuoso Table component using MUI and I can't manage to make it work. I followed the debugging guide on the site but, I don't really understand what I can do with the logs I am getting I am currently getting this in my console each time I am scrolling and such:

For some reason this only happens in my table component but not in my grid component. anything helps!!

source code:

	const VirtuosoTableComponents: TableComponents<unknown> = React.useMemo(
		() => ({
			Scroller: React.forwardRef<HTMLDivElement>((props, ref) => (
				<TableContainer
					component={Paper}
					{...props}
					ref={ref}
					sx={{
						width: '100%',
						...tableHeightAndScroll,
					}}
				/>
			)),
			Table: (props) => (
				<Table
					{...props}
					stickyHeader
					sx={{
						overflow: 'auto',
					}}
					size={'medium'}
					id='table'
				/>
			),
			TableHead: TableHead,
			TableRow: (_props) => {
				const handleClick = React.useCallback(
					(event: any) => {
						const item = _props.item as unknownObj<number>;
						handleRowClick(event, item[props.primaryKey]);
					},
					[_props.item]
				);
				return (
					<TableRow
						{..._props}
						hover
						sx={{
							'mx': 2,
							'&:hover': {
								cursor: 'pointer',
								transition: '200ms',
							},
						}}
						onClick={handleClick}
					/>
				);
			},
			TableBody: React.forwardRef<HTMLTableSectionElement>((props, ref) => (
				<TableBody
					{...props}
					ref={ref}
				/>
			)),
		}),
		[handleRowClick, props.primaryKey]
	);
	
	return (
<Paper
						sx={{
							height: '70vh',
							mx: 2,
						}}>
						<TableVirtuoso
							ref={tableRef}
							data={data}
							size={data.length}
							overscan={{
								main: tableContext.tableOverscan,
								reverse: tableContext.tableOverscan,
							}}
							components={VirtuosoTableComponents}
							itemContent={(index, row) =>
								TableData(index, row, selectedColumns)
							}
							fixedHeaderContent={() => (
								<TableHeader
									columns={{
										selectedColumns,
										setSelectedColumns,
									}}
									data={{
										data: tableContext.tableData,
										setData: tableContext.setTableData,
									}}
									order={{
										order,
										orderBy,
										setOrder,
										setOrderBy,
									}}
									rows={{
										rowsPerPage,
										setRowsPerPage,
									}}
								/>
							)}
							fixedFooterContent={() =>
								props.footer
									? props.footer(
											selectedColumns.filter(
												(cell) => cell.isChecked
											).length,
											data
									  )
									: undefined
							}
						/>
					</Paper>
);

[petyosi]

You need to move the definition of the components outside of the boby of the functional component. Right now, a fresh instance of the custom components is created with each re-render. See this note and a reference implementation.

[ManoloTonto1]

Thank you for your answer! It worked and what i did is removed the useMemo dependencies from the component. (I was only passing a function and a prop that does not change.

[mokhigh]

Hey, @ManoloTonto1. Can you send me the code of how you fixed your error?
I am having the same issue and will be great some help.

[ManoloTonto1]

Hey @mokhigh, here's the code. Sorry for taking so long :)

const VirtuosoTableComponents: TableComponents<T> = React.useMemo(
		() => ({
			Scroller: React.forwardRef<HTMLDivElement>((props, ref) => (
				<TableContainer
					component={Paper}
					{...props}
					ref={ref}
					sx={{
						width: '100%',
						...tableHeightAndScroll,
					}}
				/>
			)),
			Table: (props) => (
				<Table
					{...props}
					stickyHeader
					sx={{
						overflow: 'auto',
					}}
					size={'medium'}
					id='table'
				/>
			),
			TableHead: TableHead,
			TableRow: (_props) => {
				const handleClick = React.useCallback(
					(event: React.MouseEvent<HTMLTableRowElement, MouseEvent>) => {
						const item = _props.item;
						handleRowClick(
							event,
							item[props.primaryKey as keyof T] as number
						);
					},
					[_props.item]
				);
				return (
					<TableRow
						{..._props}
						hover
						sx={{
							'mx': 2,
							'&:hover': {
								cursor: 'pointer',
								transition: '200ms',
							},
						}}
						onClick={handleClick}
					/>
				);
			},
			TableBody: React.forwardRef<HTMLTableSectionElement>((props, ref) => (
				<TableBody
					{...props}
					ref={ref}
				/>
			)),
		}),
		[] <------ keep this empty
	);