React-virtualized: React component or html inside table or grid cell

[UnderNotic]

I'm trying to create column with buttons.
Is this possible if not could there be an option to render react component into cell? If not rendering custom html would be also okay.

[UnderNotic]

Okay I sorted it out. It is possible:
Cell renderer should be cellData => cellData
And now in cellDataGetter you can return react element. Is it expected behaviour, shouldnt this be in docs?

[bvaughn]

This is in the docs (see cellRenderer prop for Column and cellRenderer prop for Grid). You can return whatever React element you want from the renderers.

[oilart]

Confirming - this doesn't work as you have it in the documentation.

All the columns will be empty div's (as default render with no data):

<Column
    key={column.prop}
    label={column.label}
    dataKey={column.prop}
    width={100}
    cellRenderer={() => (<div>custom?</div>)}
/>

However, if you use the same logic for headerRenderer you will see a custom template in the heading:

<Column
    key={column.prop}
    label={column.label}
    dataKey={column.prop}
    width={100}
    headerRenderer={() => (<div>custom indeed</div>)}
/>

Haven't look into code/details yet but please consider this as unresolved issue.

[oilart]

Figured that out - basically once you have a custom rowRenderer it should return a column from data.columnsprop as it is (node).

[bvaughn]

Glad you figured it out 😄

[jdelafon]

Edit: nevermind, this whole thing looked confusing but actually I don't even know what the discussion was about, because this works:

cellRenderer: ({ cellData }) => <Mycomponent />

[SocialHulkHogan]

Still a bit confused about this. I tried both UnderNotic and jdelafon's solutions and I can't seem to render a component (in my case a checkbox) inside the Table. Can I see an example of how this should be done? With correct syntax. In my humble opinion, examples of correct use (of things like cell renderer) are scarce within the documentation. I wouldn't really consider this resolved until the correct way to do this is clearer.

Edit* apparently my issue seems to stem from a difference in react es6 from es5. Components defined in the same script used to know about each other, but it seems like I have more to learn as my company just switched to es6. I still think more examples would really enhance the utility of the docs.

Edit 2* Ha! classic mistake. I didn't capitalize my component! You'd think with all the silly warnings react gives in dev mode one of them might be a warning for an unrecognized tag :) Keep up the great work.

[eokoneyo]

Hi @bvaughn just said to mention, returning a react element in the column cellRenderer prop for columns like in the docs here and here doesn't work I get this error

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `Grid`.

Update

I have got it working, it seems because I was trying to return a component within the cellRender when I was already returning one in the CellDataGetter thats why I got the error, now I just do this;

cellRenderer({ cellData }) {
    if (cellData === null) {
      return '';
    }

    if (React.isValidElement(cellData)) {
      return cellData;
    }

    return String(cellData);
  }