Material UI 的 Data Grid 组件是一个强大的数据展示工具,提供了丰富的功能,其中分页功能尤为重要。分页可以有效地处理大量数据,使得用户体验更加流畅。在本篇博客中,我们将详细探讨 Data Grid 中的分页功能,包括如何启用分页、配置分页选项、处理分页事件以及与其他组件的结合使用。我们还将提供详细的示例代码以便于理解。
确保你已经安装了所需的 MUI 组件包:
npm install @mui/material @emotion/react @emotion/styled @mui/x-data-grid
首先,我们需要创建一个基础的 Data Grid,并启用分页功能。分页功能可以通过 pageSize
属性来设置。
import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';
const columns = [
{ field: 'id', headerName: 'ID', width: 90 },
{ field: 'name', headerName: 'Name', width: 150 },
{ field: 'age', headerName: 'Age', type: 'number', width: 110 },
];
const rows = [
{ id: 1, name: 'John Doe', age: 35 },
{ id: 2, name: 'Jane Smith', age: 42 },
{ id: 3, name: 'Mike Johnson', age: 28 },
{ id: 4, name: 'Alice Brown', age: 31 },
{ id: 5, name: 'Bob White', age: 27 },
{ id: 6, name: 'Charlie Green', age: 30 },
{ id: 7, name: 'David Black', age: 40 },
{ id: 8, name: 'Eve White', age: 29 },
];
const PaginationDataGrid = () => {
return (
<div style={{ height: 400, width: '100%' }}>
<DataGrid
rows={rows}
columns={columns}
pageSize={5}
rowsPerPageOptions={[5, 10, 20]}
pagination
/>
</div>
);
};
export default PaginationDataGrid;
pageSize
和 rowsPerPageOptions
在上面的代码中,pageSize
属性控制了每页显示的行数,而 rowsPerPageOptions
属性则定义了用户可以选择的行数选项。这使得用户可以根据自己的需求进行分页选择。
你可以使用 onPageChange
和 onPageSizeChange
事件处理程序来监听分页的变化。这可以帮助你在分页变化时更新数据或执行其他操作。
const PaginationDataGrid = () => {
const [page, setPage] = React.useState(0);
const [pageSize, setPageSize] = React.useState(5);
const handlePageChange = (newPage) => {
setPage(newPage);
};
const handlePageSizeChange = (newPageSize) => {
setPageSize(newPageSize);
};
return (
<div style={{ height: 400, width: '100%' }}>
<DataGrid
rows={rows}
columns={columns}
page={page}
pageSize={pageSize}
onPageChange={handlePageChange}
onPageSizeChange={handlePageSizeChange}
rowsPerPageOptions={[5, 10, 20]}
pagination
/>
</div>
);
};
在处理大量数据时,可能需要使用服务器端分页。这种方式可以有效减少前端数据加载时间,提高性能。以下是如何实现服务器端分页的示例:
假设我们有一个 API,可以返回分页数据。我们可以使用 useEffect
钩子来从服务器获取数据。
const PaginationDataGrid = () => {
const [rows, setRows] = React.useState([]);
const [page, setPage] = React.useState(0);
const [pageSize, setPageSize] = React.useState(5);
const [totalRows, setTotalRows] = React.useState(0);
React.useEffect(() => {
const fetchData = async () => {
const response = await fetch(`https://api.example.com/data?page=${page + 1}&pageSize=${pageSize}`);
const data = await response.json();
setRows(data.rows);
setTotalRows(data.total);
};
fetchData();
}, [page, pageSize]);
return (
<div style={{ height: 400, width: '100%' }}>
<DataGrid
rows={rows}
columns={columns}
pagination
page={page}
pageSize={pageSize}
onPageChange={(newPage) => setPage(newPage)}
onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}
rowCount={totalRows}
paginationMode="server"
rowsPerPageOptions={[5, 10, 20]}
/>
</div>
);
};
确保你的 API 返回的数据格式如下:
{
"total": 100,
"rows": [
{ "id": 1, "name": "John Doe", "age": 35 },
{ "id": 2, "name": "Jane Smith", "age": 42 },
...
]
}
你还可以自定义分页组件以适应特定的设计需求。以下是一个自定义分页的示例。
import { DataGrid, GridPagination } from '@mui/x-data-grid';
const CustomPagination = (props) => {
return (
<GridPagination
{...props}
rowsPerPageOptions={[5, 10, 20]}
labelRowsPerPage="每页行数:"
labelDisplayedRows={({ from, to, count }) => `${from} - ${to} / ${count}`}
/>
);
};
const PaginationDataGrid = () => {
return (
<div style={{ height: 400, width: '100%' }}>
<DataGrid
rows={rows}
columns={columns}
pageSize={5}
components={{
Pagination: CustomPagination,
}}
/>
</div>
);
};
你可以将选择框与分页结合使用,让用户选择要显示的行数。
const PaginationDataGridWithSelect = () => {
const [pageSize, setPageSize] = React.useState(5);
return (
<div style={{ height: 400, width: '100%' }}>
<select onChange={(e) => setPageSize(Number(e.target.value))} value={pageSize}>
<option value={5}>5</option>
<option value={10}>10</option>
<option value={20}>20</option>
</select>
<DataGrid
rows={rows}
columns={columns}
pageSize={pageSize}
rowsPerPageOptions={[5, 10, 20]}
pagination
/>
</div>
);
};
以下是一个完整的分页示例,结合了所有前面的部分:
import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';
const columns = [
{ field: 'id', headerName: 'ID', width: 90 },
{ field: 'name', headerName: 'Name', width: 150 },
{ field: 'age', headerName: 'Age', type: 'number', width: 110 },
];
const rows = [
{ id: 1, name: 'John Doe', age: 35 },
{ id: 2, name: 'Jane Smith', age: 42 },
{ id: 3, name: 'Mike Johnson', age: 28 },
{ id: 4, name: 'Alice Brown', age: 31 },
{ id: 5, name: 'Bob White', age: 27 },
{ id: 6, name: 'Charlie Green', age: 30 },
{ id: 7, name: 'David Black', age: 40 },
{ id: 8, name: 'Eve White', age: 29 },
];
const PaginationDataGrid = () => {
const [pageSize, setPageSize] = React.useState(5);
return (
<div style={{ height: 400, width: '100%' }}>
<select onChange={(e) => setPageSize(Number(e.target.value))} value={pageSize}>
<option value={5}>5</option>
<option value={10}>10</option>
<option value={20}>20</option>
</select>
<DataGrid
rows={rows}
columns={columns}
pageSize={pageSize}
rowsPerPageOptions={[5, 10, 20]}
pagination
/>
</div>
);
};
export default PaginationDataGrid;
Material UI 的 Data Grid 分页功能为数据管理提供了灵活的解决方案。通过简单的配置,你可以轻松启用和定制分页选项。同时,结合服务器端分页和自定义组件的使用,可以满足不同场景下的需求。
希望通过本篇博客的介绍和示例,你能够充分利用 Data Grid 的分页功能,实现更好的用户体验。如果你有任何问题或建议,欢迎在评论区留言!