React-data-grid: DropdownEditor/Formatter not reflecting option changes

[jmahony]

WHICH VERSION OF REACT ARE YOU USING?

Officially Supported:
[ ] v0.14.x
[x] v15.5.4

Community Supported:
[ ] v15.0.x
[x] v15.5.4

WHICH BROWSER ARE YOU USING?

Officially Supported:
[ ] IE 9 / IE 10 / IE 11
[ ] Edge
[x] Chrome

Should work:
[ ] Firefox
[ ] Safari

---

I'm submitting a ... (check one with "x")

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/adazzle/react-data-grid/blob/master/CONTRIBUTING.md

Current behavior
Grid does not show DropDownEditor/Formatter option prop changes.

Expected/desired behavior
When changing DropDownEditor/Formatter options, grid should reflect those changes.

Reproduction of the problem

import { Editors, Formatters } from 'react-data-grid-addons';

import React from 'react';
import ReactDataGrid from 'react-data-grid';

const { DropDownEditor } = Editors;
const { DropDownFormatter } = Formatters;

class Transactions extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      columns: this.createColumns(props),
      transactions: this.props.transactions,
    };
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.accounts !== this.props.accounts) {
      this.setState({ columns: this.createColumns(nextProps) });
    }

    this.setState({
      transactions: nextProps.transactions,
    });
  }

  createColumns(props) {
    const accounts = props.accounts.map(a => ({
      id: a.get('id'),
      value: a.get('id'),
      text: a.get('name'),
      title: a.get('name'),
    }));

    return [
      { key: 'id', name: 'id', editable: false },
      {
        key: 'account',
        name: 'Account',
        editable: true,
        editor: <DropDownEditor options={accounts.toJS()} />,
        formatter: <DropDownFormatter options={accounts.toJS()} />,
      },
      { key: 'date', name: 'Date', editable: true, sortable: true },
      { key: 'payee', name: 'Payee', editable: true },
      { key: 'note', name: 'Note', editable: true },
      { key: 'amount', name: 'Amount', editable: true, sortable: true },
    ];
  }

  rowGetter = rowIdx => this.state.transactions.get(rowIdx).toJS();

  handleGridRowsUpdated = update => {
    this.props.updateTransaction(update.fromRowId, update.updated);
  };

  addTransaction = () => this.props.addTransaction();

  render() {
    return (
        <ReactDataGrid
          enableCellSelect={true}
          columns={this.state.columns}
          rowGetter={this.rowGetter}
          rowsCount={this.state.transactions.size}
          onGridRowsUpdated={this.handleGridRowsUpdated}
        />
    );
  }
}

export default Transactions;

What is the expected behavior?
When the component receives props and props.account changes, the columns state gets regenerated to add the new account to the DropDownEditor and DropDownFormatter. The grid should then allow the new account be to selected.

[mtetlow]

I was able to get this to work by passing columnEquality={() => false} as a prop to ReactDataGrid

[wenmine]

@mtetlow Hi,when I use columnEquality={() => false}, I click on the drop-down box, this.setState in onRowClick method will make the drop-down box not appear. Don't know if you have this situation?

[sayyadbhasha]

@mtetlow how it worked for you?

[shilpikanade]

Where do you use that option? I'm having the same issue.