React-virtualized: How to pass custom props to `cellRenderer` function

[ankit-chaurasia]

I am trying to get a custom props into cellRenderer function.
Is this possible? If yes, from which component I should pass that prop so that it will be available in the cellRenderer function

[kirilligum]

I have a question that is probably similar. I'd like to pass the data (array of arrays) to cellRenderer so that I can use it as a standalone pure function and not have data as a global or class state

[wuweiweiwu]

For example (Grid):

function cellRenderer ({ columnIndex, key, rowIndex, style }) {
  return (
    <UrComponent
      key={key}
      style={style}
    >
      {list[rowIndex][columnIndex]}
    </UrComponent>
  )  
}

And you will pass that cellRenderer into Grid. In cellRenderer you can directly pass props to the component you are returning.

ex:

function cellRenderer ({ columnIndex, key, rowIndex, style }) {
  return (
    <UrComponent
      key={key}
      style={style}
      customProp={whatever} // <--- THIS
    >
      {list[rowIndex][columnIndex]}
    </UrComponent>
  )  
}

and if you define cellRenderer as an instance method (access to this) you can pass this.state or this.props properties to your custom component as well

Hope that helps!

[thebergamo]

Would be really nice to have another way to pass some custom props to cellRenderer, in that case we will be able to have more reusable cellRenderers.

For example:

...
{
    label: '',
    cellRenderer: CheckboxRenderer,
    cellRendererParams: {
        onChange: this.onChange,
    }
}
...

In this case I will be able to write this CheckboxRenderer in a way that I don't need to re-write it all the time and just re-use as a function component.

[vamshi9666]

this trick works for me

    <Grid
      cellRenderer={props => <CellRenderer otherprop={"values"} {...props} />}
      columnCount={list[0].length}
       columnWidth={100}
       height={300}
       rowCount={list.length}
       rowHeight={30}
       width={300}
       />