如何渲染具有colspan列的Griddle组件

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

无论如何使用Griddle实现这个，或者我需要创建自己的表组件？

Answer 1

截至目前，这是不可能直接在Griddle中实现的，可能是一个带有CSS的黑客可以做到的伎俩。但我选择创建自己的自定义表组件。