Reflex Cloud - Fast, secure & scalable hosting. One command to deploy.

Data Editor

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.

Simple Example

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.

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:

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.

API Reference

rx.data_editor

The DataEditor Component.

PropType | ValuesDefault
rows
int
columns
List
data
List
get_cell_content
str
get_cells_for_selection
bool
draw_focus_ring
bool
fixed_shadow_x
bool
fixed_shadow_y
bool
freeze_columns
int
group_header_height
int
header_height
int
max_column_auto_width
int
max_column_width
int
min_column_width
int
row_height
int
row_markers
"none" | "number" | ...
row_marker_start_index
int
row_marker_width
int
smooth_scroll_x
bool
smooth_scroll_y
bool
vertical_border
bool
column_select
"none" | "single" | ...
prevent_diagonal_scrolling
bool
overscroll_x
int
overscroll_y
int
scroll_offset_x
int
scroll_offset_y
int
theme
Union[DataEditorTheme, Dict]

Event Triggers

See the full list of default event triggers
TriggerDescription
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_selection_cleared Fired when the selection is cleared.
on_column_resize Fired when a column is resized.