Динамически выбирать количество строк на странице в разделе нумерации страниц

Question

Я хочу добавить возможность изменять значение параметра perPage в каждом разделе нумерации страниц моих компонентов List. Я создал компонент CustomPagination, основанный на компоненте TablePagination @ material-ui / core , чтобы позволить это сделать, но появляются 2 проблемы:

• Отображаемый диапазон располагается на 2-й странице, а не на первой. Невозможно получить доступ к первой странице, нажав на кнопку предыдущей страницы

• Если я изменю значение раскрывающегося списка perPage: ничего не происходит, метод onChangeRowsPerPage вызывается правильно, но кажется, что функция setPerPage ничего не делает. С другой стороны, если я нажму на следующую страницу, тогда таблица будет правильно отображена с количеством строк, соответствующих выбранному варианту, странно. Все еще не может получить доступ к первой странице таблицы также

Ниже приведен код моего компонента PostList.js:

import { withStyles } from '@material-ui/core/styles';
import React from 'react';
import {
  Datagrid,
  List,
  Responsive,
  ShowButton,
  SimpleList,
  TextField
} from 'react-admin';

import Button from '@material-ui/core/Button';
import ChevronLeft from '@material-ui/icons/ChevronLeft';
import ChevronRight from '@material-ui/icons/ChevronRight';
import FlatButton from 'material-ui/FlatButton';
import { Toolbar, ToolbarGroup } from 'material-ui/Toolbar';
import TablePagination from '@material-ui/core/TablePagination';

const CustomPagination = ({ page, perPage, total, setPage, setPerPage 
}) => {
const nbPages = Math.ceil(total / perPage) || 1;

const handleChangeRowsPerPage = event => {
    perPage = event.target.value;
    setPerPage(perPage);
};

const handleChangePage = (event, page) => {
    page < nbPages && page > 0 && setPage(page);
};

return (
    nbPages > 1 && (
        <TablePagination
            component="span"
            count={total}
            rowsPerPage={perPage}
            page={page}
            backIconButtonProps={{
                'aria-label': 'Previous Page'
            }}
            nextIconButtonProps={{
                'aria-label': 'Next Page'
            }}
            onChangePage={handleChangePage}
            labelRowsPerPage="Lignes par page"
            rowsPerPageOptions={[2, 5, 10, 50, 100]}
            onChangeRowsPerPage={handleChangeRowsPerPage}
        />
      )
    );
};

const styles = theme => ({
  title: {
    maxWidth: '20em',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap'
  }
});

const PostList = withStyles(styles)(({ classes, ...props }) => (
  <List
    {...props}
    sort={{ field: 'published_at', order: 'DESC' }}
    perPage={2}
    pagination={<CustomPagination />}
  >
    <Responsive
        small={
            <SimpleList
                linkType="show"
                primaryText={record => record.title}
            />
        }
        medium={
            <Datagrid>
                <TextField source="id" />
                <TextField source="title" cellClassName={classes.title} />
                <ShowButton />
            </Datagrid>
        }
    />
  </List>
));

export default PostList;

И коды здесь, здесь

Answer 1

Это будет предоставлено по умолчанию в следующей версии 2.3. См. Этот запрос на получение дополнительной информации: https://github.com/marmelab/react-admin/pull/2173