I have a redux store and that is the data source for my handsontable in my react component.
I’m facing an issue that is when I filter a column and try to remove all the rows with a custom button (which is using alter function to remove the data). So when the remove button is pressed on all of the selected rows in a filtered column will indeed remove the data. But when all the data is removed and if any extra filters are there to that column it will add the other filter value’s data to the deleted row and doesn’t make it empty. Is this a known issue?
Here is the sample gif which I’m facing.
My assumption is here that when we filter and if I remove a few row(s) from the filtered data, the removed previous row(s) will still be there (without data). So to fill it, the non filtred row(s) will be populated/occupied in place of those deleted rows, If any rows are present in the table. If not it will be empty. I could be wrong also.
To see the issue, filter the device with 2-3 values which should display 2-3 rows. And then select all the rows and press “Remove Selected Rows” button. When button is pressed it will ask for confirmation. When you press ok it removes the data but add’s the other data as well.
The code is little complex.
Actually I found what is causing the issue but don’t know how to fix. I would need your suggestion on this. I’ll explain the code flow.
We need to select which are rows he wants to remove and then he will press the “Remove Selected Rows” which is in “HandsonTable” component.
When the “Remove Selected Row” button is clicked “getSelectedDataToDeleteRows” function will be called. And from that function, I dispatch a Redux action to open the confirmation modal and also dispatch a Redux action to set which are the rows we need to remove from handsontable.
And when the modal opens “ConfirmRemoveRowModal” component will be opened. To this component, I’m passing HandsonTable’s reference. And when the modal opens and the “ok” button is pressed “handleOk” will be called. Again in the “handleOk” function I’m dispatching an action to the action creator i.e. “removeDataFromHandsonTable”.
In the “removeDataFromHandsonTable” action creator it’s causing the problem.
Because when initially the “Remove Selected Rows” button is pressed I don’t want the user to press that button again when the deletion is in progress. Delete in progress means the data will be passed to the back end server to delete those selected rows. So during that time I will disable the button by dispatching another action in “removeDataFromHandsonTable” action creator Which causes to re render the handsontable component. Which is causing the issue.
@aleksandra_budnik I would definitely need your help and suggestions on this. Please help me.
Actually the problem here is when the HandsonTable component re-renders it will mess it up. So I was able to make the “Remove Selected Rows” button to a separate component. I have a requirement is that when deletion or modification is done and sent to the backend server. the handsontable should show a loading indicator. I have a component and state for that in redux. So even if that loading indicator changes in the handsontable component will re-render mess it up. I don’t know why when handsontable component rerenders and things go wrong.
If you see the sample code in HandsonTable component. I have a state btnLoading if that changes the filter + alter_row will cause the issue. It should behave like that.
@aleksandra_budnik I have fixed the code in codesandbox. Please look into it once.
So actually I have few state in redux store and HandsonTable component has the react wrapper for handsontable. so if I filter and try to remove the row will cause the HandsonTable to re render the component. Which is causing the issue. If HandsonTabe component re renders while removing the rows using alter function, it actually messes up the filter + alter remove_row functionality.
Try to filter few of the values from the demo and try to remove all the from the filtered data. So when all the rows has been removed, it should be empty right? But it actually adds the non filtered data to the to the table. Please try the demo once.
We added afterInit={function() { this.loadData(handsonData); }} and removed data: handsonData, from settings because it updates the state of the entire application. It also updates hot, which calls loadData with initialized settings (minus deleted rows).
