Skip to content

table

Displays a data set as tabular data.

The table component supports 3 display modes:

  • paginated: you can choose the page size and page size options (allow_all_rows adds an option to show a page with all rows).
  • unpaginated: all rows and no page are shown (show_all = True).
  • auto_loading: the pages are loaded on demand depending on the visible area.

The data property supported types are:

  • pandas Dataframe
  • array of arrays
  • numpy series

Data columns are accessed by their name or index (temporary dataframes are built from these different sources).

Properties

Name Type Default Description
data(★) Any Required

The data to be represented in this table.
page_size int 100

For paginated table, the number of rows displayed.
allow_all_rows bool False

For paginated table, adds an option to show all rows.
show_all bool False

For paginated table, show all rows.
auto_loading bool False

data will be loaded on demand.
width[col_name] str

The width, in CSS units, of the indicated column.
selected list[int]|str

The list of the indices of the rows to show as selected.
page_size_options List[int]|str [50, 100, 500]

The list of available page sizes that users can choose.
columns str|List[str]|Dict[str, Dict[str, str|int]] shows all columns when empty

The list of the column names to display.

  • str: Semicolon (';')-separated list of column names.
  • List[str]: list of column names
  • dict: a dictionary with entries matching: {"col name": {format: "format", index: 1}}.
    if index is specified, it represents the display order of the columns. If index is not specified, the list order defines the index.
    If format is specified, it is used for numbers or dates.
date_format str "MM/dd/yyyy"

The date format that is used for all date columns when format is not specifically defined.
number_format str

The number format that is used for all number columns when format is not specifically defined.
group_by[col_name] bool False

Indicates, if True, that the given column can be aggregated. See below for details.
apply[col_name] str "first"

The name of the aggregation function to use. This is used only if group_by[column_name] is set to True. See below for details.

style str

Allows the styling of table lines. See below for details.
style[col_name] str

Allows the styling of table cells. See below for details.
tooltip str

The name of the function that must return a tooltip text for a cell. See below for details.
tooltip[col_name] str

The name of the function that must return a tooltip text for a cell. See below for details.
width str|int|float "100vw"

The width, in CSS units, of this table control.
height str|int|float "80vh"

The height, in CSS units, of this table control.
filter bool False

Indicates, if True, that all columns can be filtered.
filter[col_name] bool False

Indicates, if True, that the indicated column can be filtered.
nan_value str ""

The replacement text for NaN (not-a-number) values.
nan_value[col_name] str ""

The replacement text for NaN (not-a-number) values for the indicated column.
editable dynamic(bool) True

Indicates, if True, that all columns can be edited.
editable[col_name] bool editable

Indicates, if False, that the indicated column cannot be edited when editable is True.
on_edit Callback

The name of a function that is to be triggered when a cell edition is validated.
All parameters of that function are optional:

  • state (State): the state instance.
  • var_name (str): the name of the tabular data variable.
  • action (str): the name of the action that provoked the change.
  • payload (dict): the details on this callback's invocation.
    This dictionary has the following keys:
    • index (int): the row index.
    • col (str): the column name.
    • value (Any): the new cell value cast to the type of the column.
    • user_value (str): the new cell value as entered by the user.
If this property is not set, the user cannot edit cells.
on_delete str

The name of a function that is to be triggered when a row is deleted.
All parameters of that function are optional:

  • state (State): the state instance.
  • var_name (str): the name of the tabular data variable.
  • action (str): the name of the action that provoked the change.
  • payload (dict): the details on this callback's invocation.
    This dictionary has the following keys:
    • index (int): the row index.
If this property is not set, the user cannot delete rows.
on_add str

The name of a function that is to be triggered when the user requests a row to be added.
All parameters of that function are optional:

  • state (State): the state instance.
  • var_name (str): the name of the tabular data variable.
  • action (str): the name of the action that provoked the change.
  • payload (dict): the details on this callback's invocation.
    This dictionary has the following keys:
    • index (int): the row index.
If this property is not set, the user cannot add rows.
on_action str

The name of a function that is to be triggered when the user selects a row.
All parameters of that function are optional:

  • state (State): the state instance.
  • var_name (str): the name of the tabular data variable.
  • action (str): the name of the action that provoked the change.
  • payload (dict): the details on this callback's invocation.
    This dictionary has the following keys:
    • index (int): the row index.
.
size str "small"

The size of the rows, valid values are "small" and "medium".
active dynamic(bool) True

Indicates if this component is active. An inactive component allows no user interaction.
id str

The identifier that will be assigned to the rendered HTML component.
properties dict[str, Any]

Bound to a dictionary that contains additional properties for this element.
class_name dynamic(str)

List of CSS class names that will be associated with the generated HTML Element. This class names will be added to the default taipy-<element_type>.
hover_text dynamic(str)

Information that is displayed when the user hovers over this element.

(★)data is the default property for this visual element.

Usage

Show a table

If you want to create a table that represents a dataframe stored in the Python variable data (all columns will be displayed), you can use the following content:

Page content

<|{data}|table|>

<taipy:table data="{data}" />

Show specific columns

Page content

<|{data}|table|columns=Col 1;Col 2;Col 3|page_size=10|page_size_options=10;30;100|date_format=eee dd MMM yyyy|not allow_all_rows|show_all=No|auto_loading=False|width=100vw|height=100vw|selected={selection}|>

<taipy:table columns="Col 1;Col 2;Col 3" page_size="10" page_size_options="10;30;100" date_format="eee dd MMM yyyy" allow_all_rows="False" show_all="False" auto_loading="False" width="100vw" height="100vw" selected="{selection}">{data}</taipy:table>

Aggregation

To get the aggregation functionality in your table, you must indicate which columns can be aggregated, and how to perform the aggregation.

This is done using the group_by and apply properties.

The group_by[column_name] property, when set to True indicates that the column column_name can be aggregated.

The function provided in the apply[column_name] property indicates how to perform this aggregation. The value of this property, which is a string, can be:

  • A built-in function. Available predefined functions are the following: count, sum, mean, median, min, max, std, first (the default value), and last.
  • The name of a user-defined function, or a lambda function.
    This function receives a single parameter which is the series to aggregate, and it must return a scalar value which would be the result of the aggregation.

Page content

<|{data}|table|group_by[Group column]|apply[Apply column]=count|>

<taipy:table data="{data}" group_by[Group column]="True" apply[Apply column]="count" />

Styling

You can modify the style of entire rows or specific table cells.

When Taipy creates the rows and the cells, it can add a specific CSS class that you would have set as the return value of the function set to the style property, for entire rows, or style[_column_name_], for specific cells.

The signature of this function depends on which style property you use:

  • style: this applies to entire rows. The given function expects three optional parameters:
    • state: the current state
    • index: the index of the row in this table
    • row: all the values for this row
  • style[_column_name_]: this applies to a specific cell. The given function expects five optional parameters:
    • state: the current state
    • value: the value of the cell
    • index: the index of the row in this table
    • row: all the values for this row
    • column_name: the name of the column for this cell

Based on these parameters, the function must return a string that defines a CSS class name that will be added to the CSS classes for this table row or this specific cell.

You can then add the definition of this class in your CSS file.

Page content

<|{data}|table|style={lambda state, idx, row: "red-row" if idx % 2 == 0 else "blue-row"}|>

<taipy:table data="{data}" style="{lambda state, idx, row: 'red-row' if idx % 2 == 0 else 'blue-row'}" />

Css definition 

.red-row td {
  background-color: red;
}
.blue-row td {
  background-color: blue;
}

Cell Tooltip

You can specify a tooltip for specific table cells.

When Taipy creates the cells, it can add a specific tooltip that you would have set as the return value of the function set to the tooltip or tooltip[column_name] property .

The signature of this function expects five optional parameters: - state: the current state - value: the value of the cell - index: the index of the row in this table - row: all the values for this row - column_name: the name of the column for this cell

Based on these parameters, the function must return a string that defines a tooltip that is used as the cell's tooltip text.

Page content

<|{data}|table|tooltip={lambda state, val, idx: "some tooltip" if idx % 2 == 0 else "some other tooltip"}|>

<taipy:table data="{data}" tooltip="{lambda state, idx, col: 'some tooltip' if idx % 2 == 0 else 'some other tooltip'}" />