Table
A semantic table for presenting tabular data.
If you just want to represent static data then the might be a better fit for your use case as it comes with in-built pagination, search and sorting.
Basic Example
ExpandCollapse
width to fit within its container and prevent it from overflowing.Showing State data (using foreach)
Many times there is a need for the data we represent in our table to be dynamic. Dynamic data must be in State. Later we will show an example of how to access data from a database and how to load data from a source file.
In this example there is a people data structure in State that is iterated through using .
ExpandCollapse
It is also possible to define a class such as Person below and then iterate through this data structure, as a list[Person].
Sorting and Filtering (Searching)
In this example we show two approaches to sort and filter data:
- Using SQL-like operations for database-backed models (simulated)
- Using Python operations for in-memory data
Both approaches use the same UI components: rx.select for sorting and rx.input for filtering.
Approach 1: Database Filtering and Sorting
For database-backed models, we typically use SQL queries with select, where, and order_by. In this example, we'll simulate this behavior with mock data.
ExpandCollapse
Approach 2: In-Memory Filtering and Sorting
For in-memory data, we use Python operations like sorted() and list comprehensions.
The state variable _people is set to be a backend-only variable. This is done in case the variable is very large in order to reduce network traffic and improve performance.
When a select item is selected, the on_change event trigger is hooked up to the set_sort_value event handler, which updates the sort_value state var.
current_people is an rx.var(cache=True). It is a var that is only recomputed when the other state vars it depends on change. This ensures that the People shown in the table are always up to date whenever they are searched or sorted.
ExpandCollapse
When to Use Each Approach
- Database Approach: Best for large datasets or when the data already exists in a database
- In-Memory Approach: Best for smaller datasets, prototyping, or when the data is static or loaded from an API
Both approaches provide the same user experience with filtering and sorting functionality.
Database
The more common use case for building an rx.table is to use data from a database.
The code below shows how to load data from a database and place it in an rx.table.
Loading data into table
A Customer model is defined that inherits from rx.Model.
The load_entries event handler executes a query that is used to request information from a database table. This load_entries event handler is called on the on_mount event trigger of the rx.table.root.
If you want to load the data when the page in the app loads you can set on_load in app.add_page() to equal this event handler, like app.add_page(page_name, on_load=State.load_entries).
ExpandCollapse
Filtering (Searching) and Sorting
In this example we sort and filter the data.
For sorting the rx.select component is used. The data is sorted based on the attributes of the Customer class. When a select item is selected, as the on_change event trigger is hooked up to the sort_values event handler, the data is sorted based on the state variable sort_value attribute selected.
The sorting query gets the sort_column based on the state variable sort_value, it gets the order using the asc function from sql and finally uses the order_by function.
For filtering the rx.input component is used. The data is filtered based on the search query entered into the rx.input component. When a search query is entered, as the on_change event trigger is hooked up to the filter_values event handler, the data is filtered based on if the state variable search_value is present in any of the data in that specific Customer.
The % character before and after search_value makes it a wildcard pattern that matches any sequence of characters before or after the search_value. query.where(...) modifies the existing query to include a filtering condition. The or_ operator is a logical OR operator that combines multiple conditions. The query will return results that match any of these conditions. Customer.name.ilike(search_value) checks if the name column of the Customer table matches the search_value pattern in a case-insensitive manner (ilike stands for "case-insensitive like").
ExpandCollapse
Pagination
Pagination is an important part of database management, especially when working with large datasets. It helps in enabling efficient data retrieval by breaking down results into manageable loads.
The purpose of this code is to retrieve a specific subset of rows from the Customer table based on the specified pagination parameters offset and limit.
query.offset(self.offset) modifies the query to skip a certain number of rows before returning the results. The number of rows to skip is specified by self.offset.
query.limit(self.limit) modifies the query to limit the number of rows returned. The maximum number of rows to return is specified by self.limit.
Page 1 / 0
ExpandCollapse
More advanced examples
The real power of the rx.table comes where you are able to visualise, add and edit data live in your app. Check out these apps and code to see how this is done: app: https://customer-data-app.reflex.run code: https://github.com/reflex-dev/templates/tree/main/customer_data_app and code: https://github.com/reflex-dev/templates/tree/main/sales.
Download
Most users will want to download their data after they have got the subset that they would like in their table.
In this example there are buttons to download the data as a json and as a csv.
For the json download the rx.download is in the frontend code attached to the on_click event trigger for the button. This works because if the Var is not already a string, it will be converted to a string using JSON.stringify.
For the csv download the rx.download is in the backend code as an event_handler download_csv_data. There is also a helper function _convert_to_csv that converts the data in self.users to csv format.
ExpandCollapse
Real World Example UI
Your Team
Invite and manage your team members
ExpandCollapse
API Reference
rx.table.root
A semantic table for presenting tabular data.
sizevariantProps
| Prop | Type | Description |
|---|---|---|
access_key | str | Provides a hint for generating a keyboard shortcut for the current element. |
auto_capitalize | "off""none""on""sentences""words""characters" | Controls whether and how text input is automatically capitalized as it is entered/edited by the user. |
content_editable | "inherit""plaintext-only" | Indicates whether the element's content is editable. |
context_menu | str | Defines the ID of a <menu> element which will serve as the element's context menu. |
dir | str | Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left). |
draggable | bool | Defines whether the element can be dragged. |
enter_key_hint | "enter""done""go""next""previous""search""send" | Hints what media types the media element is able to play. |
hidden | bool | Defines whether the element is hidden. |
input_mode | "none""text""tel""url""email""numeric""decimal""search" | Defines the type of the element. |
item_prop | str | Defines the name of the element for metadata purposes. |
lang | str | Defines the language used in the element. |
role | "alert""alertdialog""application""article""banner""button""cell""checkbox""columnheader""combobox""complementary""contentinfo""definition""dialog""directory""document""feed""figure""form""grid""gridcell""group""heading""img""link""list""listbox""listitem""log""main""marquee""math""menu""menubar""menuitem""menuitemcheckbox""menuitemradio""navigation""none""note""option""presentation""progressbar""radio""radiogroup""region""row""rowgroup""rowheader""scrollbar""search""searchbox""separator""slider""spinbutton""status""switch""tab""table""tablist""tabpanel""term""textbox""timer""toolbar""tooltip""tree""treegrid""treeitem" | Defines the role of the element. |
slot | str | Assigns a slot in a shadow DOM shadow tree to an element. |
spell_check | bool | Defines whether the element may be checked for spelling errors. |
tab_index | int | Defines the position of the current element in the tabbing order. |
title | str | Defines a tooltip for the element. |
align | "left""center""right" | Alignment of the table. |
summary | str | Provides a summary of the table's purpose and structure. |
size | "1""2""3" | The size of the table: "1" | "2" | "3". |
variant | "surface""ghost" | The variant of the table. |
Event Triggers
See the full list of default event triggersrx.table.header
The header of the table defines column names and other non-data elements.
Props
| Prop | Type | Description |
|---|---|---|
access_key | str | Provides a hint for generating a keyboard shortcut for the current element. |
auto_capitalize | "off""none""on""sentences""words""characters" | Controls whether and how text input is automatically capitalized as it is entered/edited by the user. |
content_editable | "inherit""plaintext-only" | Indicates whether the element's content is editable. |
context_menu | str | Defines the ID of a <menu> element which will serve as the element's context menu. |
dir | str | Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left). |
draggable | bool | Defines whether the element can be dragged. |
enter_key_hint | "enter""done""go""next""previous""search""send" | Hints what media types the media element is able to play. |
hidden | bool | Defines whether the element is hidden. |
input_mode | "none""text""tel""url""email""numeric""decimal""search" | Defines the type of the element. |
item_prop | str | Defines the name of the element for metadata purposes. |
lang | str | Defines the language used in the element. |
role | "alert""alertdialog""application""article""banner""button""cell""checkbox""columnheader""combobox""complementary""contentinfo""definition""dialog""directory""document""feed""figure""form""grid""gridcell""group""heading""img""link""list""listbox""listitem""log""main""marquee""math""menu""menubar""menuitem""menuitemcheckbox""menuitemradio""navigation""none""note""option""presentation""progressbar""radio""radiogroup""region""row""rowgroup""rowheader""scrollbar""search""searchbox""separator""slider""spinbutton""status""switch""tab""table""tablist""tabpanel""term""textbox""timer""toolbar""tooltip""tree""treegrid""treeitem" | Defines the role of the element. |
slot | str | Assigns a slot in a shadow DOM shadow tree to an element. |
spell_check | bool | Defines whether the element may be checked for spelling errors. |
tab_index | int | Defines the position of the current element in the tabbing order. |
title | str | Defines a tooltip for the element. |
Event Triggers
See the full list of default event triggersrx.table.row
A row containing table cells.
alignProps
| Prop | Type | Description |
|---|---|---|
access_key | str | Provides a hint for generating a keyboard shortcut for the current element. |
auto_capitalize | "off""none""on""sentences""words""characters" | Controls whether and how text input is automatically capitalized as it is entered/edited by the user. |
content_editable | "inherit""plaintext-only" | Indicates whether the element's content is editable. |
context_menu | str | Defines the ID of a <menu> element which will serve as the element's context menu. |
dir | str | Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left). |
draggable | bool | Defines whether the element can be dragged. |
enter_key_hint | "enter""done""go""next""previous""search""send" | Hints what media types the media element is able to play. |
hidden | bool | Defines whether the element is hidden. |
input_mode | "none""text""tel""url""email""numeric""decimal""search" | Defines the type of the element. |
item_prop | str | Defines the name of the element for metadata purposes. |
lang | str | Defines the language used in the element. |
role | "alert""alertdialog""application""article""banner""button""cell""checkbox""columnheader""combobox""complementary""contentinfo""definition""dialog""directory""document""feed""figure""form""grid""gridcell""group""heading""img""link""list""listbox""listitem""log""main""marquee""math""menu""menubar""menuitem""menuitemcheckbox""menuitemradio""navigation""none""note""option""presentation""progressbar""radio""radiogroup""region""row""rowgroup""rowheader""scrollbar""search""searchbox""separator""slider""spinbutton""status""switch""tab""table""tablist""tabpanel""term""textbox""timer""toolbar""tooltip""tree""treegrid""treeitem" | Defines the role of the element. |
slot | str | Assigns a slot in a shadow DOM shadow tree to an element. |
spell_check | bool | Defines whether the element may be checked for spelling errors. |
tab_index | int | Defines the position of the current element in the tabbing order. |
title | str | Defines a tooltip for the element. |
align | "start""center""end""baseline" | The alignment of the row. |
Event Triggers
See the full list of default event triggersrx.table.column_header_cell
A table cell that is semantically treated as a column header.
justifyProps
| Prop | Type | Description |
|---|---|---|
access_key | str | Provides a hint for generating a keyboard shortcut for the current element. |
auto_capitalize | "off""none""on""sentences""words""characters" | Controls whether and how text input is automatically capitalized as it is entered/edited by the user. |
content_editable | "inherit""plaintext-only" | Indicates whether the element's content is editable. |
context_menu | str | Defines the ID of a <menu> element which will serve as the element's context menu. |
dir | str | Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left). |
draggable | bool | Defines whether the element can be dragged. |
enter_key_hint | "enter""done""go""next""previous""search""send" | Hints what media types the media element is able to play. |
hidden | bool | Defines whether the element is hidden. |
input_mode | "none""text""tel""url""email""numeric""decimal""search" | Defines the type of the element. |
item_prop | str | Defines the name of the element for metadata purposes. |
lang | str | Defines the language used in the element. |
role | "alert""alertdialog""application""article""banner""button""cell""checkbox""columnheader""combobox""complementary""contentinfo""definition""dialog""directory""document""feed""figure""form""grid""gridcell""group""heading""img""link""list""listbox""listitem""log""main""marquee""math""menu""menubar""menuitem""menuitemcheckbox""menuitemradio""navigation""none""note""option""presentation""progressbar""radio""radiogroup""region""row""rowgroup""rowheader""scrollbar""search""searchbox""separator""slider""spinbutton""status""switch""tab""table""tablist""tabpanel""term""textbox""timer""toolbar""tooltip""tree""treegrid""treeitem" | Defines the role of the element. |
slot | str | Assigns a slot in a shadow DOM shadow tree to an element. |
spell_check | bool | Defines whether the element may be checked for spelling errors. |
tab_index | int | Defines the position of the current element in the tabbing order. |
title | str | Defines a tooltip for the element. |
align | "left""center""right""justify""char" | Alignment of the content within the table header cell. |
col_span | int | Number of columns a header cell should span. |
headers | str | IDs of the headers associated with this header cell. |
row_span | int | Number of rows a header cell should span. |
scope | str | Scope of the header cell (row, col, rowgroup, colgroup). |
justify | "start""center""end" | The justification of the column. |
min_width | str | The minimum width of the cell. |
max_width | str | The maximum width of the cell. |
Event Triggers
See the full list of default event triggersrx.table.body
The body of the table contains the data rows.
Props
| Prop | Type | Description |
|---|---|---|
access_key | str | Provides a hint for generating a keyboard shortcut for the current element. |
auto_capitalize | "off""none""on""sentences""words""characters" | Controls whether and how text input is automatically capitalized as it is entered/edited by the user. |
content_editable | "inherit""plaintext-only" | Indicates whether the element's content is editable. |
context_menu | str | Defines the ID of a <menu> element which will serve as the element's context menu. |
dir | str | Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left). |
draggable | bool | Defines whether the element can be dragged. |
enter_key_hint | "enter""done""go""next""previous""search""send" | Hints what media types the media element is able to play. |
hidden | bool | Defines whether the element is hidden. |
input_mode | "none""text""tel""url""email""numeric""decimal""search" | Defines the type of the element. |
item_prop | str | Defines the name of the element for metadata purposes. |
lang | str | Defines the language used in the element. |
role | "alert""alertdialog""application""article""banner""button""cell""checkbox""columnheader""combobox""complementary""contentinfo""definition""dialog""directory""document""feed""figure""form""grid""gridcell""group""heading""img""link""list""listbox""listitem""log""main""marquee""math""menu""menubar""menuitem""menuitemcheckbox""menuitemradio""navigation""none""note""option""presentation""progressbar""radio""radiogroup""region""row""rowgroup""rowheader""scrollbar""search""searchbox""separator""slider""spinbutton""status""switch""tab""table""tablist""tabpanel""term""textbox""timer""toolbar""tooltip""tree""treegrid""treeitem" | Defines the role of the element. |
slot | str | Assigns a slot in a shadow DOM shadow tree to an element. |
spell_check | bool | Defines whether the element may be checked for spelling errors. |
tab_index | int | Defines the position of the current element in the tabbing order. |
title | str | Defines a tooltip for the element. |
Event Triggers
See the full list of default event triggersrx.table.cell
A cell containing data.
justifyProps
| Prop | Type | Description |
|---|---|---|
access_key | str | Provides a hint for generating a keyboard shortcut for the current element. |
auto_capitalize | "off""none""on""sentences""words""characters" | Controls whether and how text input is automatically capitalized as it is entered/edited by the user. |
content_editable | "inherit""plaintext-only" | Indicates whether the element's content is editable. |
context_menu | str | Defines the ID of a <menu> element which will serve as the element's context menu. |
dir | str | Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left). |
draggable | bool | Defines whether the element can be dragged. |
enter_key_hint | "enter""done""go""next""previous""search""send" | Hints what media types the media element is able to play. |
hidden | bool | Defines whether the element is hidden. |
input_mode | "none""text""tel""url""email""numeric""decimal""search" | Defines the type of the element. |
item_prop | str | Defines the name of the element for metadata purposes. |
lang | str | Defines the language used in the element. |
role | "alert""alertdialog""application""article""banner""button""cell""checkbox""columnheader""combobox""complementary""contentinfo""definition""dialog""directory""document""feed""figure""form""grid""gridcell""group""heading""img""link""list""listbox""listitem""log""main""marquee""math""menu""menubar""menuitem""menuitemcheckbox""menuitemradio""navigation""none""note""option""presentation""progressbar""radio""radiogroup""region""row""rowgroup""rowheader""scrollbar""search""searchbox""separator""slider""spinbutton""status""switch""tab""table""tablist""tabpanel""term""textbox""timer""toolbar""tooltip""tree""treegrid""treeitem" | Defines the role of the element. |
slot | str | Assigns a slot in a shadow DOM shadow tree to an element. |
spell_check | bool | Defines whether the element may be checked for spelling errors. |
tab_index | int | Defines the position of the current element in the tabbing order. |
title | str | Defines a tooltip for the element. |
p | "0""1""2""3""4""5""6""7""8""9" | Padding: "0" - "9" # noqa: ERA001. |
px | "0""1""2""3""4""5""6""7""8""9" | Padding horizontal: "0" - "9". |
py | "0""1""2""3""4""5""6""7""8""9" | Padding vertical: "0" - "9". |
pt | "0""1""2""3""4""5""6""7""8""9" | Padding top: "0" - "9". |
pr | "0""1""2""3""4""5""6""7""8""9" | Padding right: "0" - "9". |
pb | "0""1""2""3""4""5""6""7""8""9" | Padding bottom: "0" - "9". |
pl | "0""1""2""3""4""5""6""7""8""9" | Padding left: "0" - "9". |
align | "left""center""right""justify""char" | Alignment of the content within the table cell. |
col_span | int | Number of columns a cell should span. |
headers | str | IDs of the headers associated with this cell. |
row_span | int | Number of rows a cell should span. |
justify | "start""center""end" | The justification of the column. |
min_width | str | The minimum width of the cell. |
max_width | str | The maximum width of the cell. |
Event Triggers
See the full list of default event triggersrx.table.row_header_cell
A table cell that is semantically treated as a row header.
justifyProps
| Prop | Type | Description |
|---|---|---|
access_key | str | Provides a hint for generating a keyboard shortcut for the current element. |
auto_capitalize | "off""none""on""sentences""words""characters" | Controls whether and how text input is automatically capitalized as it is entered/edited by the user. |
content_editable | "inherit""plaintext-only" | Indicates whether the element's content is editable. |
context_menu | str | Defines the ID of a <menu> element which will serve as the element's context menu. |
dir | str | Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left). |
draggable | bool | Defines whether the element can be dragged. |
enter_key_hint | "enter""done""go""next""previous""search""send" | Hints what media types the media element is able to play. |
hidden | bool | Defines whether the element is hidden. |
input_mode | "none""text""tel""url""email""numeric""decimal""search" | Defines the type of the element. |
item_prop | str | Defines the name of the element for metadata purposes. |
lang | str | Defines the language used in the element. |
role | "alert""alertdialog""application""article""banner""button""cell""checkbox""columnheader""combobox""complementary""contentinfo""definition""dialog""directory""document""feed""figure""form""grid""gridcell""group""heading""img""link""list""listbox""listitem""log""main""marquee""math""menu""menubar""menuitem""menuitemcheckbox""menuitemradio""navigation""none""note""option""presentation""progressbar""radio""radiogroup""region""row""rowgroup""rowheader""scrollbar""search""searchbox""separator""slider""spinbutton""status""switch""tab""table""tablist""tabpanel""term""textbox""timer""toolbar""tooltip""tree""treegrid""treeitem" | Defines the role of the element. |
slot | str | Assigns a slot in a shadow DOM shadow tree to an element. |
spell_check | bool | Defines whether the element may be checked for spelling errors. |
tab_index | int | Defines the position of the current element in the tabbing order. |
title | str | Defines a tooltip for the element. |
p | "0""1""2""3""4""5""6""7""8""9" | Padding: "0" - "9" # noqa: ERA001. |
px | "0""1""2""3""4""5""6""7""8""9" | Padding horizontal: "0" - "9". |
py | "0""1""2""3""4""5""6""7""8""9" | Padding vertical: "0" - "9". |
pt | "0""1""2""3""4""5""6""7""8""9" | Padding top: "0" - "9". |
pr | "0""1""2""3""4""5""6""7""8""9" | Padding right: "0" - "9". |
pb | "0""1""2""3""4""5""6""7""8""9" | Padding bottom: "0" - "9". |
pl | "0""1""2""3""4""5""6""7""8""9" | Padding left: "0" - "9". |
align | "left""center""right""justify""char" | Alignment of the content within the table header cell. |
col_span | int | Number of columns a header cell should span. |
headers | str | IDs of the headers associated with this header cell. |
row_span | int | Number of rows a header cell should span. |
scope | str | Scope of the header cell (row, col, rowgroup, colgroup). |
justify | "start""center""end" | The justification of the column. |
min_width | str | The minimum width of the cell. |
max_width | str | The maximum width of the cell. |