From b3f90b5380aa46ac2fa2b5766507d845c2d55e5e Mon Sep 17 00:00:00 2001 From: Lendemor Date: Mon, 9 Oct 2023 15:02:29 +0200 Subject: [PATCH 1/6] wip add datatable example --- datatable_showcase/.gitignore | 4 + datatable_showcase/assets/favicon.ico | Bin 0 -> 15086 bytes .../datatable_showcase/__init__.py | 0 .../datatable_showcase/datatable_showcase.py | 310 ++++++++++++++++++ datatable_showcase/rxconfig.py | 5 + ecommerce/.gitignore | 3 +- 6 files changed, 321 insertions(+), 1 deletion(-) create mode 100644 datatable_showcase/.gitignore create mode 100644 datatable_showcase/assets/favicon.ico create mode 100644 datatable_showcase/datatable_showcase/__init__.py create mode 100644 datatable_showcase/datatable_showcase/datatable_showcase.py create mode 100644 datatable_showcase/rxconfig.py diff --git a/datatable_showcase/.gitignore b/datatable_showcase/.gitignore new file mode 100644 index 00000000..eab0d4b0 --- /dev/null +++ b/datatable_showcase/.gitignore @@ -0,0 +1,4 @@ +*.db +*.py[cod] +.web +__pycache__/ \ No newline at end of file diff --git a/datatable_showcase/assets/favicon.ico b/datatable_showcase/assets/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..609f6abcbeb0fec5157b54a36d7b2aeb759f9e1b GIT binary patch literal 15086 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 str | None: + return "refs['__toast'] = useToast()" + + @staticmethod + def show( + title: str, + description: str, + duration: int, + status: Literal["info", "warning", "success", "error", "loading"] = "info", + ) -> rx.event.EventSpec: + return rx.call_script( + f""" + refs['__toast']({{ + title: "{title}", + description: "{description}", + duration: {duration}, + status: "{status}", + isClosable: true, + }}) + """ + ) + + +TP = ToastProvider + + +class State(rx.State): + cols1: list[Any] = [ + "Title", + {"title": "Select", "type": "bool"}, + ] + cols2: list[Any] = [ + {"title": "Title", "type": "str"}, + { + "title": "Bool", + "type": "bool", + "group": "Data", + }, + { + "title": "Date", + "type": "datetime", + "id": "date", + "group": "Data", + }, + { + "title": "Foo", + "type": "int", + "id": "date", + "readOnly": True, + "group": "Data", + }, + { + "title": "Bar", + "type": "str", + "id": "date", + "group": "Data", + }, + ] + data = [ + ["1", True, datetime.now(), 0, "A", "A", "A"], + ["2", False, datetime.now(), 0, "A", "A", "A"], + ["3", True, datetime.now(), 0, "A", "A", "A"], + ["4", False, datetime.now(), 0, "A", "A", "A"], + ["5", False, datetime.now(), 0, "A", "A", "A"], + ["6", False, datetime.now(), 0, "A", "A", "A"], + ["7", False, datetime.now(), 0, "A", "A", "A"], + ["8", False, datetime.now(), 0, "A", "A", "A"], + ["9", False, datetime.now(), 0, "A", "A", "A"], + ["10", False, datetime.now(), 0, "A", "A", "A"], + ] + df: DataFrame = df + + @rx.var + def c_cols1(self) -> list[dict[str, Any]]: + return [format.format_data_editor_column(c) for c in self.cols1] + + def edit_cell(self, pos, value): + col, row = pos + self.data[row][col] = value["data"] + yield CtrlState.send_alert("Cell edited", pos, value["data"]) + + @rx.var + def selected(self) -> list: + return [",".join([row[0] for row in self.data if row[1]])] + + +class CtrlState(State): + draw_focus_ring = True + fixed_shadow_x = False + fixed_shadow_y = False + smooth_scroll_x = False + smooth_scroll_y = False + vertical_border = False + freeze_columns = 0 + row_height: int = 20 + row_marker: str = "both" + row_marker_width = 15 + group_header_height = 20 + header_height = 20 + max_column_auto_width = 100 + min_column_width = 100 + max_column_width = 300 + row_marker_start_index = 0 + column_select = "single" + + def send_alert(self, msg, data=None, data2=None): + if data2: + yield TP.show( + title="DataTable Demo", + description=f"{msg} {data} {data2}", + status="info", + duration=2000, + ) + elif data: + yield TP.show( + title="DataTable Demo", + description=f"{msg} {data}", + status="info", + duration=2000, + ) + else: + yield TP.show( + title="DataTable Demo", + description=f"{msg}", + status="info", + duration=2000, + ) + + +def get_dyn_setter(var: rx.Var): + return CtrlState.event_handlers[var.get_setter_name().rpartition(".")[-1]] + + +def controller_item(var, ctrl): + return rx.hstack(rx.text(var.name, ": "), ctrl, rx.text(var), width="100%") + + +def controller_line(_list): + return rx.hstack( + *[controller_checkbox(v) for v in _list], + width="100%", + ) + + +def controller_checkbox(var): + return controller_item( + var, rx.checkbox(is_checked=var, on_change=get_dyn_setter(var)) + ) + + +def controller_slider(var, min_, max_): + return controller_item( + var, rx.slider(value=var, on_change=get_dyn_setter(var), min_=min_, max_=max_) + ) + + +def controller_select(var, options): + return controller_item( + var, rx.select(options, value=var, on_change=get_dyn_setter(var)) + ) + + +def controller(): + return rx.vstack( + rx.hstack(rx.heading("Parameters"), rx.color_mode_switch()), + rx.divider(border_color="black", width="100%"), + controller_line( + [ + CtrlState.draw_focus_ring, + CtrlState.fixed_shadow_x, + CtrlState.fixed_shadow_y, + ] + ), + controller_line( + [ + CtrlState.vertical_border, + CtrlState.smooth_scroll_x, + CtrlState.smooth_scroll_y, + ] + ), + controller_slider(CtrlState.freeze_columns, 0, 5), + controller_slider(CtrlState.group_header_height, 20, 50), + controller_slider(CtrlState.header_height, 20, 50), + controller_slider(CtrlState.max_column_auto_width, 200, 300), + controller_slider(CtrlState.max_column_width, 300, 500), + controller_slider(CtrlState.min_column_width, 100, 300), + controller_slider(CtrlState.row_height, 20, 100), + controller_select( + CtrlState.row_marker, + ["number", "none", "checkbox", "both", "clickable-number"], + ), + controller_slider(CtrlState.row_marker_start_index, -5, 5), + controller_slider(CtrlState.row_marker_width, 20, 50), + controller_select(CtrlState.column_select, ["none", "single", "multi"]), + rx.spacer(), + height="100vh", + width="30vw", + ) + + +darkTheme = { + "accentColor": "#8c96ff", + "accentLight": "rgba(202, 206, 255, 0.253)", + "textDark": "#ffffff", + "textMedium": "#b8b8b8", + "textLight": "#a0a0a0", + "textBubble": "#ffffff", + "bgIconHeader": "#b8b8b8", + "fgIconHeader": "#000000", + "textHeader": "#a1a1a1", + "textHeaderSelected": "#000000", + "bgCell": "#16161b", + "bgCellMedium": "#202027", + "bgHeader": "#212121", + "bgHeaderHasFocus": "#474747", + "bgHeaderHovered": "#404040", + "bgBubble": "#212121", + "bgBubbleSelected": "#000000", + "bgSearchResult": "#423c24", + "borderColor": "rgba(225,225,225,0.2)", + "drilldownBorder": "rgba(225,225,225,0.4)", + "linkColor": "#4F5DFF", + "headerFontStyle": "bold 14px", + "baseFontStyle": "13px", + "fontFamily": "Inter, Roboto, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, noto, arial, sans-serif", +} + + +@rx.page(route="/") +def idx(): + return rx.hstack( + controller(), + rx.divider(orientation="vertical", height="100vh", border="solid black 1px"), + rx.vstack( + TP.create(), + rx.data_editor( + columns=State.cols2, + data=State.data, + drawFocusRing=CtrlState.draw_focus_ring, + fixedShadowX=CtrlState.fixed_shadow_x, + fixedShadowY=CtrlState.fixed_shadow_y, + freezeColumns=CtrlState.freeze_columns, + groupHeaderHeight=CtrlState.group_header_height, + headerHeight=CtrlState.header_height, + maxColumnAutoWidth=CtrlState.max_column_auto_width, + maxColumnWidth=CtrlState.max_column_width, + minColumnWidth=CtrlState.min_column_width, + rowHeight=CtrlState.row_height, + rowMarkers=CtrlState.row_marker, + rowMarkerWidth=CtrlState.row_marker_width, + rowMarkerStartIndex=CtrlState.row_marker_start_index, + smoothScrollX=CtrlState.smooth_scroll_x, + smoothScrollY=CtrlState.smooth_scroll_y, + verticalBorder=CtrlState.vertical_border, + columnSelect=CtrlState.column_select, + # style + theme=darkTheme, + # event handlers + onCellEdited=CtrlState.edit_cell, + onGroupHeaderClicked=lambda idx, data: CtrlState.send_alert( + "onGroupHeaderClicked: ", idx, data["group"] + ), + onGroupHeaderContextMenu=lambda idx, data: CtrlState.send_alert( + "onGroupHeaderContextMenu: ", idx, data + ), + onCellActivated=lambda pos: CtrlState.send_alert( + "onCellActivated: ", pos + ), + onCellClicked=lambda pos: CtrlState.send_alert("onCellClicked: ", pos), + onCellContextMenu=lambda pos: CtrlState.send_alert( + "onCellContextMenu: ", pos + ), + onHeaderClicked=lambda pos: CtrlState.send_alert( + "onHeaderClicked: ", pos + ), + onHeaderContextMenu=lambda pos: CtrlState.send_alert( + "onHeaderContextMenu: ", pos + ), + onHeaderMenuClick=lambda col, pos: CtrlState.send_alert( + "onHeaderMenuClick: ", col, pos + ), + # onItemHovered=lambda pos: CtrlState.send_alert("", pos), + onDelete=lambda selection: CtrlState.send_alert("onDelete", selection), + onSelectionCleared=CtrlState.send_alert("onSelectionCleared"), + ), + rx.spacer(), + height="100vh", + spacing="25", + ), + ) + + +app = rx.App() +app.compile() diff --git a/datatable_showcase/rxconfig.py b/datatable_showcase/rxconfig.py new file mode 100644 index 00000000..844fea5e --- /dev/null +++ b/datatable_showcase/rxconfig.py @@ -0,0 +1,5 @@ +import reflex as rx + +config = rx.Config( + app_name="datatable_showcase", +) \ No newline at end of file diff --git a/ecommerce/.gitignore b/ecommerce/.gitignore index bf56ff42..709ca641 100644 --- a/ecommerce/.gitignore +++ b/ecommerce/.gitignore @@ -1,4 +1,5 @@ *.py[cod] .web __pycache__/ -reflex.db \ No newline at end of file +reflex.db +.vscode \ No newline at end of file From fe61dd65179aaf807017d6004589fc2a5a8e4322 Mon Sep 17 00:00:00 2001 From: Lendemor Date: Mon, 16 Oct 2023 16:32:42 +0200 Subject: [PATCH 2/6] clean up example --- .../datatable_showcase/datatable_showcase.py | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/datatable_showcase/datatable_showcase/datatable_showcase.py b/datatable_showcase/datatable_showcase/datatable_showcase.py index fe0a0cb8..e18ca428 100644 --- a/datatable_showcase/datatable_showcase/datatable_showcase.py +++ b/datatable_showcase/datatable_showcase/datatable_showcase.py @@ -5,10 +5,11 @@ import reflex as rx from reflex.utils import format -from pandas import DataFrame +# from pandas import DataFrame -df = DataFrame({"A": [1, 2], "B": ["foo", "bar"]}) + +# df = DataFrame({"A": [1, 2], "B": ["foo", "bar"]}) class ToastProvider(rx.components.libs.chakra.ChakraComponent): @@ -84,7 +85,7 @@ class State(rx.State): ["9", False, datetime.now(), 0, "A", "A", "A"], ["10", False, datetime.now(), 0, "A", "A", "A"], ] - df: DataFrame = df + # df: DataFrame = df @rx.var def c_cols1(self) -> list[dict[str, Any]]: @@ -274,7 +275,7 @@ def idx(): # event handlers onCellEdited=CtrlState.edit_cell, onGroupHeaderClicked=lambda idx, data: CtrlState.send_alert( - "onGroupHeaderClicked: ", idx, data["group"] + "onGroupHeaderClicked: ", idx, data ), onGroupHeaderContextMenu=lambda idx, data: CtrlState.send_alert( "onGroupHeaderContextMenu: ", idx, data @@ -296,8 +297,8 @@ def idx(): "onHeaderMenuClick: ", col, pos ), # onItemHovered=lambda pos: CtrlState.send_alert("", pos), - onDelete=lambda selection: CtrlState.send_alert("onDelete", selection), - onSelectionCleared=CtrlState.send_alert("onSelectionCleared"), + # onDelete=lambda selection: CtrlState.send_alert("onDelete", selection), + # onSelectionCleared=CtrlState.send_alert("onSelectionCleared"), ), rx.spacer(), height="100vh", From bbc0e7ce4122094b02f0333c4bccaeba866ccc49 Mon Sep 17 00:00:00 2001 From: Nikhil Rao Date: Wed, 18 Oct 2023 16:00:43 -0700 Subject: [PATCH 3/6] Update event triggers --- .../datatable_showcase/datatable_showcase.py | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/datatable_showcase/datatable_showcase/datatable_showcase.py b/datatable_showcase/datatable_showcase/datatable_showcase.py index e18ca428..31d53f79 100644 --- a/datatable_showcase/datatable_showcase/datatable_showcase.py +++ b/datatable_showcase/datatable_showcase/datatable_showcase.py @@ -149,7 +149,7 @@ def get_dyn_setter(var: rx.Var): def controller_item(var, ctrl): - return rx.hstack(rx.text(var.name, ": "), ctrl, rx.text(var), width="100%") + return rx.hstack(rx.text(var._var_name, ": "), ctrl, rx.text(var), width="100%") def controller_line(_list): @@ -273,27 +273,27 @@ def idx(): # style theme=darkTheme, # event handlers - onCellEdited=CtrlState.edit_cell, - onGroupHeaderClicked=lambda idx, data: CtrlState.send_alert( + on_cell_edited=CtrlState.edit_cell, + on_group_header_clicked=lambda idx, data: CtrlState.send_alert( "onGroupHeaderClicked: ", idx, data ), - onGroupHeaderContextMenu=lambda idx, data: CtrlState.send_alert( + on_group_header_context_menu=lambda idx, data: CtrlState.send_alert( "onGroupHeaderContextMenu: ", idx, data ), - onCellActivated=lambda pos: CtrlState.send_alert( + on_cell_activated=lambda pos: CtrlState.send_alert( "onCellActivated: ", pos ), - onCellClicked=lambda pos: CtrlState.send_alert("onCellClicked: ", pos), - onCellContextMenu=lambda pos: CtrlState.send_alert( + on_cell_clicked=lambda pos: CtrlState.send_alert("onCellClicked: ", pos), + on_cell_context_menu=lambda pos: CtrlState.send_alert( "onCellContextMenu: ", pos ), - onHeaderClicked=lambda pos: CtrlState.send_alert( + on_header_clicked=lambda pos: CtrlState.send_alert( "onHeaderClicked: ", pos ), - onHeaderContextMenu=lambda pos: CtrlState.send_alert( + on_header_context_menu=lambda pos: CtrlState.send_alert( "onHeaderContextMenu: ", pos ), - onHeaderMenuClick=lambda col, pos: CtrlState.send_alert( + on_header_menu_click=lambda col, pos: CtrlState.send_alert( "onHeaderMenuClick: ", col, pos ), # onItemHovered=lambda pos: CtrlState.send_alert("", pos), From a55675e92a3d988ccb2774d082b6a49c288c7cc8 Mon Sep 17 00:00:00 2001 From: Lendemor Date: Thu, 19 Oct 2023 18:20:24 +0200 Subject: [PATCH 4/6] fix some syntax --- .../datatable_showcase/datatable_showcase.py | 62 ++++++++++--------- 1 file changed, 33 insertions(+), 29 deletions(-) diff --git a/datatable_showcase/datatable_showcase/datatable_showcase.py b/datatable_showcase/datatable_showcase/datatable_showcase.py index 31d53f79..ea1d5e45 100644 --- a/datatable_showcase/datatable_showcase/datatable_showcase.py +++ b/datatable_showcase/datatable_showcase/datatable_showcase.py @@ -251,51 +251,55 @@ def idx(): rx.vstack( TP.create(), rx.data_editor( + rows=10, columns=State.cols2, data=State.data, - drawFocusRing=CtrlState.draw_focus_ring, - fixedShadowX=CtrlState.fixed_shadow_x, - fixedShadowY=CtrlState.fixed_shadow_y, - freezeColumns=CtrlState.freeze_columns, - groupHeaderHeight=CtrlState.group_header_height, - headerHeight=CtrlState.header_height, - maxColumnAutoWidth=CtrlState.max_column_auto_width, - maxColumnWidth=CtrlState.max_column_width, - minColumnWidth=CtrlState.min_column_width, - rowHeight=CtrlState.row_height, - rowMarkers=CtrlState.row_marker, - rowMarkerWidth=CtrlState.row_marker_width, - rowMarkerStartIndex=CtrlState.row_marker_start_index, - smoothScrollX=CtrlState.smooth_scroll_x, - smoothScrollY=CtrlState.smooth_scroll_y, - verticalBorder=CtrlState.vertical_border, - columnSelect=CtrlState.column_select, + draw_focus_ring=CtrlState.draw_focus_ring, + fixed_shadow_x=CtrlState.fixed_shadow_x, + fixed_shadow_y=CtrlState.fixed_shadow_y, + freeze_columns=CtrlState.freeze_columns, + group_header_height=CtrlState.group_header_height, + header_height=CtrlState.header_height, + max_column_auto_width=CtrlState.max_column_auto_width, + max_column_width=CtrlState.max_column_width, + min_column_width=CtrlState.min_column_width, + row_height=CtrlState.row_height, + row_markers=CtrlState.row_marker, + row_marker_width=CtrlState.row_marker_width, + row_marker_start_index=CtrlState.row_marker_start_index, + smooth_scroll_x=CtrlState.smooth_scroll_x, + smooth_scroll_y=CtrlState.smooth_scroll_y, + vertical_border=CtrlState.vertical_border, + column_select=CtrlState.column_select, # style theme=darkTheme, # event handlers on_cell_edited=CtrlState.edit_cell, - on_group_header_clicked=lambda idx, data: CtrlState.send_alert( - "onGroupHeaderClicked: ", idx, data - ), - on_group_header_context_menu=lambda idx, data: CtrlState.send_alert( - "onGroupHeaderContextMenu: ", idx, data - ), on_cell_activated=lambda pos: CtrlState.send_alert( - "onCellActivated: ", pos + "on_cell_activated: ", pos + ), + on_cell_clicked=lambda pos: CtrlState.send_alert( + "on_cell_clicked: ", pos ), - on_cell_clicked=lambda pos: CtrlState.send_alert("onCellClicked: ", pos), on_cell_context_menu=lambda pos: CtrlState.send_alert( - "onCellContextMenu: ", pos + "on_cell_context_menu: ", pos + ), + on_group_header_clicked=lambda idx, data: CtrlState.send_alert( + "on_group_header_clicked: ", idx, data + ), + on_group_header_context_menu=lambda idx, data: CtrlState.send_alert( + "on_group_header_context_menu: ", idx, data ), on_header_clicked=lambda pos: CtrlState.send_alert( - "onHeaderClicked: ", pos + "on_header_clicked: ", pos ), on_header_context_menu=lambda pos: CtrlState.send_alert( - "onHeaderContextMenu: ", pos + "on_header_context_menu: ", pos ), on_header_menu_click=lambda col, pos: CtrlState.send_alert( - "onHeaderMenuClick: ", col, pos + "on_header_menu_click: ", col, pos ), + height="30vh", # onItemHovered=lambda pos: CtrlState.send_alert("", pos), # onDelete=lambda selection: CtrlState.send_alert("onDelete", selection), # onSelectionCleared=CtrlState.send_alert("onSelectionCleared"), From 8e081646e0c495ecb4e9f6709b7022471caa9c76 Mon Sep 17 00:00:00 2001 From: Lendemor Date: Thu, 19 Oct 2023 19:02:25 +0200 Subject: [PATCH 5/6] small changes for width and height --- .../datatable_showcase/datatable_showcase.py | 172 +++++++++++------- 1 file changed, 109 insertions(+), 63 deletions(-) diff --git a/datatable_showcase/datatable_showcase/datatable_showcase.py b/datatable_showcase/datatable_showcase/datatable_showcase.py index ea1d5e45..caba9fd1 100644 --- a/datatable_showcase/datatable_showcase/datatable_showcase.py +++ b/datatable_showcase/datatable_showcase/datatable_showcase.py @@ -72,18 +72,61 @@ class State(rx.State): "id": "date", "group": "Data", }, + { + "title": "Bar", + "type": "str", + "id": "date", + "group": "Data", + }, + { + "title": "Bar", + "type": "str", + "id": "date", + "group": "Data", + }, + { + "title": "Bar", + "type": "str", + "id": "date", + "group": "Data", + }, + { + "title": "Bar", + "type": "str", + "id": "date", + "group": "Data", + }, + { + "title": "Bar", + "type": "str", + "id": "date", + "group": "Data", + }, ] data = [ - ["1", True, datetime.now(), 0, "A", "A", "A"], - ["2", False, datetime.now(), 0, "A", "A", "A"], - ["3", True, datetime.now(), 0, "A", "A", "A"], - ["4", False, datetime.now(), 0, "A", "A", "A"], - ["5", False, datetime.now(), 0, "A", "A", "A"], - ["6", False, datetime.now(), 0, "A", "A", "A"], - ["7", False, datetime.now(), 0, "A", "A", "A"], - ["8", False, datetime.now(), 0, "A", "A", "A"], - ["9", False, datetime.now(), 0, "A", "A", "A"], - ["10", False, datetime.now(), 0, "A", "A", "A"], + ["1", True, datetime.now(), 0, "A", "A", "A", "A", "A", "A", "A", "A"], + ["2", False, datetime.now(), 0, "A", "A", "A", "A", "A", "A", "A", "A"], + ["3", True, datetime.now(), 0, "A", "A", "A", "A", "A", "A", "A", "A"], + ["4", False, datetime.now(), 0, "A", "A", "A", "A", "A", "A", "A", "A"], + ["5", False, datetime.now(), 0, "A", "A", "A", "A", "A", "A", "A", "A"], + ["6", False, datetime.now(), 0, "A", "A", "A", "A", "A", "A", "A", "A"], + ["7", False, datetime.now(), 0, "A", "A", "A", "A", "A", "A", "A", "A"], + ["8", False, datetime.now(), 0, "A", "A", "A", "A", "A", "A", "A", "A"], + ["9", False, datetime.now(), 0, "A", "A", "A", "A", "A", "A", "A", "A"], + ["10", False, datetime.now(), 0, "A", "A", "A", "A", "A", "A", "A", "A"], + ["11", False, datetime.now(), 0, "A", "A", "A", "A", "A", "A", "A", "A"], + ["12", False, datetime.now(), 0, "A", "A", "A", "A", "A", "A", "A", "A"], + ["13", False, datetime.now(), 0, "A", "A", "A", "A", "A", "A", "A", "A"], + ["14", False, datetime.now(), 0, "A", "A", "A", "A", "A", "A", "A", "A"], + ["15", False, datetime.now(), 0, "A", "A", "A", "A", "A", "A", "A", "A"], + ["16", False, datetime.now(), 0, "A", "A", "A", "A", "A", "A", "A", "A"], + ["17", False, datetime.now(), 0, "A", "A", "A", "A", "A", "A", "A", "A"], + ["18", False, datetime.now(), 0, "A", "A", "A", "A", "A", "A", "A", "A"], + ["19", False, datetime.now(), 0, "A", "A", "A", "A", "A", "A", "A", "A"], + ["20", False, datetime.now(), 0, "A", "A", "A", "A", "A", "A", "A", "A"], + ["21", False, datetime.now(), 0, "A", "A", "A", "A", "A", "A", "A", "A"], + ["22", False, datetime.now(), 0, "A", "A", "A", "A", "A", "A", "A", "A"], + ["23", False, datetime.now(), 0, "A", "A", "A", "A", "A", "A", "A", "A"], ] # df: DataFrame = df @@ -211,7 +254,7 @@ def controller(): controller_select(CtrlState.column_select, ["none", "single", "multi"]), rx.spacer(), height="100vh", - width="30vw", + width="40vw", ) @@ -250,59 +293,62 @@ def idx(): rx.divider(orientation="vertical", height="100vh", border="solid black 1px"), rx.vstack( TP.create(), - rx.data_editor( - rows=10, - columns=State.cols2, - data=State.data, - draw_focus_ring=CtrlState.draw_focus_ring, - fixed_shadow_x=CtrlState.fixed_shadow_x, - fixed_shadow_y=CtrlState.fixed_shadow_y, - freeze_columns=CtrlState.freeze_columns, - group_header_height=CtrlState.group_header_height, - header_height=CtrlState.header_height, - max_column_auto_width=CtrlState.max_column_auto_width, - max_column_width=CtrlState.max_column_width, - min_column_width=CtrlState.min_column_width, - row_height=CtrlState.row_height, - row_markers=CtrlState.row_marker, - row_marker_width=CtrlState.row_marker_width, - row_marker_start_index=CtrlState.row_marker_start_index, - smooth_scroll_x=CtrlState.smooth_scroll_x, - smooth_scroll_y=CtrlState.smooth_scroll_y, - vertical_border=CtrlState.vertical_border, - column_select=CtrlState.column_select, - # style - theme=darkTheme, - # event handlers - on_cell_edited=CtrlState.edit_cell, - on_cell_activated=lambda pos: CtrlState.send_alert( - "on_cell_activated: ", pos - ), - on_cell_clicked=lambda pos: CtrlState.send_alert( - "on_cell_clicked: ", pos - ), - on_cell_context_menu=lambda pos: CtrlState.send_alert( - "on_cell_context_menu: ", pos - ), - on_group_header_clicked=lambda idx, data: CtrlState.send_alert( - "on_group_header_clicked: ", idx, data - ), - on_group_header_context_menu=lambda idx, data: CtrlState.send_alert( - "on_group_header_context_menu: ", idx, data - ), - on_header_clicked=lambda pos: CtrlState.send_alert( - "on_header_clicked: ", pos - ), - on_header_context_menu=lambda pos: CtrlState.send_alert( - "on_header_context_menu: ", pos - ), - on_header_menu_click=lambda col, pos: CtrlState.send_alert( - "on_header_menu_click: ", col, pos + rx.box( + rx.data_editor( + columns=State.cols2, + data=State.data, + draw_focus_ring=CtrlState.draw_focus_ring, + fixed_shadow_x=CtrlState.fixed_shadow_x, + fixed_shadow_y=CtrlState.fixed_shadow_y, + freeze_columns=CtrlState.freeze_columns, + group_header_height=CtrlState.group_header_height, + header_height=CtrlState.header_height, + max_column_auto_width=CtrlState.max_column_auto_width, + max_column_width=CtrlState.max_column_width, + min_column_width=CtrlState.min_column_width, + row_height=CtrlState.row_height, + row_markers=CtrlState.row_marker, + row_marker_width=CtrlState.row_marker_width, + row_marker_start_index=CtrlState.row_marker_start_index, + smooth_scroll_x=CtrlState.smooth_scroll_x, + smooth_scroll_y=CtrlState.smooth_scroll_y, + vertical_border=CtrlState.vertical_border, + column_select=CtrlState.column_select, + # style + theme=darkTheme, + # event handlers + on_cell_edited=CtrlState.edit_cell, + on_cell_activated=lambda pos: CtrlState.send_alert( + "on_cell_activated: ", pos + ), + on_cell_clicked=lambda pos: CtrlState.send_alert( + "on_cell_clicked: ", pos + ), + on_cell_context_menu=lambda pos: CtrlState.send_alert( + "on_cell_context_menu: ", pos + ), + on_group_header_clicked=lambda idx, data: CtrlState.send_alert( + "on_group_header_clicked: ", idx, data + ), + on_group_header_context_menu=lambda idx, data: CtrlState.send_alert( + "on_group_header_context_menu: ", idx, data + ), + on_header_clicked=lambda pos: CtrlState.send_alert( + "on_header_clicked: ", pos + ), + on_header_context_menu=lambda pos: CtrlState.send_alert( + "on_header_context_menu: ", pos + ), + on_header_menu_click=lambda col, pos: CtrlState.send_alert( + "on_header_menu_click: ", col, pos + ), + width="60vw", + height="80vh", + # onItemHovered=lambda pos: CtrlState.send_alert("", pos), + # onDelete=lambda selection: CtrlState.send_alert("onDelete", selection), + # onSelectionCleared=CtrlState.send_alert("onSelectionCleared"), ), - height="30vh", - # onItemHovered=lambda pos: CtrlState.send_alert("", pos), - # onDelete=lambda selection: CtrlState.send_alert("onDelete", selection), - # onSelectionCleared=CtrlState.send_alert("onSelectionCleared"), + # width="50vw", ), rx.spacer(), height="100vh", From 47e0adc9b760917eccc9349be6ed8780046872e5 Mon Sep 17 00:00:00 2001 From: Lendemor Date: Mon, 23 Oct 2023 14:15:57 +0200 Subject: [PATCH 6/6] add requirements.txt --- datatable_showcase/requirements.txt | 1 + 1 file changed, 1 insertion(+) create mode 100644 datatable_showcase/requirements.txt diff --git a/datatable_showcase/requirements.txt b/datatable_showcase/requirements.txt new file mode 100644 index 00000000..34a01712 --- /dev/null +++ b/datatable_showcase/requirements.txt @@ -0,0 +1 @@ +reflex>=0.3.0 \ No newline at end of file