Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-09-24 17:51:14 +02:00
Code Issues Projects Releases Wiki Activity

chore: scroll to the top of table when changing page

Browse Source 
Makes it so that if you change the page in a paginated table, you'll scroll to the top of the table. Makes the experience more user friendly.

Will only scroll if the top of the table isn't in view already.

Finally: should we also scroll when you change the number of result rows per page?
This commit is contained in:
Thomas Heartman 2025-09-11 11:55:49 +02:00
parent fabf76e12c
commit b15005895b
No known key found for this signature in database
GPG Key ID: BD1F880DAED1EE78
1 changed files with 34 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/src/component/common/Table/PaginatedTable/PaginatedTable.tsx
View File

@ -1,4 +1,5 @@
import { TableBody, TableRow, TableHead } from '@mui/material';
import { useRef } from 'react';
import { Table } from 'component/common/Table/Table/Table';
import {
type Header,
@ -59,10 +60,22 @@ export const PaginatedTable = <T extends object>({
totalItems?: number;
}) => {
const { pagination } = tableInstance.getState();
const tableRef = useRef<HTMLDivElement>(null);
const scrollToTopIfNeeded = () => {
if (!tableRef.current) return;
const rect = tableRef.current.getBoundingClientRect();
const isTableTopVisible = rect.top >= 0;
if (!isTableTopVisible) {
tableRef.current.scrollIntoView({ block: 'start' });
}
};
return (
<>
<TableContainer>
<TableContainer ref={tableRef}>
<Table>
<TableHead>
{tableInstance.getHeaderGroups().map((headerGroup) => (
@ -110,24 +123,35 @@ export const PaginatedTable = <T extends object>({
totalItems={totalItems}
pageIndex={pagination.pageIndex}
pageSize={pagination.pageSize}
fetchNextPage={() =>
fetchNextPage={() => {
tableInstance.setPagination({
pageIndex: pagination.pageIndex + 1,
pageSize: pagination.pageSize,
})
}
fetchPrevPage={() =>
});
scrollToTopIfNeeded();
}}
fetchPrevPage={() => {
tableInstance.setPagination({
pageIndex: pagination.pageIndex - 1,
pageSize: pagination.pageSize,
})
}
setPageLimit={(pageSize) =>
});
scrollToTopIfNeeded();
}}
setPageLimit={(pageSize) => {
tableInstance.setPagination({
pageIndex: 0,
pageSize,
})
}
});
if (
pagination.pageIndex > 0 ||
pagination.pageSize > pageSize
) {
// scroll to table top unless you are on the
// first page and increasing the page size.
scrollToTopIfNeeded();
}
}}
/>
}
/>