@s-molinari @metalsadman @rstoenescu thanks for explaining the reasons that I fully understand and agree. I am new to Quasar / Vue, will learn how to implement / extend a component to take full advantage of the power of the framework. BTW, awesome framework! Thanks for your great efforts!

@s-molinari @metalsadman @rstoenescu thanks for explaining the reasons that I fully understand and agree. I am new to Quasar / Vue, will learn how to implement / extend a component to take full advantage of the power of the framework. BTW, awesome framework! Thanks for your great efforts!

@s-molinari said in Icon in table body cell slot cannot be rendered in grid mode:

You have to use the item slot to better specify how the item should look, once it reduces to the grid mode.

https://codepen.io/smolinari/pen/LYYWxWV?editors=1010

Scott

Hi Scott,

Thanks a lot, it helps. Wish it works out of box in grid mode though, then no more need to write lines of code for the item slot.

Sorry the screenshots in my post are not showing, you can click on its link to see, thanks

I have an edit icon in the table body cell slot, the button shows correctly in the table:

However when grid is enabled (in mobile view), the icon is not rendered:

my code as below:

<template>
  <q-page padding>
    <q-table
      title="Users"
      :data="users"
      :columns="columns"
      row-key="name"
      :grid="$q.screen.xs"
    >
      <q-td
        slot="body-cell-id"
        slot-scope="props"
        :props="props"
      >
        <q-btn
          round
          icon="edit"
          size="xs"
          color="primary"
          @click="update(props.row.id)"
        />
      </q-td>
    </q-table>
  </q-page>
</template>

<script>
export default {
  data: () => ({
    users: [{ name: 'Jack', id: 1 }, { name: 'Jeff', id: 2 }],
    columns: [
      { name: 'name', label: 'Name', field: 'name' },
      { name: 'id', label: '', field: 'id' }
    ]
  }),
  methods: {
    update (id) {
      console.log('id is ' + id)
    }
  }
}
</script>