Reflex AG Grid is a high-performance and highly customizable grid that wraps AG Grid.

A basic Reflex AG Grid contains column definitions column_defs, which define the columns to be displayed in the grid, and row_data, which contains the data to be displayed in the grid.

Each grid also requires a unique id, which is needed to uniquely identify the Ag-Grid instance on the page. If you have multiple grids on the same page, each grid must have a unique id so that it can be correctly rendered and managed.

The format of the data passed to the row_data prop is a list of dictionaries. Each dictionary represents a row in the grid as seen below.

The previous example showed the column_defs written out in full. You can also extract the required information from the dataframe's column names:

In the above example, the first letter of the field names provided are capitalized when displaying the header name. You can customize the header names by providing a header_name key in the column definition. In this example, the header_name is customized for the second and third columns.

Allow a user to filter a column by setting the filter key to True in the column definition. In this example we enable filtering for the first and last columns.

You can set filter=True to enable the default filter for a column.

You can also set the filter type using the filter key. The following filter types are available: ag_grid.filters.date, ag_grid.filters.number and ag_grid.filters.text. These ensure that the input you enter to the filter is of the correct type.

(ag_grid.filters.set and ag_grid.filters.multi are available with AG Grid Enterprise)

By default, the rows can be sorted by any column by clicking on the column header. You can disable sorting of the rows for a column by setting the sortable key to False in the column definition.

In this example, we disable sorting for the first column.

Row Selection is enabled using the row_selection attribute. Setting it to multiple allows users to select multiple rows at a time. You can use the checkbox_selection column definition attribute to render checkboxes for selection.

Enable Editing by setting the editable attribute to True. The cell editor is inferred from the cell data type. Set the cell editor type using the cell_editor attribute.

There are 7 provided cell editors in AG Grid:

1. ag_grid.editors.text
2. ag_grid.editors.large_text
3. ag_grid.editors.select
4. ag_grid.editors.rich_select
5. ag_grid.editors.number
6. ag_grid.editors.date
7. ag_grid.editors.checkbox

In this example, we enable editing for the second and third columns. The second column uses the number cell editor, and the third column uses the select cell editor.

The on_cell_value_changed event trigger is linked to the cell_value_changed event handler in the state. This event handler is called whenever a cell value is changed and changes the value of the state var data_df.

data is a computed var, which means it has the @rx.var decorator and has its value derived from data_df.

By default, the grid uses a vertical scroll. You can reduce the amount of scrolling required by adding pagination. To add pagination, set pagination=True. You can set the pagination_page_size to the number of rows per page and pagination_page_size_selector to a list of options for the user to select from.

You can style your grid with a theme. AG Grid includes the following themes:

1. quartz
2. alpine
3. balham
4. material

The grid uses quartz by default. To use any other theme, set it using the theme prop, i.e. theme="alpine".

Assuming you want to make any edit to your data, you can put the data in State. This allows you to update the grid based on user input. It is recommended to make data a computed var, which means it has the @rx.var decorator. The state var data has its value derived from data_df.

You can use State to update the grid based on a users input. In this example, we update the column_defs of the grid when a user clicks a button.

In this example, we will use a database to store the data. The data is loaded from a csv file and inserted into the database when the page is loaded using the insert_dataframe_to_db event handler.

The data is then fetched from the database and displayed in the grid using the data computed var.

When a cell value is changed, the data is updated in the database using the cell_value_changed event handler.

AG Grid offers both community and enterprise versions. See the AG Grid docs for details on purchasing a license key.

To use an AG Grid Enterprise license key with Reflex AG Grid set the environment variable AG_GRID_LICENSE_KEY:

The following props are available for column_defs as well as many others that can be found here: AG Grid Column Def Docs. (it is necessary to use snake_case for the keys in Reflex, unlike in the AG Grid docs where camelCase is used)

• field: str: The field of the row object to get the cell's data from.
• col_id: str | None: The unique ID to give the column. This is optional. If missing, the ID will default to the field.
• type: str | None: The type of the column.
• cell_data_type: bool | str | None: The data type of the cell values for this column. Can either infer the data type from the row data (true - the default behaviour), define a specific data type (string), or have no data type (false).
• hide: bool: Set to true for this column to be hidden.
• editable: bool | None: Set to true if this column is editable, otherwise false.
• filter: AGFilters | str | None: Filter component to use for this column. Set to true to use the default filter. Set to the name of a provided filter to use that filter. (Check out the Filter Types section of this page for more information)
• floating_filter: bool: Whether to display a floating filter for this column.
• header_name: str | None: The name to render in the column header. If not specified and field is specified, the field name will be used as the header name.
• header_tooltip: str | None: Tooltip for the column header.
• checkbox_selection: bool | None: Set to true to render a checkbox for row selection.
• cell_editor: AGEditors | str | None: Provide your own cell editor component for this column's cells. (Check out the Editing section of this page for more information)
• cell_editor_params: dict[str, list[Any]] | None: Params to be passed to the cellEditor component.