How to create custom row renderer in react-data-grid

Question

I tried this to render custom row in react-data-grid. But how can I create custom row for image. I have two columns named image_large and image_small. Code for custom row renderer is given below:

<div className="row" style={{minHeight: 300, margin: 20}}>
            <div className="col-md-6">
                <img onClick={() => this.button()}
                     src={this.state.imagePath}
                     id='image'
                     style={{maxWidth: '100%'}}/>
            </div>
        </div>

your problem is not clear,can you please elaborate what should be done.Do you want to actually have two custom columns? — Harikrishnan, Jul 11 '18 at 08:24
suppose you have an object ={id: 1, image_large: SomeImagePath, image_medium: SomeImagePath, image_medium: SomeImagePath}. How to show them in react-data-grid? — Md Isfar Uddin, Jul 11 '18 at 09:09

score 6 · Accepted Answer · answered Jul 11 '18 at 09:47

You can show the images on row using formatter attribute on the column list. The column list should be as follows

let columns = [
  {
    key: 'image_small',
    name: 'Image Small',
    getRowMetaData: (row) => row,
    formatter:ImagesmFormatter
  },
  {
    key: 'image_medium',
    name: 'Image Medium',
    getRowMetaData: (row) => row,
    formatter: ImagemdFormatter
  },
  {
    key: 'image_large',
    name: 'Image Large',
    getRowMetaData: (row) => row,
    formatter: ImagelgFormatter
  }]

The column formatter for Image small is as follows

class ImagesmFormatter extends React.Component {
  render() {
    return (
      <div>
        <img src={this.props.value}/> //this.props.value should contain the path
      </div>
    )
  }
}

Thanks. Let me implement first. – Md Isfar Uddin Jul 11 '18 at 10:38 — Md Isfar Uddin, Jul 11 '18 at 10:38

How to create custom row renderer in react-data-grid

1 Answers1