streamlit-aggrid

To display a grid, import AgGrid from st_aggrid and pass a pandas DataFrame to it. This is the simplest way to render a data table in your Streamlit app.

from st_aggrid import AgGrid
import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/fivethirtyeight/data/master/airline-safety/airline-safety.csv')
AgGrid(df)

Install the package using pip to use AgGrid within your Streamlit applications.

pip install streamlit-aggrid

The component determines the rowData for the grid using the following precedence:

1. data argument: If a data object is provided, the component looks for an Arrow Table within data.dataTable or data.table.
   • It automatically detects and filters out Pandas index columns using metadata from the Arrow schema.
   • It converts the filtered Arrow table to a standard JSON array.
2. gridOptions.rowData: If data is null, the component checks gridOptions.rowData. If this field contains a JSON string, it will be parsed into the grid's row data.

If neither is provided or valid, the grid will have no row data.

When passing data from Python to the AgGrid component, ensure that bigint values are handled correctly. The component includes a bigintReplacer logic that automatically converts bigint types to Number during the JSON parsing process to prevent serialization errors.

Best Practice: While the component handles this, it is recommended to avoid sending non-JSON-serializable entities from the Python side to ensure maximum compatibility.

The ThemeParser allows you to select a theme for the AG Grid component using a themeName. The available theme recipes are:

• streamlit: Automatically maps Streamlit's theme (primary color, font, background, etc.) to an AG Grid theme.
• alpine: Uses the standard AG Grid Alpine theme.
• balham: Uses the standard AG Grid Balham theme.
• material: Uses the Alpine theme with the Material icon set.
• custom: Allows for a highly granular configuration using a base theme, custom parameters, and specific theme parts.
• Any unrecognized themeName defaults to the balham theme.

The streamlit theme recipe automatically synchronizes the AG Grid appearance with the user's Streamlit application theme. It maps:

• streamlitTheme.primaryColor $\rightarrow$ accentColor
• streamlitTheme.textColor $\rightarrow$ foregroundColor
• streamlitTheme.backgroundColor $\rightarrow$ backgroundColor
• streamlitTheme.font $\rightarrow$ fontFamily

It also applies iconSetQuartzLight and iconSetQuartzRegular by default, and switches to colorSchemeDark if the Streamlit base theme is set to 'dark'.

The AgGrid Frontend Collectors module provides different strategies for processing responses from the AgGrid component. Depending on your requirements, you can use different collector types:

• LegacyCollector: Used for maintaining backward compatibility with the existing getGridReturnValue mechanism.
• CustomCollector: Used when you need to handle user-provided JavaScript functions for custom response processing.

Collectors are managed via a factory pattern using determineCollector and can be configured using validateCollectorConfig.

The development server serves physical files from the public directory.

• Directory: Files are served from paths.appPublic.
• Public Path: Files are accessible via paths.publicUrlOrPath.
• Usage in Code:
  • In index.html, use %PUBLIC_URL% to reference files (e.g., <link rel="icon" href="%PUBLIC_URL%/favicon.ico">).
  • In JavaScript, use process.env.PUBLIC_URL to access the path.

Best Practice: Only use the public folder for assets like favicon.ico or manifest.json. For images and other assets, it is recommended to place them in src and import them directly in your JavaScript files so they can be processed by Webpack.

When themeName is set to 'custom', you can define a specific theme configuration using the stAggridThemeOptions structure. This allows you to pick a base theme and layer on specific parameters and parts.

Available Base Themes:

• quartz
• alpine
• balham

Available Parts (via parts array):

• colorSchemeLight
• colorSchemeLightWarm
• colorSchemeLightCold
• colorSchemeDark
• colorSchemeDarkWarm
• colorSchemeDarkBlue
• iconSetQuartz
• iconSetQuartzLight
• iconSetQuartzBold
• iconSetAlpine
• iconSetMaterial
• iconSetQuartzRegular

Available Parameters (via params object): Any valid AG Grid theme parameter can be passed here to override default styling.