BootstrapVue Table Custom Sort Using Multiple Keys

Feb 22, 2021
sortByFormatted

Make date column sortable using both date and total_cases field.

<template>  <div>    <b-table      :items="items"      :fields="fields"      >      <template v-slot:cell(date)="data" >        {{ formatDateTime(data.value) }} - {{ data.item.name }} ({{ data.item.total_cases }} cases)      </template>    </b-table>  </div></template><script>export default {  data() {    return {      sortBy: 'total_cases',      sortDesc: true,      fields: [        {           key: 'date',          label: 'Detail',          sortable: true,          sortByFormatted: (value, key, item) => {             return `${item.date}-${item.total_cases.padStart(10, '0')}`          },        },      ],      items: [        { date: new Date(2021, 1, 1), name: 'Selangor', total_cases: '1000' },        { date: new Date(2021, 1, 1), name: 'Kuala Lumpur', total_cases: '1000' },        { date: new Date(2021, 2, 1), name: 'Selangor', total_cases: '2000' },        { date: new Date(2021, 2, 1), name: 'Kuala Lumpur', total_cases: '3000' },        { date: new Date(2021, 3, 1), name: 'Selangor', total_cases: '5000' },        { date: new Date(2021, 3, 1), name: 'Kuala Lumpur', total_cases: '1000' },      ]    }  },  methods: {    formatDateTime(date) {      const options = { year: 'numeric', month: 'short', day: 'numeric' }      return date.toLocaleString(undefined, options)    }  }}</script>

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.