将反应组件（或元素？）放入对象中。

Question

I am making a table on my react website with react-bootstrap-table-next (also known as react-bootstrap-table-2) and am trying to get an icon component to show up in the rows as data instead of what I have now, which is an x, like this:

A sample of what I currently have for data is:

const tools = [{key: 'Android Mobile', qual: "x"}]

But what I want to do is something like:

const tools = [{key: 'Android Mobile', qual: <CheckIcon/>}]

Where CheckIcon is const CheckIcon = () => <Icon icon={check} size={10}/> (where Icon is being imported from react-icons-kit ).

Currently the entire page does not render when I do something like that, and I haven't been able to find much information on how to insert a component into an object with React. If there are any tips or tricks anyone has, that would be much appreciated!

Here is a stackblitz for anyone that wants to play around with the code

Answer 1

I think column.formatter can help you. there's a online demo: this

Answer 2

First, make sure that react-bootstrap-table-next props data accept React Component.

So far what I've found it does not support render a React Component inside the data object. https://github.com/react-bootstrap-table/react-bootstrap-table2/blob/master/packages/react-bootstrap-table2/src/bootstrap-table.js#L118

Feel free if you want to submit a new feature at https://github.com/react-bootstrap-table/react-bootstrap-table2/issues/new

Answer 3

I ended up coming to the same conclusion as @Roman Masyhar and ended up taking the cheater's route for now until I end up just making my own table and just using the "✔" character in place of x's and just styling them for the same effect

In case anyone is curious I did also open a feature request here