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 |
---|---|---|---|
(★) |
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.
|
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.
|
|
on_delete |
str | The name of a function that is to be triggered when a row is deleted.
|
|
on_add |
str | The name of a function that is to be triggered when the user requests a row to be added.
|
|
on_action |
str | The name of a function that is to be triggered when the user selects a row.
|
|
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 |
|
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), andlast
. - 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'}" />