Search and Sort

<template lang="pug">
  .test-slat-table
    NioSlatTable(
      v-if="columns && items"
      :items="items"
      :columns="columns"
      action="link"
      search-sort-header
      :searchableProps="searchableProps"
      :sortOptions="sortOptions"
    )
</template>

<script>
import { testItems } from './mocks/slatTableItems'

export default {
  data: () => ({
    columns: null,
    items: testItems,
    searchableProps: ['orderName', 'orderNumber'],
    sortOptions: [
      {
        label: 'Alphabetic [A-Z]',
        value: {
          itemProp: 'orderName',
          propType: 'String',
          order: 'ascending'
        }	
      },
      {
        label: 'Alphabetic [Z-A]',
        value: {
          itemProp: 'orderName',
          propType: 'String',
          order: 'descending'
        }	
      },
      {
        label: 'Order number (lowest first)',
        value: {
          itemProp: 'orderNumber',
          propType: 'Number',
          order: 'asscending'
        }	
      },
      {
        label: 'Order number (highest first)',
        value: {
          itemProp: 'orderNumber',
          propType: 'Number',
          order: 'descending'
        }
      }
    ]
  }),
  methods: {  
    computeOrderNumber(item) {
      return `#${item.orderNumber}`
    },
    computeSpentBudget(item) {
      return `$${item.spent}/$${item.budget}`
    },
    makeColumns() {
      this.columns = [
        {
          name: "slat",
          props: {
            image: "imageSrc",
            title: "orderName",
            subtitle: this.computeOrderNumber
          }
        },
        {
          name: "spentBudget",
          label: "Spent/Budget",
          computed: this.computeSpentBudget
        }
      ]  
    }
  },
  mounted() {
    this.makeColumns()
  }
};
</script>