Hide column header in vue js md-table

Question

I'm trying to hide table columns in vue material when the window gets smaller.

Like so:

<md-table-cell class="md-layout-item md-medium-hide" md-label="Job Title" md-sort-by="title">{{ item.title }}</md-table-cell>

But as you can see on this code sandbox

https://codesandbox.io/s/zz6v9j7vm4

The "job title" column stays even though the rows are gone.

How can I also make the row headers disappear?

Answer 1

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: "[email protected]",
        gender: "Male",
        title: "Assistant Media Planner"
      },
      {
        id: 2,
        name: "Odette Demageard",
        email: "[email protected]",
        gender: "Female",
        title: "Account Coordinator"
      },
      {
        id: 3,
        name: "Lonnie Izkovitz",
        email: "[email protected]",
        gender: "Female",
        title: "Operator"
      },
      {
        id: 4,
        name: "Thatcher Stave",
        email: "[email protected]",
        gender: "Male",
        title: "Software Test Engineer III"
      },
      {
        id: 5,
        name: "Clarinda Marieton",
        email: "[email protected]",
        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>