I’m making a reporting app with Flet and i need to have a dropdown with values from which a user will pick one. After picking the value, a table besides the dropdown will need to be updated with the calculated data based on the picked value. This type of procedure will be a recurring element of the whole app.
In this stage, it seems that the data is calculated correctly, but flet.DataCell
does some weird thing and the data is lost in the process. Below is the sample code:
class AppFace:
def __init__(self, page):
self.page = page
self.page.title = "KPI Reporting v.01"
self.page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
# Add the filepicker to the page
self.file_picker = ft.FilePicker(on_result=self.on_file_selected)
self.page.overlay.append(self.file_picker)
self.file_output = ft.Text(value="No File Selected")
# Initialize sidebar and content area
self.sidebar = self.create_sidebar()
self.content = ft.Column(controls=[ft.Text("Welcome to the app!")], expand=True)
# Home Page default elements
self.raw_drop = consolidate.GatherData().form_combo()
self.dropdown_var = None
self.dropdown = ft.Dropdown(
hint_text="Choose a department",
width=200,
options=[ft.dropdown.Option(value) for value in self.raw_drop],
on_change=self.drop_changed,
)
self.empty_text_label = ft.Text()
self.update_button = ft.FilledButton(
text="Update Table", on_click=self.update_table
)
# Layout with sidebar and main content
self.page.add(
ft.Row(
controls=[
ft.Container(content=self.sidebar, width=150),
ft.VerticalDivider(width=1),
self.content,
],
expand=True,
)
)
self.show_home()
def drop_changed(self, e):
self.dropdown_var = e.control.value
self.empty_text_label.value = f"Selected Value: {self.dropdown_var}"
self.show_home()
def update_table(self):
df = file_ops.FilePrep().split_by_snap()[1]
df_filtered = (
df[df["department"] == self.dropdown_var] if self.dropdown_var else df
)
df_to_convert = kpi.EmployeeAnalytics(
df_filtered, self.empty_text_label
).form_df()
datatable = ft.DataTable(
bgcolor="green",
horizontal_lines=ft.BorderSide(1, "blue"),
heading_row_color=ft.colors.BLACK12,
heading_row_height=25,
data_row_color={"hovered": "0x30FF0000"},
column_spacing=25,
)
for col in df_to_convert.columns:
datatable.columns.append(ft.DataColumn(ft.Text(col)))
# Add rows to the DataTable
for i in range(len(df_to_convert)):
datatable.rows.append(
ft.DataRow(
cells=[
ft.DataCell(ft.Text(str(df_to_convert.iloc[i, j])))
for j in range(len(df_to_convert.columns))
]
)
)
if initialize:
self.content.controls = [
ft.Text("Welcome to the KPI Reporting App"),
ft.Container(
content=ft.Column(
[
ft.Text("Combobox section"),
self.dropdown,
self.update_button,
self.empty_text_label,
]
),
margin=10,
padding=10,
alignment=ft.alignment.center,
bgcolor=ft.colors.GREEN_200,
width=350,
height=200, # Adjust height to fit the button
border_radius=10,
),
ft.Container(
content=datatable,
margin=9,
padding=9,
alignment=ft.alignment.center_left,
bgcolor=ft.colors.AMBER_400,
height=300,
border_radius=10,
),
]
else:
# Update the existing DataTable control within content
updated = False
for index, control in enumerate(self.content.controls):
if isinstance(control, ft.Container) and isinstance(
control.content, ft.DataTable
):
self.content.controls[index] = ft.Container(
content=datatable,
margin=9,
padding=9,
alignment=ft.alignment.center_left,
bgcolor=ft.colors.AMBER_400,
height=300,
border_radius=10,
)
updated = True
break
if not updated:
self.content.controls.append(
ft.Container(
content=datatable,
margin=9,
padding=9,
alignment=ft.alignment.center_left,
bgcolor=ft.colors.AMBER_400,
height=300,
border_radius=10,
)
)
self.page.update()
def show_home(self):
self.empty_text_label = ft.Text()
self.update_table(initialize=True)
self.page.update()
Additional details:
consolidate.create_flet_table(param)
is a method that extracts the data from a calculated dataframe and stores the columns and the data in a tuplefile_ops.FilePrep().split_by_snap()[1]
is a part of a dataframekpi.EmployeeAnalytics(*args).form_df()
is a dataframe made from compiling data resulted from calculating data from the above dataframeconsolidate.GatherData().form_combo()
is a list of uniwue values. The values of the dropdown.
The added button can be deleted of the table updates after the dropdown value is picked.