Allow editors or formatters to request additional props from row through prop types about react-data-grid HOT 6 CLOSED

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

from react-data-grid.

+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.

from react-data-grid.

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

this._columns = [
  {
    key: 'code',
    name: 'Codice',
    filterable: true,
    sortable: true,
    filterRenderer: MyFormatter, // <-- standard formatter
  },
  {
    key: 'id',
    name: 'id',
    formatter: <MyFormatter customProp={'react-data-grid-rocks'} />, // <-- new formatter
  },
];

from react-data-grid.

Just stumbled upon this as well.

from react-data-grid.

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.

from react-data-grid.

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!

from react-data-grid.