CODEWITHSUNDEEP
javascriptreactjspaginationmaterial-ui
ArthurJ
ArthurJ

Reputation: 839

Material-ui tablepagination default rows per page for various reports

I've been following an example with regards to material-ui TablePagination which they have as a useTable component and have the following code:

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
    }
}

Within another component called JobReport.js, I import this useTable component as follows

import useTable from "./useTable";

and at the bottom of my report, I call the component <TblPagination /> that is returned from useTable.js

My question is, at the moment within useTable.js the rowsPerPage is set to 5 based on state value. What I would like to be able to achieve is to provide this useTable.js component a dynamic value from any other component using it, to set that component's rowPerPage.

So within ComponentA.js I might have a report where I want to default the rowPerPage to 10 and in another component, I might default that report to 50 but both still calling the useTable.js component.

I thought I could pass this in as a prop to <TblPagination page={3}/> to return 50 but this didn't work.

With this setup, is there anyway I can set my rows to default to 50 within <TblPagination />

I am actually using useTable.js is a number of different components and want to be able to change the rowsPerPage to different values across these different components.

If I change it in useTable.js then all components calling it will have a default of 50 rows, which is not what I want.

Upvotes: 0

Views: 3976

Answers (1)

Delice
Delice

Reputation: 856

UPDATE: give the ability to the component that uses this hook to define how many rowsPerPage. If not defined set default to 50.

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

Instead of:

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

Set default to 50:

const [rowsPerPage, setRowsPerPage] = useState(50)

Upvotes: 1

Related Questions