在React的Material-UI v5中,DataGrid组件是通过@mui/x-data-grid
包提供的。要安装DataGrid组件,可以按照以下步骤进行操作:
npm install react
npm install @mui/material @emotion/react @emotion/styled
@mui/x-data-grid
包。可以使用以下命令进行安装:npm install @mui/x-data-grid
import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';
const columns = [
{ field: 'id', headerName: 'ID', width: 70 },
{ field: 'firstName', headerName: 'First name', width: 130 },
{ field: 'lastName', headerName: 'Last name', width: 130 },
{ field: 'age', headerName: 'Age', type: 'number', width: 90 },
];
const rows = [
{ id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
{ id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
{ id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
{ id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
{ id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
{ id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
{ id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
{ id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
{ id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
];
export default function MyDataGrid() {
return (
<div style={{ height: 400, width: '100%' }}>
<DataGrid rows={rows} columns={columns} pageSize={5} />
</div>
);
}
以上代码演示了如何在React组件中使用DataGrid组件。你可以根据自己的需求修改columns
和rows
数组来展示不同的数据。
关于DataGrid组件的更多详细信息和配置选项,你可以参考腾讯云的官方文档:DataGrid组件 - Material-UI。
领取专属 10元无门槛券
手把手带您无忧上云