React-data-grid: Possible to delete the row?

[eric379990]

Just one question about: is there some API to delete one row in data grid? thanks.

[jpdriver]

hey @eric379990 there's no built-in API right now, but we have a couple of grids internally that have the ability to delete their rows.

the gist is basically you clone your this.state.rows object, remove the rowIdx you want, and then call this.setState({ rows: modifiedRows });

there are a couple of ways to do get the right rows:-

• you could have a Delete button on your row and handle the delete in your onClick function
• you could enableRowSelect for the grid and find rows where isSelected === true
• if you're using a Flux architecture, you can store the RowState in a property of the row and then look up rows where row.RowState === RowStates.Deleted

ping me back if you need more help or want a proper example :smile:

[eric379990]

Thanks so much!

[ahazut]

Hello jpdriver,
Can you please provide an example of adding delete button.
Thanks!

[ahazut]

In case someone need...

import {Button} from 'react-bootstrap';

_rows.push({
        key:location.id,        
        delete:<Button type="button" bsStyle="danger" bsSize="xsmall" title="Delete" onClick={this.handleDeleteRow.bind(this,location.id)}>x</Button>
      })

handleDeleteRow=(id)=>{
      ...
    };

[peterpme]

Hey @jpdriver and @ahazut !

I'm trying to figure this out on my own right now and it's been a bit troubling. Would someone mind posting a more extensive example?

Thank you again

[ayushsinghvi92]

@jpdriver could you give a more extensive example please?

[smilingpigs]

any update on this?

[bkniffler]

Another even better and more simple way is

// define a getColumns function in your class that renders the grid
getColumns = () => {
    return [{
      name: 'ID',
      key: 'id',
    }, {
      name: 'Name',
      key: 'name',
    }, {
      name: 'Actions',
      key: '$delete',
      getRowMetaData: (row) => row,
      formatter: ({ dependentValues }) => (
        <span>
          <a href="javascript:;" onClick={() => this.deleteRows(dependentValues.id)}>Delete</a>
        </span>
      ),
    }];
  }

[hestacio]

I just implemented my own delete row button as well. Here is my delete function. I'm using the selectable row example, hence I'm using the this.state.selectedIds

my columns
columns : [
{
key: 'service',
name: 'Services',
draggable: true
},
{
key: 'detail',
name: 'Details',
editable: true,
draggable: true
}
]

my rowKey is 'service'

_delete() {
let rows = this.state.rows.slice();
this.state.selectedIds.map( function (value) {
rows.forEach(function(result, index) {
if(result['service'] === value) {
rows.splice(index, 1);
}
});
});
this.setState({ rows });
}

[BensonLiao]

@bkniffler Thanks for advice, and I will give a little more example based on this.
Here's the deleteRows function:

deleteRows = (id) => {
    let rows = this.state.rows.slice()
    rows = rows.filter(row => row.id !== id)
    this.setState({ rows })
}

You can simply call Array.prototype.filter() to remove it from the current rows and update the state
Actually in my real application, I pass the whole obj to do more things :)