Dash Table Expirements - Filter search bar hides single row result

Dash Python
1

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

all_data
all_data.png1902×940 115 KB

Searched for the unique entry and it looks like nothing is found.
hidden_below
hidden_below.png1902×940 109 KB

Where as its hidden behind the filter search
closing
closing.png1902×940 108 KB

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

1 Like
2

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:

3

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

4

@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
5

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