Icon in table body cell slot cannot be rendered in grid mode

[noirforest]

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>

[noirforest]

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

[s.molinari]

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

[noirforest]

@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.

[s.molinari]

I’m sure there are a ton of reasons why grid mode doesn’t work or rather it isn’t intended to work without the item slot for non-data content. I’d venture to say, as with so much of Quasar, that it’s left “open” for customization on purpose. If Quasar makes the decision on how the switch to grid mode should look for anything outside of normal data, then questions will always arise, “Well, I don’t want it to look that way. Can’t you do it this way?” And we’d be in a perpetual churn of trying to make everyone happy for grid mode content display and design.

This way, there is no discussion. Just do it your way with the item slot.

That being said, @rstoenescu can let us know, if this wasn’t just an oversight.

Scott

[metalsadman]

@noirforest there are already plenty of slots there that can be used in the devland for whatever usage you or others need, making everything automated is leaning more into an opinionated framework :/. ik it might be convenient for you but what of others who doesn’t want it this way. i myself wouldn’t use the out of the box grid props coz i like the customization of what the item slot gives. besides, if you use the full potential of vue, it’s not like you’ll have to write your q-table component every time you need it, you can implement/extend a q-table of your own liking and re-use it wherever you need it in your app.

[rstoenescu]

Grid mode is too complex to be automated by the framework and cover most use-cases (covering all use-cases is out of the question), which is why you do need to specify the item slot.

[noirforest]

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

[Stanley]

@s-molinari
Hi Scott,
I read the whole content of this topic and still some questions, could you please have a look?
1). From your demo, it must to implment two kinds of codes, one for non-grid mode, the other for gird mode, is that right?
2). If yes for the first question, then is slot “item” (grid mode) exclusive with “body-cell-[name]” and “body” (non-grid mode)? That means the Quasar source code will pick one path to go when switching from grid mode or none grid mode.

[s.molinari]

1). You only use slots if you don’t want the default design or behavior of Quasar’s components (QTable or otherwise). So, no. You don’t have to implement two kinds of code, if you are happy with what Quasar does OOTB. If you aren’t happy with what Quasar offers, then you use the slots.
2). Either the slot contents for the table will be used or the item slot for grid mode. Or put another way, if you don’t create content inside the item slot, Quasar will do a default rendering of your data into its own grid design. If you don’t want that grid design, you create your own item slot content.

Scott

[dan_wilson]

Check out this thread for another implementation:
https://forum.quasar-framework.org/topic/5523/table-slots-disappear-when-grid-mode