Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

B-Table: Possibility to provide a sort value per field #3892

Closed
Moorhuhnfreak opened this issue Aug 15, 2019 · 3 comments · Fixed by #3898 · May be fixed by thislooksfun/earthdawn#37

Comments

@Moorhuhnfreak
Copy link

commented Aug 15, 2019

Is your feature request related to a problem? Please describe...

I use the BTable component for displaying some data and I have a lot of use cases, where my data items contain a field with a non user friendly internal name.

items: [
    { "internalName" : "internalValue" }
]

For displaying the field in the table, I use a formatter function.

fields: [
    {
       key:  "internalName",
       label: 'Label',
       formatter: (value, key, item) => this.dataMap[value].displayName
    }
]

I also want to make this field sortable. But sorting this value should be done by a related position/priority field in this.dataMap[value].position. This is currently only possible with workarounds that required boilerplate code.

Describe the solution you'd like

Possibility to provide a sorting value, similiar to the formatter:

fields:[ 
 { 
    key: 'internalName',
    label: 'Label',
    sortable: true,
    formatter: (value, key, item) => this.dataMap[value].displayName,
    sortBy: (value, key, item) => this.dataMap[value].position
 }
]

Describe alternatives you've considered

I know that I can provide my own sorting routine via the sort-compare option for the table. But this is a big overhead. Because I want the default behaviour with just another value to be used for sorting.

What I currently do is: Formatter function returns sorting value, sortByFormatted is set to true. And for displaying the value, I use the corresponding field slot, that translates the internal name to the display name.
But this way, I always have to define a slot and in general it looks like a dirty solution.

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Aug 15, 2019

You can have your custom sort compare routine handle only a particular field, and instead of returning -1, 0, +1, you can return false or null to say that your sort-compare routine does not handle the other fields, and b-table will fall back to using hte internal sort compare for all other fields.

mySortCompare = (a, b, key) => {
  if (key != 'internalName') {
    return false
  }
  // handle custom comparison here for internalName
  // ...
}
@Moorhuhnfreak

This comment has been minimized.

Copy link
Author

commented Aug 16, 2019

Ok did not know that the sort-compare routine has a fallback option. Nevertheless this would still lead to some boilerplate (checking keys, compare expression by my own) and from a data point of view, I think it is cleaner to stick the sort logic to the field definition.

So many thanks that you have already implemented it! You're doing great work with this project ;)

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Aug 16, 2019

The fallback feature is documented (although somewhat burried in the docs) at https://bootstrap-vue.js.org/docs/components/table#custom-sort-compare-routine

Your custom sort-compare routine can also return null or false, to fall back to the built-in sort-compare routine for the particular key. You can use this feature (i.e. by returning null) to have your custom sort-compare routine handle only certain fields (keys) such as the special case of virtual (scoped slot) columns, and have the internal (built in) sort-compare handle all other fields.

tmorehouse added a commit that referenced this issue Aug 16, 2019
feat(b-table): allow field definition properties `filterByFormatted` …
…and `sortByFormatted` accept a formatter function reference (closes #3892) (#3898)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.