Black Lives Matter. Please consider donating to Black Girls Code today.

Dash Table Expirements - Filter search bar hides single row result

The filter in the tables is amazing just a small issue I am running into and cannot seem to fix it.
Using the same code as posted in the help guide for upload components, but just adding filterable=True to the table.
Just uploaded a CSV with duplicate and a unique entry. Here is how it looks like


Searched for the unique entry and it looks like nothing is found.

Where as its hidden behind the filter search

Will really appreciate any help to get this fixed. Thanks in advance

1 Like

Thanks for reporting @meetnadish! This indeed looks like a bug and I don’t think that there is any workaround at the moment. I’d accept a PR that fixes this :+1:

Thanks for the response. Never done a PR earlier, however will try my best to do my bit for Dash.

@chriddyp I can see why the issue is occuring and a probable fix. However as I have never done a pull request and neither familiar with the process, posting it here
File : src/components/DataTable.react.js

getMinHeight() {
    if (this.getSize() < 10) {
        return (this.getSize() * 35) + 35 + 15; // 35px extra edded for the filter box and 15px added for padding
    }
    return (typeof DataTable.defaultProps.min_height != 'undefined') ? DataTable.defaultProps.min_height : 350;
}

The height calculation is short by 35px, maybe header was not taken into account. Anyways adding 35 or making it 70(return (this.getSize() * 35) + 70 + 15;) to the retrun values fixes the issue and the table height is properly set.

EDIT : It looks like a PR is already there

1 Like

Another PR for the fix in https://github.com/plotly/dash-table-experiments/pull/50, should be available in v0.6.0 later today.