Vue good table add class to active row

Question

So i want to add an active class to vue-good-table row so that the user can see which row is active. But it doesn't seem like vue-good-table has anything that allows us to add a class to a row, or do something similar. I tried adding style to the template slot="table-row" instead like:

<template slot="table-row" slot-scope="props">
    <div :class="{ 'active-column': someCondition }">.....<div>
</template>

But, it is not working as i expected. Is there some css that i can apply to these div's so they can take the full height, because so far i have not been able to do it.

Any help would be appreciated.

Were you managed to get this done? I'm kinda stuck at the same. — watney, Jul 21 '21 at 14:54
I think i had to switch to bootstrap table. Its pretty good. If you are already using bootstrap vue it should be simple enough — Ashok, Jul 21 '21 at 15:50

score 0 · Answer 1 · answered Jan 11 '23 at 11:29

I managed to do the trick with Vue-Good-Table-Next - this is a Vue-Good-Table for Vue 3 (in Beta stage).

Ok, exactly we will not add any class to the row here, but the goal is to mark the selected rows visually in some way, right?

So, at the beginning, I was already using the custom table cell slot as described here. Then I added this first span inside each table cell:

    <template #table-row="tableRowProps">
      <span class="selected-bg" 
        v-if="$refs['websitesTableInner'].selectedRows.find(row => row.id == tableRowProps.row.id)"> 
      </span>
    
      <span>
        {{tableRowProps.formattedRow[tableRowProps.column.field]}}
      </span>
 </template>

Here my VueGoodTable has ref="websitesTableInner" (in my custom table component it is an inner table). And here the actual content goes into the 2nd span. The first span appears only if the row is selected. Now it's some CSS time:

<style>
.selected-bg{
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    background: #daeada;
}
.selected-bg+span{
    position: relative;
    z-index: 2;
}
.vgt-table.bordered td, .vgt-table.bordered th{
    position: relative;
    z-index: 2;
}
</style>

So we overlay the .selected-bg span over each cell. I tried to make it over the table row (position:relative; to the tr tag, not td), but then cells borders are not visible. .selected-bg+span is your cell content that should be over the overlay. This is the result: https://prnt.sc/ktqQZGrHvScq

Hope this will help somebody.

Vue good table add class to active row

1 Answers1