A datagrid editor based on Glide Data Grid

This component is introduced as an alternative to the datatable to support editing the displayed data.

Columns

The columns definition should be a list of dict, each dict describing the associated columns. Property of a column dict:

title: The text to display in the header of the column.
id: An id for the column, if not defined, will default to a lower case of title
width: The width of the column.
type: The type of the columns, default to "str".

Data

The data props of rx.data_editor accept a list of list, where each list represent a row of data to display in the table.

Here is a basic example of using the data_editor representing data with no interaction and no styling. Below we define the columns and the data which are taken in by the rx.data_editor component. When we define the columns we must define a title and a type for each column we create. The columns in the data must then match the defined type or errors will be thrown.

Expand

Interactive Example

Here we define a State, as shown below, that allows us to print the location of the cell as a heading when we click on it, using the on_cell_clicked event trigger. Check out all the other event triggers that you can use with datatable at the bottom of this page. We also define a group with a label Data. This groups all the columns with this group label under a larger group Data as seen in the table below.

Cell clicked:

Expand

Styling Example

Now let's style our datatable to make it look more aesthetic and easier to use. We must first import DataEditorTheme and then we can start setting our style props as seen below in dark_theme.

We then set these themes using theme=DataEditorTheme(**dark_theme). On top of the styling we can also set some props to make some other aesthetic changes to our datatable. We have set the row_height to equal 50 so that the content is easier to read. We have also made the smooth_scroll_x and smooth_scroll_y equal True so that we can smoothly scroll along the columns and rows. Finally, we added column_select=single, where column select can take any of the following values none, single or multiple.

Expand

API Reference

rx.data_editor

The DataEditor Component.

Props

Prop	Type	Description
`rows`	`int`	Number of rows.
`columns`	`Sequence`	Headers of the columns for the data grid.
`data`	`Sequence`	The data.
`get_cell_content`	`str`	The name of the callback used to find the data to display.
`get_cells_for_selection`	`bool`	Allow selection for copying.
`draw_focus_ring`	`bool`	Controls the drawing of the focus ring.
`fixed_shadow_x`	`bool`	Enables or disables the overlay shadow when scrolling horizontally.
`fixed_shadow_y`	`bool`	Enables or disables the overlay shadow when scrolling vertically.
`fill_handle`	`bool`	Controls the presence of the fill indicator.
`freeze_columns`	`int`	The number of columns which should remain in place when scrolling horizontally. Doesn't include rowMarkers.
`group_header_height`	`int`	Controls the header of the group header row.
`header_height`	`int`	Controls the height of the header row.
`max_column_auto_width`	`int`	The maximum width a column can be automatically sized to.
`max_column_width`	`int`	The maximum width a column can be resized to.
`min_column_width`	`int`	The minimum width a column can be resized to.
`row_height`	`int`	Determines the height of each row.
`row_markers`	`"none""number""checkbox""both""checkbox-visible""clickable-number"`	Kind of row markers. Options are: "none", "number", "checkbox", "both", "checkbox-visible", "clickable-number".
`row_marker_start_index`	`int`	Changes the starting index for row markers.
`row_marker_width`	`int`	Sets the width of row markers in pixels, if unset row markers will automatically size.
`smooth_scroll_x`	`bool`	Enable horizontal smooth scrolling.
`smooth_scroll_y`	`bool`	Enable vertical smooth scrolling.
`vertical_border`	`bool`	Controls the drawing of the left hand vertical border of a column. If set to a boolean value it controls all borders.
`column_select`	`"none""single""multi"`	Allow columns selections. ("none", "single", "multi").
`range_select`	`"none""cell""rect""multi-cell""multi-rect"`	Allow range selections. ("none", "cell", "rect", "multi-cell", "multi-rect").
`row_select`	`"none""single""multi"`	Allow row selections. ("none", "single", "multi").
`prevent_diagonal_scrolling`	`bool`	Prevent diagonal scrolling.
`overscroll_x`	`int`	Allow to scroll past the limit of the actual content on the horizontal axis.
`overscroll_y`	`int`	Allow to scroll past the limit of the actual content on the vertical axis.
`scroll_offset_x`	`int`	Initial scroll offset on the horizontal axis.
`scroll_offset_y`	`int`	Initial scroll offset on the vertical axis.
`range_selection_blending`	`"exclusive""mixed"`	Controls which types of range selections can exist at the same time. ("exclusive", "mixed").
`column_selection_blending`	`"exclusive""mixed"`	Controls which types of column selections can exist at the same time. ("exclusive", "mixed").
`row_selection_blending`	`"exclusive""mixed"`	Controls which types of row selections can exist at the same time. ("exclusive", "mixed").
`row_selection_mode`	`"auto""multi"`	Controls row marker selection behavior. "auto" adapts to touch/mouse, "multi" acts as if Ctrl is pressed. ("auto", "multi").
`span_range_behavior`	`"default""allowPartial"`	Controls how spans are handled in selections. ("default", "allowPartial").
`theme`	`Union[DataEditorTheme, dict]`	global theme.
`grid_selection`	`GridSelection`	The current grid selection state (columns, rows, and current cell/range). Must be used when on_grid_selection_change is used otherwise updates will not be reflected in the grid.
`show_search`	`bool`	Shows search bar.
`custom_renderers`	`Any`

Event Triggers

See the full list of default event triggers

Trigger	Description
`on_cell_activated`	Fired when a cell is activated.
`on_cell_clicked`	Fired when a cell is clicked.
`on_cell_context_menu`	Fired when a cell is right-clicked.
`on_cell_edited`	Fired when a cell is edited.
`on_group_header_clicked`	Fired when a group header is clicked.
`on_group_header_context_menu`	Fired when a group header is right-clicked.
`on_group_header_renamed`	Fired when a group header is renamed.
`on_header_clicked`	Fired when a header is clicked.
`on_header_context_menu`	Fired when a header is right-clicked.
`on_header_menu_click`	Fired when a header menu item is clicked.
`on_item_hovered`	Fired when an item is hovered.
`on_delete`	Fired when a selection is deleted.
`on_finished_editing`	Fired when editing is finished.
`on_row_appended`	Fired when a row is appended.
`on_grid_selection_change`	Fired when the grid selection changes. Will pass the current selection, the selected columns and the selected rows.
`on_selection_cleared`	Fired when the selection is cleared.
`on_column_resize`	Fired when a column is resized.
`on_search_close`	Fired when the search close button is clicked.

Learn

Components

API Reference

Enterprise

Core

Graphing

Other

Custom Components

Data Editor

Columns

Data

Simple Example

Interactive Example

Cell clicked:

Styling Example

API Reference

rx.data_editor

Props

Event Triggers