plotly / plotly/dash

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

Aperta
#2,145 1 commento 1 reazione 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

bug dash-data-table P3
Lingua principale
Python
Stelle
24.4k
Fork
2.3k
Merge medio
2g 7h
PR unite (30g)
13

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Esegui la riproduzione usando dash_table.DataTable con fixed_rows={'headers': True} e filter_action='native', partendo dall'esempio collegato Backend Paging with Filtering e dall'import di webserver.markdown.data_table.MarkdownDataTable. Traccia il comportamento delle righe fisse durante l'inserimento di un valore di filtro lungo; l'attività è completata quando le righe della tabella rimangono fisse invece di spostarsi verso sinistra.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
python
Ambito
data-visualization, frontend
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.