0

I'd like to pass the props (value, column, ...) to a custom editor in react-data-grid. The custom editor is Slider from @material-ui. The different necessary methods of the API have been implemented. But I can't get the props from the react-data-grid. Thank you!!

My codes //Slider gridrangevalue.js

        import React, { Component } from "react"
        import ReactDOM from "react-dom"
        import Slider from "@material-ui/core/Slider"
        
        class GridRangeValues extends Component {
         
          getInputNode() {
            return ReactDOM.findDOMNode(this)
          }
           
          onChange = (event, new_value) => {
            console.log(this.props.column.key)
            this.setState({
              value: new_value,
            })
          }
        
          getValue() {
            //console.log(this.props.column.key)
            let update = {}
            update[this.props.column.key] = this.state.value
            return update
          }
        
          render() {
            return (
        
                <Slider
                  step={25}
                  min={0}
                  max={100}
                  aria-labelledby="discrete-slider"
                  valueLabelDisplay="on"
                  marks={true}
                  value={this.state.value}
                  onChange={this.onChange}
                  getAriaValueText={this.display_value}
                />
            )
          }
        }
        
        export default GridRangeValues
    
    // Grid.js
    
        const measureTypeEditor = <DropDownEditor options={measureTypes} />
        const SliderEditor = React.forwardRef((props, ref) => (
          <GridRangeValues ref={ref} {...props} />
        ))
    
    ....
    
    const columns = [
      {
        key: "measure",
        name: "Measure",
        editor: measureTypeEditor,
        resizable: true,
        editable: true,
      },
      {
        key: "value",
        name: "Value",
        editable: false,
        editor: SliderEditor,
        resizable: true,
      },
    ]
parice02
  • 13
  • 5

0 Answers0