Fixed_rows headers aren't fixed when filtering with large amounts of data
Nobody has claimed this yet.
- Dominant language
- Python
- Stars
- 24.4k
- Forks
- 2.3k
- Avg merge
- 2d 7h
- Merged PRs (30d)
- 13
Description
Describe your context
Using the datatable with filters to specify data shown in Backend Paging with Filtering
dash 2.3.1
dash-core-components 2.0.0
dash-daq 0.5.0
dash-html-components 2.0.0
dash-table 5.0.0
- OS: [ Microsoft Windows [Version 10.0.19044.1766] ]
- Browser [ chrome 103.0.5060.114 (Official Build) (64-bit) ]
Describe the bug
If I run the example of filtering and adding fixed_rows={'headers': True} and then enter large amounts of text into the filter section the entire row shifts to the left of the screen. I reproduced this using the code shown below
import sys
sys.path.append('python')
sys.path.append('webroot-dash')
from webserver.markdown.data_table import MarkdownDataTable
from dash import Dash, dash_table
from dash.dependencies import Input, Output
import datetime
import pandas as pd
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')
df = df[['continent', 'country', 'pop', 'lifeExp']] # prune columns for example
df['Mock Date'] = [
datetime.datetime(2020, 1, 1, 0, 0, 0) + i * datetime.timedelta(hours=13)
for i in range(len(df))
]
app = Dash(__name__)
app.layout = dash_table.DataTable(
fixed_rows={'headers': True},
columns=[
{'name': 'Continent', 'id': 'continent', 'type': 'numeric'},
{'name': 'Country', 'id': 'country', 'type': 'text'},
{'name': 'Population', 'id': 'pop', 'type': 'numeric'},
{'name': 'Life Expectancy', 'id': 'lifeExp', 'type': 'numeric'},
{'name': 'Mock Dates', 'id': 'Mock Date', 'type': 'datetime'}
],
data=df.to_dict('records'),
filter_action='native',
style_table={
'height': 400,
},
style_data={
'width': '150px', 'minWidth': '150px', 'maxWidth': '150px',
'overflow': 'hidden',
'textOverflow': 'ellipsis',
}
)
if __name__ == '__main__':
app.run_server(debug=True)
Expected behavior
Datatable rows stay fixed in place whilst text/data is entered into the filter
Screenshots

Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Run the reproduction using dash_table.DataTable with fixed_rows={'headers': True} and filter_action='native', starting from the linked Backend Paging with Filtering example and the webserver.markdown.data_table.MarkdownDataTable import. Trace the fixed-row behavior while entering a long filter value; done means the table rows remain fixed instead of shifting left.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- python
- Domain
- data-visualization, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100