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,
},
]