how to sort date columns in bootstrap-vue if using formatter for displaying?

Question

I have a table with date objects, which I transform for display like this:

{
   key: "date",
   formatter: (value, key, item) => {
     return moment(value).format("L");
   },
   sortable: true
}

This breaks the sorting function because is a localized string. I'd like to do something like

 sortingKey: value=>value

To override the string sorting of the rendered date and go back to sorting by dates, but I can't find anything like that.

Update: This is already sorted out, but to me the solution is not pretty. A prettier solution would have been:

field: {
  key: 'date',
  sorter: (value, item, fieldMeta) => {
    // returns something that reacts to <
    // key == fieldMeta.key
    // default (current) implementation
    return fieldMeta.formatter ? fieldMeta.formatter(value, fieldMeta.key, item) : value;
  }

Troy Morehouse · Accepted Answer · 2019-07-17 01:32:38Z

7

The sort-compare function will be your fiend. the basic sort compare method compares two values, and requires a minimum of three arguments: item a, item b, and the field key being sorted on. Note a and b are the entire row data objects being compared.

For your above example, do the following:

export default {
  // ...
  methods: {
    mySortCompare(a, b, key) {
      if (key === 'date') {
        // Assuming the date field is a `Date` object, subtraction
        // works on the date serial number (epoch value)
        return a[key] - b[key]
      } else {
        // Let b-table handle sorting other fields (other than `date` field)
        return false
      }
    }
  }
  // ...
}

<b-table :items="items" :fields="fields" :sort-compare="mySortCompare">
  <!-- ... -->
</b-table>

answered Jul 17, 2019 at 1:32

Troy Morehouse

5,4451 gold badge30 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

estani Over a year ago

I'm not a fan of hard-coding things around, but I guess there's no other option since the field metadata is not available. This does the trick though.

Troy Morehouse Over a year ago

Adding a function to the field definition is no more different than providing a function the sort-compare route. You have to add the code somewhere.

estani Over a year ago

Yes, the difference is that you are at the place where it is being used. Having the key name hardcoded somewhere else is not an ideal design, and if you have 3 fields with this requirements, then you have a nice if cascade which isn't really nice to read. It just clutters the code, it will work, but nice is something different. Think about the return false in your example, you need to have the comment, because it's not understandable from the context. That's practical, but not really nice.

skirtle · Accepted Answer · 2019-07-16 21:01:23Z

3

I believe the prop you need is sort-compare.

https://bootstrap-vue.js.org/docs/components/table#sort-compare-routine

You can see how it's used in the source code:

https://github.com/bootstrap-vue/bootstrap-vue/blob/a660dc518246167aa99cd3cac16b5f8bc0055f2d/src/components/table/helpers/mixin-sorting.js#L85

It is configured for the whole table, not an individual column. For columns that should just use the default sort order you can return undefined, null or false, which should cause it to fallback to the default sort order (see lines 104 to 107).

answered Jul 16, 2019 at 21:01

skirtle

29.3k4 gold badges49 silver badges63 bronze badges

1 Comment

estani Over a year ago

Thanks. I oversaw the return "fallback" functionally in the docs. Still not pretty, but it works.

shaneparsons · Accepted Answer · 2019-12-03 21:57:28Z

3

In my case, all I needed to do was add sortByFormatted: true to the particular field:

{
  key: 'name',
  sortable: true,
  sortByFormatted: true,
  formatter: (value, key, item) => {
    return item.first_name + ' ' + item.last_name;
  },
},

answered Dec 3, 2019 at 21:57

shaneparsons

1,6481 gold badge21 silver badges25 bronze badges

1 Comment

shaneparsons Over a year ago

This is using bootstrap-vue 2.0.0 by the way.

Collectives™ on Stack Overflow

how to sort date columns in bootstrap-vue if using formatter for displaying?

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related