DataTable
Examples#
Basic Example#
import flet as ft
def main(page: ft.Page):
page.add(
ft.DataTable(
columns=[
ft.DataColumn(label=ft.Text("First name")),
ft.DataColumn(label=ft.Text("Last name")),
ft.DataColumn(label=ft.Text("Age"), numeric=True),
],
rows=[
ft.DataRow(
cells=[
ft.DataCell(ft.Text("John")),
ft.DataCell(ft.Text("Smith")),
ft.DataCell(ft.Text("43")),
],
),
ft.DataRow(
cells=[
ft.DataCell(ft.Text("Jack")),
ft.DataCell(ft.Text("Brown")),
ft.DataCell(ft.Text("19")),
],
),
ft.DataRow(
cells=[
ft.DataCell(ft.Text("Alice")),
ft.DataCell(ft.Text("Wong")),
ft.DataCell(ft.Text("25")),
],
),
],
),
)
ft.run(main)
Sortable columns and selectable rows#
import flet as ft
def main(page: ft.Page):
page.add(
ft.DataTable(
width=700,
bgcolor=ft.Colors.YELLOW,
border=ft.border.all(2, ft.Colors.RED),
border_radius=10,
vertical_lines=ft.border.BorderSide(3, ft.Colors.BLUE),
horizontal_lines=ft.border.BorderSide(1, ft.Colors.GREEN),
sort_column_index=0,
sort_ascending=True,
heading_row_color=ft.Colors.BLACK12,
heading_row_height=100,
data_row_color={ft.ControlState.HOVERED: "0x30FF0000"},
show_checkbox_column=True,
divider_thickness=0,
column_spacing=200,
columns=[
ft.DataColumn(
label=ft.Text("Column 1"),
on_sort=lambda e: print(f"{e.column_index}, {e.ascending}"),
),
ft.DataColumn(
label=ft.Text("Column 2"),
tooltip="This is a second column",
numeric=True,
on_sort=lambda e: print(f"{e.column_index}, {e.ascending}"),
),
],
rows=[
ft.DataRow(
cells=[ft.DataCell(ft.Text("A")), ft.DataCell(ft.Text("1"))],
selected=True,
on_select_change=lambda e: print(f"row select changed: {e.data}"),
),
ft.DataRow([ft.DataCell(ft.Text("B")), ft.DataCell(ft.Text("2"))]),
],
),
)
ft.run(main)
Handling events#
import flet as ft
def main(page: ft.Page):
def handle_row_selection_change(e: ft.Event[ft.DataRow]):
match e.control.data:
case 1:
row1.selected = not row1.selected
case 2:
row2.selected = not row2.selected
case 3:
row3.selected = not row3.selected
page.update()
def handle_column_sort(e: ft.DataColumnSortEvent):
match e.control.data:
case 1:
print(f"{e.column_index}, {e.ascending}")
# table.sort_column_index = 1
table.sort_ascending = e.ascending
case 2:
print(f"{e.column_index}, {e.ascending}")
# table.sort_column_index = 2
table.sort_ascending = e.ascending
page.update()
page.add(
table := ft.DataTable(
width=700,
bgcolor=ft.Colors.TEAL_ACCENT_200,
border=ft.Border.all(2, ft.Colors.RED_ACCENT_200),
border_radius=10,
vertical_lines=ft.border.BorderSide(3, ft.Colors.BLUE_600),
horizontal_lines=ft.border.BorderSide(1, ft.Colors.GREEN_600),
sort_column_index=0,
sort_ascending=True,
heading_row_color=ft.Colors.BLACK12,
heading_row_height=100,
data_row_color={ft.ControlState.HOVERED: "0x30FF0000"},
show_checkbox_column=True,
divider_thickness=0,
column_spacing=200,
columns=[
ft.DataColumn(
label=ft.Text("Column 1"),
tooltip="This is the first column",
data=1,
on_sort=handle_column_sort,
),
ft.DataColumn(
label=ft.Text("Column 2"),
tooltip="This is a second column",
numeric=True,
data=2,
on_sort=handle_column_sort,
),
],
rows=[
row1 := ft.DataRow(
cells=[ft.DataCell(ft.Text("A")), ft.DataCell(ft.Text("1"))],
selected=True,
on_select_change=handle_row_selection_change,
data=1,
),
row2 := ft.DataRow(
cells=[ft.DataCell(ft.Text("B")), ft.DataCell(ft.Text("2"))],
selected=False,
on_select_change=handle_row_selection_change,
data=2,
),
row3 := ft.DataRow(
cells=[ft.DataCell(ft.Text("C")), ft.DataCell(ft.Text("3"))],
selected=False,
on_select_change=handle_row_selection_change,
data=3,
),
],
)
)
ft.run(main)
Bases: ConstrainedControl
A Material Design data table.
| RAISES | DESCRIPTION |
|---|---|
AssertionError
|
If there are no visible |
AssertionError
|
|
AssertionError
|
If |
AssertionError
|
If |
AssertionError
|
If |
animate_offset: AnimationValue | None = None
animate_opacity: AnimationValue | None = None
animate_position: AnimationValue | None = None
animate_rotation: AnimationValue | None = None
animate_scale: AnimationValue | None = None
bottom: Number | None = None
The distance that the child's bottom edge is inset from the bottom of the stack.
Note
Effective only if this control is a descendant of one of the following:
Stack control, Page.overlay list.
checkbox_horizontal_margin: Number | None = None
Horizontal margin around the checkbox, if it is displayed.
clip_behavior: ClipBehavior = NONE
Defines how the contents of the table are clipped.
col: ResponsiveNumber = 12
If a parent of this control is a ResponsiveRow,
this property is used to determine
how many virtual columns of a screen this control will span.
Can be a number or a dictionary configured to have a different value for specific
breakpoints, for example col={"sm": 6}.
This control spans the 12 virtual columns by default.
Dimensions
| Breakpoint | Dimension |
|---|---|
| xs | <576px |
| sm | ≥576px |
| md | ≥768px |
| lg | ≥992px |
| xl | ≥1200px |
| xxl | ≥1400px |
column_spacing: Number | None = None
The horizontal margin between the contents of each data column.
data_row_color: ControlStateValue[ColorValue] | None = None
The background color for the data rows.
The effective background color can be made to depend on the ControlState
state, i.e. if the row is selected, pressed, hovered, focused, disabled or enabled.
The color is painted as an overlay to the row. To make sure that the row's InkWell
is visible (when pressed, hovered and focused), it is recommended to use a
translucent background color.
data_row_max_height: Number | None = None
The maximum height of each row (excluding the row that contains column headings).
Set to float("inf") for the height of each row to adjust automatically with its
content.
Defaults to 48.0 and must be greater than or equal to data_row_min_height.
data_row_min_height: Number | None = None
The minimum height of each row (excluding the row that contains column headings).
Defaults to 48.0 and must be less than or equal to data_row_max_height.
disabled: bool = False
Every control has disabled property which is False by default - control and all
its children are enabled.
Note
The value of this property will be propagated down to all children controls recursively.
divider_thickness: Number = 1.0
The width of the divider that appears between rows.
Note
Must be greater than or equal to zero.
expand_loose: bool = False
Allows the control to expand along the main axis if space is available, but does not require it to fill all available space.
More information here.
heading_row_color: ControlStateValue[ColorValue] | None = (
None
)
The background color for the heading row.
The effective background color can be made to depend on the ControlState
state, i.e. if the row is pressed, hovered, focused when sorted. The color is
painted as an overlay to the row. To make sure that the row's InkWell is visible
(when pressed, hovered and focused), it is recommended to use a translucent color.
heading_text_style: TextStyle | None = None
The text style for the heading row.
horizontal_lines: BorderSide | None = None
Set the color and width of horizontal lines between rows.
horizontal_margin: Number | None = None
The horizontal margin between the edges of the table and the content in the first and last cells of each row.
When a checkbox is displayed, it is also the margin between the checkbox the content in the first data column.
left: Number | None = None
The distance that the child's left edge is inset from the left of the stack.
Note
Effective only if this control is a descendant of one of the following:
Stack control, Page.overlay list.
offset: OffsetValue | None = None
Applies a translation transformation before painting the control.
The translation is expressed as an Offset scaled to the control's size.
So, Offset(x=0.25, y=0), for example, will result in a horizontal translation
of one quarter the width of this control.
Example
The following example displays container at 0, 0 top left corner of a stack as
transform applies -1 * 100, -1 * 100 (offset * control's size) horizontal and
vertical translations to the control:
on_animation_end: (
ControlEventHandler[ConstrainedControl] | None
) = None
Called when animation completes.
Can be used to chain multiple animations.
The data property of the event handler argument contains the name of the animation.
More information here.
on_select_all: ControlEventHandler[DataTable] | None = None
Invoked when the user selects or unselects every row, using the checkbox in the heading row.
If this is None, then the DataRow.on_select_change
callback of every row in the table is invoked appropriately instead.
To control whether a particular row is selectable or not, see
DataRow.on_select_change. This callback is only relevant if any row is
selectable.
opacity: Number = 1.0
Defines the transparency of the control.
Value ranges from 0.0 (completely transparent) to 1.0 (completely opaque
without any transparency).
The page (of type Page or PageView) to which this control belongs to.
parent: BaseControl | None
The direct ancestor(parent) of this control.
It defaults to None and will only have a value when this control is mounted (added to the page tree).
The Page control (which is the root of the tree) is an exception - it always has parent=None.
right: Number | None = None
The distance that the child's right edge is inset from the right of the stack.
Note
Effective only if this control is a descendant of one of the following:
Stack control, Page.overlay list.
rotate: RotateValue | None = None
Transforms this control using a rotation around its center.
The value of rotate property could be one of the following types:
number- a rotation in clockwise radians. Full circle360°ismath.pi * 2radians,90°ispi / 2,45°ispi / 4, etc.Rotate- allows to specify rotationangleas well asalignment- the location of rotation center.
scale: ScaleValue | None = None
Scales this control along the 2D plane. Default scale factor is 1.0, meaning no-scale.
Setting this property to 0.5, for example, makes this control twice smaller, while 2.0 makes it twice larger.
Different scale multipliers can be specified for x and y axis, by setting
Control.scale property to an instance of Scale class.
Either scale or scale_x and scale_y could be specified, but not all of them.
show_bottom_border: bool = False
Whether a border at the bottom of the table is displayed.
By default, a border is not shown at the bottom to allow for a border around the table defined by decoration.
show_checkbox_column: bool = False
Whether the control should display checkboxes for selectable rows.
If True, a checkbox will be placed at the beginning of each row that is
selectable. However, if DataRow.on_select_change
is not set for any row, checkboxes will not be placed, even if this value is True.
If False, all rows will not display a checkbox.
sort_ascending: bool = False
Whether the column mentioned in sort_column_index,
if any, is sorted in ascending order.
If True, the order is ascending (meaning the rows with the smallest values for
the current sort column are first in the table).
If False, the order is descending (meaning the rows with the smallest values for
the current sort column are last in the table).
sort_column_index: int | None = None
The current primary sort key's column.
If specified, indicates that the indicated column is the column by which the data
is sorted. The number must correspond to the index of the relevant column in
columns.
Setting this will cause the relevant column to have a sort indicator displayed.
When this is None, it implies that the table's sort order does not correspond to
any of the columns.
tooltip: TooltipValue | None = None
The tooltip ot show when this control is hovered over.
top: Number | None = None
The distance that the child's top edge is inset from the top of the stack.
Note
Effective only if this control is a descendant of one of the following:
Stack control, Page.overlay list.
vertical_lines: BorderSide | None = None
Set the color and width of vertical lines between columns.
visible: bool = True
Every control has visible property which is True by default - control is
rendered on the page. Setting visible to False completely prevents control (and
all its children if any) from rendering on a page canvas. Hidden controls cannot be
focused or selected with a keyboard or mouse and they do not emit any events.