KevinVandy / material-react-table

A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript
https://material-react-table.com
MIT License
1.5k stars 433 forks source link

In pagination When we change pagaSIze pageIndex is automatic 1 to 0 #877

Closed gyanish0 closed 9 months ago

gyanish0 commented 10 months ago

material-react-table version

^2.0.6

react & react-dom versions

^18.2.0

Describe the bug and the steps to reproduce it

When i update pageSIze it update pageIndex 1 to 0 then my api is faild when we send 0 as pageindex

` import { MaterialReactTable, useMaterialReactTable, } from "material-react-table";
const [pagination, setPagination] = useState({ pageIndex: 1, pageSize: 10, }); const [rowCount, setRowCount] = useState(10);

const getIList = () => { setIsLoading(true) ApiPost('url', { queryFilePathKey: "GetGiftCardList", pagination: { PageNo: pagination.pageIndex, PageSize: pagination.pageSize, }, }) .then((res) => { if (res?.data?.isSuccess) { setList(res?.data?.data); setRowCount(res?.data?.data[0]?.TotalRecords ? res?.data?.data[0]?.TotalRecords : pagination.pageSize) } setIsLoading(false) }) .catch((err) => { console.log(err, "Error"); setIsLoading(false) }).finally(() => { setIsLoading(false) }) };

useEffect(() => { const getDataTimeout = setTimeout(() => { getIList(); }, 500); return () => { clearTimeout(getDataTimeout); }; }, [columnFilters, pagination.pageIndex, pagination.pageSize]); const table = useMaterialReactTable({ columns, data: giftCardList, getRowId: (row) => row.id, manualPagination: true, enableGlobalFilter: false, enableColumnActions: false, columnFilterDisplayMode: "popover", isMultiSortEvent: () => true, autoResetPageIndex: false, muiTablePaginationProps: { rowsPerPageOptions: [10000000000, 5, 10, 50, 10], showFirstButton: false, showLastButton: false, rowsPerPage: 10000000000 }, initialState: { sorting: [ { id: "InvoiceId", desc: true, }, ], showColumnFilters: true, density: "compact", }, muiFilterAutocompleteProps: { sx: { m: "0", width: "100%", fontSize: "10px" }, }, muiFilterTextFieldProps: { sx: { m: "0", width: "100%", fontSize: "10px" }, }, muiFilterDatePickerProps: { sx: { m: "0", width: "100%", fontSize: "10px" }, }, muiTableHeadCellProps: { sx: { fontSize: { xs: "0.6rem", sm: "0.65rem", md: "0.7rem", lg: "0.8rem", xl: "1rem", }, }, }, muiTableBodyCellProps: { sx: { fontSize: { xs: "0.6rem", sm: "0.65rem", md: "0.7rem", lg: "0.8rem", xl: "1rem", }, }, }, muiToolbarAlertBannerProps: isError ? { color: "error", children: "Error loading data", } : undefined, onColumnFiltersChange: setColumnFilters, onGlobalFilterChange: setGlobalFilter, onPaginationChange: setPagination, onSortingChange: setSorting, rowCount, state: { columnFilters, globalFilter, isLoading, pagination, showAlertBanner: isError, showProgressBars: isRefetching, sorting, }, });

                    {

"name": "tabla-test", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview" }, "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.15.0", "@mui/material": "^5.15.0", "@mui/x-date-pickers": "^6.18.5", "axios": "^1.6.2", "material-react-table": "^2.0.6", "react": "^18.2.0", "react-dom": "^18.2.0" }, "devDependencies": { "@types/react": "^18.2.43", "@types/react-dom": "^18.2.17", "@vitejs/plugin-react": "^4.2.1", "eslint": "^8.55.0", "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.5", "vite": "^5.0.8" } }

`

Minimal, Reproducible Example - (Optional, but Recommended)

page index automatic update

Screenshots or Videos (Optional)

image

Do you intend to try to help solve this bug with your own PR?

None

Terms

HasmukhBaldaniya commented 8 months ago

@KevinVandy I am facing same issue now