Reflex Logo

Intro

Gallery

Hosting

Components

New

Learn

Components

API Reference

Onboarding

Library

/

Datadisplay

/

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.

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".

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.

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,
)

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,
)

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",
)

The DataEditor Component.

PropTypeDescriptionValues
rowsint

Number of rows.

columnsList

Headers of the columns for the data grid.

dataList

The data.

get_cell_contentstr

The name of the callback used to find the data to display.

get_cell_for_selectionbool

Allow selection for copying.

on_pastebool

Allow paste.

draw_focus_ringbool

Controls the drawing of the focus ring.

fixed_shadow_xbool

Enables or disables the overlay shadow when scrolling horizontally.

fixed_shadow_ybool

Enables or disables the overlay shadow when scrolling vertically.

freeze_columnsint

The number of columns which should remain in place when scrolling horizontally. Doesn't include rowMarkers.

group_header_heightint

Controls the header of the group header row.

header_heightint

Controls the height of the header row.

max_column_auto_widthint

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_widthint

The maximum width a column can be resized to.

min_column_widthint

The minimum width a column can be resized to.

row_heightint

Determins the height of each row.

row_markersLiteral

Kind of row markers.

row_marker_start_indexint

Changes the starting index for row markers.

row_marker_widthint

Sets the width of row markers in pixels, if unset row markers will automatically size.

smooth_scroll_xbool

Enable horizontal smooth scrolling.

smooth_scroll_ybool

Enable vertical smooth scrolling.

vertical_borderbool

Controls the drawing of the left hand vertical border of a column. If set to a boolean value it controls all borders.

column_selectLiteral

Allow columns selections. ("none", "single", "multi")

prevent_diagonal_scrollingbool

Prevent diagonal scrolling.

overscroll_xint

Allow to scroll past the limit of the actual content on the horizontal axis.

overscroll_yint

Allow to scroll past the limit of the actual content on the vertical axis.

scroll_offset_xint

Initial scroll offset on the horizontal axis.

scroll_offset_yint

Initial scroll offset on the vertical axis.

themeUnion

global theme

Event Triggers

TriggerDescription
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.

← CodeblockDatatable →

Did you find this useful?