<q-table> with a <q-fab> for 'Full screen' and 'Grid' selection ?

[Incremental]

Hello, I’m playing with the fantastic component <q-table> and have a question relating to the use of a <q-fab>

As it is possible to call JS functions in <q-fab-action> with @click=“onClick”

<q-fab-action
    color="accent"
    @click="onClick"
    icon="room"
    label="Grille"
/>

would it be also possible to perform the same actions as the ones in the template :

          <!-- Full screen -->
          <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>

          <!-- Grid -->
          <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>

Thanks

[dobbel]

@incremental said in <q-table> with a <q-fab> for 'Full screen' and 'Grid' selection ?:

would it be also possible to perform the same actions as the ones in the template :

Sorry I have no idea what you want.

[Incremental]

@dobbel
I’ d like to move ‘Full screen’ and ‘Grid’ buttons in the <q-fab>

[metalsadman]

@incremental you didn’t state where fab resides, is it in the same component as your q-table? when asking please provide more context, so peeps can help you more efficiently.

[Incremental]

Sorry for the lack of details.
Yes, the fab is in the same vue page.

<template>
  <q-page class="q-pa-sm">
    <q-card>
      <q-table
        title="Catégories"
        :data="tabData"
        :hide-header="mode === 'grid'"
        :columns="tabColumns"
        row-key="id"
        :grid="mode=='grid'"
        :filter="filter"
      >
        <template v-slot:top-right="props">
          <!-- Search -->
          <q-input
            outlined
            dense
            debounce="300"
            v-model="filter"
            placeholder="Recherche"
          >
            <template v-slot:append>
              <q-icon name="search" />
            </template>
          </q-input>

          <!-- Table Full screen -->
          <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>
          <!-- Fin Full screen -->

          <!-- Table Grid -->
          <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>
          <!-- Fin Grid -->

          <q-fab
            v-model="fabActions"
            vertical-actions-align="right"
            label="Actions"
            color="primary"
            padding="xs"
            glossy
            icon="keyboard_arrow_down"
            direction="down"
          >
            <!-- Add item -->
            <q-fab-action
              color="primary"
              @click="addRow"
              icon="add_circle"
              label="Ajout"
            />
            <!-- Export CSV -->
            <q-fab-action
              color="secondary"
              @click="exportTable"
              icon="archive"
              label="Export CSV"
            />
            <!-- Here I would like the Full screen and Grid buttons -->
            <q-fab-action
              color="orange"
              @click="onClick"
              icon="fullscreen"
              label="Full Screen"
            />
            <q-fab-action
              color="accent"
              @click="onClick"
              icon="grid_on"
              label="Grid"
            />
          </q-fab>
        </template>

[metalsadman]

@incremental ok, so just do it the same as how the qbtns are doing it on the click event, since they are all in the same scope.

[Incremental]

@metalsadman thanks I didn’t thought it was as simple as

<q-fab-action
	color="accent"
	@click="
		mode = mode === 'grid' ? 'list' : 'grid';
		separator = mode === 'grid' ? 'none' : 'horizontal';
	"
	:icon="mode === 'grid' ? 'list' : 'grid_on'"
	:label="mode === 'grid' ? 'List' : 'Grid'"
/>