feat(b-table, b-table-lite): new tbody-tr-attr prop for arbitrary row attributes (closes #1864)

[CyBot]

Adds new prop tbody-tr-attr to b-table and b-table-lite, which can either be an object or a function
An object is added straight to the attributes of each row
A function gets passed each item, and row type, and is expected to return an object

The function version has the same calling signature as the tbody-tr-class prop.

Describe the PR

Allows to add custom attributes to individual table rows, either directly as name: value object attributes, or via a function which receives the row item and returns such an object.

Closes #1864

PR checklist

What kind of change does this PR introduce? (check at least one)

• Bugfix
• Feature
• Enhancement
• ARIA accessibility
• Documentation update
• Other (please describe)

Does this PR introduce a breaking change? (check one)

• No
• Yes (please describe)

The PR fulfills these requirements:

• It's submitted to the dev branch, not the master branch
• When resolving a specific issue, it's referenced in the PR's title (i.e. [...] (fixes #xxx[,#xxx]), where "xxx" is the issue number)
• It should address only one issue or feature. If adding multiple features or fixing a bug and adding a new feature, break them into separate PRs if at all possible.
• The title should follow the Conventional Commits naming convention (i.e. fix(alert): not alerting during SSR render, docs(badge): update pill examples, chore(docs): fix typo in README, etc). This is very important, as the CHANGELOG is generated from these messages.

If new features/enhancement/fixes are added or changed:

• Includes documentation updates (including updating the component's package.json for slot and event changes)
• Includes any needed TypeScript declaration file updates
• New/updated tests are included and passing (if required)
• Existing test suites are passing
• CodeCov for patch has met target
• The changes have not impacted the functionality of other components or directives
• ARIA Accessibility has been taken into consideration (Does it affect screen reader users or keyboard only users? Clickable items should be in the tab index, etc.)

If adding a new feature, or changing the functionality of an existing feature, the PR's
description above includes:

• A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it)

[codecov]

Codecov Report

Merging #4481 into dev will increase coverage by <.01%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##              dev    #4481      +/-   ##
==========================================
+ Coverage   99.91%   99.91%   +<.01%     
==========================================
  Files         247      247              
  Lines        4851     4855       +4     
  Branches     1359     1363       +4     
==========================================
+ Hits         4847     4851       +4     
  Misses          3        3              
  Partials        1        1

Impacted Files	Coverage Δ
src/components/table/helpers/mixin-bottom-row.js	100% <ø> (ø)	⬆️
src/components/table/helpers/mixin-busy.js	100% <ø> (ø)	⬆️
src/components/table/helpers/mixin-empty.js	100% <ø> (ø)	⬆️
src/components/table/helpers/mixin-top-row.js	100% <ø> (ø)	⬆️
src/components/table/helpers/mixin-tbody-row.js	100% <100%> (ø)	⬆️

---

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 4abe675...703d2e3. Read the comment docs.

[tmorehouse]

I've tweaked the PR to make the prop tbody-tr-attr, with the same calling signature as tbody-tr-class

[tmorehouse]

@CyBot can you take another look to make sure I don't have any other typos creeping in?

And thanks for the PR, this has been on the back-burner for a while.

[CyBot]

@CyBot can you take another look to make sure I don't have any other typos creeping in?

Looking good

[Ragavendhran-N]

Can anyone give example to use this props
I tried as below

HTML

<b-table
props.....
:tbody-tr-attr="setMyAttribute"
>

Vue

methods:{
setMyAttribute(){
return 'onfocus="myFunction"';
}
}

[tmorehouse]

@Ragavendhran-N the value returned by the function attributes must be an object:

methods: {
  setMyAttribute(){
    return {
      'data-foo': 'bar',
      title: 'Some title'
    }
  }
}

Note that you cannot bind handler methods via attributes in Vue.