QTable with multiple interactions



  • 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!



  • 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.



  • Looking good!