材料表标题React中的Col span和Row span

Posted 2023-02-22

【中文标题】材料表标题React中的Col span和Row span

【英文标题】：Col span and Row span in material-table header React

【发布时间】：2020-02-10 17:28:07

【问题描述】：

我正在尝试使用材料表，我想在材料表中使用colspan 和rowspan。我已经搜索了示例和示例，但我什么也没看到。

目前，我喜欢在材料表中使用它

<TableHead>
                      <TableRow>
                        <TableCell rowSpan=2>Approve</TableCell>
                        <TableCell rowSpan=2 align="center">Date</TableCell>
                        <TableCell rowSpan=2 align="center">Emp id</TableCell>
                        <TableCell rowSpan=2 align="center">Emp Name</TableCell>
                        <TableCell rowSpan=2 align="center">Shift</TableCell>
                        <TableCell rowSpan=2 align="center">Cost Center</TableCell>

                        <TableCell colSpan=2 align="center">In</TableCell>
                        <TableCell colSpan=2 align="center">Out</TableCell>

                        <TableCell rowSpan=2 align="center">Action</TableCell>
                      </TableRow>
                      <TableRow>                       
                        <TableCell align="center">Time</TableCell>
                        <TableCell align="center">Date</TableCell>
                        <TableCell align="center">Time</TableCell>
                        <TableCell align="center">Date</TableCell>
                      </TableRow>
                    </TableHead>

如何在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 rowSpan=2>Approve</TableCell>
                  <TableCell colSpan=2 align="center">
                    In
                  </TableCell>
                  <TableCell colSpan=2 align="center">
                    Out
                  </TableCell>
                  <TableCell rowSpan=2 align="center">
                    Action
                  </TableCell>
                </TableRow>
                <TableRow>
                  <TableCell align="center">Time</TableCell>
                  <TableCell align="center">Date</TableCell>
                  <TableCell align="center">Time</TableCell>
                  <TableCell align="center">Date</TableCell>
                </TableRow>
              </TableHead>
            );
          ,
          Row: ( data ) => 
            return (
              <TableRow>
                <TableCell>data.approve</TableCell>
                <TableCell align="center">data.inTime</TableCell>
                <TableCell align="center">data.inDate</TableCell>
                <TableCell align="center">data.outTime</TableCell>
                <TableCell align="center">data.outDate</TableCell>
                <TableCell align="center">data.action</TableCell>
              </TableRow>
            );
          
        
      />
    </div>
  );

演示：codesandbox link