如何渲染具有colspan列的网格组件

Question

我需要呈现一个表，在这个表中，每一个备用行都有一个跨所有列的行。类似于html中的内容，

​

<table border=1>
<th> Heading 1 </th>
<th> Heading 2 </th>
<tr>
<td> row 1 column 1 </td>
<td> row 1 column 2 </td>
</tr>
<tr>
<td colspan="2"> row 1 column with colspan</td>
</tr>
<tr>
<td> row 2 column 1 </td>
<td> row 2 column 2 </td>
</tr>
<tr>
<td colspan="2"> row 2 column with colspan</td>
</tr>
</table>

​

Griddle文档没有提到colspan，但是这里有一个定制列的示例。

const CustomColumn = ({value}) => <span style={{ color: '#0000AA' }}>{value}</span>;
const CustomHeading = ({title}) => <span style={{ color: '#AA0000' }}>{title}</span>;

<Griddle data={fakeData}>
  <RowDefinition>
    <ColumnDefinition id="name" customComponent={CustomColumn} />
    <ColumnDefinition id="state" customHeadingComponent={CustomHeading} />
    <ColumnDefinition id="company" />
  </RowDefinition>
</Griddle>

虽然我在Griddle实现中找到了一个colspan道具，但是它有一条评论说它是未使用的。https://github.com/GriddleGriddle/Griddle/blob/c1ce9939f9a93ad9942a63cfd7efc544056ea829/src/module.d.ts#L77

或者我需要创建自己的表组件？

Answer 1

到目前为止，这是不可能实现在网格直接，可能是一个黑客与CSS可以做到这一点。但我选择创建自己的自定义表组件。