question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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 Screen Shot 2020-10-06 at 8 48 46 AM

And this is after hitting the return key to filter for values of 0, which do not exist in that column Screen Shot 2020-10-06 at 8 48 54 AM

I am using the latest version of Dash.

Issue Analytics

  • State:open
  • Created 3 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
Dekermanjiancommented, Jul 19, 2021

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

0reactions
Dekermanjiancommented, Oct 22, 2020

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Possible bug in destroy with FixedColumns - DataTables
When I do a destroy on a datatable with FixedColumns configured on it, I am getting an error. This doesn't happen if I...
Read more >
Bug in datatable with caption and fixedRownames
Not a complete answer, but... The problem is caused by fixedColumns = list(leftColumns = 1) . Comment it out, and the table displays ......
Read more >
datatables.net-fixedcolumns - npm
FixedColumns provides the ability to fix one or more columns to the left and / or right hand side of a DataTable that...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found