bug in Infinite Scroll - column wrapText has no effect

While coding with infinite scrolling I had encountered a problem with columnDefinition wrapText that takes no effect.

attached is the json data:
data-short.json

Code with and without "infinite scroll"

`
import json
import dash
import warnings
import dash_bootstrap_components as dbc
import pathlib
import dash_ag_grid as dag
from dash import Dash, dcc, html
from dash import html, dcc, callback, Input, Output, State, ctx

rows = json.load(open('data-short.json', 'r'))

page_number = 0
BUFFER_SIZE = 100

cell_conditional_style = {
"styleConditions": [
{"condition": "params.value == 'בוצע'" , "style": {"backgroundColor": "#196A4E", "color": "white" }},
{"condition": "params.value == 'פתור'" , "style": {"backgroundColor": "#196A4E", "color": "white" }},
{"condition": "params.value == 'סיכון פתור'", "style": {"backgroundColor": "#196A4E", "color": "white" }},
{"condition": "params.value == 'תקול'" , "style": {"backgroundColor": "#800000", "color": "white" }},
{"condition": "params.value == 'בריצה'" , "style": {"backgroundColor": "#d2e034", "color": "black" }},
{"condition": "params.value == 'טרם החל'" , "style": {"backgroundColor": "dark" , "color": "crimson"}},
{"condition": "params.value == 'קריטי'" , "style": {"backgroundColor": "crimson", "color": "white" }},
]
}
defaultColDef = {
# "filter" : True,
# "floatingFilter": True,
"resizable" : True,
"sortable" : True,
"editable" : False,
"minWidth" : 1,
'wrapText' : True,
'autoHeight' : True,
'wrapHeaderText' : False,
'autoHeaderHeight': True,
"cellStyle" : cell_conditional_style,
}
taskTableColumnDef = [
{
'headerName': "_id",
'field': "_id",
'hide': True,
'suppressToolPanel': True
},
{
"headerName": "#",
"field": "row_number",
'width': 5,
'cellStyle': {
'textAlign' : 'center',
'white-space': 'normal',
'word-break' : 'break-word',
'background' : '#222529',
'color' : 'whitesmoke',
}
},
{
"headerName": "נושא",
"field": "subject",
'initialWidth': 55,
'wrapText': True,
'autoHeight': True,
'cellStyle': {
'textAlign' : 'right',
'direction' : 'rtl',
'white-space': 'normal',
'word-break' : 'break-word',
},
},
{
"headerName": "סוג",
"field": "reference.doctype",
'width': 10,
'cellStyle': {
'textAlign': 'center',
'direction': 'rtl',
'white-space': 'normal',
'word-break': 'break-word'
}
},
{
"headerName": "סימוכין",
"field": "reference.sheet",
'width': 15,
'cellStyle': {
'textAlign': 'right',
'direction': 'rtl',
'white-space': 'normal',
'word-break': 'break-word'
}
},
{
"headerName": "WMS",
"field": "wms_object.domain",
'width': 10,
'cellStyle': {
'textAlign': 'right',
'direction': 'rtl',
'white-space': 'normal',
'word-break': 'break-word'
}
},
{
"headerName": "אחראי",
"field": "full_name",
'width': 12,
'cellStyle': {
'textAlign': 'right',
'direction': 'rtl',
'white-space': 'normal',
'word-break': 'break-word'
}
},
{
"headerName": "סטאטוס",
"field": "status",
'width': 10,
},
{
"headerName": "עדיפות",
"field": "priority",
'width': 10,
},
{
"headerName": 'תג״ב',
"field": "due_date",
'width': 12,
'cellStyle': {
'textAlign' : 'center',
'white-space': 'normal',
'word-break' : 'break-word',
'background' : '#222529',
'color' : 'whitesmoke',
}
},
]
app_button = html.Div(
dbc.Button(
'please enter',
id='button',
outline=True,
color='primary',
), className = 'btn-lg d-grid m-0'
)
datatable = dag.AgGrid(
id='task-table',
columnSize='sizeToFit',
className='ag-theme-balham headers1',
columnDefs=taskTableColumnDef,
defaultColDef=defaultColDef,
# getRowStyle=getRowStyle,
rowModelType='infinite',
dashGridOptions={
'undoRedoCellEditing' : True,
'enableRtl' : True,
'rowSelection' : 'single',
'verticalAlign' : 'middle',
'ensureDomOrder' : True,
##### Infinite Scroll
'rowBuffer' : 0,
'maxBlocksInCache' : 1,
'cacheBlockSize' : BUFFER_SIZE,
#####
},
# style={'height': '100%'}
style={'height': 350}
)
root = pathlib.Path(file).parent.parent
app = Dash(
name,
assets_folder=root.joinpath('assets').as_posix(),
prevent_initial_callbacks=True,
suppress_callback_exceptions=True,
)
server = app.server
app.layout = dbc.Container([
dcc.Store(id='tasks-rowData'),

html.Div(
    [
        app_button,
        dbc.Row(
            [
                dbc.Col(
                    datatable,
                    class_name='col-12'
                ),
            ]
        ),
    ],
    lang='he', dir='rtl',
)

],
fluid=True,
)
@app.callback(
Output(component_id='tasks-rowData', component_property='data' ),
Input (component_id='button' , component_property='n_clicks'),
)
def activate(n):
if ctx.triggered_id == 'button':
return rows
else:
return dash.no_update

@callback(
Output('task-table' , 'getRowsResponse'),

Input ('task-table'   , 'getRowsRequest'),
Input ('tasks-rowData', 'data'          ),

)
def infinite_scroll(request, row_data):
if row_data:
# partial = row_data[request['startRow']: request['endRow']]

    return {
        'rowData' : row_data,
        'rowCount': len(row_data),
    }
else:
    return dash.no_update

if name == 'main':
app.run_server(port=8050, debug=True)

`

`import os
import json
import dash
import warnings
import dash_bootstrap_components as dbc
import pathlib
import dash_ag_grid as dag
import schemas.tm_services as sv
from dash import Dash, dcc, html
from dash import html, dcc, callback, Input, Output, State, ctx

rows = json.load(open('data-short.json', 'r'))

page_number = 0
task_db = sv.task_db
BUFFER_SIZE = 100

cell_conditional_style = {
"styleConditions": [
{"condition": "params.value == 'בוצע'" , "style": {"backgroundColor": "#196A4E", "color": "white" }},
{"condition": "params.value == 'פתור'" , "style": {"backgroundColor": "#196A4E", "color": "white" }},
{"condition": "params.value == 'סיכון פתור'", "style": {"backgroundColor": "#196A4E", "color": "white" }},
{"condition": "params.value == 'תקול'" , "style": {"backgroundColor": "#800000", "color": "white" }},
{"condition": "params.value == 'בריצה'" , "style": {"backgroundColor": "#d2e034", "color": "black" }},
{"condition": "params.value == 'טרם החל'" , "style": {"backgroundColor": "dark" , "color": "crimson"}},
{"condition": "params.value == 'קריטי'" , "style": {"backgroundColor": "crimson", "color": "white" }},
]
}
defaultColDef = {
"resizable" : True,
"sortable" : True,
"editable" : False,
"minWidth" : 1,
#'wrapText' : True,
#'autoHeight' : True,
'wrapHeaderText' : False,
'autoHeaderHeight': True,
"cellStyle" : cell_conditional_style,
}
taskTableColumnDef = [
{
'headerName': "_id",
'field': "_id",
'hide': True,
'suppressToolPanel': True
},
{
"headerName": "#",
"field": "row_number",
'width': 5,
'cellStyle': {
'textAlign' : 'center',
'white-space': 'normal',
'word-break' : 'break-word',
'background' : '#222529',
'color' : 'whitesmoke',
}
},
{
"headerName": "נושא",
"field": "subject",
'initialWidth': 55,
'wrapText' : True,
'autoHeight' : True,
'cellStyle': {
'textAlign' : 'right',
'direction' : 'rtl',
'white-space': 'normal',
'word-break' : 'break-word',
},
},
{
"headerName": "סוג",
"field": "reference.doctype",
'width': 10,
'cellStyle': {
'textAlign': 'center',
'direction': 'rtl',
'white-space': 'normal',
'word-break': 'break-word'
}
},
{
"headerName": "סימוכין",
"field": "reference.sheet",
'width': 15,
'cellStyle': {
'textAlign': 'right',
'direction': 'rtl',
'white-space': 'normal',
'word-break': 'break-word'
}
},
{
"headerName": "WMS",
"field": "wms_object.domain",
'width': 10,
'cellStyle': {
'textAlign': 'right',
'direction': 'rtl',
'white-space': 'normal',
'word-break': 'break-word'
}
},
{
"headerName": "אחראי",
"field": "full_name",
'width': 12,
'cellStyle': {
'textAlign': 'right',
'direction': 'rtl',
'white-space': 'normal',
'word-break': 'break-word'
}
},
{
"headerName": "סטאטוס",
"field": "status",
'width': 10,
},
{
"headerName": "עדיפות",
"field": "priority",
'width': 10,
},
{
"headerName": 'תג״ב',
"field": "due_date",
'width': 12,
'cellStyle': {
'textAlign' : 'center',
'white-space': 'normal',
'word-break' : 'break-word',
'background' : '#222529',
'color' : 'whitesmoke',
}
},
]
app_button = html.Div(
dbc.Button(
'please enter',
id='button',
outline=True,
color='primary',
), className = 'btn-lg d-grid m-0'
)
datatable = dag.AgGrid(
id='task-table',
columnSize='sizeToFit',
className='ag-theme-balham headers1',
columnDefs=taskTableColumnDef,
defaultColDef=defaultColDef,
# getRowStyle=getRowStyle,
# rowModelType='infinite',
dashGridOptions={
# 'rowHeight' : 35,
# 'enableCellTextSelection': True,
'undoRedoCellEditing' : True,
'enableRtl' : True,
'rowSelection' : 'single',
'verticalAlign' : 'middle',
'ensureDomOrder' : True,
##### Infinite Scroll
# 'rowBuffer' : 0,
# 'maxBlocksInCache' : 1,
# 'cacheBlockSize' : BUFFER_SIZE,
#####
},
style={'height': 350}
# style={'height': '100%'}
)
root = pathlib.Path(file).parent.parent
app = Dash(
name,
assets_folder=root.joinpath('assets').as_posix(),
# use_pages=True,
prevent_initial_callbacks=True,
suppress_callback_exceptions=True,
)
server = app.server
app.layout = dbc.Container([
dcc.Store(id='active-user'),
dcc.Store(id='record-id' ),
dcc.Store(id='owner-name' ),
dcc.Store(id='testrun-selected-row'),
dcc.Store(id='tasks-rowData'),
#
dcc.Location(id="url" , refresh=True),
dcc.Location(id="url-1", refresh=True),

html.Div(
    [
        app_button,
        dbc.Row(
            [
                dbc.Col(
                    datatable,
                    class_name='col-12'
                ),
            ]
        ),
    ],
    lang='he', dir='rtl'
)

],
fluid=True,
)
@app.callback(
Output(component_id='task-table' , component_property='rowData' ),
Input (component_id='button' , component_property='n_clicks'),
)
def activate(n):
if ctx.triggered_id == 'button':
return rows
else:
return dash.no_update

if name == 'main':
app.run_server(port=8050, debug=True)
`

Commencez par exécuter la reproduction fournie de Dash et dash_ag_grid avec data-short.json, en comparant les configurations infinite-scroll et non-infinite. Examinez le comportement de la grille autour de wrapText et autoHeight ; la tâche est terminée lorsque le contenu des cellules avec retour à la ligne produit le même effet visible lorsque le défilement infini est activé.