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 backend var _data_df and the state var data.

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. Whenever the data var is updated, the grid will be re-rendered with the new data.

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.

Since Reflex AG Grid is wrapping the underlying AG Grid library, there is much more functionality available that is currently not exposed in Reflex. Check out this documentation for more information on what is available in AG Grid.

As Reflex does not expose all the functionality of AG Grid, you can use ag_grid.api(), which is hanging off the ag_grid namespace, to access the underlying AG Grid API. This allows you to access the full functionality of AG Grid.

Best practice is to create a single instance of ag_grid.api() with the same id as the id of the ag_grid component that is to be referenced, "ag_grid_basic_row_selection" in this first example.

The example below uses the select_all() and deselect_all() methods of the AG Grid API to select and deselect all rows in the grid. This method is not available in Reflex directly. Check out this documentation to see what the methods look like in the AG Grid docs.

The react code for the select_all() event handler is selectAll = (source?: SelectionEventSourceType) => void;.

To use this in Reflex as you can see, it should be called in snake case rather than camel case. The void means it doesn't return anything. The source? indicates that it takes an optional source argument.

The following example lets a user export the data as a csv and adjust the size of columns to fit the available horizontal space. (Try resizing the screen and then clicking the resize columns button)

The react code for both of these is shown below. The key point to see is that both of these functions return void and therefore does not return anything.

exportDataAsCsv = (params?: CsvExportParams) => void;

sizeColumnsToFit = (paramsOrGridWidth?: ISizeColumnsToFitParams | number) => void;

This example shows how to get the data from ag_grid as a csv on the backend. The data that was passed to the backend is then displayed as a toast with the data.

The react code for the get_data_as_csv method of the AG Grid API is getDataAsCsv = (params?: CsvExportParams) => string | undefined;. Here the function returns a string (or undefined).

In Reflex to handle this returned value it is necessary to pass a callback as an argument to the get_data_as_csv method that will get the returned value. In this example the handle_get_data event handler is passed as the callback. This event handler will be called with the returned value from the get_data_as_csv method.