react-table render component inside data

Question

I'm attempting to add a component inside the data using react-table package (https://www.npmjs.com/package/react-table#example)

Using the example from the package readme, I'm trying to use a fancy component to add an image to a cell: using ** to jump out in the code... I have also tried:

imageUrl:{<PlaceholderImage width={60} textColor="#fff" text="Image"/>}

example:

import ReactTable from 'react-table'
import 'react-table/react-table.css'
**import { PlaceholderImage } from 'react-placeholder-image'**

render() {
  const data = [{
    name: 'Tanner Linsley',
    age: 26,
**imageUrl:<PlaceholderImage width={60} textColor="#fff" text="Image"/>,**
    friend: {
      name: 'Jason Maurer',
      age: 23,
    }
  },{
    ...
  }]

  const columns = [{
    Header: 'Name',
    accessor: 'name' // String-based value accessors!
  }, {
    Header: 'Age',
    accessor: 'age',
    Cell: props => <span className='number'>{props.value}</span> // Custom cell components!
  }, {
    Header: ' ',
    accessor: 'imageUrl', // String-based value accessors!
    maxWidth: 70,
    minWidth:70,
  },{
    id: 'friendName', // Required because our accessor is not a string
    Header: 'Friend Name',
    accessor: d => d.friend.name // Custom value accessors!
  }, {
    Header: props => <span>Friend Age</span>, // Custom header components!
    accessor: 'friend.age'
  }]

  return <ReactTable
    data={data}
    columns={columns}
  />
}

Clarity · Accepted Answer · 2019-09-11 14:12:37Z

41

You're passing a react component to a data field that expects a string. Try customising your cell via Cell props:

const columns = [
  {
    Header: "Image",
    accessor: "imageUrl",
    maxWidth: 70,
    minWidth: 70,
    Cell: props => <PlaceholderImage width={60} textColor="#fff" text="Image" />
  }
];

edited Sep 11, 2019 at 14:12

answered Sep 10, 2019 at 20:17

Clarity

10.9k2 gold badges27 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

tannerlinsley Over a year ago

Creator and maintainer of React-Table here... This is the correct answer.

Nickvda Over a year ago

What if we want to generate this on the backend? Anywhere we want to define columns we have to do it in JSX. If we can get access to properties cell.column.attribute we can render it our own way, but it seems that goes against the way this library is supposed to be used..

wscourge · Accepted Answer · 2020-09-14 11:41:20Z

24

In addition to @Clarity's answer, there's also a possibility to access the cell's value at the Cell's property level:

const columns = [
  {
    Header: "Image",
    accessor: "imageUrl",
    maxWidth: 70,
    minWidth: 70,
    Cell: ({ cell: { value } }) => (
      <img
        src={value}
        width={60}
      />
    )
  }
];

edited Sep 14, 2020 at 11:41

answered Aug 3, 2020 at 4:26

wscourge

11.4k17 gold badges65 silver badges87 bronze badges

1 Comment

Edrich Over a year ago

I like this answer...just a slight edit, add a closing curly bracket in ({ cell: { value }) to become ({ cell: { value }})

Collectives™ on Stack Overflow

react-table render component inside data

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related