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