React-table: render image in cell

Created on 29 Aug 2017  路  4Comments  路  Source: tannerlinsley/react-table

it seems to me that this plugin wont work if we want to render an image in a cell.
am i right or wrong ?
<ReactTable
columns={[
{
Header: "Id",
accessor: "Id"
},
{
Header: "Image",
Cell: row => (
<div>
img className="img-responsive" src={row.row.Path} />
/div>
)
}
]}
manual // Forces table not to paginate or sort automatically, so we can handle it server-side
data={data}
pages={pages} // Display the total number of pages

            />

Most helpful comment

I can embed images: https://codesandbox.io/s/31zv890m76

If you're loading data from server side, you likely aren't giving the table any data. You should probably pass the onFetchData prop to actually fill in some data or remove the manual prop: https://github.com/react-tools/react-table#server-side-data

Your row.row.Path accessor might be incorrect, I've had to use row.original.Path in the past.

All 4 comments

I can embed images: https://codesandbox.io/s/31zv890m76

If you're loading data from server side, you likely aren't giving the table any data. You should probably pass the onFetchData prop to actually fill in some data or remove the manual prop: https://github.com/react-tools/react-table#server-side-data

Your row.row.Path accessor might be incorrect, I've had to use row.original.Path in the past.

yes its ok if your image does not come from server, but if you want to access image through state of component it is not possible, based on this , i changed this plugin to another one which can support render image from state,

i strongly recommend it .

Loading from the row state also works for me: https://codesandbox.io/s/31zv890m76

I'm betting the problem lies in the lack of an onFetchData prop or the row.row.Path accessor you tried to get the path to the image from.

ReactTable definitely supports displaying images within cells (and anything else that can be a component), but it looks like you found a workaround by using a different table implementation, so no worries.

Since this is more of an implementation question and not an issue or bug,
we suggest you use our slack channel to ask for more assistance. Thanks!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

krishna-shenll picture krishna-shenll  路  3Comments

LeonHex picture LeonHex  路  3Comments

DaveyEdwards picture DaveyEdwards  路  3Comments

monarajhans picture monarajhans  路  3Comments

Codar97 picture Codar97  路  3Comments