[Bug] Conflict between (fixed_rows & fixed_columns used together) and filter_action = 'native'

[Dekermanjian]

When fixed_rows and fixed_columns are used together and you filter the table with a query that does not exist in that particular column the resulting filtered table gets distorted.

import dash
import dash_table
import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')

app = dash.Dash(__name__)

app.layout = dash_table.DataTable(
    id='table',
    columns=[{"name": i, "id": i} for i in df.columns],
    data=df.to_dict('records'),
    filter_action  = 'native',
    fixed_columns = {'headers':True, 'data':1},
    fixed_rows = {'headers':True, 'data':0},
    style_header={'fontWeight': 'bold','border': 'thin lightgrey solid','backgroundColor': 'rgb(100, 100, 100)','color': 'white', 'minWidth':'100%', 'maxWidth':'100%'},
    style_cell={'fontFamily': 'Open Sans','textAlign': 'left','width': '150px','minWidth': '100%','maxWidth': '100%','whiteSpace': 'no-wrap','overflow': 'visible','textOverflow': 'wrap'},
    style_table = {'overflowX':'scroll', 'overflowY':'scroll', 'minWidth':'100%', 'maxHeight':'400px', 'maxWidth':'100%'}
)

if __name__ == '__main__':
    app.run_server(debug=True)

before filtering for the value 0 as shown in the image

And this is after hitting the return key to filter for values of 0, which do not exist in that column

I am using the latest version of Dash.

[AnnMarieW]

Edit: I previously posted that this was the same issue as # 833, but it is not.

I was able to narrow down the issue: It seems that the distorted table only happens when there is no data in the table and the 'data' of the fixed_columns property is greater than 0

This works
fixed_columns = {'headers':True, 'data':0},

This doesn't
fixed_columns = {'headers':True, 'data':1},

It is not related to the filter. With the data property commented out, you will see the same results as having the filter_action='native' and the table filtered so there is no data.

I also found that the fixed_rows works in all cases, so that doesn't seem to be the problem.

Here is a simplified example. I hope it helps:

import dash
import dash_table
import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv')

app = dash.Dash(__name__)

app.layout = dash_table.DataTable(
    id='table',
    columns=[{"name": i, "id": i} for i in df.columns],
   # data=df.to_dict('records'),
   # filter_action  = 'native',
    fixed_rows = {'headers':True, 'data':1},

    #  'data': n  where n  >  0,  squishes the table if there is no data
    # This works:
     fixed_columns = {'headers':True, 'data':0},
    # This doesn't:
    # fixed_columns = {'headers':True, 'data':2},
)

if __name__ == '__main__':
    app.run_server(debug=True)

[Dekermanjian]

Hi, yes you are correct in that fixed_columns data property needs to be greater than 0 for the issue to present itself. But when the fixed_columns data property is set to 0, there isn't any fixed columns. I think that means that the fixed_columns property causes the issue after you filter the data for and the result is an empty table. Which I agree with you is the same as #833 however that issue is related to the fixed_rows property not the fixed_columns property. #833 has no fixed_columns property in the example code.

[AnnMarieW]

I agree that the the fixed_column is causing the bug. I was just trying to narrow the scope to make it easier to fix.

I could not reproduce the problem with fixed_fixed rows, so it doesn't seem to matter that fixed_rows and fixed_columns are used together. Are you able to produce the same error when only using fixed_rows? Also it doesn't seem to be a problem with the filter, it's just about whether the table has any data or not.

I also did not look closely enough at # 833 I just assumed the smaller table was the same issue. But #833 is about the column headers being truncated or overflowing to the next line, and looks to be the same as # 432

[Dekermanjian]

Yes, I agree with you the issue is not with the filter. The issue is with the fixed_column. For the fixed_row, I am able to reproduce the error in #833, which is similar but not exactly the same as the error I describe in this post.

[Dekermanjian]

@AnnMarieW
[Possible Solution]

I would like to update this post, with a new discovery. It seems that when fixing the table header and the first column, after filtering a column where the filter returns an empty table the min width style property is set to 0px in the remaining <tr> <th> elements of the fixed header and the fixed filtering row. Changing this value from 0px to a larger value will allow the fixed headers to appear again. I believe that setting the min-width of the <th> elements of the fixed header <tr> and filtering <tr> to whatever the original width of those columns were in the pre-filtered table would solve this issue.