Column Definitions

AgGrid allows you to define the columns of your grid, passed to the prop column_defs. Each dictionary represents a column.

Here we define a grid with 3 columns:

column_defs = [
    {"field": "direction"},
    {"field": "strength"},
    {"field": "frequency"},
]

To set default properties for all your columns, you can define default_col_def in your grid:

default_col_def = {"editable": True}

Any column can override the default properties defined above by setting their own value:

column_defs = [
    {"field": "direction"},
    {"field": "strength", "editable": False},
    {"field": "frequency"},
]
default_col_def = {"editable": True}

Here is an example using both column_defs and default_col_def:

It is also possible to group columns by defining a children property in the column definition. This property should be a list of column definitions.

column_defs = [
    {"field": "direction"},
    {
        "header_name": "Wind",
        "children": [
            {"field": "strength"},
            {"field": "frequency"},
        ],
    },
]

It is also possible to define column types that can be reused across multiple columns. This is useful when you have multiple columns with the same properties.

column_types = {
    "price": {
        "editable": False,
        "value_formatter": "'$' + params.value",
    },
}

A cell renderer is a function that takes a cell value and returns a string or a Reflex component to be rendered in the cell. You can use this to customize the appearance of the cell.

It is also possible to define your own cell renderer by using the decorator rxe.arrow_func on a function. The decorated function should take params (of type RendererParams) as input and return a Reflex component to be rendered in the cell.