plotly / plotly/dash

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

Offen
#2,145 1 Kommentar 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

bug dash-data-table P3
Vorherrschende Sprache
Python
Sterne
24.4k
Forks
2.3k
Ø Merge
2 T. 7 Std.
Gemergte PRs (30 T.)
13

Beschreibung

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

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Führe die Reproduktion mit dash_table.DataTable unter Verwendung von fixed_rows={'headers': True} und filter_action='native' aus, ausgehend vom verlinkten Backend Paging with Filtering-Beispiel und dem Import von webserver.markdown.data_table.MarkdownDataTable. Verfolge das Verhalten der fixierten Zeilen, während ein langer Filterwert eingegeben wird; abgeschlossen ist die Aufgabe, wenn die Tabellenzeilen fixiert bleiben, anstatt nach links zu rutschen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
python
Bereich
data-visualization, frontend
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.