AG Grid provides powerful cell selection capabilities that allow users to select individual cells or ranges of cells. This feature is essential for data manipulation, copying, and advanced interactions like fill handle operations.

To enable cell selection in your AG Grid, set the cell_selection prop to True. This automatically enables both single cell selection and range selection capabilities.

Click and drag to select cells. Selection info will appear in a toast.

For more sophisticated selection handling, you can process the selection ranges to calculate detailed information:

Select ranges of cells. Try selecting multiple ranges by holding Ctrl/Cmd.

The fill handle is a powerful feature that allows users to quickly fill cells by dragging from a selected cell or range. When enabled, a small square appears at the bottom-right corner of the selection that users can drag to fill adjacent cells.

To enable the fill handle, configure the cell_selection prop with a dictionary containing the handle configuration:

When using the fill handle, it will trigger on_cell_value_changed for each cell receiving a fill value. This allows your backend to handle the data changes appropriately.

Select a cell and drag the fill handle (small square at bottom-right) to fill adjacent cells.

Recent Changes:

No changes yet

You can further customize cell selection behavior using additional configuration options:

Cell selection with additional configuration options

  • Cell Selection: Enable with cell_selection=True for both single cell and range selection capabilities
  • Fill Handle: Configure with cell_selection={"handle": {"mode": "fill"}} for drag-to-fill functionality
  • Event Handling: Use on_cell_selection_changed to respond to selection changes
  • Value Changes: Use on_cell_value_changed to handle individual cell edits and fill operations
  • Text Selection: Enable enable_cell_text_selection=True to allow text selection within cells
  1. Use cell_selection configuration: Both single cell and range selection are automatically enabled with cell_selection=True, providing all necessary selection capabilities for fill operations.
  1. Handle cell value changes: When using fill handle, implement on_cell_value_changed to process the data updates in your backend.
  1. Provide user feedback: Use toasts or other UI elements to confirm selection actions and data changes.
  1. Consider performance: For large datasets, be mindful of the performance impact of frequent cell value change events.
  1. Validate fill operations: Implement validation logic in your on_cell_value_changed handler to ensure data integrity.

Built with Reflex