Adding a button to a cell within a datatable

umd-cforrester

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?

Hawkeye64

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>

umd-cforrester

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?

Hawkeye64

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>

Hawkeye64

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

benoitranque

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.

karnjeet

@Hawkeye64 Can you help here for adding button in Q-table , on click of button required click row info

metalsadman

@karnjeet https://codepen.io/metalsadman/pen/ZgKexK

Oct. 2020 update: added complex example with updating of values.

lawrence615

@metalsadman said in Adding a button to a cell within a datatable:

@karnjeet https://codepen.io/metalsadman/pen/ZgKexK

Well implemented and easy to understand. Thanks for this.

No More Posting New Topics!

Adding a button to a cell within a datatable