Action button in DataTable not show in grid mode



  • 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


Log in to reply