VDataTable with checkboxes instead of True/False

[kerim371]

Hi,

I can make selectable rows with vuetify.VDataTable(**well_table, show_select=True, single_select=False).
But is it possible to show checkboxes instead of True and False and catch events when the state is modified?

[jourdain]

• Vuetify2 API
• Vuetify3 API

[jourdain]

The selection state is driven by the v-model

[kerim371]

@jourdain Hi,

Thank you for the response.
In order to achieve that I'm trying to move to Vuetify3 and got some errors described here #581

[kerim371]

@jourdain thank you for the help!

Also I just found your answer on similar query.
So for the future reference add the field glutenfree to the table example and modify VDataTable and with the help of VSimpleCheckbox:

        with vuetify.VDataTable(**table):
            with vuetify.Template(calories="{ item }", __properties=[("calories", "v-slot:item.calories"),],):
                vuetify.VChip("{{ item.calories }}", color=("item.color",), dark=True,)
            with vuetify.Template(glutenfree="{ item }", __properties=[("glutenfree", "v-slot:item.glutenfree"),],):
                vuetify.VSimpleCheckbox("{{ item.glutenfree }}", v_model=("item.glutenfree",), disabled=False)

It looks like this:

[jourdain]

And that fixed your issue

[jourdain]

You can even find it in the Python code
https://github.com/Kitware/trame-vuetify/blob/master/trame_vuetify/widgets/vuetify.py#L2763

[kerim371]

@jourdain thank you! right, missed that.

The only thing is that the function:

@state.change("rows")
def update_values(rows, **kwargs):
    print(rows)

accepts all the rows no matter wich row exactly was triggered. Does that mean we don't have a possibility to easilly detect wich row was triggered?

[jourdain]

You can make a method call or update a state to pass the currently changed row.

state.modifiedRow = None

@change("modifiedRow")
...

# ...
 input="modifiedRow=item; flushState('rows')"

[kerim371]

Fantastic!
Tricky but works as needed.

Thank you very much!