How to handle QTable row clicks?

[mjmare]

Hi Eli

I'm trying to react to a row click in a QTable (not row selection). With the code below I can observe that the click handler is called. So far so good. However I cannot find a way to know which row/item is clicked.
The body slot is necessary to have the click handler installed. But I fear that a complete solution requires real 'props' (see #79). Or do you see a workaround?

TIA

Marcel

        async def on_row_click(comp, msg):
            print('ROW CLICK', msg)

        body_slot = jp.QTr(
            children=[jp.QTd(text='XX')],
            click = on_row_click
        )

        self.grid = jp.QTable(a=self,
                              title='Suppliers',
                              style='width: 100%; margin: 0.25em',
                              columns=self.columns,
                              data=self.items,
                              separator='horizontal',  # 'cell', 'none'
                              row_key='uuid',
                              selection="multiple",
                              # selected=self.selected_movies,
                              pagination=self.pagination,
                              top_slot=top_slot,
                              body_slot=body_slot,
                              )

[mjmare]

Just thought of a workaround: drop QTable and use QMarkupTable. A bit drastic though.

[elimintz]

Please change on_row_click to:

async def on_row_click(comp, msg):
            print('ROW CLICK', msg)
            print(comp.id)

Do you get different id's when you click different rows?

[mjmare]

That's quick ;-)

No, I see the same ID. I think that is as expected since the body slot is a template. So there is no way to 'inject' row specific data into the slot. The Vue.js version would use props for this.

[elimintz]

Yes, you are right. It is the same issue as #118

[snoodlenay]

As I'm just coming up to speed on ag-grid, can someone quickly sum up use cases for when I might consider QTable vs Ag-Grid?

[mjmare]

I think it mostly comes down to personal preference. So my take:

• the interesting features in ag-grid require a paid license.
• QTable is part of the Quasar framework, which is awesome IMHO. If you use Quasar already, QTable is the natural choice.
• Quasar and therefore QTable is Vue.js based
• QTable is very flexible when used as a Vue component. Justpy currently has limitations that prevent using all this flexibility.

[elimintz]

The free version of ag-grid comes with quite a few features that QTable does not have. For example: Allowing users to filter fields and allowing pinned columns. Ag-grid also supports more events and simpler cell editing.

As @mjmare says, QTable has flexibility that is no supported by JustPy (I'm working on this). Ag-grid is currently more flexible as you can put html in the cells.

In the end, it depends on the features you need.