Skip to content

Commit 0dfaa00

Browse files
author
Tom Gotsman
committed
updates based on masen feedback
1 parent 83e052f commit 0dfaa00

File tree

1 file changed

+197
-105
lines changed

1 file changed

+197
-105
lines changed

‎datatable_tutorial/datatable_tutorial/datatable_tutorial.py‎

Lines changed: 197 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@
77
class BaseState(rx.State):
88
pass
99

10-
10+
1111
class DataTableState(BaseState):
1212
"""The app state."""
1313

1414
clicked_cell: str = "Cell clicked: "
1515
edited_cell: str = "Cell edited: "
16-
right_clicked_group_header : str = "Group header right clicked: "
16+
right_clicked_group_header: str = "Group header right clicked: "
1717
item_hovered: str = "Item Hovered: "
1818
deleted: str = "Deleted: "
1919

@@ -61,23 +61,79 @@ class DataTableState(BaseState):
6161
},
6262
]
6363

64-
data = [
65-
["1", "Harry James Potter", "31 July 1980", True, "Gryffindor", "11' Holly phoenix feather", "Stag", "Half-blood"],
66-
["2", "Ronald Bilius Weasley", "1 March 1980", True,"Gryffindor", "12' Ash unicorn tail hair", "Jack Russell terrier", "Pure-blood"],
67-
["3", "Hermione Jean Granger", "19 September, 1979", True, "Gryffindor", "10¾' vine wood dragon heartstring", "Otter", "Muggle-born"],
68-
["4", "Albus Percival Wulfric Brian Dumbledore", "Late August 1881", True, "Gryffindor", "15' Elder Thestral tail hair core", "Phoenix", "Half-blood"],
69-
["5", "Rubeus Hagrid", "6 December 1928", False, "Gryffindor", "16' Oak unknown core", "None", "Part-Human (Half-giant)"],
70-
["6", "Fred Weasley", "1 April, 1978", True, "Gryffindor", "Unknown", "Unknown", "Pure-blood"],
71-
["7", "George Weasley", "1 April, 1978", True, "Gryffindor", "Unknown", "Unknown", "Pure-blood"],
64+
data: list[str] = [
65+
[
66+
"1",
67+
"Harry James Potter",
68+
"31 July 1980",
69+
True,
70+
"Gryffindor",
71+
"11' Holly phoenix feather",
72+
"Stag",
73+
"Half-blood",
74+
],
75+
[
76+
"2",
77+
"Ronald Bilius Weasley",
78+
"1 March 1980",
79+
True,
80+
"Gryffindor",
81+
"12' Ash unicorn tail hair",
82+
"Jack Russell terrier",
83+
"Pure-blood",
84+
],
85+
[
86+
"3",
87+
"Hermione Jean Granger",
88+
"19 September, 1979",
89+
True,
90+
"Gryffindor",
91+
"10¾' vine wood dragon heartstring",
92+
"Otter",
93+
"Muggle-born",
94+
],
95+
[
96+
"4",
97+
"Albus Percival Wulfric Brian Dumbledore",
98+
"Late August 1881",
99+
True,
100+
"Gryffindor",
101+
"15' Elder Thestral tail hair core",
102+
"Phoenix",
103+
"Half-blood",
104+
],
105+
[
106+
"5",
107+
"Rubeus Hagrid",
108+
"6 December 1928",
109+
False,
110+
"Gryffindor",
111+
"16' Oak unknown core",
112+
"None",
113+
"Part-Human (Half-giant)",
114+
],
115+
[
116+
"6",
117+
"Fred Weasley",
118+
"1 April, 1978",
119+
True,
120+
"Gryffindor",
121+
"Unknown",
122+
"Unknown",
123+
"Pure-blood",
124+
],
125+
[
126+
"7",
127+
"George Weasley",
128+
"1 April, 1978",
129+
True,
130+
"Gryffindor",
131+
"Unknown",
132+
"Unknown",
133+
"Pure-blood",
134+
],
72135
]
73136

74-
show: bool = True
75-
76-
def change(self):
77-
self.show = not self.show
78-
79-
80-
81137
def get_clicked_data(self, pos) -> str:
82138
self.clicked_cell = f"Cell clicked: {pos}"
83139

@@ -90,18 +146,18 @@ def get_group_header_right_click(self, index, val):
90146
self.right_clicked_group_header = f"Group header right clicked at index: {index}, Group header value: {val['group']}"
91147

92148
def get_item_hovered(self, pos) -> str:
93-
self.item_hovered = f"Item Hovered type: {pos['kind']}, Location: {pos['location']}"
94-
149+
self.item_hovered = (
150+
f"Item Hovered type: {pos['kind']}, Location: {pos['location']}"
151+
)
152+
95153
def get_deleted_item(self, selection):
96154
self.deleted = f"Deleted cell: {selection['current']['cell']}"
97155

98156
# def append_row(self):
99157
# print("13232")
100158

101159
def column_resize(self, col, width):
102-
self.cols[col['pos']]['width'] = width
103-
104-
160+
self.cols[col["pos"]]["width"] = width
105161

106162

107163
class DataTableLiveState(BaseState):
@@ -112,35 +168,35 @@ class DataTableLiveState(BaseState):
112168
rate: int = 0.4
113169
columns: list[dict[str, str]] = [
114170
{
115-
"title": "id",
116-
"id": "v1",
171+
"title": "id",
172+
"id": "v1",
117173
"type": "int",
118174
"width": 100,
119175
},
120176
{
121-
"title": "advice",
122-
"id": "v2",
177+
"title": "advice",
178+
"id": "v2",
123179
"type": "str",
124180
"width": 750,
125181
},
126-
127182
]
128183

129184
@rx.background
130185
async def live_stream(self):
131186
while True:
132187
await asyncio.sleep(1 / self.rate)
133-
if not self.running:
134-
break
135-
136188
async with self:
189+
if not self.running:
190+
break
191+
137192
if len(self.table_data) > 50:
138193
self.table_data.pop(0)
139194

140-
res = httpx.get('https://api.adviceslip.com/advice')
195+
res = httpx.get("https://api.adviceslip.com/advice")
141196
data = res.json()
142-
self.table_data.append({"v1": data["slip"]["id"], "v2": data["slip"]["advice"]})
143-
197+
self.table_data.append(
198+
{"v1": data["slip"]["id"], "v2": data["slip"]["advice"]}
199+
)
144200

145201
def toggle_pause(self):
146202
self.running = not self.running
@@ -175,95 +231,131 @@ def toggle_pause(self):
175231
"fontFamily": "Inter, Roboto, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, noto, arial, sans-serif",
176232
}
177233

234+
235+
tab_style = {
236+
"color": "#494369",
237+
"font_weight": 600,
238+
"_selected": {
239+
"color": "#5646ED",
240+
"bg": "#F5EFFE",
241+
"padding_x": "0.5em",
242+
"padding_y": "0.25em",
243+
"border_radius": "8px",
244+
},
245+
}
246+
247+
178248
def index() -> rx.Component:
179249
return rx.fragment(
180250
rx.color_mode_button(rx.color_mode_icon(), float="right"),
181251
rx.vstack(
182252
rx.heading("Data Table Demo!", font_size="2em"),
183253
rx.vstack(
184-
rx.button("Static / Live Data", on_click=DataTableState.change, color_scheme='messenger', size='lg',),
185-
rx.box(height="1em"),
186-
rx.cond(
187-
DataTableState.show,
188-
rx.vstack(
189-
rx.heading(DataTableState.clicked_cell, size="lg", color="blue"),
190-
rx.heading(DataTableState.edited_cell, size="lg", color="green"),
191-
rx.heading(DataTableState.right_clicked_group_header, size="lg", color="orange"),
192-
rx.heading(DataTableState.item_hovered, size="lg", color="purple"),
193-
rx.heading(DataTableState.deleted, size="lg", color="red"),
194-
rx.data_editor(
195-
columns=DataTableState.cols,
196-
data=DataTableState.data,
197-
198-
#rows=10,
199-
on_paste=True,
200-
draw_focus_ring=False,
201-
#fixed_shadow_x=True,
202-
203-
204-
freeze_columns=2,
205-
group_header_height=100,
206-
header_height=80,
207-
#max_column_auto_width=200,
208-
# this works just need to describe it
209-
#max_column_width=200,
210-
min_column_width=100,
211-
row_height=50,
212-
row_markers='clickable-number',
213-
# also mention smooth_scroll_y
214-
smooth_scroll_x=True,
215-
vertical_border=False,
216-
column_select="multi",
217-
#prevent_diagonal_scrolling=False,
218-
overscroll_x=0,
219-
220-
221-
on_cell_clicked=DataTableState.get_clicked_data,
222-
on_cell_edited=DataTableState.get_edited_data,
223-
on_group_header_context_menu=DataTableState.get_group_header_right_click,
224-
on_item_hovered=DataTableState.get_item_hovered,
225-
on_delete=DataTableState.get_deleted_item,
226-
#on_row_appended=DataTableState.append_row,
227-
on_column_resize=DataTableState.column_resize,
228-
theme=darkTheme,
229-
width="80vw",
230-
height="80vh",
231-
),
254+
rx.tabs(
255+
rx.tab_list(
256+
rx.tab("Static Data", style=tab_style),
257+
rx.tab("Live Data", style=tab_style),
232258
),
233-
rx.vstack(
234-
rx.stack(
235-
rx.cond(
236-
~DataTableLiveState.running,
237-
rx.button("Start", on_click=DataTableLiveState.toggle_pause, color_scheme='green'),
238-
rx.button("Pause", on_click=DataTableLiveState.toggle_pause, color_scheme='red'),
259+
rx.tab_panels(
260+
rx.tab_panel(
261+
rx.vstack(
262+
rx.heading(
263+
DataTableState.clicked_cell, size="lg", color="blue"
264+
),
265+
rx.heading(
266+
DataTableState.edited_cell, size="lg", color="green"
267+
),
268+
rx.heading(
269+
DataTableState.right_clicked_group_header,
270+
size="lg",
271+
color="orange",
272+
),
273+
rx.heading(
274+
DataTableState.item_hovered,
275+
size="lg",
276+
color="purple",
277+
),
278+
rx.heading(
279+
DataTableState.deleted, size="lg", color="red"
280+
),
281+
rx.data_editor(
282+
columns=DataTableState.cols,
283+
data=DataTableState.data,
284+
# rows=10,
285+
on_paste=True,
286+
draw_focus_ring=False,
287+
# fixed_shadow_x=True,
288+
freeze_columns=2,
289+
group_header_height=100,
290+
header_height=80,
291+
# max_column_auto_width=200,
292+
# this works just need to describe it
293+
# max_column_width=200,
294+
min_column_width=100,
295+
row_height=50,
296+
row_markers="clickable-number",
297+
# also mention smooth_scroll_y
298+
smooth_scroll_x=True,
299+
vertical_border=False,
300+
column_select="multi",
301+
# prevent_diagonal_scrolling=False,
302+
overscroll_x=0,
303+
on_cell_clicked=DataTableState.get_clicked_data,
304+
on_cell_edited=DataTableState.get_edited_data,
305+
on_group_header_context_menu=DataTableState.get_group_header_right_click,
306+
on_item_hovered=DataTableState.get_item_hovered,
307+
on_delete=DataTableState.get_deleted_item,
308+
# on_row_appended=DataTableState.append_row,
309+
on_column_resize=DataTableState.column_resize,
310+
theme=darkTheme,
311+
width="80vw",
312+
height="80vh",
313+
),
239314
),
240315
),
241-
rx.data_editor(
242-
columns=DataTableLiveState.columns,
243-
data=DataTableLiveState.table_data,
244-
draw_focus_ring=True,
245-
row_height=50,
246-
smooth_scroll_x=True,
247-
smooth_scroll_y=True,
248-
column_select="single",
249-
# style
250-
theme=darkTheme,
316+
rx.tab_panel(
317+
rx.vstack(
318+
rx.stack(
319+
rx.cond(
320+
~DataTableLiveState.running,
321+
rx.button(
322+
"Start",
323+
on_click=DataTableLiveState.toggle_pause,
324+
color_scheme="green",
325+
),
326+
rx.button(
327+
"Pause",
328+
on_click=DataTableLiveState.toggle_pause,
329+
color_scheme="red",
330+
),
331+
),
332+
),
333+
rx.data_editor(
334+
columns=DataTableLiveState.columns,
335+
data=DataTableLiveState.table_data,
336+
draw_focus_ring=True,
337+
row_height=50,
338+
smooth_scroll_x=True,
339+
smooth_scroll_y=True,
340+
column_select="single",
341+
# style
342+
theme=darkTheme,
343+
),
344+
overflow_x="auto",
345+
width="100%",
251346
),
252-
overflow_x="auto",
253-
width="100%",
254-
height="40vh",
347+
),
255348
),
349+
spacing="1.5em",
350+
font_size="2em",
351+
padding_top="10%",
256352
),
257353
),
258-
259-
spacing="1.5em",
260-
font_size="2em",
261-
padding_top="10%",
262354
),
263355
)
264356

265357

266358
# Add state and page to the app.
267359
app = rx.App()
268360
app.add_page(index)
269-
app.compile()
361+
app.compile()

0 commit comments

Comments
 (0)