md-table sort ???

[danielduhh]

What's the deal with md-table md-sort-by? The component doesn't work on https://vuematerial.github.io/#/components/table. Am I reading something incorrectly? The demo "With cards with pagination" should sort when md-table-head is selected.. right? I've tested w/ Firefox, Chrome & Safari

Here is my example that doesn't work as well

<md-table md-sort="name" md-sort-type="desc">
      <md-table-header>
        <md-table-row>
          <md-table-head md-sort-by="name">Name</md-table-head>
          <md-table-head md-sort-by="level">Level</md-table-head>
          <md-table-head md-sort-by="source">Source</md-table-head>
        </md-table-row>
      </md-table-header>

      <md-table-body>
        <md-table-row v-for="(row, index) in locations" :key="index">
          <md-table-cell>{{row.name}}</md-table-cell>
          <md-table-cell>{{row.level}}</md-table-cell>
          <md-table-cell>{{row.source}}</md-table-cell>
        </md-table-row>
      </md-table-body>
</md-table>

data () {
    return {
      locations: [{name:"Ghana",level:2, source:"GADM"},{name:"America", level:0, source:"Custom"},{name:"France", level:1, source:"Geoname"}]
    }
  }

Im running vue-material@0.7.1 on vue@^2.0.1

[jeffjenx]

I am wondering the same. I tried adding the necessary properties to do the sorting and the only thing I'm seeing is the headers toggle the little arrow icon. The actual data in the table doesn't sort.

I checked in Safari and Chrome and the tables in the pagination demo don't actually sort. Not sure what I'm missing.

[rkirmizi]

It is not working right now but you can easily implement it. my data is coming from the api and i am keeping them in stocks var. You can see sort events in the vue developer tool. I've implemented both server side sorting & client side sorting. Below what i've done for client side sorting for my situation (using lodash) and kudos to @Samuell1 : template:

  <md-table @select="onSelect" @sort="onSort">
...

methods:

      onSort (sort) {
        this.stocks = _.orderBy(this.stocks, [item => item[sort.name]], sort.type);
      },

[capttrousers]

Yea I believe the sorting function of your data list needs to be implemented outside of md-vue, like @rkirmizi did with the lodash _.orderBy() method. If your data object is sorted, the table should update automatically because of it's reactive nature

[jeffjenx]

Makes sense now. Seems this same pattern is in place for the table pagination.

[rkirmizi]

Think so. The events are there & waiting for your action :) Here is my usage: Template:

  <md-table-pagination
    :md-size="size"
    :md-total="count"
    :md-page="page"
    md-label="Rows"
    md-separator="of"
    :md-page-options="page_options"
    @pagination="onPagination($event)">
    </md-table-pagination>

js:

data(){
      count: '',
      next: '',
      previous: '',
      size: 10,
      page: 1,
      stocks: [],
      page_options: [10, 25, 50, 100],
}

methods: {
      onPagination (e) {
          this.size = e.size;
          this.page = e.page
          this.fetchData()
      },

That's all and it's working :)

[praneetloke]

Correct. The table components seem to assume that you are doing server-paging/sorting. They are not client side actions. You are given hooks to do those yourself.

This is true as of 0.7.1. Not sure if @marcosmoura is planning to change its behavior before release.

[klatooine]

If done a little codepen implementing the solution of @rkirmizi http://codepen.io/klatooine/pen/EWaaqY I hope this is helpful, i am totally new to vue, javascript, lodash, and frontend in general.

[pablohpsilva]

Hello everyone! We're having some issues this mdTable. Sorry for that. I promise we'll fix it ASAP. Since nobody replied to @klatooine and we added mdTable in our milestone, I'll close this issue.

[omkardusane]

@rkirmizi can you also provide snippet of your pagination code?

[rkirmizi]

@omkardusane It's there above :)

[omkardusane]

@rkirmizi , oh fo fetchData() must be considering size and page while getting remote data.

Thanks,

I've implemented it to paginate from a local array, using Array.slice()

[rkirmizi]

Yeah, each api response is containing the results array & also the pagination information like belov:

HTTP 200 OK
{
    "count": 1023
    "next": "https://api.example.org/accounts/?page=5",
    "previous": "https://api.example.org/accounts/?page=3",
    "results": [
       …
    ]
}

[omkardusane]

Thanks @rkirmizi