[Vuejs]-Sort a table in vue js

by

2👍

✅

Try this:

<template>
  <div class="row">
    <h1> Campaign performance </h1>
    <table class="table table-sortable">
      <thead>
        <tr>
          <th scope="col">Client</th>
          <th scope="col">Mediachannel</th>
          <th scope="col">Campaign</th>
          <th scope="col">Spend</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="campaign in sortedCampaignPerformance" :key="campaign.campaignID">
          <td>{{campaign.client}}</td>
          <td>{{campaign.mediaChannel}}</td>
          <td>{{campaign.campaign}}</td>
          <td>{{Intl.NumberFormat('da-DK').format(Math.round(campaign.spend))}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  export default {
    props['campaignPerformance']
    computed: {
      sortedCampaignPerformance() {
        return this.campaignPerformance.sort((a, b) => b.spend - a.spend)
      }
    }
  };
</script>
👤User 28

1👍

Try this…

let arr = [
  {
    client: "aa",
     mediaChannel: "media",
    campaign: "Campaign",
    spend: 100
  },
  {
    client: "bb",
     mediaChannel: "media1",
    campaign: "Campaign2",
    spend: 200
  }
  
];

let newarr = arr.sort((a, b) => {
  //return a.spend - b.spend; // Ascending
 return b.spend - a.spend;  //Descending
});

console.log(newarr);
👤lamboktulus1379

Leave a comment