材料表 - 嵌套列答案

【问题标题】：Material Table - nested columns材料表 - 嵌套列
【发布时间】：2019-10-15 07:16:13
【问题描述】：

是否可以使用material-table 库制作包含嵌套列的表格？

【问题讨论】：

【解决方案1】：

是的，material-table 是可能的。您必须使用 Components 属性来实现这一点。

function App() {
  const columns = [...];

  const data = [...];

  return (
    <div className="App">
      <MaterialTable
        columns={columns}
        data={data}
        components={{
          Header: props => {
            return (
              <TableHead>
                <TableRow>
                  <TableCell colSpan={2} align="center">
                    Average A
                  </TableCell>
                  <TableCell colSpan={2} align="center">
                    Average B
                  </TableCell>
                </TableRow>
                <TableRow>
                  <TableCell align="center">Lower</TableCell>
                  <TableCell align="center">Upper</TableCell>
                  <TableCell align="center">Lower</TableCell>
                  <TableCell align="center">Upper</TableCell>
                </TableRow>
              </TableHead>
            );
          },
          Row: ({ data }) => {
            return (
              <TableRow>
                <TableCell align="center">{data.lowerA}</TableCell>
                <TableCell align="center">{data.upperA}</TableCell>
                <TableCell align="center">{data.lowerB}</TableCell>
                <TableCell align="center">{data.upperB}</TableCell>
              </TableRow>
            );
          }
        }}
      />
    </div>
  );
}

演示： Codesandbox link

【讨论】：

【解决方案2】：

您可以使用 colspan。在此处查看示例。 https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_colspan

【讨论】：