QTable with multiple interactions

[Narmer23]

I wanted to create a DataTable similar to the table used in Gmail.

Imagine you have a list of users with a set of tasks associated to each of them. I wanted to create a table of users with expanding rows to show the tasks, and action buttons (e.g. to add a task) which appear at the far right of each row on hover.

I needed a total of 3 user interactions:

• Expand a row to show list of task (table/list)
• On hover show command buttons on the far right (as in Gmail)
• On row click change $router state to e.g. user detail

I’ve managed to have all of the interactions working, but I find it a bit “clumsy”.

In order to get it right, I had to override the default body slot and create a custom row. Using the @click.native I covered the row click, while using the props.expand property in @mouseenter.native and @mouseleave.native on the row I can hide/show a td in the far right side of the row, with specific CSS to position it above others tds. The q-btns in the command cell use the @click.stop.prevent to not fire the row click.

Last is the row expand. As per the example in the DataTable page I should use the props.expand property on a q-checkbox to open and close the row, but props.expand has been already used for the command cell. I thought that props.expand was just an example, and that we could use wathever variable we wanted as long as it’s relative to the row. I was wrong .Other variables simply are not initialized or whatsover, I tried to dig up a little bit and found that expand is a variable in the q-table itself.

Since I didn’t want to throw away the work (which I like how it renders), I decided for a workaround where I initialize an array of false values for each of the rows of the current page, leveraging on the __index attribute of the props.row object to open/close the row expand.

I don’t really like this solution, like I said it’s a workaround. Does anyone know or can find a better one?

I’ve created a fiddle to show my solution.

Thanks in advance!

[Narmer23]

I’ve found another solution. Pratically with my expandedRows array I was doing exactly what the selection property of the table is doing.

I’ve updated the fiddle using the props.selected instead of the row __index, still not satisfied with the result but at least I don’t have to initialize an array by myself.

[Hawkeye64]

Looking good!