How can i add more than one new Column to a React-Data-Grid?

Question

Hi for A Project i need the user to select the Columns that should be displayed in the React Data Grid. Some Columns might be preset ,others may be added later. However i tryed, it won´t work for more than one added Column eventhough the state is set accordingly and no error is displayed

The new Column will be Selcted by a Selector.This will than be added to the State of the tableclass. If tried passing it down by props which forced the render method but it did not updated the columns more than once either. I used different/same keysets. Sames will be recognised if it was the first new Column. I tried to debug it wether there is any Reason to classify nextColumns as not changed but it did´t bring me any closer.

The state.columns while in render()

0: {key: "date", name: "Date"}   ->Preset
1: {key: "date", name: "Date1"}  ->Added and created
2: {key: "ffd", name: "Testfdg2"}->Added to state not created
3: {key: "test", name: "Test3"}  ->Not created
4: {key: "test", name: "Test4"}
5: {key: "test", name: "Test5"}
6: {key: "test", name: "Test6"}
length: 7
__proto__: Array(0)

ComponentCall

<ReactDataGrid
    columns={this.state.columns}
    rowGetter={i => this.handleRowGetter(i)}
    rowsCount={this.rowsCount()}
    minHeight={500}
    minColumnWidth={10}
    onGridSort={(sortColumn, sortDirection)=>this.gridSort(sortColumn, sortDirection)}
    toolbar={
      <Toolbar enableFilter={true}
    />}
    onAddFilter={this.handleFilterChange}
    onClearFilters={this.handleOnClearFilters}
    onRowDoubleClick={(click,row) =>{this.handleClick(click,row)}}

    />

So the Goal would be to create all the Columns according to the State

If more Code is nessesary i´l gladly provide it

Greeting Jonathan

score 0 · Answer 1 · answered Apr 03 '19 at 11:31

0

From docs:

key: A unique key to distinguish each column

You need to use different values for key. So each key is uniq

answered Apr 03 '19 at 11:31

iofjuupasli

3,818
1
16
17

As said i did that too, makes no difference. As in the state example dublicate keys Columns will be displayed/created. It will however trigger a warning – Jonathan Schott-Vaupel Apr 03 '19 at 17:36

score 0 · Accepted Answer · answered Apr 11 '19 at 12:42

Ok solved it

in line ca. 5804 in react-data-grid.js

    if (!ColumnMetrics.sameColumns(this.props.columns, nextProps.columns,this.props.columnEquality) || nextProps.minWidth !== this.props.minWidth) {
          var columnMetrics = this.createColumnMetrics(nextProps);
          this.setState({ columnMetrics: columnMetrics });
       }

this.props.columns will be the same as next props.columns thus columnMetrics will not be updated.

in line ca. 6500 in react-data-grid.js

    this.setupGridColumns = function () {
    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0]:_this2.props;
    var columns = props.columns;

    if (_this2._cachedColumns === columns) {
      return _this2._chachedComputedColumns;
    }

further more _this2._cachedColumns will be the same as props.columns thus cachedComputedColumns is returned

So no real update to the ColumnMetrics -> No Visual Update. Even though props and state are set right.

So excluding the if and changing the return statement will let u add new Columns to your Table

How can i add more than one new Column to a React-Data-Grid?

2 Answers2