about deleting rows

[jcabrerazuniga]

Is there any command that after deleting a row or a set of rows will return me the list of all the deleted rows? not just their respective indexes?

[AllenFang]

Sorry, we only give the rowkeys only, does any case that you can't get the row with rowkey? I think this issues is very minor, I'll open it if there have any concern or critical issue, thanks

[jcabrerazuniga]

By having the content of the rows needed for deletion we can ensure that the data that is needed to be deleted will be deleted and no more, no less. Deleting is very critical but the use of the row keys is not and somehow it could be a great idea to be able to be independent of them as much as possible. In my case, I am using as a row key a column that doesn't exist in the DB so I could use the Boot Strap table. To solve this problem I had to create a state to contain all the selected rows. But, I had to trace all the transactions to destroy, add or delete elements from this set. I know, it looks minor, but given that the deletion of rows is very important topic then that capability to return the rows (including their content) could be paramount -as in my case-

[AllenFang]

ok, I'll try to add row for you, thanks

[XidongHuang]

Hi @AllenFang ,
I am using Redux with react-bootstrap-table now. It works fine for displaying data, but what if I want to delete data in database by deleting data in the table?

So base on examples, I am trying to get the key property of the data I am trying to delete, then send the request to back-end for deleting it in database.
I expect we can do like this:

    /*
    Get deleting data's properties(at least the key - primary key in db) and send to back-end api
    */
    handleDeleteButtonClick = (onClick) => {

        //Could I get the properties of the data I want to delete? like this:
        console.log('delete', onClick.props.data.key);

        //then use action like this??
        this.props.deleteAction(data.key) 
    }

    //About delete
    deleteButton = (onBtnClick) => {
        return (
            <btn className="btn btn-danger" onClick={e => 
this.handleDeleteButtonClick(onBtnClick)}>Delete Account</btn>
        )
    }
    
    options = {
       ...
        deleteBtn: this.deleteButton, //About delete
        
    }

    selectRowProp = {
        mode: 'checkbox',
    }


    render() {
        const data = _.isEmpty(this.props.data)? []: this.props.data;
        return (
            
             <BootstrapTable id='mdm-table' containerStyle={{'marginTop': '1em'}}  
                       data={data} striped hover search  condensed pagination 
                       deleteRow options={this.options} selectRow={this.selectRowProp}>
                            
              <TableHeaderColumn isKey tdStyle={{whiteSpace: 'normal', 'wordWrap': 'break-word'}} 
                      thStyle={{whiteSpace: 'normal'}}  
                      dataField="email" dataSort>Email</TableHeaderColumn>
                          ....

             </BootstrapTable>
 
        
        );
    }
...

I also check the issue: #1243, I think it is pretty similar with my purpose, but still don't understand the examples...

Please give some advises of it.

Thank you so much

[AllenFang]

Hi @XidongHuang, like I mention in #1243,

You can try to use remote mode, remote mode will let you to handle your data , particular for async operation on data.

so in the redux, you can:

React Component :

handleDeleteRow(row) {
    this.props.deleteAction(row);
}

render() {
    return (
      <BootstrapTable data={ this.props.data }
                      remote={ true }   << important
                      deleteRow={ true }
                      selectRow={ { mode: 'radio' } }
                      options={ { onDeleteRow: this.handleDeleteRow} }>
        <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
        <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
        <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
      </BootstrapTable>
    );
  }

Redux Action : I used redux-thunk as example

export function deleteAction(row) {
  return dispatch => {
    // do your ajax call here to delete the row
    // then dispatch a Action to reducers if success
  }
}

Reducer:

const initialState = {
  data: ....  // << this is the data for your table 
}

export default function(state = initialState, action) {
   switch(action.type) {
      case: "successful_delete":
         //   delete the row from current state and return it as new state
   }
}

Note: in remote mode, react-bootstrap-table just like a stateless table, you need to update table data in every action(delete, insert, update etc)

Let me know if you have any questions, thanks :)

[AllenFang]

@jcabrerazuniga, your requirement was fixed on v3.4.2, please have a look on it and let me know if the problem still remain. thanks

now, you can get whole rows on onDeleteRow and afterDeleteRow callback, they will be pass on last argument

[XidongHuang]

@AllenFang Thanks sir, I got the solution. Just found your example and it is very clear in the doc, I didn't think remote is the way to get the deleting data before.

And I have other questions here:

1. how can I replace the alert to my own method when I click the delete button? And if I confirm in my own method then start sending request to back-end for deleting data.

2. I am trying to custom my modalBody and do remoteInsert, but it looks like Redux cannot work with it.
   My code here:

//Table.js
...

createCustomModalBody = () => {
    return <RegisterForm />
}

onAddRow(row) {
    console.log('insert row', row);
}


options = {
    ...
    insertModalBody: this.createCustomModalBody,
    onAddRow: this.onAddRow
}

render() {
    return (
         <BootstrapTable
                 ....
                 insertRow={true}
                 remote={true}
                 options={this.options}>
                ....
          </BootstrapTable>


    )


}

in my RegisterForm.js:

//RegisterForm.js

...
getFieldValue() {
    return {test: 'test'}; //so this object should be printed in onAddRow in Table.js
}

render() {
    return (
        ....
    )
}

...

export default connect(null, {someMethods})(RegisterForm); //Throw `Custom InsertModalBody should implement getFieldValue...`

export default RegisterForm; --> //It can print {test: 'test'}
...

Or your original goal just want us export a pure component, and just pass functions and props if we want, like:

//Table.js
...
createCustomModalBody = () => {
    return <RegisterForm  isAccountExists={this.props.isAccountExists}/>
}

export default connect(mapStateToProps, {isAccountExists})(Table);
...

//RegisterForm.js
...
checkUserExists(e) {
   this.props.isAccountExists(this.state.xxx);
}
...

export default RegisterForm;

Please give some ideas about these,
Thanks for your time!

---

update:
I found the way to figure these two questions,

1. there is a handleConfirmDeleteRow api in react-bootstrap-table configure options, so if I want to use my method instead of the original alert method, I can do like:

...
confirmDelete = (next, dropRowKeys) => {
    console.log('delete', dropRowKeys); // will print "delete ${key of row you are trying to delete}"
    next();
}

options = {
...

handleConfirmDeleteRow: this.confirmDelete,
...
}

<BootstrapTable
deleteRow
remote={true}
options={this.options}
>
...
</BootstrapTable>

reference: del-row-custom-confirm.js

2. about use Redux with Modal:
   As I mentioned, if I directly use connect with the modalBody, then it will not find getFieldValue() method and throw Custom InsertModalBody should implement getFieldValue..., so the solution of mine is just pass values as parameters in it, and just export it without connect.

[jcabrerazuniga]

Thanks a lot @AllenFang. So, you mean that for the call back:

onDeleteRow(rows) {
// ...
}

there is another parameter like:

onDeleteRow(rows, fullrows) {
// ...
}

?
Yes, this is the case. So far the latest change you made is good enough for me!
thanks again!