data table tutorial #304

tgberkeley · 2023-11-10T01:12:59Z

No description provided.

masenf

The conversational tone is a little bit too much for me throughout the tutorial. I think it's great to have a some, to make the reader feel they are part of something, but reading through, i need less "we" and "our" and more "the component ...", "this event handler ...", "the state defines a var, ...", etc.

This would break up the conversational tone with more precise language, without making the whole thing read like reference material.

Adding type hints on all event handlers would help the code examples stand on their own.

masenf · 2023-11-20T20:13:31Z

docs/datatable-tutorial/simple_table.md

+
+
+
+# Data Table Tutorial


If this isn't for the rx.data_table component, maybe the heading should be "Data Editor Tutorial"?

yes this is something I discussed with nikhil, it is just that more commonly people refer to this component as a data table. Perhaps we could call it the data table (editable).

docs/datatable-tutorial/simple_table.md

masenf · 2023-11-20T20:18:55Z

docs/datatable-tutorial/simple_table.md

+1. title: The text to display in the header of the column
+2. id: An id for the column, if not defined, will default to a lower case of title
+3. width: The width of the column
+4. type: The type of the columns, default to "str"


Use code marks on the key names

Suggested change

1. title: The text to display in the header of the column

2. id: An id for the column, if not defined, will default to a lower case of title

3. width: The width of the column

4. type: The type of the columns, default to "str"

1. `title`: The text to display in the header of the column

2. `id`: An id for the column, if not defined, will default to a lower case of title

3. `width`: The width of the column (in pixels?)

4. `type`: The type of the columns, default to "str"

For type, how can i find out what types are available?

are there more recognized keys for a column dict as well? where are those defined?

as far as I can tell these are the only 4, but going through the reflex docs and the reflex code these are not actually defined anywhere that I can see so it is hard to say if there are more, we will need to chat to Thomas and ask

docs/datatable-tutorial/add_interactivity.md

masenf · 2023-11-20T20:48:39Z

docs/datatable-tutorial/add_interactivity.md

+
+There are several other event triggers that are worth exploring. The `on_item_hovered` event trigger is called whenever the user hovers over an item in the datatable. The `on_delete` event trigger is called when the user deletes a cell from the datatable. 
+
+The final event trigger to check out is `on_column_resize`, this allows us to manually resize the width of our columns by hand. The event trigger returns the `col` we are adjusting and the new `width` we have defined. We then index into `self.cols` defined in our state and change the `width` of that column using this code: `self.cols[col['pos']]['width'] = width`.


this allows us to manually resize the width of our columns by hand

This sounds sort of funny to me.

Maybe something more like, "on_column_resize allows us to respond to the user dragging the handle between columns"

I think more description of the col arg is warranted, since it appears to be a dictionary, but not clear what is inside.

added both of these

masenf · 2023-11-20T20:51:40Z

docs/datatable-tutorial/add_styling.md

+By default there is a `vertical_border` between the columns, we can turn it off by setting this prop to `False`. We can define how many columns a user can select at a time by setting the `column_select` prop. It can take values of `"none", "single", "multi"`.
+
+We can allow `overscroll_x`, which allows users to scroll past the limit of the actual horizontal content. There is an equivalent `overscroll_y`. 
+


Suggest directly linking to the component docs where all of these props (and more) are displayed in table form.

docs/datatable-tutorial/add_styling.md

masenf · 2023-11-20T20:54:38Z

docs/datatable-tutorial/live_stream.md

+
+Lastly let's add in an API so we can live stream data into our datatable.
+
+Here we use a [Background Task](https://reflex.dev/docs/advanced-guide/background-tasks) to stream the data into the table without blocking UI interactivity. We call an advice API using `httpx` and then append that data to the `self.table_data` state var. We also create a button that allows us to start and pause the streaming of the data by changing the value of the boolean state var `running` using the event handler `toggle_pause`. If the `running` state var is set to `True` we stream the API data, when it is set to `False` we break out of the `while` loop and end the background event.


Suggested change

Here we use a [Background Task](https://reflex.dev/docs/advanced-guide/background-tasks) to stream the data into the table without blocking UI interactivity. We call an advice API using `httpx` and then append that data to the `self.table_data` state var. We also create a button that allows us to start and pause the streaming of the data by changing the value of the boolean state var `running` using the event handler `toggle_pause`. If the `running` state var is set to `True` we stream the API data, when it is set to `False` we break out of the `while` loop and end the background event.

Here we use a [Background Task](docs/advanced-guide/background-tasks) to stream the data into the table without blocking UI interactivity. We call an advice API using `httpx` and then append that data to the `self.table_data` state var. We also create a button that allows us to start and pause the streaming of the data by changing the value of the boolean state var `running` using the event handler `toggle_pause`. If the `running` state var is set to `True` we stream the API data, when it is set to `False` we break out of the `while` loop and end the background event.

this actually doesn't seem to work, so changed it back

Co-authored-by: Masen Furer <m_github@0x26.net>

Tom Gotsman and others added 2 commits November 9, 2023 16:44

initial version of tutorial with no live streaming yet

3267c67

new tutorial for how to use the datatable

293efb7

tgberkeley marked this pull request as ready for review November 14, 2023 02:01

tgberkeley changed the title ~~initial version of tutorial with no live streaming yet~~ data table tutorial Nov 14, 2023

tgberkeley requested a review from picklelo November 20, 2023 18:09

masenf requested changes Nov 20, 2023

View reviewed changes

tgberkeley and others added 12 commits November 21, 2023 12:36

Update docs/datatable-tutorial/simple_table.md

4bac50c

Co-authored-by: Masen Furer <m_github@0x26.net>

Update docs/datatable-tutorial/simple_table.md

c9dc353

Co-authored-by: Masen Furer <m_github@0x26.net>

Update docs/datatable-tutorial/simple_table.md

6d2def0

Co-authored-by: Masen Furer <m_github@0x26.net>

Update docs/datatable-tutorial/simple_table.md

655d324

Co-authored-by: Masen Furer <m_github@0x26.net>

Update docs/datatable-tutorial/simple_table.md

20adda0

Co-authored-by: Masen Furer <m_github@0x26.net>

Update docs/datatable-tutorial/simple_table.md

a1c4a99

Co-authored-by: Masen Furer <m_github@0x26.net>

Update docs/datatable-tutorial/add_interactivity.md

f474f30

Co-authored-by: Masen Furer <m_github@0x26.net>

Update docs/datatable-tutorial/add_interactivity.md

b2b7fc6

Co-authored-by: Masen Furer <m_github@0x26.net>

Update docs/datatable-tutorial/add_interactivity.md

f16d4ee

Co-authored-by: Masen Furer <m_github@0x26.net>

Update docs/datatable-tutorial/add_styling.md

4661530

Co-authored-by: Masen Furer <m_github@0x26.net>

Update docs/datatable-tutorial/live_stream.md

8e05206

Co-authored-by: Masen Furer <m_github@0x26.net>

update from masen docs

8376deb

masenf approved these changes Nov 22, 2023

View reviewed changes

tgberkeley merged commit 74150d1 into main Nov 29, 2023
1 check passed

Alek99 deleted the datatable-tutorial branch December 20, 2023 04:07

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

data table tutorial #304

data table tutorial #304

tgberkeley commented Nov 10, 2023

masenf left a comment

masenf Nov 20, 2023

tgberkeley Nov 21, 2023

masenf Nov 20, 2023

masenf Nov 20, 2023

tgberkeley Nov 21, 2023

masenf Nov 20, 2023

tgberkeley Nov 21, 2023

masenf Nov 20, 2023

tgberkeley Nov 21, 2023

masenf Nov 20, 2023

tgberkeley Nov 21, 2023


		There are several other event triggers that are worth exploring. The `on_item_hovered` event trigger is called whenever the user hovers over an item in the datatable. The `on_delete` event trigger is called when the user deletes a cell from the datatable.

		The final event trigger to check out is `on_column_resize`, this allows us to manually resize the width of our columns by hand. The event trigger returns the `col` we are adjusting and the new `width` we have defined. We then index into `self.cols` defined in our state and change the `width` of that column using this code: `self.cols[col['pos']]['width'] = width`.

		By default there is a `vertical_border` between the columns, we can turn it off by setting this prop to `False`. We can define how many columns a user can select at a time by setting the `column_select` prop. It can take values of `"none", "single", "multi"`.

		We can allow `overscroll_x`, which allows users to scroll past the limit of the actual horizontal content. There is an equivalent `overscroll_y`.


		Lastly let's add in an API so we can live stream data into our datatable.

		Here we use a [Background Task](https://reflex.dev/docs/advanced-guide/background-tasks) to stream the data into the table without blocking UI interactivity. We call an advice API using `httpx` and then append that data to the `self.table_data` state var. We also create a button that allows us to start and pause the streaming of the data by changing the value of the boolean state var `running` using the event handler `toggle_pause`. If the `running` state var is set to `True` we stream the API data, when it is set to `False` we break out of the `while` loop and end the background event.

data table tutorial #304

data table tutorial #304

Conversation

tgberkeley commented Nov 10, 2023

masenf left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment