📣 Dash AG Grid 31.2.0 Released

Dash Python
1

:tada: We are pleased to announce that Dash AG Grid V31.2.0 is out!

pip install dash-ag-grid==31.2.0

The Dash version numbers align with the version number of the AG Grid component it wraps. This will make it easier to know which version of the AG Grid documentation to use if you need more information.

Thank you to @jinnyzor, @AnnMarieW, @nathandrezner for contributiing to this release. Thank you to @Skiks for contributing to the Dash AG Grid docs.

Official Changelog :arrow_forward: Dash-AG-Grid v31.2.0

Changed

  • #273 increased the timeout for getApiAsync to 2 minutes. by @AnnMarieW
  • #281 webpack is now designed to build quicker, excludes node_modules and uses a different parser by @BSd3v (@jinnyzor)
  • #287 bumping to v31.2.1 for the grid by @BSd3v (@jinnyzor)

Added

  • #270 by @BSd3v (@jinnyzor)
    • support for eventListeners to be added to the grid that get loaded upon gridReady
    • eventListeners are added upon gridReady only, if you need to add or remove other event listeners, please use the getApi or getApiAsync methods
    • added default for selectedRows to be []

Fixed

  • #283/#290 by @BSd3v (@jinnyzor)
    • selectedRows can now be passed along with the rowData
  • #293 by @BSd3v
    • aggFuncs can now be passes as an object from the grid to be mapped to functions
    • fixes #278

CI

  • #288 update requirements files location by @ndrezn
  • #291 automate release generation by @ndrezn
  • #289 migrate to Github Actions rather than CircleCI by @ndrezn

New Contributors

Full Changelog: Comparing v31.0.1...v31.2.0 · plotly/dash-ag-grid · GitHub

:tada:New Feature: Display Tooltips for Truncated Cell Values

Note that the tooltip only displays for the athlete names that are truncated:

ag-grid-dynamic-tooltip

import dash_ag_grid as dag
from dash import Dash, html
import pandas as pd

app = Dash(__name__)

df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)


columnDefs = [
    {"field": "country", },
    {"field": "athlete",  "cellRenderer": "DynamicTooltip", "width": 100},
    {"field": "year"},
    {"field": "sport"},
]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="dynamic-tooltip",
            rowData=df.to_dict("records"),
            columnDefs=columnDefs,
            columnSize="sizeToFit",
            dashGridOptions={"tooltipShowDelay": 10},
        ),
    ],
)

if __name__ == "__main__":
    app.run(debug=True)

"""
Add the following to the dashAgGridComponentFunctions.js file in the assets folder.

---
var dagcomponentfuncs = (window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {});

dagcomponentfuncs.DynamicTooltip = props => {
    const wrapper = React.useRef(null);

    React.useEffect(() => {
        if (!wrapper.current) { return; }
        props.setTooltip(`Dynamic Tooltip for ${props.value}`, () => wrapper.current.scrollWidth > wrapper.current.clientWidth);
    }, [wrapper, props.setTooltip, props.value]);

    return React.createElement(
        'div',
        { ref: wrapper, style: { overflow: 'hidden', textOverflow: 'ellipsis' } },
        props.value
    );
}
"""

:tada: New Feature: Event Listeners

It’s now easier to add Event Listeners to add more custom features in the grid.

See the Events Reference sections of the AG Grid API documentation for more information.

Here’s one use-case. If you are migrating from DataTable, you may have used the DataTable’s active_cell property to trigger a Dash callback. This prop does not exist in Dash AG Grid, however, you can do the same thing by adding an event listener. This example adds a cellFocused event listener on gridReady. It will call a JavaScript function that puts details about the focused cell in a dcc.Store component. The callback is triggered by changes in the data prop of the dcc.Store.

ag-grid-event-list-focused-cell


from dash import Dash, dcc, Input, Output, State, callback, clientside_callback
import dash_ag_grid as dag
import pandas as pd
import dash_bootstrap_components as dbc

df = pd.read_csv('https://git.io/Juf1t')

app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container([
    dcc.Store(id="focused_cell_store", data={}),
    dbc.Label('Click on cell or use keyboard to navigate'),
    dag.AgGrid(
        id='focused_cell_grid',
        rowData=df.to_dict('records'),
        columnDefs=[{"field": i} for i in df.columns],
        eventListeners={'cellFocused': ['cellFocused(params, "focused_cell_store")' ]}
    ),
    dbc.Alert(id='focused_cell_container'),
])

@callback(Output('focused_cell_container', 'children'), Input('focused_cell_store', 'data'))
def update_graphs(focused_cell):
    return f"Focussed cell (or last focussed cell if the grid lost focus): {focused_cell}"


if __name__ == "__main__":
    app.run(debug=True)

"""
Put the following in the dashAgGridFunctions.js file in the assets folder

---------

var dagfuncs = (window.dashAgGridFunctions = window.dashAgGridFunctions || {});


dagfuncs.cellFocused = (e, storeId) => {
    const row = e.api.getDisplayedRowAtIndex(e.rowIndex)
    const cellValue = e.api.getValue(e.column, row)
    const cellData = {'value': cellValue, 'colId': e.column.colId, 'rowIndex': e.rowIndex}

     // Update dcc.Store with cellData
    dash_clientside.set_props(storeId, {data: cellData})
}

"""

Summary of new AG Grid features since the last release (dash-ag-grid 31.0.1) –

AG Grid 31.2.0

AG Grid 31.1.0

4 Likes