0

My component Test is called and gets in props an object containing datas from a mysql request (Select * from db.mytable). I store this.props.data in a state and render it in a ReactDataGrid.

What I'm trying to do is to update and change color of a row when a value of a cell is changed in my ReactDataGrid. For example, if a user right clicks on a rows, a context menu appear and he has the choice between Check and Uncheck. When he clicks on Check, i want to update the row and make it appear green.

I've got a database where I store the Checked state so when the user refreshes the page, the line should stay green.

How may I do this?

xaoc2nd
  • 95
  • 3
  • 11

2 Answers2

1

So when I click check in the context menu this function is called, it will update my state table containing the rows :

 //right click then check
  rowCheck = (rowIdx) => {
    var tableState=this.state.tableState.concat([])
    tableState[rowIdx.rowIdx].CHECKED='Y'
    this.setState({tableState})
  }

the RowsRenderer function : 

RowRenderer = ({ renderBaseRow, ...props }) => {
    const color = this.state.tableState[props.idx].CHECKED==='Y' ? "blue" : "";
    return <div style={{color}}>{renderBaseRow(props)}</div>;
  };

the data-grid : 

<ReactDataGrid
            columns={this.state.column}
            rowGetter={i => this.state.tableState[i]}
            rowsCount={this.state.tableState.length}
            minHeight={500} 

            enableCellSelect={true}
            onGridRowsUpdated={this.onGridRowsUpdated}
            cellNavigationMode={'changeRow'}

            rowRenderer={this.RowRenderer}

            contextMenu={
              <ExampleContextMenu
                onRowCheck={(e, {rowIdx})=>this.rowCheck({rowIdx})}
                onRowUncheck={(e, { rowIdx }) => this.rowUncheck({rowIdx})}
              />
            }
            RowsContainer={ContextMenuTrigger}

            rowSelection={{
              showCheckbox: true,
              enableShiftSelect: true,
              onRowsSelected: this.onRowsSelected,
              onRowsDeselected: this.onRowsDeselected,
              selectBy: {
                indexes: this.state.selectedIndexes
              }
            }}
          />
xaoc2nd
  • 95
  • 3
  • 11
0

Adding to the above solution: I wanted to change the row's background-color rather than the color itself so I ended up adding a class to the div wrapper instead of style.

<div className={classnames({ 'focused-row': focused })}>{data.renderBaseRow(data)}</div>

Then in my css I added

.focused-row .react-grid-Cell {
    background-color: #f5deff !important;
}

Otherwise the cell's background-color was overriding the row's

Thrashed Potatoes
  • 11
  • 3