Table slots disappear when grid mode

awipf

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.

awipf

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.

s.molinari

That is correct.

Scott

awipf

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>

dan_wilson

Thanks @awipf! That was really helpful to me.

In case it is useful to anyone, I mocked up something approximating the “default” slot as a starting point:

<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">
    <q-card>
      <q-list dense>
        <q-item v-for="col in props.cols" :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">{{ col.value }}</div>
          </div>
        </q-item>
      </q-list>
    </q-card>
  </div>
</template>

No More Posting New Topics!

Table slots disappear when grid mode