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
$routerstate 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
bodyslot and create a custom row. Using the
@click.nativeI covered the row click, while using the
@mouseleave.nativeon the row I can hide/show a
tdin 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.preventto not fire the row click.
Last is the row expand. As per the example in the DataTable page I should use the
props.expandproperty on a
q-checkboxto open and close the row, but
props.expandhas been already used for the command cell. I thought that
props.expandwas 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
expandis 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
falsevalues for each of the rows of the current page, leveraging on the
__indexattribute of the
props.rowobject 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?
Thanks in advance!
I’ve found another solution. Pratically with my
expandedRowsarray I was doing exactly what the
selectionproperty of the table is doing.
I’ve updated the fiddle using the
props.selectedinstead of the row
__index, still not satisfied with the result but at least I don’t have to initialize an array by myself.
Hawkeye64 last edited by