How do you select a single cell with react-data-grids and use the data in that cell elsewhere

Question

I have a populated grid by using react-data-grids by addazle and I'm trying to select a cell and have a modal pop up with the data from that cell. I have enableCellSelect={true} and I know I needd to use a React.createClass but I'm not sure where to go from there. Thanks in advance!

    let onClick = React.createClass({
        render(){
            return(
                <div onClick={this.showModal}>

                </div>
            )
        }
    })




  export class Modal extends Component{
        constructor(props){
            super(props)
            this.state={}
        }

     render(){
      return(
        <div>
          <ReactDataGrid
            enableCellSelect={true}
            columns={columns}
            rowGetter={this.getRows}
            rowsCount={this.state.rows.length}
            getSubRowDetails={this.getSubRowDetails}
            onCellExpand={this.onCellExpand}
            minHeight={500}
          />
        </div>
    )
  }
}

Damien · Answer 1 · 2018-02-20T10:44:21.227

Did you read the examples from react-data-grid webpage? You may find your solution here: http://adazzle.github.io/react-data-grid/examples.html#/cell-selection-events

You create a function onCellSelected:

onCellSelected = ({ rowIdx, idx }) => {
  this.grid.openCellEditor(rowIdx, idx);
};

When you call your component

<ReactDataGrid
      ref={ node => this.grid = node }
      rowKey="id"
      columns={this._columns}
      rowGetter={this.rowGetter}
      rowsCount={this._rows.length}
      enableRowSelect="multi"
      minHeight={500}
      onRowSelect={this.onRowSelect}
      enableCellSelect={true}
      onCellSelected={this.onCellSelected}
      onCellDeSelected={this.onCellDeSelected} />

Hereunder, the complete example of the link:

const ReactDataGrid = require('react-data-grid');
const exampleWrapper = require('../components/exampleWrapper');
const React = require('react');

class Example extends React.Component {
  constructor(props) {
    super(props);
    this._columns = [
      { key: 'id', name: 'ID' },
      { key: 'title', name: 'Title', editable: true },
      { key: 'count', name: 'Count' }
    ];

    let rows = [];
    for (let i = 1; i < 1000; i++) {
      rows.push({
        id: i,
        title: 'Title ' + i,
        count: i * 1000,
        active: i % 2
      });
    }

    this._rows = rows;

    this.state = { selectedRows: [] };
  }

  rowGetter = (index) => {
    return this._rows[index];
  };

  onRowSelect = (rows) => {
    this.setState({ selectedRows: rows });
  };

  onCellSelected = ({ rowIdx, idx }) => {
    this.grid.openCellEditor(rowIdx, idx);
  };

  onCellDeSelected = ({ rowIdx, idx }) => {
    if (idx === 2) {
      alert('the editor for cell (' + rowIdx + ',' + idx + ') should have just closed');
    }
  };

  render() {
    const rowText = this.state.selectedRows.length === 1 ? 'row' : 'rows';
    return  (
      <div>
        <span>{this.state.selectedRows.length} {rowText} selected</span>
        <ReactDataGrid
          ref={ node => this.grid = node }
          rowKey="id"
          columns={this._columns}
          rowGetter={this.rowGetter}
          rowsCount={this._rows.length}
          enableRowSelect="multi"
          minHeight={500}
          onRowSelect={this.onRowSelect}
          enableCellSelect={true}
          onCellSelected={this.onCellSelected}
          onCellDeSelected={this.onCellDeSelected} />
      </div>);
  }
}

const exampleDescription = (
  <div>
    <p>Define onCellSelected and onCellDeSelected callback handlers and pass them as props to enable events upon cell selection/deselection.</p>
    <p>if passed, onCellSelected will be triggered each time a cell is selected with the cell coordinates. Similarly, onCellDeSelected will be triggered when a cell is deselected.</p>
  </div>
);

module.exports = exampleWrapper({
  WrappedComponent: Example,
  exampleName: 'Cell selection/delesection events',
  exampleDescription,
  examplePath: './scripts/example21-cell-selection-events.js',
  examplePlaygroundLink: 'https://jsfiddle.net/f6mbnb8z/8/'
});

A link to a solution is welcome, but please ensure your answer is useful without it: [add context around the link](//meta.stackexchange.com/a/8259) so your fellow users will have some idea what it is and why it’s there, then quote the most relevant part of the page you're linking to in case the target page is unavailable. [Answers that are little more than a link may be deleted.](//stackoverflow.com/help/deleted-answers) — Papershine, Feb 20 '18 at 10:28
More current example from RDG docs [here](https://codesandbox.io/s/v0zj8qmw6y?from-embed) — America, Apr 25 '19 at 03:32

score 1 · Answer 2 · answered Jun 15 '22 at 21:00

1

For newer versions,

 formatter: ({ row, isCellSelected }) => {
        if (isCellSelected) {
            console.log(row['{col_name}']);
        }
        return row['{col_name}']};
    }

answered Jun 15 '22 at 21:00

Saikat halder

548
4
11

How do you select a single cell with react-data-grids and use the data in that cell elsewhere

2 Answers2