Table row arbitrary classes.

[rhangai]

This PR adds a new type for tbody-tr-class to allow arbitrary per-item classes. (and closes #1795)

<template>
  <div>
    <b-table :items="items" :fields="fields" :tbody-tr-class="rowClass">
    </b-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      fields: [ 'first_name', 'last_name', 'age' ],
      items: [
        { age: 40, first_name: 'Dickerson', last_name: 'Macdonald', status: 'awesome'  },
        { age: 21, first_name: 'Larsen', last_name: 'Shaw' },
        { age: 89, first_name: 'Geneva', last_name: 'Wilson' }
      ],
    }
  },
  methods: {
    rowClass( item, type ) {
      if ( !item )
        return;
      if ( item.status === 'awesome' )
        return 'table-success';
    },
  }
}
</script>

[codecov]

Codecov Report

Merging #1797 into dev will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##              dev    #1797   +/-   ##
=======================================
  Coverage   61.04%   61.04%           
=======================================
  Files         154      154           
  Lines        2862     2862           
  Branches      791      791           
=======================================
  Hits         1747     1747           
  Misses        800      800           
  Partials      315      315

Impacted Files	Coverage Δ
src/components/table/table.js	76.34% <ø> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 0999b4c...70417dd. Read the comment docs.

[lianee]

Smart thing to add functions to the existing tbody-tr-class!

Pros:

• small code
• can style details, header and footer (better than a items property)

Cons: I don't see any

[amyglock]

I'm wondering if there is a way to determine if the current row is a detail row my RowClass function?

I am displaying another table component in the detail so I want to shut off the hover color on the detail row because the detail table has hover as well.

[rhangai]

@amyglock I don't know if it helps, but there is the b-table-details class that it is applied. Also, with this PR, it calls the function with a second argument type that equals "row-details" when being applied to a details row.

[minhnhut]

Excuse me, I dont know if this is a right place to ask.

When will this feature be available on NPM package?
cause I'm trying to achieve the same thing in my current project.

[valisjan]

I can't reproduce this funcionality with the above code.
Version 2.0.0rc11
How can I get it?

[minhnhut]

@valisjan this commit is not included yet. I saw they created a new branch "next-release". But it is still not released yet. I think you have to wait, or you can build your own version.

[valisjan]

@minhnhut thanks!
How can I build my own version?

[allaghi]

I try to implement your code and it gives me error with
Invalid prop: type check failed for prop "tbodyTrClass". Expected String, Array, got Function.

[allaghi]

I followed the steps , unfortunately it didn't work , it gives me this message
(Invalid prop: type check failed for prop "tbodyTrClass". Expected String, Array, got Function.)

[nosuchip]

Merged PR is broken: Invalid prop: type check failed for prop "tbodyTrClass". Expected String, Array, got Function.

[regiscamimura]

Same issue here, (Invalid prop: type check failed for prop "tbodyTrClass". Expected String, Array, got Function.)

[rhangai]

Well, the branch was merged on May 23, but the latest release is from May 20 (2.0.0-rc.11).
The code is there on the dev branch. You guys can try building from source, just clone it, and run yarn install && yarn run build. I don't think there is anything else to do until a new version is released with these features.

[lojaya]

its mid October already, why bootstrap-vue haven't released the next version?

[rosdi]

Can we have it now? :-D

[alaa-aqeel]

in bootstrap-vue with browser i am not found it ?? !!
cdn : https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.js

[allaghi]

How about if you want to apply inline style on each row ? I want to style each row based on color comes from database ? any help ?