question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

QTable - slot for `expand`

See original GitHub issue

Is your feature request related to a problem? Please describe. There is expand prop in QTable for rows. Docs show it’s usage: https://quasar.dev/vue-components/table#Expanding-rows

Describe the solution you’d like Current implementation requires to define all cells manually. I think there should be separate slot for the expanded row

Additional context At the end of __getTBodyTR I’ve added:

      const expandScope = this.$scopedSlots['expand']
      if (expandScope !== void 0 && this.isRowExpanded(key)) {
        const { key, ...trData } = data
        const td = h('q-td', {
          attrs: {
            colspan: '100%'
          }
        }, [expandScope(this.__getBodyScope({
          key: key + '-expanded',
          row,
          pageIndex,
          __trClass: selected ? 'selected' : ''
        }))]
        )
        return [h('tr', data, child), h('tr', [td])]
      }
      return h('tr', data, child)

It allows me to use in template:

      <template v-slot:body-selection="props">
        <q-checkbox v-model="props.expand"/>
      </template>
      <template v-slot:expand="props">
        <div class="text-left">
          This is expand slot for row above: {{ props.row.name }}.
          <q-input v-model="props.row.input" />
        </div>
      </template>

Currently I’ve cheated with body-selection slot, but hey, it works! New slot has the same props as body, so migration should be easy. Unresolved problems:

  • Should developer manually include <tr><td colspan="100%"></td></tr> tags? Or just let Quasar do it?
  • Should all props be available?
  • Should expand switch be defined and rendered, if slot is provided by default?

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:4
  • Comments:10

github_iconTop GitHub Comments

2reactions
Razi91commented, May 13, 2022

I created PR for that, but there is no response

1reaction
AlexDanielcommented, Dec 7, 2021

Uh, any progress? Coming from vuetify and really missing this feature.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Quasar's QTable: The ULTIMATE Component (2/6)
Paddock Sprays With QTable Expanded. The farmers LOVE IT! And guess what. ... Expandable rows are made possible with the #body slot.
Read more >
Table
Total customization of rows and cells through scoped slots; Ability to add additional row(s) at top or bottom of data rows; Column picker...
Read more >
q table add expanded row | Quasar Framework Community
Hello, I excellent component q-table ! from example here. ... This is expand slot for row above: {{ props.row.name }}. </div> </div> </q-td> ......
Read more >
Quasar Vue's QTable (2/6) - Expandable Rows and ... - YouTube
Now that we have a basic setup with Quasar's Table Component, let's explore "Expandable Rows" and "Selectable Rows"!It's surprisingly simple ...
Read more >
Expanded row and custom selector - Quasar Playground
https://quasar.dev/vue-components/table#Example--Expanded-row-and-custom-selector ... <template v-slot:body="props">. 17. <q-tr :props="props">.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found