title: Sorting server side data with Vuetify Datatable
body: <p>I want to sort data on a loaded Vuetrify data table from a server-side resource. </p>
  
  <pre><code>&lt;template&gt;
      &lt;v-app id="inspire"&gt;
          &lt;v-card&gt;
              &lt;v-card-title&gt;
                  &lt;v-spacer&gt;&lt;/v-spacer&gt;
                  &lt;v-text-field
                      append-icon="search"
                      @click:append="getsearch"
                      hide-details
                      label="Search"
                      single-line
                      v-model="search"
                  &gt;&lt;/v-text-field&gt;
              &lt;/v-card-title&gt;
              &lt;v-data-table
                  :headers="headers"
                  :items="outputs"
                  :pagination.sync="pagination"
                  :rows-per-page-items="rowsPerPageItems"
                  :total-items="totalOutputs"
              &gt;
                  &lt;template v-slot:items="props"&gt;
                      &lt;td class="text-xs-left"&gt;{{ props.item.title }}&lt;/td&gt;
                      &lt;td class="text-xs-right"&gt;{{ props.item.journal.title}}&lt;/td&gt;
                      &lt;td class="text-xs-right"&gt;{{ props.item.created }}&lt;/td&gt;
                  &lt;/template&gt;
                  &lt;template v-slot:no-results&gt;
                      &lt;v-alert :value="true" color="error" icon="warning"&gt;
                          Your search for "{{ search }}" found no results.
                      &lt;/v-alert&gt;
                  &lt;/template&gt;
              &lt;/v-data-table&gt;
          &lt;/v-card&gt;
      &lt;/v-app&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
  
          //TODO add in url sorting parameters for the VUE = https://codepen.io/retrograde/pen/pmzQNP?editors=1010
          data() {
              return {
                  rowsPerPageItems: [25, 50, 100],
                  isLoading: true,
                  totalOutputs: 0,
                  pagination: {
                      rowsPerPage: 100,
                      descending: false,
                      sortBy: "name",
                      page: 1
                  },
  
                  search: '',
                  headers: [
                      {
                          text: 'Title',
                          align: 'left',
                          sortable: false,
                          value: 'title'
                      },
                      {text: 'Journal', value: 'journal', sortable: true},
                      {text: 'Published On', value: 'created', sortable: true},
                  ],
                  outputs: []
              }
          },
  
          watch: {
              pagination: {
                  handler() {
                      this.fetchData();
                  },
                  deep: true
              }
          },
          methods: {
              fetchData() {
                  return new Promise((resolve, reject) =&gt; {
                      const {sortBy, descending, page, rowsPerPage} = this.pagination;
                      let search = this.search.trim().toLowerCase();
  
                      this.$http
                          .get(
                              "api/output?page=" +
                              page +
                              "&amp;rowsPerPage=" +
                              rowsPerPage
  
                          )
                          .then(response =&gt; {
                              console.log(response.data);
                              let outputs = response.data.data;
                              const totalOutputs = response.data.total;
                              if (search) {
                                  outputs = outputs.filter(item =&gt; {
                                      return Object.values(item)
                                          .join(",")
                                          .toLowerCase()
                                          .includes(search);
                                  });
                              }
  
                              this.outputs = outputs;
                              this.totalOutputs = totalOutputs;
                              this.loading = false;
                              resolve();
  
                          });
                  });
  
              },
  
              getsearch(){
                  return new Promise((resolve, reject) =&gt; {
                      const {sortBy, descending, page, rowsPerPage} = this.pagination;
                      let search = this.search.trim().toLowerCase();
  
                      this.$http
                          .get(
                              "api/output?page=" +
                              page +
                              "&amp;rowsPerPage=" +
                              rowsPerPage +
                              "&amp;title=" +
                              search
                          )
                          .then(response =&gt; {
                              console.log(response.data);
                              let outputs = response.data.data;
                              const totalOutputs = response.data.total;
                              if (search) {
                                  outputs = outputs.filter(item =&gt; {
                                      return Object.values(item)
                                          .join(",")
                                          .toLowerCase()
                                          .includes(search);
                                  });
                              }
  
                              this.outputs = outputs;
                              this.totalOutputs = totalOutputs;
                              this.loading = false;
                              resolve();
  
                          });
                  });
              }
  
  
          },
          mounted() {
              this.fetchData();
              this.getsearch();
          },
      }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I'm thinking that I would have to configure my API with URL parameters to allow sorting?</p>
  
  <p>I've seen some examples of Vuetrify which has static data which can sort, but I don't seem to be able to make it apply to data which I've gotten through my API</p>
  
  <p>Or is there a way to sort the already loaded data?</p>