Styling pinnedBottomRow

Hi All,
I’m trying to differentiate my pinned bottom row.
I found that cellRendererSelector must be put to defaultColDef.
but frankly speaking no idea how to use it.
I just want pinned row to to surpass any styling of other rows with bigger font and blue color.

'cellRendererSelector': {"function": "rowPinningBottom(params)"}

I’d be gratefull to pointing me where to find, in docs, rules for using js in Dash…
and Marry Christmass to everyone :wink:

Hi @acidkans

You can find an example in the docs here:

I have questions regarding styling and valueGetter of pinned row.

  1. Styling
    I have simple styling of columns, based on being empty or not.
    how to set completely different styling for pinned row.
    image
get_row_style = {
 "styleConditions":[
       {
  "condition": "!(params.data.invoice_number == null) ",
  "style": {"backgroundColor": "#2aa198"},
  "condition": "(params.node.rowPinned == 'bottom') ",
  "style": {"backgroundColor": "#cb4b16", 'color': 'blue', 'fontWeight': 'bold','font-size':'24px'},
 
        }],
}
  1. excluding ValueGetter for pinned row
    I have my valueGetter (simple text concatanation) for one of the column but I’d like to exclude this value getter from pinned row…how can I add condition to value getter not to concatanate the text if row pinned ?
 {'headerName': 'INVOICE DESCRIPTION',"wraptext":True,"filterParams":{"excelMode": "windows"},"autoHeight":True,
      'valueGetter':{"function": "'Prace instalacyjne w tygodniu '+params.data.week +' na stacji '+ params.data.site +"
       "', zgodnie z zamówieniem '+params.data.po_number + ' / Installation Arbeiten am '"
       " + params.data.site + ', gemacht in KW '+ params.data.week + '; gemaß der Bestellung '"
       "+params.data.po_number + '; akzeptiert am ' + params.data.acceptance_date +"
       "' von ' + params.data.bauleiter;"}}, 

You need to test for the node to be pinned to the bottom.

Here, take this example:

import dash_ag_grid as dag
from dash import Dash, html, Input, Output, Patch, callback
import plotly.express as px

app = Dash(__name__)

df = px.data.gapminder()

columnDefs = [
    {"field": "country", "checkboxSelection": True},
    {
        "field": "lifeExp",
        "type": "rightAligned",
        # "valueFormatter": {"function": "d3.format('.1f')(params.value)"},
        "valueGetter": {"function": "params.node.rowPinned == 'bottom' ? 'bottom' : null"}
    },
    {
        "field": "pop",
        "type": "rightAligned",
        # "valueFormatter": {"function": "d3.format(',.0f')(params.value)"},
    },
    {
        "field": "gdpPercap",
        "type": "rightAligned",
        # "valueFormatter": {"function": "d3.format('$,.2f')(params.value)"},
    },
]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="row-pinning-top",
            rowData=df.to_dict("records"),
            columnDefs=columnDefs,
            defaultColDef={"editable": True, "sortable": True, "filter": True, "resizable": True},
            columnSize="sizeToFit",
            dashGridOptions={"rowSelection": "multiple"},
        ),
    ],
)


@callback(
    Output("row-pinning-top", "dashGridOptions"),
    Input("row-pinning-top", "selectedRows"),
)
def row_pinning_top(selected_rows):
    grid_option_patch = Patch()
    grid_option_patch["pinnedBottomRowData"] = selected_rows
    return grid_option_patch


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

sorry for kindergarten question regarding js syntax

 'valueGetter':{"function": "params.node.rowPinned == 'bottom' ? *(value if condition False)* : *(value if condition TRUE)*"}}

below aplication just cut off value getter for whole column

          'valueGetter':{"function": "params.node.rowPinned == 'bottom' ?
                                      ('Prace instalacyjne w tygodniu '+params.data.week +' na stacji '+ params.data.site +"
                                     "', zgodnie z zamówieniem '+params.data.po_number + ' / Installation Arbeiten am '"
                                     " + params.data.site + ', gemacht in KW '+ params.data.week + '; gemaß der Bestellung '"
                                     "+params.data.po_number + '; akzeptiert am ' + params.data.acceptance_date +"
                                     "' von ' + params.data.bauleiter;) : null"}},

You need to do the inverse:

'valueGetter':{"function": "params.node.rowPinned != 'bottom' ?
                                      ('Prace instalacyjne w tygodniu '+params.data.week +' na stacji '+ params.data.site +"
                                     "', zgodnie z zamówieniem '+params.data.po_number + ' / Installation Arbeiten am '"
                                     " + params.data.site + ', gemacht in KW '+ params.data.week + '; gemaß der Bestellung '"
                                     "+params.data.po_number + '; akzeptiert am ' + params.data.acceptance_date +"
                                     "' von ' + params.data.bauleiter;) : null"}},

And the syntax of the above is:

evaluates if statement ? return if true : return if false

Hi jinnyzor,
how would I check for pinning row in case of row styling.
I use row styling and cell styling.
and these styling overlap on pinned row, it looks awfull, how could I add same function
“function”: "params.node.rowPinned == ‘bottom’ to use different styling for pinned row.

for rows I use:

get_row_style = {
    "styleConditions":[
        {
            "condition": "!(params.data.invoice_number == null) ",
            "style": {"backgroundColor": "#2aa198"},
            "condition": "(params.node.rowPinned == 'bottom') ",
            "style": {"backgroundColor": "#cb4b16", 'color': 'blue', 'fontWeight': 'bold','font-size':'24px'},

        }],
}

for columns I use cellStyle:

'cellStyle': {'styleConditions':
                     [{
                         'condition': '(params.value == null)',
                         'style': {"backgroundColor": "#fd7e14"},


I know"I am overstepping your kindness

Instead of cellStyle, you should use cellClassRules, as these will refresh when a row is updated.

Then just add an additional css sheet with your styles.

If you want to go this route, then you should add an event listener to the pinnedRowDataChanged, like this:

app.clientside_callback(
"""function (id) {dash_ag_grid.getApiAsync(id).then((grid) => {grid.addEventListener('pinnedRowDataChanged', () => grid.refreshCells())})
    return dash_clientside.no_update
}""",
Output('row-pinning-top', 'id'), Input('row-pinning-top','id')
)