I have resolved this problem. The workaround is here.

so onClick of a button I called my showActive() function which is responsible to make the column ( 1st in my case ) editable exactly as react data grid does.

1st make the column editable, ReactDataGrid takes "editable" as input function. allowEdit is to check if this column is editable. For me I wanted to make the cell editable only upon new row creation.

Create new obj to insert as the new row in the table. Like this -

 let newRow = [
                        created: milliseconds,
                        absPath: this.props.dirSelectedPath,
                        modified: milliseconds,
                        size: 0,
                        filename: folderName,
                        type: "FILE_DIR",
                        allowEdit: true

Then below is the column configuration of the editable cell.

const columns = [
        key: 'name',
        name: 'Name',
        resizable: true,
        sortable: true,
        filterable: true,
        editable: function (rowData) {
            return rowData.allowEdit ? true : false;

Now you have to write a function to show the cell highlighted and active. To do so I called the same function as react data grid calls.

get the handle of grid.

<ReactDataGrid showActive={this.showActive.bind(this)} rowsCount={this.getSize()} ref={node => this.grid = node} {...this.props } />

showActive() {
        let length = this.getSize(); // get the length of the grid i.e number of rows
        let obj = { idx: 0, rowIdx: length };
        let promise = new Promise(function (resolve, reject) {
            if (this.grid) {
                resolve("this worked!");

        promise.then(function () {
        }.bind(this), function () {

hope the helps.

Related Query

More Query from same tag