How can I implement sorting in a Vue.js grid component?

How can I implement sorting in a Vue.js grid component?

You can implement sorting in a Vue.js grid by using computed properties to sort your data based on the selected column.

Can you show me a code example for that?

Sure! Here's a simple example:

data() {
  return {
    items: [...], // your data array
    sortKey: '',
    sortOrder: 'asc'
  };
},
computed: {
  sortedItems() {
    return this.items.sort((a, b) => {
      let modifier = this.sortOrder === 'asc' ? 1 : -1;
      if (a[this.sortKey] < b[this.sortKey]) return -1 * modifier;
      if (a[this.sortKey] > b[this.sortKey]) return 1 * modifier;
      return 0;
    });
  }
}

You can call sortedItems in your template to display the sorted data.

What if I want to sort by multiple columns?

You can modify the sortedItems computed property to handle multiple sort keys. You can create an array of sort keys and iterate through them to apply sorting.