0👍
Maybe it’s not the best solution, but it work for me.
<template>
<div>
<md-table v-model="users" md-sort="name" md-sort-order="asc" md-card>
<md-table-toolbar> <h1 class="md-title">Users</h1> </md-table-toolbar>
<md-table-row slot="md-table-row" slot-scope="{ item }">
<md-table-cell md-label="ID" md-numeric>{{ item.id }}</md-table-cell>
<md-table-cell md-label="Name" md-sort-by="name">{{
item.name
}}</md-table-cell>
<md-table-cell md-label="Email" md-sort-by="email">{{
item.email
}}</md-table-cell>
<md-table-cell md-label="Gender" md-sort-by="gender">{{
item.gender
}}</md-table-cell>
<md-table-cell
class="md-layout-item"
v-if="isVisible"
md-label="Job Title"
md-sort-by="title"
>{{ item.title }}</md-table-cell
>
</md-table-row>
</md-table>
</div>
</template>
<script>
export default {
name: "TableSort",
data: () => ({
users: [
{
id: 1,
name: "Shawna Dubbin",
email: "sdubbin0@geocities.com",
gender: "Male",
title: "Assistant Media Planner"
},
{
id: 2,
name: "Odette Demageard",
email: "odemageard1@spotify.com",
gender: "Female",
title: "Account Coordinator"
},
{
id: 3,
name: "Lonnie Izkovitz",
email: "lizkovitz3@youtu.be",
gender: "Female",
title: "Operator"
},
{
id: 4,
name: "Thatcher Stave",
email: "tstave4@reference.com",
gender: "Male",
title: "Software Test Engineer III"
},
{
id: 5,
name: "Clarinda Marieton",
email: "cmarietonh@theatlantic.com",
gender: "Female",
title: "Paralegal"
}
],
windowWidth: null,
isVisible: true
}),
methods: {
handleWindowResize(event) {
this.windowWidth = event.currentTarget.innerWidth;
this.isVisible = this.windowWidth <= 720 ? false : true;
}
},
beforeDestroy: function() {
window.removeEventListener("resize", this.handleWindowResize);
},
mounted() {
window.addEventListener("resize", this.handleWindowResize);
}
};
</script>
Source:stackexchange.com