Размах столбцов и рядов в заголовке таблицы материалов

Question

Я пытаюсь использовать таблицу материалов, и я хотел бы использовать 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 * * 1014

Answer 1

Вы можете использовать свойство компонентов таблицы материалов для создания настраиваемого заголовка.

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>
  );
}

DEMO: код ссылки на ящик