CODEWITHSUNDEEP
reactjsreact-data-grid
Md Isfar Uddin
Md Isfar Uddin

Reputation: 732

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

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>

Upvotes: 3

Views: 4290

Answers (1)

Harikrishnan
Harikrishnan

Reputation: 1097

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>
    )
  }
}

Upvotes: 6

Related Questions