Adding a button to a cell within a datatable



  • I need to add a button to a cell within a datatable. I’ve tried the solution listed here (https://forum.quasar-framework.org/topic/381/solved-action-button-in-datatable/3) but it does not work (nothing shows in the column named “action”).

    Is there some documentation somewhere on how to do this?



  • Not a button, but I did add an icon:

            <q-td key="bookmark" :props="props">
              <q-icon v-if="!props.row.bookmark" name="far fa-star" color="grey-4" @click.native="onBookmark(props.row)"/>
              <q-icon v-else name="far fa-star"  color="teal-6" @click.native="onBookmark(props.row)"/>
            </q-td>
    


  • Ok, thanks! I tried that but I get the error: TypeError: _vm.props is undefined.

    What version of quasar are you using? I am using CLI version 0.15.14 and framework version 0.15.10. Should this work on my version?



  • That was a snippet from a larger piece of code.
    This code has been around since .15.x release and I have been keeping up with Quasar - currently I am at 16.4 (but code has not changed).
    You might note that I deal with the rows and some of the columns (letting the rest of the columns default).
    I’ll post the whole thing, so you get a bigger picture:

        <q-table
          dense
          color="teal-6"
          hide-bottom
          :data="alarms"
          :columns="columns"
          row-key="id"
          :pagination.sync="pagination"
        >
          <q-tr :id="props.row.id" slot="body" slot-scope="props" :props="props" @click.native="rowClick(props.row)" @dblclick.native="rowDoubleClick(props.row)" class="cursor-pointer" :style="rowStyleObject(props.row)">
            <q-td key="downloaded" :props="props">
              <q-icon :name="getDownloadStatusIcon(props)" />
            </q-td>
            <q-td
              v-for="col in props.cols"
              v-if="canShowColumn(col.name)"
              :key="col.name"
              :props="props"
            >
              {{ col.value }}
            </q-td>
            <q-td key="classification" :props="props">
              {{ props.row.score &lt; minScore ? 'unclassified' : props.row.detectedObject }}
            </q-td>
            <q-td key="score" :props="props">
              {{ props.row.score &lt; minScore ? '' : props.row.score }}
            </q-td>
            <q-td key="bookmark" :props="props">
              <q-icon v-if="!props.row.bookmark" name="far fa-star" color="grey-4" @click.native="onBookmark(props.row)"/>
              <q-icon v-else name="far fa-star"  color="teal-6" @click.native="onBookmark(props.row)"/>
            </q-td>
            <q-td key="acknowledgement" :props="props">
              <q-icon v-if="!props.row.ackWho" name="fas fa-ellipsis-h" color="grey-4" @click.native="onAckWho(props.row)"/>
              <q-icon v-else name="fas fa-bolt" color="teal-6" @click.native="onAckWho(props.row)"/>
            </q-td>
          </q-tr>
        </q-table>
    


  • I’m not sure why the window above converted my less-thans (<) to &lt; (when others weren’t) when done in quoted, but just be aware it’s not like that in the code.



  • if you are not using the body slot, you can target a specific cell using slot="body-cell-{column-name}" where column-name is the the name of one of the columns in your column definition.