plotly / plotly/dash

Fixed_rows headers aren't fixed when filtering with large amounts of data

Open
#2,145 1 comment 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

bug dash-data-table P3
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
ezgif-4-7a7eb0a3cb

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.