pagination code in elster react-boilder code
Wed Jul 31 2024 07:42:46 GMT+0000 (Coordinated Universal Time)
Saved by @chiragwebelight
const [queryData, setQueryData] = useState<UserQueryData>({
is_active: null,
pageIndex: 1,
pageSize: 10,
pages: 10,
total: 0,
});
const { isPending, data: userData } = useGetAllUsers(
{
size: queryData.pageSize,
page: queryData.pageIndex,
search: debouncedResults,
is_active: queryData.is_active,
},
{
query: {
queryKey: [
queryKeys.getUser,
queryData.pageSize,
queryData.pageIndex,
queryData.is_active,
debouncedResults,
],
},
},
);
const handleUnselectAll = useCallback(() => {
dataTableRef.current?.resetSelected();
}, [dataTableRef]);
useEffect(() => {
if (selectedCells.length <= 0) {
handleUnselectAll();
}
}, [selectedCells, handleUnselectAll]);
const handlePaginationChange = (pageIndex: number) => {
dataTableRef.current?.resetSelected();
setSelectedCells([]);
setQueryData((prevData) => {
return { ...prevData, ...{ pageIndex } };
});
};
const handleSelectChange = (pageSize: number) => {
setQueryData((prevData) => ({ ...prevData, ...{ pageSize } }));
};
const onRowSelect = (checked: boolean, row: CategoriesCell) => {
setSelectedCells((prevSelectedCells) => {
const existsIndex = prevSelectedCells.findIndex(
(item) => item.id === row.id,
);
if (checked) {
if (existsIndex === -1) {
return [...prevSelectedCells, row];
}
return prevSelectedCells;
} else {
if (existsIndex !== -1) {
const updatedSelection = [...prevSelectedCells];
updatedSelection.splice(existsIndex, 1);
return updatedSelection;
}
return prevSelectedCells;
}
});
};
const onAllRowSelect = useCallback(
(checked: boolean, rows: Row<MoodsCell>[]) => {
if (checked) {
const originalRows = rows.map((row) => row.original);
const selectedIds: MoodsCell[] = [];
originalRows.forEach((row) => {
selectedIds.push(row);
});
setSelectedCells(selectedIds);
} else {
setSelectedCells([]);
}
},
[],
);



Comments