docs: updated mui pagination example (#5341)

* chore: updated deprecated prop * chore: add type
TanStack · Feb 14, 2024 · 3aa9da9 · 3aa9da9
1 parent bca3dd6
commit 3aa9da9
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 8 deletions.
diff --git a/examples/react/material-ui-pagination/src/actions.tsx b/examples/react/material-ui-pagination/src/actions.tsx
@@ -7,24 +7,33 @@ import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft'
 import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight'
 import LastPageIcon from '@mui/icons-material/LastPage'
 import { useTheme } from '@mui/material/styles'
+import { TablePaginationActionsProps } from '@mui/material/TablePagination/TablePaginationActions'
 
-const TablePaginationActions = (props: any) => {
+const TablePaginationActions = (props: TablePaginationActionsProps) => {
   const theme = useTheme()
   const { count, page, rowsPerPage, onPageChange } = props
 
-  const handleFirstPageButtonClick = (event: any) => {
+  const handleFirstPageButtonClick = (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => {
     onPageChange(event, 0)
   }
 
-  const handleBackButtonClick = (event: any) => {
+  const handleBackButtonClick = (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => {
     onPageChange(event, page - 1)
   }
 
-  const handleNextButtonClick = (event: any) => {
+  const handleNextButtonClick = (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => {
     onPageChange(event, page + 1)
   }
 
-  const handleLastPageButtonClick = (event: any) => {
+  const handleLastPageButtonClick = (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => {
     onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1))
   }
 

diff --git a/examples/react/material-ui-pagination/src/main.tsx b/examples/react/material-ui-pagination/src/main.tsx
@@ -177,9 +177,11 @@ function LocalTable({
         count={table.getFilteredRowModel().rows.length}
         rowsPerPage={pageSize}
         page={pageIndex}
-        SelectProps={{
-          inputProps: { 'aria-label': 'rows per page' },
-          native: true,
+        slotProps={{
+          select: {
+            inputProps: { 'aria-label': 'rows per page' },
+            native: true,
+          },
         }}
         onPageChange={(_, page) => {
           table.setPageIndex(page)