React MUI表格展示

React表格 以易于扫描的方式展示信息，以便用户可以寻找模式和洞察。它们可以嵌入到主要内容中，例如卡片。Material UI是一个实现了Google的Material Design的React UI组件库。

不同类型的React表格有：

简单表格： 这是一个具有固定列和行数的基本表格。
数据表格： 该表格适用于需要查找有关数据的见解的用例中的大量数据。
稠密表格： 这是一个表格，其中表格大小和行之间的间距被最小化。
可折叠表格： 这是一个具有可展开行的表格，展示更多信息。它使用了Collapse组件。
扩展表格： 这是一个可以将多个行或列组合在一起的表格。账单表格可能是一个很好的跨行表格的示例。
虚拟化表格： 这是一个在单个帧内处理大量数据的表格，而不是使用分页或数据表格。

在React表格中使用的不同属性是：

排序和选择： 排序可用于按升序或降序排列行，对应于列类型。选择允许选择多个数据行以删除或执行其他任务，以满足用户要求。
分页： TablePagination组件的ActionsComponent属性允许实现自定义操作。用户可以选择要显示每页的数据行并更改页面以遍历数据。
粘性标题： 它利用stickyHeader属性，当向下滚动到行时，表格的标题保持稳定不动。
列分组： 可以使用表格标题内的TableRow项将多个列分组在一起。这在需要单个类别的多个子类型的场景中很有用。

在本文中，我们将看到如何在React中使用MUI创建表格。首先，我们需要为此创建我们的示例应用程序，请按照以下步骤进行操作。

步骤1： 使用以下命令创建一个React应用程序：

npx create-react-app myapp

步骤2： 创建应用程序后，使用以下命令移动到其目录：

cd myapp

步骤3： 现在使用以下命令安装 material-UI 模块。

npm install @mui/material @emotion/react @emotion/styled
npm install @mui/icons-material

项目结构： 完成上述步骤后，项目目录将会如下所示：

React MUI表格展示

示例1： 在此示例中，我们将构建一个简单的表格。我们正在创建一个用于显示价格和特性的汽车列表的表格。这里使用了不同的组件，比如颜色、容量、燃料、价格等。

首先，我们将在/src目录中创建一个名为SimpleTable.js的文件，其中包含我们的表格数据项。所需的组件从MUI库中导入，如Body、Cell、Head、Row等。createData函数返回所需的数据，用于显示信息。使用此函数创建行。导出函数将表格导出以在不同的网页中使用。

SimpleTable.js

import * as React from 'react';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
 
function createData(name, color, capacity, fuel, price) {
    return { name, color, capacity, fuel, price };
}
 
const rows = [
    createData('TATA HARRIER', 'BLACK', 6, 'DIESEL', '14 LACS'),
    createData('MAHINDRA THAR', 'RED', 4, 'DIESEL', '16 LACS'),
    createData('MARUTI SWIFT', 'WHITE', 5, 'PETROL', '9 LACS'),
    createData('MG HECTOR', 'BLACK', 5, 'PETROL', '18 LACS'),
    createData('MERCEDES GLS', 'WHITE', 5, 'DIESEL', '52 LACS'),
];
 
export default function SimpleTable() {
    return (
        <TableContainer component={Paper}>
            <Table sx={{ minWidth: 650 }} aria-label="simple table">
                <TableHead>
                    <TableRow>
                        <TableCell>
                            NAME
                        </TableCell>
                        <TableCell align="right">
                            COLOR
                        </TableCell>
                        <TableCell align="right">
                            CAPACITY
                        </TableCell>
                        <TableCell align="right">
                            FUEL
                        </TableCell>
                        <TableCell align="right">
                            PRICE (Rs)
                        </TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {rows.map((row) => (
                        <TableRow
                            key={row.name}
                            sx={{ '&:last-child td, &:last-child th':
                                { border: 0 } }}
                        >
                            <TableCell component="th" scope="row">
                                {row.name}
                            </TableCell>
                            <TableCell align="right">
                                {row.color}
                            </TableCell>
                            <TableCell align="right">
                                {row.capacity}
                            </TableCell>
                            <TableCell align="right">
                                {row.fuel}
                            </TableCell>
                            <TableCell align="right">
                                {row.price}
                            </TableCell>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </TableContainer>
    );
}

在创建我们的SimpleTable之后，我们将其导入到我们的基本文件App.js中。在/src目录中使用以下代码更新App.js文件。

App.js

import React from "react";
import SimpleTable from "./SimpleTable";
 
function App() {
return (
    <div>
    <SimpleTable />
    </div>
);
}
export default App;

运行应用程序的步骤： 现在，运行应用程序：使用以下命令运行应用程序。

npm start

输出： 前往 http://localhost:3000/，将显示以下结果：

React MUI表格展示

示例2： 在这个示例中，我们正在创建一个带有可折叠行的表格，可用于显示与该数据行特定信息相关的附加信息。它创建一个可点击的按钮，可展开或折叠数据项的详细信息。在我们的汽车目录示例中，我们可以提供附加信息，如客户ID和其购买日期及数量的过去购买记录。

首先，我们在/src目录中创建一个名为CollapsibleTable.js的新文件。在其中，我们将导入我们所需的所有MUI库，如Box、Collapse、IconButton等。createData函数创建所需的数据项，其中包含一个用于显示用户对项的过去历史的组件。Row函数创建具有可折叠数据的单个行项目，该数据被导入到表格中。

CollapsibleTable.js

import * as React from 'react';
import PropTypes from 'prop-types';
import Box from '@mui/material/Box';
import Collapse from '@mui/material/Collapse';
import IconButton from '@mui/material/IconButton';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Typography from '@mui/material/Typography';
import Paper from '@mui/material/Paper';
import KeyboardArrowDownIcon from 
    '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowUpIcon from 
    '@mui/icons-material/KeyboardArrowUp';
 
function createData(name, color, fuel, capacity, price) {
    return {
        name,
        color,
        fuel,
        capacity,
        price,
        history: [
            {
                date: '2020-01-05',
                customerId: '11091700',
                amount: 3,
            },
            {
                date: '2020-01-02',
                customerId: 'Anonymous',
                amount: 1,
            },
        ],
    };
}
 
function Row(props) {
    const { row } = props;
    const [open, setOpen] = React.useState(false);
 
    return (
        <React.Fragment>
            <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
                <TableCell>
                    <IconButton
                        aria-label="expand row"
                        size="small"
                        onClick={() => setOpen(!open)}
                    >
                        {open ? <KeyboardArrowUpIcon /> : 
                        <KeyboardArrowDownIcon />}
                    </IconButton>
                </TableCell>
                <TableCell component="th" scope="row">
                    {row.name}
                </TableCell>
                <TableCell align="right">{row.color}</TableCell>
                <TableCell align="right">{row.fuel}</TableCell>
                <TableCell align="right">{row.capacity}</TableCell>
                <TableCell align="right">{row.price}</TableCell>
            </TableRow>
            <TableRow>
                <TableCell style={{ paddingBottom: 0, 
                    paddingTop: 0 }} colSpan={6}>
                    <Collapse in={open} timeout="auto" unmountOnExit>
                        <Box sx={{ margin: 1 }}>
                            <Typography variant="h6"
                                gutterBottom component="div">
                                History
                            </Typography>
                            <Table size="small"
                                aria-label="purchases">
                                <TableHead>
                                    <TableRow>
                                        <TableCell>
                                            Date
                                        </TableCell>
                                        <TableCell>
                                            Customer
                                        </TableCell>
                                        <TableCell align="right">
                                            Amount
                                        </TableCell>
                                        <TableCell align="right">
                                            Total price ($)
                                        </TableCell>
                                    </TableRow>
                                </TableHead>
                                <TableBody>
                                    {row.history.map
                                        ((historyRow) => (
                                        <TableRow key=
                                            {historyRow.date}>
                                            <TableCell 
                                                component="th"
                                                scope="row">
                                                {historyRow.date}
                                            </TableCell>
                                            <TableCell>
                                                {historyRow.customerId}
                                            </TableCell>
                                            <TableCell align="right">
                                                {historyRow.amount}
                                            </TableCell>
                                            <TableCell align="right">
                                                {Math.round
                                                (historyRow.amount 
                                                * row.price * 100) / 100}
                                            </TableCell>
                                        </TableRow>
                                    ))}
                                </TableBody>
                            </Table>
                        </Box>
                    </Collapse>
                </TableCell>
            </TableRow>
        </React.Fragment>
    );
}
 
Row.propTypes = {
    row: PropTypes.shape({
        color: PropTypes.string.isRequired,
        capacity: PropTypes.number.isRequired,
        fuel: PropTypes.string.isRequired,
        history: PropTypes.arrayOf(
            PropTypes.shape({
                amount: PropTypes.number.isRequired,
                customerId: PropTypes.string.isRequired,
                date: PropTypes.string.isRequired,
            }),
        ).isRequired,
        name: PropTypes.string.isRequired,
        price: PropTypes.number.isRequired,
    }).isRequired,
};
 
const rows = [
    createData('TATA HARRIER', 'BLACK', 'DIESEL', 6, 1400000),
    createData('MAHINDRA THAR', 'RED', 'DIESEL', 4, 1600000),
    createData('MARUTI SWIFT', 'WHITE', 'PETROL', 5, 900000),
    createData('MG HECTOR', 'BLACK', 'PETROL', 5, 1800000),
    createData('MERCEDES GLS', 'WHITE', 'DIESEL', 5, 5200000),
];
 
export default function CollapsibleTable() {
    return (
        <TableContainer component={Paper}>
            <Table aria-label="collapsible table">
                <TableHead>
                    <TableRow>
                        <TableCell />
                        <TableCell>
                            NAME
                        </TableCell>
                        <TableCell align="right">
                            COLOR
                        </TableCell>
                        <TableCell align="right">
                            FUEL
                        </TableCell>
                        <TableCell align="right">
                            CAPACITY
                        </TableCell>
                        <TableCell align="right">
                            PRICE (RS)
                        </TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {rows.map((row) => (
                        <Row key={row.name} row={row} />
                    ))}
                </TableBody>
            </Table>
        </TableContainer>
    );
}

创建我们的CollpasibleTable后，我们将在基础文件App.js中导入它。更新App.js文件以导入CollapsibleTable。

App.js:

import React from "react";
import CollapsibleTable from "./CollapsibleTable";
 
function App() {
    return (
        <div>
            <CollapsibleTable />
        </div>
    );
}
export default App;