Available Slots for QTables post 0.15 OR Event Listener for Table Selection post 0.15

[randomruss]

Hi I’m trying to refactor some pre-0.15 code that was working pre-0.15 that doesn’t seem to work post 0.15. Pre 0.15 it included the following

<q-data-table
:config=“devices_config”
:columns=“devices_cols”
:data=“devicesSorted”>
<template slot=“col-guid” scope=“cell”>
<q-side-link :to=“queryChangeDevice(cell.row.id)” >
<q-item-tile :icon=“cell.row.id == $route.query.device ? ‘check box’ : ‘check box outline blank’”
:color=“cell.row.id == $route.query.device ? ‘positive’ : ‘faded’”>
</q-item-tile>
{{ cell.row.guid }}
</q-side-link>
</template>
</q-data-table>

Pre 0.15, I was able to insert check boxes on the first row and have the router navigate to the appropriate page dependent on what was checked. Post 0.15 it seems the col-guid slot doesn’t work anymore. All the examples I see on the Data Table page show “top-row” or “top-selection” (pre 0.15 it used to be “col-message”, etc) but there is no list of which slots are valid. I’ve tried “left-column” but that doesn’t seem to do the job:

<q-table
:config=“devices_config”
:columns=“devices_cols”
:data=“devicesSorted”
>
<template slot=“left-column” slot-scope=“props” :props=“cell”>
<q-item :to=“queryChangeDevice(cell.row.id)” >
<q-item-main>
<q-item-tile
:icon=“cell.row.id == $route.query.device ? ‘check box’ : ‘check box outline blank’”
:color=“cell.row.id == $route.query.device ? ‘positive’ : ‘faded’”
>
</q-item-tile>
{{ cell.row.guid }}
</q-item-main>
</q-item>
</template>
</q-table>

As an alternative I tried implementing the same table with the select property. The only problem is that I don’t see how to add a on click listener to the selection. Nothing that I saw in the QTable documentation mentioned anything about a listener. I know that the items selected are stored in the selection.sync but I’m not sure how to add a listener to route to another page like I was doing pre-0.15 when the item is selected. The code I tried is listed below:

<q-table
:config=“devices_config”
:columns=“devices_cols”
:data=“devicesSorted”
selection=single
:selected.sync=“selected”
color = “positive”
>
</q-table>

Any insight anyone has on this would be very helpful.

Thanks.

[brunomeurer]

Hello randomruss,

You have make something like this:

<q-table class="bg-white q-mb-sm margem"
  title="Condições de pagamento"
  :data="list"
  :columns="columns"
  :loading="this.carregandoLista"
  dense hide-bottom
>
  <q-td slot="body-cell-name" slot-scope="props" :props="props">
    <q-btn 
      icon="edit"
      size="sm"
      color="secondary"
      @click="edit(props.row)"
    />
  </q-td>
</q-table>

Regards,
Bruno Meurer

[randomruss]

Thanks Bruno. I was able to fix it using the code posted below. Basically I named each of the columns and referenced them by using the slot=“body-cell-name” by your recommendation. I also replaced all the references to “cell” with “props” and replaced the q-side-link with q-item. This seemed to work great except now that I check a checkbox the entire column is highlighted and remains so until unchecked. This definitely didn’t happen pre-0.15. I’m wondering if anyone knows a fix to this.

    <q-table
      :config="devices_config"
      :columns="devices_cols"
      :data="devicesSorted"
      :filter = "filter"
    >
      <q-td slot="body-cell-deviceGuid" slot-scope="props" :props="props">
        <q-item :to="queryChangeDevice(props.row.id)" >
          <q-item-tile
            :icon="props.row.id == $route.query.device ? 'check box' : 'check box outline blank'"
            :color="props.row.id == $route.query.device ? 'positive' : 'faded'">
          </q-item-tile>
          {{props.row.guid }}
        </q-item>
      </q-td>
    </q-table>

[randomruss]

In the 2 pictures below you can see the difference in pre and post 0.15