Expanding rows

[bogatyrjov1]

Issue Type (delete the irrelevant ones)

• [x] Enhancement Request

Specs

What version are you using? 2.13.3

Enhancement request

I am implementing a table in which every row could be expanded with another vue-good-table instance. While I didn't find this to be in the standard functionality, some other solutions are offering this out of the box. The problem is to create an expanding area below a given row also referred to as 'child row' or 'detail row'. Some examples of what is meant: https://www.npmjs.com/package/vue-tables-2#child-rows , https://ratiw.github.io/vuetable-2/#/Detail-Row

[iAn-Pinto]

Need this functionality. Please!

[willhoyle]

@bogatyrjov1 @iAn-Pinto If anyone is interested, I implemented a small proof of concept for this feature. I didn't need anything too complex for my app but if anyone needs this, feel free to check it out and build off of it.

https://github.com/willhoyle/vue-good-table/commit/202ba585e61354bfc3cc90b34cb0da9ce9374682 The commit is kind of messy because my editor formatted on save and I didn't feel like cleaning it up.

It adds a new vue-good-table option called expansionOptions that accepts two fields and a slot called "table-row-expansion"

Here's how I use it in my app:

<template>
    <vue-good-table
      :rows="rows"
      etc...

      @on-row-dblclick="toggleExpansion"
      :expansion-options="{
          enabled: true,
          showExpansion
      }"

    >
        <template slot="table-row-expansion" slot-scope="props">
            <div>Here's the expanded row:</div>
            <div>{{props.row}}</div>
            <div>{{props.formattedRow}}</div>
            <div>{{props.index}}</div>
        </template>
    </vue-good-table>
</template>

<script>
export default {
  data() {
    rows: [...],
    ...etc

    expandedIds: [],
  },
  methods: {
    toggleExpansion(row, index) {
      if (this.showExpansion(row, index)) {
          this.expandedIds = this.expandedIds.filter(id => id !== row.id)
      } else {
          this.expandedIds.push(row.id)
      }
    },
    showExpansion(row, index) {
      return this.expandedIds.some(id => id == row.id)
    }
  }
}
</script>

In my case, I didn't need it but you could probably add a few more features like an event called @on-expansion-row-click but you can accomplish the same by just attaching your own click events on the slot in your component.

[ow-en]

@bogatyrjov1 @iAn-Pinto @willhoyle

This feature will be added in the next minor release (coming hopefully in the next week or two).

@willhoyle thanks for your contribution. My research on the subject had me come up with a solution very similar to yours.

If you're interested in creating a PR, it's definitely something I would be interested in looking at further.

Thanks all - I will keep you posted on when this will be released.

[kodmaster23]

Hi! Any news in this issue?

[PrimozRome]

+1 @ow-en any update on release of this feature?

[xoxoj]

@willhoyle i try it, no useful.

[xoxoj]

has some bug, if i use this code, when i clicked the row, then the checkbox state style can not be checked

[PrimozRome]

@ow-en by I don't want to be pain in the ass but is there by any chance a known release date on this feature? Thanks a lot!

[ChaStPierre]

More support. We use quite a bit this library and expansion is definitely a needed addition. Thanks

[willhoyle]

I can work on a PR for this because it seems like there's enough demand to have this. I'm still using my own forked version with the code I posted above.

The only thing is @ow-en mentioned that they are working on this and that it will be released? I obviously don't want to duplicate any work that's already been done.

[PrimozRome]

@willhoyle yeah very nice from you and I feel you regarding duplicated work. I wish @ow-en would provide some feedback regarding his progress.

Just to discuss a little implementation side of things. I think this package got it right https://github.com/ratiw/vuetable-2 -> https://www.vuetable.com/guide/detail-row.html. Something similar would be great to have in this package. You simply provide a component that detail row displays. This is the most flexible way.

[willhoyle]

It looks like we have two choices here. We can go that route, ie: provide a prop called detailedRowComponent like what vuetable-2 does there.

However, in order to be more consistent with the way vue-good-table does things, I think it would make more sense to make it a scopedSlot since that would be similar to how slots are used in other parts of the library. For example, custom pagination slot: https://xaksis.github.io/vue-good-table/guide/advanced/#custom-pagination and then data is provided to the slot via slot-scope props.

I don't have a preference either way although I always used scopedSlots for my own components in my apps.

As for the actual implementation, I'm just brainstorming here but I think we can essentially implement it the same way the checkbox functionality does it.

Since vue-good-table does a deepClone of the passed in rows, it can add fields to the row without getting into trouble mutating props however that does mean that it's not as obvious providing a expandedRows prop with a sync.

For example, see here when a checkbox is clicked, this is what happens internally:

// checkbox click should always do the following
    onCheckboxClicked(row, index, event) {
      this.$set(row, 'vgtSelected', !row.vgtSelected);
      this.$emit('on-row-click', {
        row,
        pageIndex: index,
        selected: !!row.vgtSelected,
        event,
      });
    }

So we would probably do something similar. And the user can still access which rows are expanded by doing something like:

this.$refs['my-table'].expandedRows

Another thing that might be useful for users of the table could be a way to expand a row through a method:

this.$refs['my-table'].expandRow((rows) => {
    let row = rows.find(...)
    this.$set(row, 'vgtExpanded', !row.vgtExpanded)
})

I don't know if that's the best way of doing that but then at least out of the box, the row expansion just works, but if you want to customize a bit, it can be done.

[PrimozRome]

@willhoyle did you have any work on this at any chance ?

[pndiogo]

Hi, any news regarding this issue? Thanks.

[PrimozRome]

@willhoyle and @ow-en hello guys.

Any info on this implementation? It is so frequently requested...

[PrimozRome]

@xaksis any update on this feature request from the repo owner?

[xaksis]

hey guys, I don't have the bandwidth to implement this anytime soon but I'll happily review PRs. If you undertake a PR, be mindful of making it work in IE which has issues with vue components being rendered as part of tables.: https://vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats

[PrimozRome]

@xaksis ok I will see if I can have my dev team do this PR. But first I would like to hear back from @willhoyle and @ow-en if they have been start working on this, as mentioned above. I don't want to do double work!

[willhoyle]

Alright we've talked about this enough, let's start putting things in motion to get this feature shipped!

What we will need:

1. Updated docs explaining usage, API, examples, etc...

2. API/Usage We need to talk about how the API will look for users. Here's what I think we should do and I'd like some feedback before I start the implementation.

---

Provide a .expandedRows computed property that can be used as follows:

let rows = this.$refs['my-good-table'].expandedRows

This is just a convenience similar to .selectedRows

---

Create a new slot called expanded-row (or some other name if people prefer something else). The slot would receive slot-scope props as follows:

<vue-good-table
  :columns="columns"
  :rows="rows"
  :expandOptions="{enabled: true}">
  <template slot="expanded-row" slot-scope="props">
    <div>
        // do custom stuff
    </div>
  </template>
</vue-good-table>

What will be supplied in the props object? Similar to the custom-row slot so:

• props.row // the original row
• props.index // The currently displayed table row index
• props.row.originalIndex // The original row index
• props.formattedRow
• there won't be a props.column obviously since this row spans across the entire table
• a function called props.toggleExpandedRow which could be used to close the row by passing the row so you might do something like this simple example:

  <vue-good-table
  :columns="columns"
  :rows="rows"
  :expandOptions="{enabled: true}">
  <template slot="expanded-row" slot-scope="props">
  <div>
      <button @click="props.toggleExpandedRow(props.row)">Close Row</button>
  </div>
  </template>
  </vue-good-table>

  This provides easy access to close the row from the template without writing extra code. Is there a better way to do that?

---

We need to provide users ways to actually toggle the rows on/off. We can provide an option in the expandOptions settings called expandOnDblClick: false // default By default it's off of course, to remain backward compatible with existing code.

Most use-cases that need the expansion row feature is to provide a more detailed overview of that row and show more information. The row is usually expanded by giving the app user a button/icon to click on to expand the row such as the following pic:

So we need a more global function to allow arbitrary rows to be expanded.

A global function similar to the props.toggleExpandedRow(props.row) from above can be exposed (javascript doesn't have private functions so it's all exposed regardless)

I can think of two ways of doing this:

1. Leaks the internal implementation

   this.$refs['my-good-table'].toggleExpandedRow( rows => {
   let row = rows.find(...)
   this.$set(row, 'vgtExpanded', true)
   })

   Basically the user is passed the rows and it's up to them to set the vgtExpanded field to true/false. Like I said, this is brittle and if we choose to change the way we track Expanded rows in the future, we're screwed. It does however give the user the most power.

2. Slightly better?

   this.$refs['my-good-table'].toggleExpandedRow(
   return (row) => {
       if (row.id == 1) {
           return true
       }
   }
   )

   Basically you pass a function to toggleExpandedRow that returns true for the row you want to toggle. Then internally, vue-good-table will toggle it and this will protect the internal implementation.

3. Alternative Completely different but maybe we keep it much simpler and we actually just allow people to keep track of their own expandedRows in their own code. So their templates would look more like this:

   
   <vue-good-table
   :columns="columns"
   :rows="rows"
   :expandOptions="{enabled: true, selfManaged: true}">
   <template slot="expanded-row" slot-scope="props">
   <tr v-if="isExpanded(props.row.id)">
       <td :colspan="props.colspan">
           <div>
   
           </div>
       </td>
   </tr>
   </template>
   </vue-good-table>

We would still provide values to help with the formatting like `colspan`.
To be honest after writing that, I feel like that would be much easier to implement but to the detriment of forcing users to track their own expandedRows. But I don't think that's too hard anyways.

---

Configuration would be done similar to other options which we could call `expandOptions` and users would use it in their templates as follows:
```vue
<vue-good-table
  :columns="columns"
  :rows="rows"
  :expandOptions="{
    enabled: true,
    ...other options we end up needing like the selfManaged above (or some other naming)
  }">

Any thoughts? In terms of how quick this can be done, I'd say the option 3. is for sure the quickest since it passes off a lot of the actual logic to display the expanded Row to the user of the table.

[PrimozRome]

@willhoyle thanks for diving into action on this feature request. I will provide some feedback as requested. I can also collaborate on testing/documentation if you want.

First of all I agree with you we should keep the API in form of scoped slots to be consistent with other functionalities of this component.

Provide a .expandedRows computed property that can be used as follows:

let rows = this.$refs['my-good-table'].expandedRows This is just a convenience similar to .selectedRows

Agree.

Create a new slot called expanded-row (or some other name if people prefer something else). The slot would receive slot-scope props as follows:

Agree.

What will be supplied in the props object? Similar to the custom-row slot so:

props.row // the original row props.index // The currently displayed table row index props.row.originalIndex // The original row index props.formattedRow there won't be a props.column obviously since this row spans across the entire table

I think you summed up perfectly. At the moment I do not see there are additional props needed to make this useful and functional.

a function called props.toggleExpandedRow which could be used to close the row by passing the row so you might do something like this simple example: This provides easy access to close the row from the template without writing extra code. Is there a better way to do that?

This is perfect.

So we need a more global function to allow arbitrary rows to be expanded.

A global function similar to the props.toggleExpandedRow(props.row) from above can be exposed (javascript doesn't have private functions so it's all exposed regardless)

I can think of two ways of doing this:

What if make it even more simple and pass an array of expanded row ID's as a prop to vue-good-table?

<vue-good-table
  :columns="columns"
  :rows="rows"
  :expandOptions="{enabled: true, selfManaged: true}"
  :expandedRows="[1,4,12,54]"
/>

Configuration would be done similar to other options which we could call expandOptions and users would use it in their templates as follows:

Any thoughts? In terms of how quick this can be done, I'd say the option 3. is for sure the quickest since it passes off a lot of the actual logic to display the expanded Row to the user of the table.

Do we really need option enabled: true/false? I would simply enable it if scoped slot expanded-row is provided. I don't see any other options needed at the moment, but I am sure they will surfaced with the usage and can be added later.

[willhoyle]

What if make it even more simple and pass an array of expanded row ID's as a prop to vue-good-table?

<vue-good-table
  :columns="columns"
  :rows="rows"
  :expandOptions="{enabled: true, selfManaged: true}"
  :expandedRows="[1,4,12,54]"
/>

I agree this would make it much more simple. We would need to introduce two fields for that though because vue-good-table would need to know what field those IDs are referring to. So something like:

<vue-good-table
  :columns="columns"
  :rows="rows"
  :expandedRows="[1,4,12,54]"
  expandedKey="id" // or a function if it's a nested key. or allow syntax such as field.nested.key
/>

[PrimozRome]

I agree this would make it much more simple. We would need to introduce two fields for that though because vue-good-table would need to know what field those IDs are referring to. So something like:

Yes agree, this makes it much more flexible.

Anything else thats stops us from starting implementation ?

[willhoyle]

I'd say that's a good start. We can always add some more later. I just finished an initial implementation, if anyone wants to test it out, just add it to your package.json:

"dependencies": {
    "vue-good-table": "willhoyle/vue-good-table#expanded-rows.beta.1"
}

and then npm install (or yarn)

---

I'm just gonna copy paste the docs I made since I can't think of any other way to show them. The formatting might not be as nice as the VuePress site but here's the page I added for the expanded rows page:

Expanded Rows

Usage

To enable row expansion, simply:

1. Add expandedOptions to the table component
2. Use the expanded-row slot

Full example

<template>
    <vue-good-table
        :expandedOptions="{
            key: 'id',
            expandedRows,
            styleClass: 'my-custom-class'
        }"
        :rows="rows"
        :columns="columns">
        <template slot="expanded-row" slot-scope="props">
            <div>
                <span class="warning"></span>
                Are you sure you want to delete
                <span style="font-weight: bold;">{{props.row.name}}</span>?
                <a class="nav-link">Confirm</a>
            </div>
        </template>
        <template slot="table-row" slot-scope="props">
            <span v-if="props.column.field == 'custom'">
                <span @click="clicked(props.row.id)" class="trash"></span>
            </span>
            <span v-else>{{props.formattedRow[props.column.field]}}</span>
        </template>
    </vue-good-table>
</template>

<script>
export default {
  data() {
    return {
      expandedRows: [2],
      columns: [
        { label: 'ID', field: 'id' },
        { label: 'Name', field: 'name' },
        { label: 'Age', field: 'age', type: 'number' },
        { label: '', field: 'custom' }
      ],
      rows: [
        { id: 1, name: 'John', age: 20 },
        { id: 2, name: 'Jane', age: 24 },
        { id: 3, name: 'Susan', age: 16 }
      ]
    }
  },
  methods: {
    clicked(clickedId) {
      if (this.expandedRows.some(id => id == clickedId)) {
        this.expandedRows = this.expandedRows.filter(v => v !== clickedId)
      } else {
        this.expandedRows.push(clickedId)
      }
    }
  }
}
</script>

<style>
tr.my-custom-class {
  background-color: rgb(229, 240, 255); // blue
}
</style>

Result

::: tip Slot-scope props You have access to the following fields:

• The original row object can be accessed via props.row
• The currently displayed table row index can be accessed via props.index .
• The original row index can be accessed via props.row.originalIndex. You can then access the original row object by using rows[props.row.originalIndex].
• You can access the formatted row data (for example - formatted date) via props.formattedRow :::

expandedOptions

• key: String or Function. If you pass a function, you will be passed the row as the first parameter as such:

  // using a function allows you to supply a custom field 
  // (like a nested key or something more complex)
  expandedOptions: {
  key: function(row) {
      return row.nested.field
  }
  }

• expandedRows: Array of ids for the currently expanded rows
• styleClass: String. Style class for the <tr> tag of the expanded row. Useful for setting a prominent background color, fixed height or different scroll behaviour. Beware of css selector specificity when styling the row:

  tr.my-custom-class {
  background-color: rgb(229, 240, 255); // blue
  }
  /* won't work */
  .my-custom-class {
  background-color: rgb(229, 240, 255); // blue
  }

---

The implementation is pretty basic so there's probably going to be some overlooked edge cases or unwanted behaviour but let me know how it goes!

[PrimozRome]

@willhoyle that is excellent. I will be able to test this next week when I get back from business trip.

I have an active project where I use the component and need the expanding functionality. I will put this into real-case scenarios and see how it stands. I will quickly see if there are any short comings.

[PrimozRome]

@willhoyle sorry for unresponsiveness, I was busy and out of the office for a while.

I will test the implementation now. Do i still use this version willhoyle/vue-good-table#expanded-rows.beta.1?

[willhoyle]

No problem. Yes that’s still the most recent version, I haven’t touched it since my last post.

[PrimozRome]

@willhoyle I am having some troubles setting this up. I am having troubles with expandingRows. I get this error:

TypeError: Cannot read property 'some' of undefined

in this part of the code:

    isExpanded: function isExpanded() {
      var _this = this;

      return function (row) {
        var idGetter = typeof _this.expandedOptions.key == 'function' ? _this.expandedOptions.key : function (row) {
          return row[_this.expandedOptions.key];
        };
        var id = idGetter(row);
        return _this.expandedOptions.expandedRows.some(function (v) {
          return v == id;
        });
      };

Here is my setup:

  <vue-good-table
          :columns="columns"
          :rows="rows"
          :pagination-options="paginationOptions"
          :sort-options="sortOptions"
          :totalRows="totalRecords"
          :is-loading="isLoading"
          :expanded-options="expandedOptions"
          mode="remote"
          styleClass="table table-condensed"
          @on-page-change="onPageChange"
          @on-sort-change="onSortChange"
          @on-column-filter="onColumnFilter"
          @on-per-page-change="onPerPageChange"
        >
          <template slot="expanded-row" slot-scope="props">
            <div>
              This is test {{ props }}
            </div>
          </template>
          <template slot="table-row" slot-scope="props">
            <span v-if="props.column.field == 'custom'">
              <span @click="clicked(props.row.id)" class="trash"></span>
            </span>
            <span v-else>
              {{ props.formattedRow[props.column.field] }}
            </span>
          </template>
        </vue-good-table>

From my data vars:

      expandedOptions: {
        key: 'id',
        expandedRows: this.expandedRows,
        styleClass: 'goods-table-detail-row'
      },
      expandedRows: []

[willhoyle]

Are you doing something like this:

...
data( ) {
    return {
        expandedOptions: {
            key: 'id',
            expandedRows: this.expandedRows,
            styleClass: 'goods-table-detail-row'
         },
        expandedRows: []
    }
}
...

I don't think that will work, because this.expandedRows will be null. You'd have to do something like this:

...
data( ) {
    let expandedRows = [ ]
    return {
        expandedOptions: {
            key: 'id',
            expandedRows,
            styleClass: 'goods-table-detail-row'
         },
        expandedRows
    }
}
...

[PrimozRome]

@willhoyle here is some feedback and questions:

1. Expanded rows

I personally would love to see that expandedRows logic is handled internally in the vue-good-table component. It is good that I can supply list of expanded rows as an option to the component, but always handling the push/pull logic for expanded rows is too much.

Would be better if this is handled internally and we would just bu updated via event about the latest expanded state.

2. Toggling expanded row

Currently I need to write mu own function for toggling expanded rows. In your example above this is achieved by calling clicked method where you push/pull in expandedRows array. I would prefer to have internal function like in your initial design and call it in the template:

<button @click="props.toggleExpandedRow(props.row)">Toggle</button>

I tried to access props.toggleExpandedRow but is not available.

3. Accessing toggle state

How do I access toggle state of the table row in the template? For example to switch the icon of toggle button +/-?

[PrimozRome]

@willhoyle any update on my last test/questions?

[Vinoth-LearningThings]

@willhoyle I am using the version "willhoyle/vue-good-table#expanded-rows.beta.1" which works for expandable rows. Any plans to migrate the functionality into official version?

[PrimozRome]

@willhoyle any update on this?

[willhoyle]

Hi @PrimozRome ,

Sorry for the delay in updates.

1. Handling all logic internally This is certainly an option. When I originally wrote this feature, I went with the quickest way to code it. I don't see any reason why we can't move all that logic internally since it will get pretty repetitive.

2. Toggling from the template How I see this happening is we would supply a toggleExpandedRow in the slot-scope props: The function would accept a unique id instead of the entire row. so then you could just do:

   <button @click="props.toggleExpandedRow(props.row.id)">Toggle</button>

   Then internally, the component would store this id in an array called expandedRows. If it is already expanded, it would remove it.

Note: the "key" prop would still be required because internally, the component needs to know how to compare the id's stored in the expandedRows array with each row currently being displayed in the table.

We would also provide a "global" function that can be called from the $ref:

this.$refs['my-good-table'].toggleExpandedRow(id)

3. Accessing the toggle state For my solution, your component has an expandedRows array with ids? So you can create a computed property that returns a function that returns true or false given a row. That method could look something like this:

   computed: {
   isExpanded() {
       return row => {
           return this.expandedRows.some(row.id)
       }
   }
   }

then just call it in your template:

<icon v-if="isExpanded(row.id)"> + </icon>
<icon v-else> - </icon>

[PrimozRome]

Looks good to me. I think it would make sense and go on with this and also push this code into release.

[PrimozRome]

@willhoyle What else is needed for this to make it into release version?

[onyx-blackbird]

Just found this thread and this is also exactly what I am looking for. Would be great if this makes it into the next release (hopefully still this year).

[willhoyle]

@PrimozRome @onyx-blackbird apologies for the delay. I should have time this weekend to adjust the API to keep track of the expanded rows internally. I'll let you all know when it is done so everyone can test it before I submit the pull request Thanks

[lalo4ka]

hi @willhoyle , when do you estimate that this feature joins the master version? I will look forward to it :)

[TheJaredWilcurt]

See if this feature works for you, it was recently released:

• https://xaksis.github.io/vue-good-table/guide/advanced/grouped-table.html#collapsable-rows

Example:

• https://jsfiddle.net/nb6fcqs7

[lalo4ka]

See if this feature works for you, it was recently released:

* https://xaksis.github.io/vue-good-table/guide/advanced/grouped-table.html#collapsable-rows

and what is the name's scope ? i tried with <template slot="expanded-row" slot-scope="props"> but didn't works. Can u help me with a fast example? because the documentation is short about this cool feature :)

[TheJaredWilcurt]

@lalo4ka

• https://jsfiddle.net/nb6fcqs7

You can change collapsable: true to collapsable: 2 to pick a different column index to be the clickable point to expand/collapse.

[nfdenuzzo]

any news on what the slot="" slot-scope="" is ? as mentioned -> slot="expanded-row" slot-scope="props" doesnt work @TheJaredWilcurt

[MonsieurRamose]

@willhoyle Do you have any news about making a pull request for willhoyle/vue-good-table#expanded-rows.beta.1 . Thanks a lot for your work.

[MonsieurRamose]

@ow-en @TheJaredWilcurt @xaksis Do you think this feature can join the master version ? Fork here @willhoyle Actual dependecies

"dependencies": {
    "vue-good-table": "willhoyle/vue-good-table#expanded-rows.beta.1"
}

[alfligno]

how do I instsall it via yarn? I did try to install it by vue-good-table@willhoyle/vue-good-table#expanded-rows.beta.1 but it installs the version 2.18.1 I have to use yarn because of os compatibility on MacOS if I install using npm it will break the install process

[alfligno]

also after installing, and I confirmed that I successfully installed the package, it gives me error Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

which is if I remove the expanded-row element will fix the issue, but it should not be the case right?

<vue-good-table
    :columns="columns"
    :rows="rows"
    :paginationOptions="{
        enabled: true,
        position: 'top'
    }"
    :searchOptions="{
        enabled: true
    }"
    :expandedOptions="{
    key: 'id',
    'expandedRows': expandedRows
  }">
    <template slot="expanded-row" slot-scope="props">
        <div class="row">
            <div class="col-12"><b>Description</b></div>
            </div>
        </div>
    </template>
    <template slot="table-row" slot-scope="props">
        ...
    </template>
<vue-good-table

[alfligno]

UPDATE

I see the error now, I've got the end tag which does not have its partner,

[willhoyle]

By the way, I don't recommend anyone use my branch anymore. It's very outdated and at the time of writing this, is 63 commits behind. Does https://xaksis.github.io/vue-good-table/guide/advanced/grouped-table.html#collapsable-rows solve the issue?

If not, and there's enough people using my branch, we should try to merge all those commits to keep my branch up to date.

I don't know if @xaksis wants this feature in the main branch or not.

[luisdoniad]

Group rows is not the same that expand a row

[MonsieurRamose]

Hello @xaksis. I hope you're doing well. Please consider this feature of expanding rows which is really different from collapsible row, because it is a real game changer.

@willhoyle I still use your repo because it's really useful for my project, the alternative is to open edit view in another page or a popin but it doesn't fit with the ux we want to achieve (quick view and edit in the row)

cc @TheJaredWilcurt