我想添加更改我的List组件的每个分页部分中的perPage选项值的功能。我创建了一个基于@material-ui/core's TablePagination component的CustomPagination组件,允许这样做,但出现了2个问题:
下面是我的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;
这将在即将推出的2.3
版本中提供。有关详细信息,请参阅此拉取请求:https://github.com/marmelab/react-admin/pull/2173