Материал-представление таблиц пользовательского интерфейса по умолчанию для строк на странице для различных отчетов

#javascript #reactjs #pagination #material-ui

Вопрос:

Я следовал примеру в отношении 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),
        'amp; thead th': {
            fontWeight: '800',
            backgroundColor: '#e0e0e0',
            color: '#000'                      
        },
        'amp; tbody td': {
            fontWeight: '500',
        },
        'amp; 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 /> , который возвращается из useTable.js

Мой вопрос в том, что на данный момент в пределах useTable.js rowsPerPage установлено значение 5 в зависимости от значения состояния. Чего я хотел бы добиться, так это предоставить этому useTable.js компоненту динамическое значение из любого другого компонента, использующего его, чтобы установить страницу строки этого компонента.

Таким образом, внутри ComponentA.js у меня может быть отчет, в котором я хочу установить значение по умолчанию rowPerPage 10, а в другом компоненте я могу установить значение по умолчанию для этого отчета 50, но оба по-прежнему вызывают useTable.js компонент.

Я думал, что смогу передать это как опору <TblPagination page={3}/> , чтобы вернуть 50, но это не сработало.

С помощью этой настройки могу ли я в любом случае установить для своих строк значение по умолчанию 50 в пределах <TblPagination />

Я на самом деле использую useTable.js это несколько разных компонентов, и вы хотите иметь возможность изменять страницу строк на разные значения для этих разных компонентов.

Если я изменю его, useTable.js то все компоненты, вызывающие его, будут иметь по умолчанию 50 строк, а это не то, что я хочу.

Комментарии:

1. как вы визуализируете TblPagination в других компонентах ?

2. @Shyam — как упоминалось в моем вопросе — я просто вызываю компонент <TblPagination /> в нижней части своего отчета.

3. можете ли вы попробовать назвать его так {TblPagination(50)} , и в вашем удобном крючке вы сможете получить к нему доступ как const TblPagination = (rowsPerPage)

Ответ №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)
 

Комментарии:

1. Я понял это, но на самом деле я использую useTable.js несколько разных компонентов и хочу иметь возможность изменять значения rowsPerPage для разных компонентов. Если я изменю его, useTable.js то все компоненты, вызывающие его, будут иметь по умолчанию 50 строк, а это не то, что я хочу. Надеюсь, в этом есть смысл.

2. «Мой вопрос в том, что в данный момент в useTable.js для страницы строк установлено значение 5 в зависимости от значения состояния. На самом деле я хочу, чтобы в этом отчете по умолчанию была строка 50». и поэтому я догадался, что это ваша проблема. Если ваш вопрос не имеет значения по умолчанию 50, но имеет более динамичное значение для страницы строк, пожалуйста, отредактируйте свой вопрос.

3. Я отредактировал свой ответ. Пожалуйста, проверьте, правильно ли это понято

4. Вопрос был отредактирован, чтобы точно отразить то, что мне нужно, и это динамическое значение для rowsPerPage

5. Ваше решение дать компоненту возможность принимать динамическое значение сделало свое дело.