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 td
s. The q-btn
s 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!