plotly / plotly/dash

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

Abierto
#2,145 1 comentario 1 reacción 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

bug dash-data-table P3
Lenguaje dominante
Python
Estrellas
24.4k
Forks
2.3k
Merge medio
2 d 7 h
PR fusionados (30 d)
13

Descripción

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

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

Ejecuta la reproducción usando dash_table.DataTable con fixed_rows={'headers': True} y filter_action='native', partiendo del ejemplo enlazado Backend Paging with Filtering y del import de webserver.markdown.data_table.MarkdownDataTable. Rastrea el comportamiento de las filas fijas mientras introduces un valor de filtro largo; se considera terminado cuando las filas de la tabla permanecen fijas en lugar de desplazarse hacia la izquierda.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
python
Área
data-visualization, frontend
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.