No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Action button in DataTable not show in grid mode

    Help
    3
    5
    780
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • A
      abitaf last edited by

      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

      1 Reply Last reply Reply Quote 0
      • М
        Михаил last edited by

        Same for me…

        metalsadman 1 Reply Last reply Reply Quote 0
        • metalsadman
          metalsadman @Михаил last edited by 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.

          1 Reply Last reply Reply Quote 0
          • М
            Михаил last edited by Михаил

            Thx. Your example helped a lot.

            metalsadman 1 Reply Last reply Reply Quote 0
            • metalsadman
              metalsadman @Михаил last edited by

              @Михаил great!

              1 Reply Last reply Reply Quote 0
              • First post
                Last post