Embedding other React components inside Reactable Data?

[thegoleffect]

Is it possible to embed other React components (like Link or your own customer components) inside the data to Reactable?

[
  { name: <Link to="some-place">Someplace</Link>, col2: 1, col3: 2},
  ...
] 

[thegoleffect]

I've tried this directly and via the unsafe() and neither approach seems to work.

[glittershark]

Per the documentation, you'd have to do this by embedding the component inside a <Tr> or <Td>

[glittershark]

see this doc

[thegoleffect]

Thanks. It isn't super clear from the docs that based on my use-case that I should refer to that doc.

I was able to get it to work, but since I am wrapping every row, I can't pass in data to <Table> and have to loop over data inside the <Table></Table> tags and generate Tr/Tds. This loses a lot of the concise data-oriented benefits of using Reactable though :(. But it works. Thanks!

[allencch]

I have a similar issue. Hope my comment will help. If we have an array of components, in order to display them properly in the Td, we need to wrap the array with a single component like

let someData = [ <span>1</span>, <span>2</span>, <span>3</span> ];
<Td column="number">
  <div className="wrapper">
    {someData}
  </div>
</Td>