Genie Discord forum

Thanks to everyone's help, I was able to get a datatable setup in my first application.

So that table looks very nice. My next question was: if I highlight a row in the datatable, can I pull that row information back into the application to feed to other widgets? For example if I highlight row 10, then can I pull the row number or row fields back into the app.jl to pass to other handlers? I was just wondering. This is really just a yes/no question. If no, then I can probably use a selector control.

Also does anyone know where in the Genie packages is the DataTable function or control stored? I looked in StippleUI and StipplePlotly, but could not find it. If I could find the source code, I could probably answer my own question :).

The UI components in Genie are from the Quasar framework. So, anything possible in Quasar should be possible in genie well

https://quasar.dev/vue-components/table#selection

I'm not familiar with it yet so I don't really know how to go about it. I know @Rafael added some edit capabilities to his tables, you can find his code here

https://github.com/PingoLee/LinkSUS/blob/86555b9171f8991516a6f479c486c7e40c7f4c76/views/config.jl.html#L53-L90

Oh thanks so much @Pere . Yeah, it seems like that row-key property allows me to capture the inputs. Say, did you hear of any changes to that datatable functionality in the last day or two. It was working for me, and then it stopped working. Haha, maybe I corrupted something or such.

I am still just doing as was shown in the Iris tutorial, where you place that DataTable widget on the Gui editor, but then you delete the tag and replace it with that code, <% table(:datatable; dense=true, flat=true, style=&quot;height: 350px;&quot;, pagination=:datatablepagination) %>. That was working great for me, until last night. I must have done something, haha.

Okay, I am kinda struggling with this a bit. So I was able to get the selection checkboxes to show up using the low-code api. But I am not clear on how to pull the "selection" data back into a variable in Julia.

Here is the code that works for getting the selection boxes.

        <% table(:datatable; dense=true, flat=true, style="height: 350px;", row_key="groupindices", selection="single", pagination=:datatablepagination) %>

The selection indicates as single selection. I am not clear what row-key does, but I had to use an underscore instead of a dash. Seems like I need to define an @out variable that captures the selection, but I am not sure how to get the selection from the table--meaning I don't know the Javascript or such to set some variable :my_selection = get_selection() or such. @Pere I checked the link to @Rafael 's application, but he seems to use the full q-table tag while I was using the low-level api and table() function. So messing around there could generate some new errors. One approach seems to be using v-model:selected = "selected", but seems like that might override some of the Genie settings and stuff, and probably don't want to do that. @abhimanyuaryan not sure if you have familiarity with this. Thanks for any help.

Here is a picture of what it looks like when it renders.

I tried with this

<q-table flat selection="single" :pagination.sync="datatablepagination" :columns="datatable.columns_datatable" v-model="datatable" row_key="groupindices" :data="datatable.data_datatable" dense row-key="__id" style="height: 350px;" v-model:selected="sel"></q-table>

and defining @out sel = [] in the Julia code. It renders but nothing happens when I click on a box...we'll have to look into this

sorry will check tomorrow forgot this thread

@krishnab can you share a MWE(minimum working example) so I can replicated that in my GenieBuilder and pick from their for easy debugging?

Hey @krishnab @Pere @abhimanyuaryan , I came across exactly the same problem and was wondering if there is an existing solution.

Okay, so my solution was to fall back to the (older) syntax <q-table flat selection="single" :pagination.sync="datatablepagination" :columns="datatable.columns_datatable" v-model="datatable" row_key="groupindices" :data="datatable.data_datatable" dense row-key="__id" style="height: 350px;" selected.sync="sel"></q-table> which seems to work with just defining @out sel = [].

I almost forgot how to get tables working. What do you mean (older) syntax? What's the new syntax?

"Due to the new v-model feature of Vue 3, which replaces the “.sync” modifier, the following properties need to be used differently" from https://quasar.dev/start/upgrade-guide#qtable-qtree

Vue-3 is yet not supported by stipple. It's vue-2