Codecov Report

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

@@            Coverage Diff             @@
##              dev    #3898      +/-   ##
==========================================
+ Coverage   99.33%   99.33%   +<.01%     
==========================================
  Files         233      233              
  Lines        4484     4487       +3     
  Branches     1266     1269       +3     
==========================================
+ Hits         4454     4457       +3     
  Misses         24       24              
  Partials        6        6

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 03536a5...5a2f251. Read the comment docs.

I've been unsuccessful in using this filterByFormatted property as a function on a field. If I use a function and add a console.log or debugger, it just never fires.

@mschlitz-trux make sure you are using the latest version of BootstrapVue

@tmorehouse Yes, currently using "bootstrap-vue": "^2.0.4",

Edit: here's my current contents snippets:

                        <template v-slot:cell(name)="row">
                            <div class="user-name ellipsis-fit">{{ row.value }}</div>
                        </template>

            userFields: [
...
                {
                    key: 'name',
                    label: 'Name',
                    formatter: 'formatUserFullName',
                    sortable: true,
                    sortByFormatted: true,
                    filterByFormatted: true,
                    tdClass: 'col-primary',
                },
...
           ]

formatUserFullName works fine as expected. But if I change filterByFormatted into a function, it simply won't trigger. I tried an inline anon function, and a function reference.

@mschlitz-trux is your method trying to access anything in the this context?

@mschlitz-trux Could you provide a simple sample of the formatter function you are trying to use in filterByFormatted?

@tmorehouse here's a fiddle:
https://jsfiddle.net/fex4sdvm/

Note that I tried both filterByFormatted: this.filterUserId, as well as filterByFormatted: 'filterUserId',. Am I doing something wrong?

this context is not available in data if data is not a function.

filterByFormatted only accepts a boolean (true/false) or a reference to a function (not a function name).

See this fiddle: https://jsfiddle.net/r17nujvo/

Thank you @tmorehouse I think I'm good now. My jsfiddle just didn't have the proper data format:

  data() {
    return {

And I just wasn't referencing this.functionName directly. I think my original comment I was using it in "string" format, just because that's how the formatter was. I know the docs specifically mentions by reference but I think it was easier to miss because of how formatter worked.

Thanks for your help! Sorry to muck up this old merged PR. A working in example in the Wiki may help a future user!

So, just to bump this again, and point out a thing that stumped me at first.

Let's say you have an array of objects that looks like this:

[
{ id: 0, firstName: 'Jane', lastName: 'Doe' },
{ id: 1, firstName: 'John', lastName: 'Doe' },
]

If you try to setup a field with key: 'name', then your custom formatter will work, it just won't have a "value" defined in the first paramtere.
However, it will never trigger your filterByFormatted. The function won't be called.

It seems as-if this relies on matching with a key name on the object itself. If you change to using key: 'firstName' and then adjust your code references as needed, it seems to work okay. However, this seems like a workaround.

On the plus side, once I made this change, I can just use filterByFormatted: true since it will pick up on the correct formatted value from formatter: 'formatUserFullName'. But if I needed any other further customization, I still need to ensure I use this workaround to point at a valid key name.

Thoughts?