Is it possible to render <CustomComponent /> instead static value in cells ?

[Steffi3rd]

Hi,

I would like to know if it's possible to do this :

const data = React.useMemo(
  () => [
    {
      col1: 'Hello',
      col2: <CustomComponent  id="hello"/>,
    },
    {
      col1: 'react-table',
      col2: <CustomComponent id="rocks"/>,
    },
  ],
  []
)

[fnn]

Hey,
you can do this:

const data = React.useMemo(
  () => [
    {
      Header: 'Hello',
      accessor: 'hello',
      Cell: () => <CustomComponent  id="hello"/>
    },
  ],
  []
)
`

[Ajayghoshm]

This is for Column Array, right?
How is it possible for Row array?

[fnn]

Yes. This is for the columns.
Inside Cell you have access to the row data:

Cell: ({ row }) => <Component prop={row.original.someRowProp} />

In your row data array is only the “raw data” you need.

[JeffEmery]

data provides the table with the actual data you are managing
columns is where you handle the rendering of cells based on that data
as @fnn describes, you want to use Cell but on the columns array not on the data array.