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
-
Same for me…
-
@Михаил 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.
-
@Михаил great!