React-data-grid: Allow editors or formatters to request additional props from row through prop types

[malonecj]

Sometimes a cell editor needs access to additional cell values. Proposing a way for an editor to request these extra values through prop types such that if the prop name exists on the row then it will be passed to the editor from the editor container

var nameEditor = React.createClass({

  propTypes : {
     firstName: React.PropTypes.string.isRequired,
     lastName: React.PropTypes.string.isRequired
  }

if firstName and lastName are properties on the row then they will be passed to the editor from the editor container

[bakesteve]

ok - looks neat enough, semi relay-esque, and definitely better than passing the row data always
however, does couple the row field props to the editor prop names, so we _may_ as a future enhancement want to allow for some mapping there up at the top of the grid. Although possibly its best just to ensure that if your underlying data has {name:{first:'John', last:'Doe'}} then we map that to row data as {firstName:'John', lastName:'Doe'} - probably using immutable lens/cursors (or getter and setters)?

[jbgarr]

+1

This would be a great/necessary feature. I had to use the workaround mentioned in #42 which worked fine, but there should be some documentation on it somewhere.

[hakunin]

Just stumbled upon this as well.

[OracPrime]

Is there an accepted solution for this now? I'm trying to get more than one item from my row data passed to my custom formatter class, and although I can get the value prop corresponding to this column, I can't seem to get hold of the row data (or even another named column)

So I have columns defined as

    private columns: ReactDataGrid.Column[] = [
        { name: 'Start', key: 'start', formatter: FormattedDateTime },
        { name: 'End', key: 'end', formatter: FormattedDateTime },
        { name: 'Status', key: 'state', formatter: StatusClass }
    ];

and I have a row data which includes start,end,state, and xmlOutput and I have a class like this:

class StatusClass extends React.Component<{ value: any, xmlOutput : string }, {showXml : boolean}> {
stuff }

but my xmlOutput is never set. I thought at one point I managed to pass a property called rowData in, but I've been unable to reproduce it and think I might be going mad!

TIA.

[DreadfulDeveloper]

I've been able to accomplish this by setting the formatter/editor in a RowRenderer

var RowRenderer = React.createClass({
  setScrollLeft: function(scrollBy) {
        this.refs.row.setScrollLeft(scrollBy);
  },
  render:  function ( ) {
    var colorColIdx = 10;
    var row = this.props.row;
    var columns = this.props.columns;
    var pgc = this.props.getProgramColors(row.style_code); //get list for this item 
    columns[colorColIdx].editor = <AutoCompleteEditor options={pgc} />
    return (<ReactDataGrid.Row className={rowStyle} ref="row" {...this.props}/>)
  }
});

And by passing a data accessor method as a prop to the RowRenderer

<ReactDataGrid 
    {...}
    rowRenderer={<RowRenderer getProgramColors={this.getProgramColors}/>}
/>

Hope this helps!

[AlessandroAnnini]

@DreadfulDeveloper is right, and if you want to use different props for different columns i found out that this works too:

```js
this._columns = [
{
key: 'code',
name: 'Codice',
filterable: true,
sortable: true,
filterRenderer: MyFormatter, // <-- standard formatter
},
{
key: 'id',
name: 'id',
formatter: , // <-- new formatter
},
];