Table: row/cell decorate

[lianee]

tl;dr how can I assign arbitrary CSS classes to any row (or cell)?

While working on tables, I need to show some different states for rows, they can be:
Selected (on/off) and/or Active (on/off), Active and not Selected being the default display.

In my previous implementation (not with bootstrap-vue), I used a background stripped image to show an "inactive" state, and a semi-transparent background color for "selected" state.

I can "hack" the _rowVariant property, misusing 3 of them to show the 3 visible states (active/selected, inactive, inactive/selected) and override the CSS, but it doesn't look so great an idea, and will get out of hands should I need another state(s), like out-of-stock.
I checked and while I can use anything as variant (like "active-selected-out"), it is at best an undocumented feature that could break any time, and a CSS nightmare, even with SCSS.

Another thing quite common is to right align numbers, or center align status data. How can I tell that a specific column is to be right aligned (that is, without hijacking the variant prop in fields)?

[lianee]

Just found the 'class' property for the fields, so scratch that last line about alignment.
Doesn't seem to work for rows though...

[lianee]

so, I make this a feature request for your consideration:

is it possible to add _cellClass and _rowClass properties (single or multiple values, space delimited or array, as you see fit) to items?

[lianee]

update: The tdClass field property as a function is quite fit to set cell classes, so it seems the only one I miss is to apply classes to the row...

[cortz]

I can't get tdClass to work as a function in my fields list. If i declare a string it works fine, but not as a function, i get no errors or anything.

tdClass: (value, key, item) => {
    return 'text-danger'
}

[emanuelmutschlechner]

What version are you using?

See my example below
https://codesandbox.io/s/4r2mzp2px0

[cortz]

Hmm maybe it's a version problem then. I'm using nuxt. In my node_modules package.json for bootstrap-vue says: "bootstrap-vue@2.0.0-rc.6"

[emanuelmutschlechner]

Try version 2.0.0-rc.9

[cortz]

That worked! I've been debugging this, the last 3 hours :)

Thank you very much!

[emanuelmutschlechner]

You're welcome :)

[Diaskhan]

@cortz if ist ok I close issue ))
If something will need u could open anoter issue !

[tblazina]

How would one achieve this with scoped css style? I'm on 2.0.0-rc.11 of bootstrap-vue but when I use something like tdClass: 'some-style' , and then in define 'some-style' in my <style scoped> </style> block, it doesn't work. I see in the documentation that it says "thClass and tdClass will not work with classes that are defined in scoped CSS" but even if I change it to <style> </style> or define 'some-style' in a parent class without scoped CSS, it doesn't not seem to work.