From the official documentation here about writing up custom editors - https://adazzle.github.io/react-data-grid/docs/examples/custom-editors
And a sample here using custom color picker - https://codesandbox.io/s/l9ko3oqwym?from-embed
And also some more existing editors from the React-Data-Grid-Addons - https://github.com/adazzle/react-data-grid/tree/master/packages/react-data-grid-addons/src/editors
So i tried to write my own custom editor, which is basically a dropdown that has category on it.
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
class CustomDropdown extends Component {
constructor(props){
super(props);
this.state = {
val : props.value
}
}
getInputNode = () => {
return ReactDOM.findDOMNode(this);
}
onChange = evt => {
this.setState(
{ val : evt.target.value },
() => this.props.onCommit()
);
}
getValue = () => {
let updated = {};
return updated[ this.props.column.key ] = this.state.val;
}
getStyle = () => {
return {
width: '100%',
height: '100%'
}
}
disableStyle = () => {
return {
backgroundColor: '#A4A4A4',
fontWeight: 600,
color: '#FFF'
}
}
createOptions = () => {
let options = [];
this.props.options.forEach( group => {
options.push( <option key={group.category} style={this.disableStyle()} disabled>{group.category}</option> );
group.child.forEach( opt => {
options.push( <option key={opt.label} value={opt.value}>{opt.label}</option> )
});
});
return options;
}
render() {
return (
<select style={this.getStyle()} defaultValue={this.props.value} onBlur={this.props.onBlur} onChange={this.onChange} >
{this.createOptions()}
</select>
);
}
}
export default CustomDropdown;
And the mock data that generates the options
const mockList = [
{
category: 'Header A',
child: [
{ label: 'Label 1-A', value: 'Label 1-A' },
{ label: 'Label 2-A', value: 'Label 2-A' },
{ label: 'Label 3-A', value: 'Label 3-A' }
]
},
{
category: 'Header B',
child: [
{ label: 'Label 1-B', value: 'Label 1-B' },
{ label: 'Label 2-B', value: 'Label 2-B' },
{ label: 'Label 3-B', value: 'Label 3-B' }
]
},
{
category: 'Header C',
child: [
{ label: 'Label 1-C', value: 'Label 1-C' },
{ label: 'Label 2-C', value: 'Label 2-C' },
{ label: 'Label 3-C', value: 'Label 3-C' }
]
}
];
And the custom dropdown is called inside column definition of the datagrid
const Cols = [
{
key: 'id',
name: 'No',
width: 60
},
{
key: 'category',
name: 'Category',
width: 170,
editor: <CustomDropdown options={mockList} />
}
];
<ReactDataGrid
columns={cols}
/* And some other properties in here */
/>
I got all the UI ready and working, and it shows fine in the table.
But the problem here is that, it couldn't update the data to the table. I tried to select the value from the dropdown options, but it wouldn't update the cell value. When i highlight the cell and press enter, hoping to have the options opened when i press enter, but instead the whole app went kaput.
Need some help here to guide me on how to make the custom editor working. I followed the example closely above, and made sure i didn't miss a thing, but writing class component was not what im good at (i'm more into hooks) so i'm not sure if i did anything wrong in the snippet above.
