Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,12 @@ All notable changes to `dash-ag-grid` will be documented in this file.
This project adheres to [Semantic Versioning](https://semver.org/).
Links "DE#nnn" prior to version 2.0 point to the Dash Enterprise closed-source Dash AG Grid repo

## [Unreleased]

### Fixed
- [#346](https://github.com/plotly/dash-ag-grid/pull/346) Fixes issue [#347](https://github.com/plotly/dash-ag-grid/issues/347) where styling wasnt considering if the grid had rows without `data`. This is related to the alteration in [#332](https://github.com/plotly/dash-ag-grid/pull/332)


## [31.3.0] - 2024-11-22

### Fixed
Expand Down
2 changes: 1 addition & 1 deletion src/lib/fragments/AgGrid.react.js
Original file line number Diff line number Diff line change
Expand Up @@ -1125,7 +1125,7 @@ export default class DashAgGrid extends Component {
return (params) => {
for (const {test, style} of tests) {
if (params) {
if (params.data) {
if (params.node.id && params.node.id !== null) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why does this fix it?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When using enterprise and row grouping, the data is not present on the rows that are grouped. This was causing an issue when trying to apply styling based upon aggregate info.

However, removing data and just letting the values pass would break the app if the dev didnt have something like this in the condition: params.data ? params.data[column] : null. This was especially the case when dealing with infinite scroll.

Instead, by checking to see if the node.id exists and is not null allows an actual row to be tested, instead of rows that arent quite in existance.

if (test(params)) {
return style;
}
Expand Down
80 changes: 80 additions & 0 deletions tests/test_conditional_formatting.py
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
from dash import Dash, html, dcc
from . import utils
from dash.testing.wait import until
import pandas as pd


def test_cf001_conditional_formatting(dash_duo):
Expand Down Expand Up @@ -98,3 +99,82 @@ def test_cf001_conditional_formatting(dash_duo):
lambda: "color: orange" in grid.get_cell(0, 2).get_attribute("style"), timeout=3
)
assert "color: orange" in grid.get_cell(0, 0).get_attribute("style")

def test_cf002_conditional_formatting_enterprise(dash_duo):
app = Dash(__name__)

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

columnDefs = [
# Row group by country and by year is enabled.
{
"field": "country",
"rowGroup": True,
"hide": True,
"suppressColumnsToolPanel": True,
},
{
"field": "gold",
"filter": True,
"aggFunc": "sum",
"valueFormatter": {"function": "d3.format('(,.2f')(params.value)"},
"cellStyle": {

"styleConditions": [

{
"condition": f"params.value < 100",
"style": {"backgroundColor": "lightgreen"},
},

],
"defaultStyle": {"backgroundColor": "yellow"},
},

},
]

app.layout = html.Div(
[
dag.AgGrid(
id="grid",
columnDefs=columnDefs,
rowData=df.to_dict("records"),
defaultColDef=dict(
suppressAggFuncInHeader=True
),
dashGridOptions={"rowSelection":"multiple", "animateRows": False},
enableEnterpriseModules=True,
getRowStyle={
"styleConditions": [
{
"condition": "params.node.aggData ? params.node.aggData.gold < 3 : false",
"style": {"backgroundColor": "silver"},
}
]
},
),
]
)

dash_duo.start_server(app)

grid = utils.Grid(dash_duo, "grid")

until(
lambda: "United States" in grid.get_cell(0, 0).text, timeout=3
)

### testing styles
until(
lambda: "background-color: yellow" in grid.get_cell(0, 2).get_attribute("style"), timeout=3
)
until(
lambda: "background-color: lightgreen" in grid.get_cell(4, 2).get_attribute("style"), timeout=3
)
until(
lambda: "background-color: silver" in grid.get_row(6).get_attribute("style"),
timeout=3,
)
Loading