AG Grid in Reflex

Reflex AG Grid seamlessly integrates AG Grid--a high-performance feature-rich data grid for major JavaScript frameworks (like React) that offers filtering, grouping, pivoting, and more-- into the Reflex ecosystem, bringing advanced data grid capabilities to Python developers building modern web applications.

Reflex has become more popular among Python developers working in banking and fintech--who need components like AG Grid for advanced data handling. We're excited to announce that you can start building powerful data-driven applications with Reflex AG Grid today! Install Reflex AG Grid with pip:

Note: This is an initial release. Check out the open source repo and our docs for the latest version and any updates.

AG Grid is a feature-rich data grid library designed for displaying and manipulating tabular data in web applications. With over a million monthly downloads, and 90% of the Fortune 500 comapnies using it, it's a leading solution for working with tabular data. AG Grid offers a wide array of functionalities including:

• In-place cell editing
• Real-time data updates
• Pagination and infinite scrolling
• Column filtering, reordering, resizing, and hiding
• Row grouping and aggregation
• Built-in theming

The AG Grid team is dedicated to continually improving the library, ensuring it remains at the forefront of data grid technology.

While Reflex offers basic rx.data_table component out of the box, Reflex AG Grid takes data handling to the next level. If you're working with large datasets, need advanced filtering and sorting capabilities, or require features like editable cells and export options, Reflex AG Grid is the ideal choice.

Some key advantages of Reflex AG Grid include:

• Superior performance with large datasets
• Extensive customization options
• Built-in features like column pinning and row grouping
• Seamless integration with Reflex's reactive programming model
• Support for both free (community) and enterprise AG Grid features

Similarly to Reflex, the core functionality of AG Grid is free and open-source. For those needing even more power, AG Grid offers an enterprise version with additional features such as pivot tables, advanced groupings, and Excel export capabilities. Reflex AG Grid supports both the community and enterprise versions – you just need a valid AG Grid license key to unlock the enterprise features.

Follow along for a brief step-by-step guide on how to use Reflex AG Grid to build an app like the one shown below! Press the "Fetch Latest Data" button to see the app in action. Check out the full live app and code.

This finance app uses Reflex AG Grid to display stock data in an interactive grid with advanced features like sorting, filtering, and pagination. Selecting a row from the grid shows that companies stock data for the past 6 months in a line chart. Let's review the code to see how Reflex AG Grid is used in this app.

First we import the necessary libraries, including yfinance for fetching the stock data.

Next, we define the State class, which contains the application's state and logic. The fetch_stock_data function fetches stock data for the specified companies and transforms it into a format suitable for display in AG Grid. We call this function when clicking on a button, by linking the on_click trigger of the button to this state function.

We define state variables, any fields in your app that may change over time (A Var is directly rendered into the frontend of the app).

The data state variable stores the raw stock data fetched from Yahoo Finance. We transform this data to round the values and store it as a list of dictionaries, which is the format that AG Grid expects. The transformed data is sorted by date and ticker in descending order and stored in the dict_data state variable.

The datetime_now state variable stores the current datetime when the data was fetched.

The column_defs list defines the columns to be displayed in the AG Grid. The header_name is used to set the header title for each column. The field key represents the id of each column. The filter key is used to insert the filter feature, located below the header of each column.

Now for the most important part of our app, AG Grid itself!

• id is required because it uniquely identifies the Ag-Grid instance on the page.
• column_defs is the list of column definitions we defined earlier.
• row_data is the data to be displayed in the grid, which is stored in the dict_data State var.
• pagination, pagination_page_size and pagination_page_size_selector parameters enable pagination with specific variables in the grid.
• theme enables you to set the theme of the grid.

We set theme using the grid_theme State var in the rx.select component. Every state var has a built-in function to set it's value for convenience, called set_VARNAME, in this case set_grid_theme.

The on_selection_changed event trigger, shown in the code above, is called when the user selects a row in the grid. This calls the function handle_selection method in the State class, which sets the selected_rows state var to the new selected row and calls the function update_line_graph.

The update_line_graph function gets the relevant ticker and uses it to set the company state var. The Date, Mid, and DateDifference data for that company for the past 6 months is then set to the state var dff_ticker_hist.

Finally it is rendered in an rx.recharts.line_chart, using rx.recharts.error_bar to show the DateDifference data which are the highs and the lows for the day.

By bringing AG Grid to the Reflex ecosystem, we're empowering Python developers to create sophisticated, data-rich web applications with ease. Whether you're building complex dashboards, data analysis tools, or an application that demands powerful data grid capabilities, Reflex AG Grid has you covered.

We're excited to see what you'll build with Reflex AG Grid! Share your projects, ask questions, and join the discussion in our community forums. Let's push the boundaries of what's possible with Python web development!