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

Question

我需要呈现一个 table，其中每个交替行都有一个横跨所有列的行。 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 实现此功能，或者我需要创建自己的 table 组件？

Answer 1

到目前为止，这不可能直接在 Griddle 中实现，可能是 CSS 的 hack 可以做到这一点。但我选择创建自己的自定义 table 组件。

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

How to render Griddle component having a column with colspan

reactjs

griddle