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

Datatable Tutorial

/

Simple Table

Data Table (Editable) Tutorial

There is another datatable component, which is only used for displaying data and does not support user interactivity or editing.

We need to start by defining our columns that describe the shape of our data. The column var should be typed as a list of dict (list[dict]), where each item describes the attributes of a single column in the table.

Each column dict recognizes the keys below:

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

Below we define DataTableState with columns definitions in the cols var, and data about Harry Potter characters in the data var..

We then define a basic table by passing the previously defined state vars as props columns and data to the rx.data_editor() component,

This is enough to display the data, but there is no way to interact with it. On the next page we will explore how to add interactivity to our datatable.