Provide a Vuetify way to customise the existing ui-table without having to go full custom ui-template

[Dowster64]

Description

Hi, Perhaps this is a request from a point of ignorance, but I was able to use tabulator functions in the old template to modify the behaviour of the nodered dashboard 1 ui-table node. I was able to use functions to change the colour of table cells and add groups but still have the node send the row data as a payload (selectable behaviour of the ui-table node) I am trying to add both grouping (groupby) and row selection (as well as column custom colours but I haven't got there yet) whilst using dashboard 2.0. I can do group by using the ui-template with v-data-table. However I cannot do row select successfully. I have been trying to use some of the code here for the ui-table. I have been able to modify the onRowClick() function to work with the grouped rows but the actual row data is not visible and the width of the row is shorter than the full table because the groupby adds an extra column called Groups. The css and pointer do work (at least partially) to show the row highlight but the selected row doesn't stay coloured I am clearly not a good or skilled programmer but I have been able to use NodeRED to achieve what a need in the past. I have been able to get the vuetifyjs examples from their website working via ui-template but I'm stuck here because I need to know more about html/css/vuetify than I did in the past. The new dashboard looks much better and the layout is more responsive. One small reason to move (apart from this is the future) is that the tabulator based grouping / group by has a very small clickable region on the expand rows. Vuetify has a much larger and obvious selection area around the icon/character. I'm not sure if there is anything that's do-able, apart from more examples or pointers to Vuetify tutorials?

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate