Table slots disappear when grid mode



  • Hello Everyone,

    I have an issue where td slots are disappearing in grid mode. Anyone run into this before?

    Slot

    <template v-slot:body-cell-edit="props">
            <q-td :props="props">
              <q-item-section>
                <div class="row">
                  <q-btn
                    @click.stop=""
                    flat
                    round
                    dense
                    color="primary"
                    icon="edit"
                  />
                  <q-btn
                    @click.stop="promptToDelete(props.row.id )"
                    flat
                    round
                    dense
                    color="red"
                    icon="delete"
                  />
                </div>
              </q-item-section>
            </q-td>
          </template>
    

    Slot Data

    { name: "edit", label: "edit" }
    

    So when the table is in grid mode, the header stays but the slot icons disappear.



  • After reviewing a bit more, it seems this is by design and if i want to keep the custom slots, i have to create my own grid design… which makes sense i guess. Is this accurate.



  • That is correct.

    Scott



  • If anyone is interested this is how i solved it… Also i’m new to Vue.js and Quasar so please give input if there are ways to improve this.

    I created a component that houses the mobile view where i copied the Quasar design except for my buttons (v-else)

    <template v-slot:item="props">
      <div
        class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
        :style="props.selected ? 'transform: scale(0.95);' : ''"
      >
        <q-card :class="props.selected ? 'bg-grey-2' : ''">
          <q-card-section>
            <q-checkbox dense v-model="props.selected" :label="props.row.name" />
          </q-card-section>
          <q-separator />
          <q-list dense>
            <q-item
              v-for="col in props.cols.filter(col => col.name !== 'desc')"
              :key="col.name"
            >
              <div class="q-table__grid-item-row">
                <div class="q-table__grid-item-title">{{ col.label }}</div>
                <div class="q-table__grid-item-value" v-if="col.label != 'edit'">
                  {{ col.value }}
                </div>
                <div v-else>
                  <alert-edit-delete :alertId="props.row.id" @handleDelete="handleDelete" />
                </div>
              </div>
            </q-item>
          </q-list>
        </q-card>
      </div>
    </template>
    
    <script>
    export default {
      props: ["props"],
    
        components: {
        "alert-edit-delete": require("components/alert/AlertEditDelete.vue").default
      },
    
      methods: {
        handleDelete(id) {
          this.$emit('handleDelete',id);
        },
      }
    };
    </script>
    

    The buttons are also a component

    <template>
      <div class="order-first">
        <q-btn
          @click.stop=""
          flat
          round
          dense
          color="primary"
          icon="edit"
          class="q-mr-sm"
        />
        <q-btn
          @click.stop="handleDelete(alertId)"
          flat
          round
          dense
          color="red"
          icon="delete"
        />
      </div>
    </template>
    
    <script>
    
    export default {
    props: ["alertId"],
      methods: {
        handleDelete(id) {
          this.$emit('handleDelete',id);
        },
      }
    };
    </script>
    

    In the table component I import the mobile list

    <template v-slot:item="props">
            <mobile-alert-list :props="props" @handleDelete="promptToDelete" />
    </template>
    

Log in to reply