Material-ui tablepagination 各种报告每页的默认行数

Question

我一直在关注关于 material-ui TablePagination 的示例，它们作为 useTable 组件具有以下代码：

import React, { useState } from 'react'
import { Table, TableHead, TableRow, TableCell, makeStyles, TablePagination, TableSortLabel } from '@material-ui/core'

const useStyles = makeStyles(theme => ({
    table: {
        marginTop: theme.spacing(1),
        '& thead th': {
            fontWeight: '800',
            backgroundColor: '#e0e0e0',
            color: '#000'                      
        },
        '& tbody td': {
            fontWeight: '500',
        },
        '& tbody tr:hover': {
            backgroundColor: '#bee8fd',
            cursor: 'pointer',
        },
        minWidth: 650
    },
}))

export default function useTable(records, filterFn) {

    const classes = useStyles();

    const pages = [5, 10, 25, 50, 75, 100]
    const [page, setPage] = useState(0)
    const [rowsPerPage, setRowsPerPage] = useState(pages[page])
    const [order, setOrder] = useState()
    const [orderBy, setOrderBy] = useState()

    const handleChangePage = (event, newPage) => {
        setPage(newPage);
    }

    const handleChangeRowsPerPage = event => {
        setRowsPerPage(parseInt(event.target.value, 10))
        setPage(0);
    }

    const TblPagination = () => (<TablePagination
        component="div"
        page={page}
        rowsPerPageOptions={pages}
        rowsPerPage={rowsPerPage}
        count={records.length}
        onChangePage={handleChangePage}
        onChangeRowsPerPage={handleChangeRowsPerPage}
    />)

    const recordsAfterPagingAndSorting = () => {
        return stableSort(filterFn.fn(records), getComparator(order, orderBy))
            .slice(page * rowsPerPage, (page + 1) * rowsPerPage)
    }

    return {
        TblPagination,
        recordsAfterPagingAndSorting
    }
}

在另一个名为 JobReport.js 的组件中，我按如下方式导入此 useTable 组件

import useTable from "./useTable";

并且在我报告的底部，我将组件 <TblPagination /> 称为 return 来自 useTable.js

我的问题是，目前 useTable.js rowsPerPage 根据状态值设置为 5。我希望能够实现的是为这个 useTable.js 组件提供一个来自使用它的任何其他组件的动态值，以设置该组件的 rowPerPage。

所以在 ComponentA.js 中我可能有一个报告，我想在其中将 rowPerPage 默认为 10，而在另一个组件中，我可能将该报告默认为 50 但两者仍然调用 useTable.js 组件.

我想我可以将它作为道具传递给 <TblPagination page={3}/> 到 return 50，但这没有用。

使用此设置，我是否可以在 <TblPagination />

内将我的行默认设置为 50

我实际上正在使用 useTable.js 是许多不同的组件，并且希望能够在这些不同的组件中将 rowsPerPage 更改为不同的值。

如果我在 useTable.js 中更改它，那么调用它的所有组件将默认为 50 行，这不是我想要的。

Answer 1

更新： 赋予使用此挂钩的组件定义每页行数的能力。如果未定义，则将默认值设置为 50。

export default function useTable(records, filterFn, customRowsPerPage) {
  //..
  const [rowsPerPage, setRowsPerPage] = useState(customRowsPerPage || 50)
  //..
}

而不是：

const [rowsPerPage, setRowsPerPage] = useState(pages[page])

将默认值设置为 50：

const [rowsPerPage, setRowsPerPage] = useState(50)

Material-ui tablepagination 各种报告每页的默认行数

Material-ui tablepagination default rows per page for various reports

javascript

pagination

reactjs

material-ui