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".
rebuild	dynamic(bool)	False	Allows dynamic columns refresh if set to True.
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.

Styling

All the table controls are generated with the "taipy-table" CSS class. You can use this class name to select the tables on your page and apply style.

Stylekit support

The Stylekit provides a CSS custom property:

• --table-stripe-opacity
  This property contains the opacity applied to odd lines of tables.
  The default value is 0.5.

The Stylekit also provides specific CSS classes that you can use to style tables:

• header-plain
  Adds a plain and contrasting background color to the table header.
• rows-bordered
  Adds a bottom border to each row.
• rows-similar
  Removes the even-odd striped background so all rows have the same background.

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

Markdown

<|{data}|table|>

HTML

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

Show specific columns

Page content

Markdown

<|{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}|>

HTML

<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

Markdown

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

HTML

<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

Markdown

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

HTML

<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

Markdown

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

HTML

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