Vue-good-table: Change row color on mouse events

[sylvaincaillot]

Issue Type

• [x] Question

Specs

What version are you using?
2.14.6

What browser?
Chrome

Question

I would like to change the color of a whole row when I overlay it and in a different color when I double-click on it.

After searching the documentation, I've been using @on-row-dblclick and @on-row-mouseenter so far but didn't find examples on how to change the color.

Thank you for your help
S.

[xaksis]

hey @sylvaincaillot you can use rowStyleClass, https://xaksis.github.io/vue-good-table/guide/configuration/#rowstyleclass

just use a function for rowStyleClass and conditionally put a class on the row that matches the row that you're hovering over, or double clicking on.

closing.

[sylvaincaillot]

Thank you @xaksis, it works well with mouse over:

rowStyleClassFn(row) {
      return 'VGT-row';
    },

with the following CSS:

<style scoped>
.VGT-row:hover {
    background-color: yellow;
  }
</style>

However, I don't see how to use the @on-row-dblclick to change dynamicaly the class for the row. Would you have any examples?

Thank you

[oflittlemother]

@sylvaincaillot You can check for the 'vgtSelected' boolean property and toggle your styling accordingly. This property exists in each row when ':select-options' is enabled.

Example:

rowStyleClassFn(row){
  return row.vgtSelected ? 'VGT-row _dblclick' : 'VGT-row';
}

<style scoped>
.VGT-row:hover {...}
.VGT-row._dblclick {...}
</style>

[commonpike]

As a sidenote, if your row is clickable because of the '@on-row-click' property on the table, the row gets a hover color from the default styles.