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



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



  • 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



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


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

    0_1527886308996_pre15.PNG
    0_1527886321772_post15.PNG