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

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

    Framework
    6
    11
    1433
    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.
    • N
      noirforest last edited by

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

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

      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>
      
      1 Reply Last reply Reply Quote 0
      • N
        noirforest last edited by

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

        1 Reply Last reply Reply Quote 0
        • s.molinari
          s.molinari last edited by

          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

          N S 2 Replies Last reply Reply Quote 1
          • N
            noirforest @s.molinari last edited by

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

            1 Reply Last reply Reply Quote 0
            • s.molinari
              s.molinari last edited by 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

              1 Reply Last reply Reply Quote 0
              • metalsadman
                metalsadman last edited by 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.

                1 Reply Last reply Reply Quote 1
                • rstoenescu
                  rstoenescu Admin last edited by

                  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.

                  1 Reply Last reply Reply Quote 2
                  • N
                    noirforest last edited by

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

                    1 Reply Last reply Reply Quote 2
                    • S
                      Stanley @s.molinari last edited by

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

                      1 Reply Last reply Reply Quote 0
                      • s.molinari
                        s.molinari last edited by 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

                        1 Reply Last reply Reply Quote 0
                        • D
                          dan_wilson last edited by

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

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