How to dispatch an action from the column formatter component of react-data-grid

Question

I need to dispatch an action for deleting a row entry when a custom formatted delete button is clicked

Answer 1

I think what you want is available HERE

you can can props in grid formatter like

render() {
return  (
  <ReactDataGrid
    columns={this._columns}
    rowGetter={this.rowGetter}
    rowsCount={this._rows.length}
    minHeight={500}
    rowRenderer={RowRenderer} />);

}

And RowRenderer is a function

const RowRenderer = React.createClass({
            propTypes: {
                idx: React.PropTypes.string.isRequired
            },

            setScrollLeft(scrollBy) {
                // if you want freeze columns to work, you need to make sure you implement this as apass through
                this.refs.row.setScrollLeft(scrollBy);
            },

            getRowStyle() {
                return {
                    color: this.getRowBackground()
                };
            },

            getRowBackground() {
                return this.props.idx % 2 ?  'green' : 'blue';
            },

            render: function() {
                // here we are just changing the style
                // but we could replace this with anything we liked, cards, images, etc
                // usually though it will just be a matter of wrapping a div, and then calling back through to the grid
                return (<div style={this.getRowStyle()}><ReactDataGrid.Row ref="row" {this.props}/></div>);
            }
        });

Answer 2

I faced a similar issue and solved it in a different way. I had 2 columns for which I wanted to add a selectable image, the functionality added was to delete an entry via redux and download a file.

I had a wrapping top level react component shown below:

class ItemComponent extends Component {

  constructor(props) {
    super(props);
    this.props.getData();
  }

  additionalColumns = (item) => {
    let conditionalImage;

    if (record.status === 'SOMETHING') {
      conditionalImage = (
        <div>
          <a href="javascript:void(0)" role="button" onClick={() => this.download(item)}><span className="fa fa-file" /></a>
        </div>
      );
    }

    return {
      ...record,
      conditionalImage,
      delete: (
        <div>
          <a href="javascript:void(0)" role="button" onClick={() => this.delete(item)}><span className="fa fa-trash" /></a>
        </div>
      ),
    };
  };

  delete(item) {
    //here you would call your redux action
    console.log(item);
  }

  download(item) {
    //here you would call your redux action
    console.log(item);
  }

  render() {
    return (
      <main className="items">
        <TableWrapper items={this.props.items} additionalColumns={this.additionalColumns} />
      </main>
    );
  }
}

The TableWrapper component is a functional stateless component that builds a ReactDataGrid:

const TableWrapper = ({ items, additionalColumns }) => {

  const itemsWithAddColumns = items.map(additionalColumns);

  const rowGetter = rowNumber => itemsWithAddColumns[rowNumber];

  return (
    <div>
        <ReactDataGrid
          rowKey="id"
          columns={ExternallyDefinedColumns}
          rowGetter={rowGetter}
          rowsCount={recordsPlus.length}
          enableRowSelect="multi"
          minHeight={600}
          emptyRowsView={ExternallyDefinedEmptyRowsView}
        />
    </div>
  );
};

So basically what happens here is you take the array that will be passed to ReactDataGrid to populate the rows and extend it with your own custom logic pointing at methods within your top level react component. This means you can then get the result of what item is selected and pass whatever data is needed to your redux layer or update your state if you aren't using redux.