Action button in DataTable not show in grid mode

abitaf

Hi all,

I have a q-table with action button to validate or delete a row, when i switch to grid mode the action button disappear, what is the correct way to show action button in grid mode ?

 <q-table
      title="Liste des réservations"
      :data="data"
      :hide-header="mode === 'grid'"
      :columns="columns"
      row-key="name"
      :grid="$q.screen.lt.md"
      :filter="filter"
      :pagination.sync="pagination"
    >
      <template v-slot:top-right="props">
        <q-input
          outlined
          dense
          debounce="300"
          v-model="filter"
          placeholder="Rechercher"
        >
          <template v-slot:append>
            <q-icon name="search" />
          </template>
        </q-input>

        <q-btn
          flat
          round
          dense
          :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
          @click="props.toggleFullscreen"
          v-if="mode === 'list'"
        >
          <q-tooltip :disable="$q.platform.is.mobile" v-close-popup
            >{{ props.inFullscreen ? "Exit Fullscreen" : "Toggle Fullscreen" }}
          </q-tooltip>
        </q-btn>

        <q-btn
          flat
          round
          dense
          :icon="mode === 'grid' ? 'list' : 'grid_on'"
          @click="
            mode = mode === 'grid' ? 'list' : 'grid';
            separator = mode === 'grid' ? 'none' : 'horizontal';
          "
          v-if="!props.inFullscreen"
        >
          <q-tooltip :disable="$q.platform.is.mobile" v-close-popup
            >{{ mode === "grid" ? "List" : "Grid" }}
          </q-tooltip>
        </q-btn>

        <q-btn
          color="primary"
          icon-right="archive"
          label="Export to csv"
          no-caps
          @click="exportTable"
        />
      </template>
      <template v-slot:body-cell-is_validate="props">
        <q-td :props="props">
          <q-chip
            :color="
              props.row.is_validate == true
                ? 'green'
                : props.row.is_validate == false
                ? 'orange'
                : 'secondary'
            "
            text-color="white"
            dense
            class="text-weight-bolder"
            square
            style="width: 85px"
            >{{ props.row.is_validate }}
          </q-chip>
        </q-td>
      </template>
      <template v-slot:body-cell-action="props">
        <q-td :props="props">
          <div class="q-gutter-sm">
            <q-btn
              v-if="props.row.is_validate == false"
              @click="validateBook(props.row)"
              dense
              color="primary"
              icon="done"
            />
            <q-btn dense color="red" icon="delete" />
          </div>
        </q-td>
      </template>
    </q-table>

Thanks in advance

Михаил

Same for me…

metalsadman

@Михаил you need to override item slot, don’t misunderstood that it would create the custom component you implemented on cell/body slot automatically when you change to grid.

See this example https://forum.quasar-framework.org/topic/2383/adding-a-button-to-a-cell-within-a-datatable/8?_=1605796889320.

Михаил

Thx. Your example helped a lot.

metalsadman

@Михаил great!