Added pagination, sorting and filtering for the table of related persons. (#333)

Added pagination, sorting and filtering for the table of related
persons.
This commit is contained in:
2023-11-07 22:19:36 +01:00
committed by GitHub
parent 16b975a0f4
commit 12f40af538
3 changed files with 27 additions and 4 deletions

View File

@ -25,7 +25,8 @@
border: 1px solid; border: 1px solid;
border-radius: 10px; border-radius: 10px;
width: flex; width: flex;
min-width: 600px; min-width: 500px;
max-width: 900px;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-left: 2%; margin-left: 2%;

View File

@ -49,3 +49,7 @@
.metrics-graph .metrics-disclaimer { .metrics-graph .metrics-disclaimer {
margin: 20px; margin: 20px;
} }
.dash-filter input {
text-align: center !important;
}

View File

@ -145,7 +145,12 @@ def create_company_stats(
"rule": "display: none", "rule": "display: none",
}, },
], ],
style_cell={"textAlign": "center"}, style_cell={
"textAlign": "center",
"fontFamily": "Times",
"paddingLeft": "5px",
"paddingRight": "5px",
},
style_cell_conditional=[ style_cell_conditional=[
{"if": {"column_id": c}, "fontWeight": "bold"} {"if": {"column_id": c}, "fontWeight": "bold"}
for c in ["col1", "col3"] for c in ["col1", "col3"]
@ -310,6 +315,7 @@ def person_relations_layout(selected_company_id: int, session: Session) -> html:
"date_to": "Bis", "date_to": "Bis",
} }
) )
.sort_values(by=["Nachname"])
) )
return dash_table.DataTable( return dash_table.DataTable(
table.to_dict("records"), table.to_dict("records"),
@ -321,8 +327,20 @@ def person_relations_layout(selected_company_id: int, session: Session) -> html:
"padding": "20px", "padding": "20px",
"color": COLORS["raisin-black"], "color": COLORS["raisin-black"],
}, },
style_cell={"textAlign": "center"}, style_cell={"textAlign": "center", "fontFamily": "Times", "fontSize": "14px"},
style_header={"backgroundColor": COLORS["light"], "fontWeight": "bold"}, style_header={
"backgroundColor": COLORS["raisin-black"],
"fontWeight": "bold",
"color": "white",
"fontSize": "16px",
},
page_size=15,
sort_action="native",
sort_mode="multi",
column_selectable="single",
filter_action="native",
filter_options={"placeholder_text": "Filter"},
style_filter={"text-align": "center", "backgroundColor": COLORS["light"]},
) )