Intro

Gallery

Hosting

Components

New

Learn

Components

API Reference

Onboarding

Getting Started

Tutorial

Hosting

Reflex Deploy

Self Hosting

Library

Datadisplay

Data-editor

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.

columns: list[dict[str, str]] = [
    {
        "title": "Code",
        "type": "str",
    },
    {
        "title": "Value",
        "type": "int",
    },
    {
        "title": "Activated",
        "type": "bool",
    },
]
data: list[list[Any]] = [
    ["A", 1, True],
    ["B", 2, False],
    ["C", 3, False],
    ["D", 4, True],
    ["E", 5, True],
    ["F", 6, False],
]

rx.data_editor(
    columns=columns,
    data=data,
)

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:

class DataEditorState_HP(rx.State):
    clicked_data: str = "Cell clicked: "

    cols: list[Any] = [
        {"title": "Title", "type": "str"},
        {
            "title": "Name",
            "type": "str",
            "group": "Data",
            "width": 300,
        },
        {
            "title": "Birth",
            "type": "str",
            "group": "Data",
            "width": 150,
        },
        {
            "title": "Human",
            "type": "bool",
            "group": "Data",
            "width": 80,
        },
        {
            "title": "House",
            "type": "str",
            "group": "Data",
        },
        {
            "title": "Wand",
            "type": "str",
            "group": "Data",
            "width": 250,
        },
        {
            "title": "Patronus",
            "type": "str",
            "group": "Data",
        },
        {
            "title": "Blood status",
            "type": "str",
            "group": "Data",
            "width": 200,
        },
    ]

    data = [
        [
            "1",
            "Harry James Potter",
            "31 July 1980",
            True,
            "Gryffindor",
            "11'  Holly  phoenix feather",
            "Stag",
            "Half-blood",
        ],
        [
            "2",
            "Ronald Bilius Weasley",
            "1 March 1980",
            True,
            "Gryffindor",
            "12' Ash unicorn tail hair",
            "Jack Russell terrier",
            "Pure-blood",
        ],
        [
            "3",
            "Hermione Jean Granger",
            "19 September, 1979",
            True,
            "Gryffindor",
            "10¾'  vine wood dragon heartstring",
            "Otter",
            "Muggle-born",
        ],
        [
            "4",
            "Albus Percival Wulfric Brian Dumbledore",
            "Late August 1881",
            True,
            "Gryffindor",
            "15' Elder Thestral tail hair core",
            "Phoenix",
            "Half-blood",
        ],
        [
            "5",
            "Rubeus Hagrid",
            "6 December 1928",
            False,
            "Gryffindor",
            "16'  Oak unknown core",
            "None",
            "Part-Human (Half-giant)",
        ],
        [
            "6",
            "Fred Weasley",
            "1 April, 1978",
            True,
            "Gryffindor",
            "Unknown",
            "Unknown",
            "Pure-blood",
        ],
    ]

    def click_cell(self, pos):
        col, row = pos
        yield self.get_clicked_data(pos)

    def get_clicked_data(self, pos) -> str:
        self.clicked_data = f"Cell clicked: {pos}"

rx.data_editor(
    columns=DataEditorState_HP.cols,
    data=DataEditorState_HP.data,
    on_cell_clicked=DataEditorState_HP.click_cell,
)

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.

from reflex.components.datadisplay.dataeditor import (
    DataEditorTheme,
)

dark_theme_snake_case = {
    "accent_color": "#8c96ff",
    "accent_light": "rgba(202, 206, 255, 0.253)",
    "text_dark": "#ffffff",
    "text_medium": "#b8b8b8",
    "text_light": "#a0a0a0",
    "text_bubble": "#ffffff",
    "bg_icon_header": "#b8b8b8",
    "fg_icon_header": "#000000",
    "text_header": "#a1a1a1",
    "text_header_selected": "#000000",
    "bg_cell": "#16161b",
    "bg_cell_medium": "#202027",
    "bg_header": "#212121",
    "bg_header_has_focus": "#474747",
    "bg_header_hovered": "#404040",
    "bg_bubble": "#212121",
    "bg_bubble_selected": "#000000",
    "bg_search_result": "#423c24",
    "border_color": "rgba(225,225,225,0.2)",
    "drilldown_border": "rgba(225,225,225,0.4)",
    "link_color": "#4F5DFF",
    "header_font_style": "bold 14px",
    "base_font_style": "13px",
    "font_family": "Inter, Roboto, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, noto, arial, sans-serif",
}

rx.data_editor(
    columns=DataEditorState_HP.cols,
    data=DataEditorState_HP.data,
    row_height=80,
    smooth_scroll_x=True,
    smooth_scroll_y=True,
    column_select="single",
    theme=DataEditorTheme(**dark_theme),
    height="30vh",
)

API Reference

DataEditor

The DataEditor Component.

Prop	Type	Description
`rows`	int	Number of rows.
`columns`	List	Headers of the columns for the data grid.
`data`	List	The data.
`get_cell_content`	str	The name of the callback used to find the data to display.
`get_cell_for_selection`	bool	Allow selection for copying.
`on_paste`	bool	Allow paste.
`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.
`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	Additional header icons: header_icons: Var[Any] # (TODO: must be a map of name: svg) 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	Determins the height of each row.
`row_markers`	Literal	Kind of row markers.
`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`	Literal	Allow columns 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.
`theme`	Union	global theme

Event Triggers

Trigger	Description
`on_cell_activated`	The on_cell_activated event handler is called when the user activate a cell from the data editor. It receive the coordinates of the cell.
`on_cell_clicked`	The on_cell_clicked event handler is called when the user click on a cell of the data editor. It receive the coordinates of the cell.
`on_cell_context_menu`	The on_cell_context_menu event handler is called when the user right-click on a cell of the data editor. It receives the coordinates of the cell.
`on_cell_edited`	The on_cell_edited event handler is called when the user modify the content of a cell. It receives the coordinates of the cell and the modified content.
`on_group_header_clicked`	The on_group_header_clicked event handler is called when the user left-click on a group header of the data editor. It receive the index and the data of the group header.
`on_group_header_context_menu`	The on_group_header_context_menu event handler is called when the user right-click on a group header of the data editor. It receive the index and the data of the group header.
`on_group_header_renamed`	The on_group_header_context_menu event handler is called when the user rename a group header of the data editor. It receive the index and the modified content of the group header.
`on_header_clicked`	The on_header_clicked event handler is called when the user left-click a header of the data editor. It receive the index and the content of the header.
`on_header_context_menu`	The on_header_context_menu event handler is called when the user right-click a header of the data editor. It receives the index and the content of the header.
`on_header_menu_click`	The on_header_menu_click event handler is called when the user click on the menu button of the header. (menu header not implemented yet)
`on_item_hovered`	The on_item_hovered event handler is called when the user hover on an item of the data editor.
`on_delete`	The on_delete event handler is called when the user delete a cell of the data editor.
`on_finished_editing`	The on_finished_editing event handler is called when the user finish an editing, regardless of if the value changed or not.
`on_row_appended`	The on_row_appended event handler is called when the user add a row to the data editor.
`on_selection_cleared`	The on_selection_cleared event handler is called when the user unselect a region of the data editor.
`on_column_resize`	The on_column_resize event handler is called when the user try to resize a column from the data editor.

← Codeblock Datatable →

Did you find this useful?

Yes

Raise an issue

Edit this page

Home Gallery Changelog Introduction Hosting

Data Editor

Columns

Data

Simple Example

Interactive Example

Styling Example

API Reference

DataEditor