Search code examples
reactjsgriddle

How to render Griddle component having a column with colspan


I need to render a table where every alternate row will have a row that spans through the all the columns. Something like below in 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 documentation does not mention anything about colspan, but here is a example to customize columns.

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>

Though I found a colspan prop in Griddle implementation but it has a comment saying it is unused. https://github.com/GriddleGriddle/Griddle/blob/c1ce9939f9a93ad9942a63cfd7efc544056ea829/src/module.d.ts#L77

Is there anyway to implement this using Griddle, or I need to create my own table component?


Solution

  • As of now this is not possible to implement in Griddle directly, may be a hack with CSS can do the trick. But I choose to create my own custom table component instead.