When rows are deleted from a filtered table, rows that do not meet the filter conditions may unexpectedly appear

Tags: #<Tag:0x00007efc620880f8> #<Tag:0x00007efc6208ff88>
#1

When rows are deleted from a filtered table, rows that do not meet the filter conditions may unexpectedly appear. How to fix this?

#2

Hi @wattabrothers1828

Thank you for contacting us. Can you please share a code demo and the exact steps how to reproduce this behavior?

#3

yes,
Lets assume there is huge data and many rows in a table.
When we try to put some filter based on the data of that column, a new filtered table will appear.
Now, if we try to delete a row in that filtered table, it’ll get deleted but another row which does not meet the filter values, will appear in the filtered table.

#4

I tried to get the same results in our filters example but I’m not able to. Can you replicate it here? https://jsfiddle.net/handsoncode/23s6dzmh/

#6

I have modified the code in this https://jsfiddle.net/k78r21mf/16/ example
So to reproduce the behavior,

  1. put some filters in first column, lets say-“chatterpoint & eidel”
    2.Now delete some rows by selecting the checkboxes in the row header.

In this example, extra rows after deleting some rows are not appearing which is what I need for my project.
But in my project, whenever i delete some rows, new rows will appear.
I want that to get fixed.

#7

@wattabrothers1828

If this functionality works in the example you sent I will need the example where this behavior is replicable. I can’t help much without being able to reproduce it.

#8

Hey, I have created a similar functionality where rows that do not meet the filter conditions will appear.
https://codesandbox.io/p/sandbox/demo-cfvht8?file=%2Fsrc%2Findex.tsx%3A25%2C54

In the table, apply filter to the country column and select records where country=“Angola” & “Bangladesh”.
Now, delete any one row. Then you’ll see, a new row is being added to the filtered table.
Help me in fixing it.
Thanks

#9

@wattabrothers1828

Thank you for the example. Now I’m able to replicate it. It seems that your custom logic for deleting selected rows is responsible for this behavior as you are setting new data based on the phsycial indexes. Filtering plugin doesn’t actually remove filtered rows, but hide them, and that’s why when you perform the removing operation the data is swapped with the values from existing indexes.

1 Like
#10

Hey, I tried to modify the code but it didn’t work.
Can you modify the deletion logic -

const deleteSelectedRows = () => {

const hotInstance = hotTableRef.current.hotInstance;

const selectedRowIndices = Array.from(selectedRows).map(index => hotInstance.toPhysicalRow(index));

const newData = data.filter((_, index) => !selectedRowIndices.includes(index));

const deleted = selectedRowIndices.map(index => ({ index, row: data[index] }));

setData(newData);

setSelectedRows(new Set()); // Clear selected rows after deletion

setDeletedRows(deleted); // Store deleted rows with their indices

};

So this is the deletion function with my logic, can you modify this so that rows that do not meet filter condition will not appear!.
Also, I have retrieve function as well (That explains about the storing of deleted rows indexes).

#11

Hey, can you look into this?

#12

Hi @wattabrothers1828

I’m not able to perform complex code review of your custom logic without knowing your support plan. Please send me your license ID at support@handsontable.com so I can check your current support plan.

#13

We are evaluating the product to use in our tool. So, we dont have support plan yet. If it works, we are planning to use it in production.

#14

@wattabrothers1828

I understand, but my possibilities are restricted within the pre-sales support. I can continue with general guidance, but for more specific problems you can isolate the encountered issues so they are easily replicable with the minimal code involved.

#15

Hey, I have created a minimal code which replicates the issues I encounter. Please go through the deletion and retrieve function and try to modify the code so that rows that do not meet filter conditions should not appear.!
https://codesandbox.io/p/sandbox/demo-cfvht8?file=%2Fsrc%2Findex.tsx%3A87%2C26
Thanks

#16

@wattabrothers1828

I checked your example, but that’s still a custom logic based on deleting the rows and swapping data, and as I mentioned, filtering plugin just hide the filtered rows. So, when the plugin is active, and is supposed to show, let’s say, 2 values and then you delete them from the dataset it will swap them with the data you are setting in your method.

#17