rowData not supplied to cutomComponent in v1.2

Griddle version

1.2

Expected Behavior

CustomComponent receives rowData prop as in v0

Actual Behavior

customComponent only receives value and griddleKey

Steps to reproduce

const LinkToUser = props => {
  console.log('props', props); // { value: 'Adam Smith', griddleKey: 2 }
  const { value, rowData } = props;
  const url = '/users/${rowData.id}';
  return <Link to={url}>{value}</Link>;
};

...

<ColumnDefinition id="name" title="Name" order={1} customComponent={LinkToUser}  />

I understand it is possible to over-ride the CellContainer component to pass additional props down but I couldn’t see a rowData selector to use.

This seems like a pretty standard requirement to make it possible to link an ID in another column etc. Only alternative is to use the ID field as the link to user…

Any help appreciated, thanks

[ryanlanciaux]

@dahlbyk is correct. This is a deviation from how we were doing things in 0.x. We are currently taking an opt-in approach to this data for performance reasons. We are hoping to add a helper that is mostly that code provided as a util out of the box – it seems like a use-case many people are bumping into.

We maybe could additionally make this something driven by a prop on CellDefinition too… something like <ColumnDefinition ..... includeRowData={true} />. I would love any additional thoughts around this.

[dahlbyk]

The Storybook includes an example of enhancing a custom component with rowData: https://github.com/GriddleGriddle/Griddle/blob/90a46dbdcdeebca280f4b3d0f8a928f8ad7b9996/stories/index.js#L67-L71

const EnhanceWithRowData = connect((state, props) => ({
  rowData: rowDataSelector(state, props)
}));

const LinkToUser = EnhanceWithRowData(props => {
  console.log('props', props); // { value: 'Adam Smith', griddleKey: 2 }
  const { value, rowData } = props;
  const url = '/users/${rowData.id}';
  return <Link to={url}>{value}</Link>;
});