Use inner HTML on <td>

[MahbbRah]

This is the object passing to <Griddle data > { id: k, Name: v.timer_name, Impressions: v.impressions, Clicks: v.clicks, Status: v.timer_status, End_Date: v.clicks, Actions: `<td><div tabIndex="0" className="onClick-menu"> <ul className="onclick-menu-content"> <li>Copy Code</li> <li>Edit</li> <li>Duplicate</li> <li>Remove</li> </ul> </div></td>` }

Current Output:

The Problem is HTML inside the Actions column isn't rendering and I do not want to show: griddleKey column with its data. Please, Help me with this configuration. I cannot see anything in the docs like that.

[mpolinowski]

+1 same issue - could not find a solution yet.

[dahlbyk]

To hidde griddleKey, you need to explicitly list the expected <ColumnDefinition />s. For Actions, try a customComponent that uses dangerouslySetInnerHTML:

const htmlComponent =
  ({ value }) =>
    <div dangerouslySetInnerHTML={{ __html: value }} />;

class MyGrid extends React.Component {
  render() {
    return (
      <Griddle data={...}>
          <RowDefinition>
            <ColumnDefinition id="id" />
            <ColumnDefinition id="Name" />
            <ColumnDefinition id="Impressions" />
            <ColumnDefinition id="Clicks" />
            <ColumnDefinition id="Status" />
            <ColumnDefinition id="End_Date" />
            <ColumnDefinition id="Actions" customComponent={htmlComponent} />
          </RowDefinition>
      </Griddle>
    );
  }
}

[MahbbRah]

@dahlbyk Hey Thanks for your help, Can I use Object , Array instead of customComponent ?

[dahlbyk]

I don't understand the question. customComponent is the prop you use to specify how a column value should be rendered. If your column value is an Object or an Array, you can teach your customComponent to render from that.