vue-good-table — Collapsible Groups and Table Styling

Creating tables from scratch is a pain.

This is why there are many table plugins to let us add tables easily.

In this article, we’ll look at how to add tables to a Vue app with the vue-good-table plugin.

Collapsable Groups

We can make the table group collapsible by changing the group-options prop.

To do this, we can write:

<template>
  <div>
    <vue-good-table
      :columns="columns"
      :rows="rows"
      :group-options="{
        enabled: true,
        collapsable: true
      }"
    ></vue-good-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      columns: [
        {
          label: "Name",
          field: "name"
        },
        {
          label: "Age",
          field: "age",
          type: "number"
        },
        {
          label: "Birthday",
          field: "birthDay",
          type: "date",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy"
        }
      ],
      rows: [
        {
          mode: "span",
          label: "Humans",
          html: false,
          children: [
            { id: 1, name: "John", age: 20, birthDay: "2000-01-20" },
            { id: 2, name: "Jane", age: 24, birthDay: "1996-10-31" },
            { id: 3, name: "Mary", age: 16, birthDay: "2004-10-30" }
          ]
        }
      ]
    };
  }
};
</script>

We set the collapsible property to true to make the group collapsible.

Themes

We can change the theme of the table to change the color scheme.

To do that, we can add the theme prop:

<template>
  <div>
    <vue-good-table :columns="columns" :rows="rows" theme="black-rhino"></vue-good-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      columns: [
        {
          label: "Name",
          field: "name"
        },
        {
          label: "Age",
          field: "age",
          type: "number"
        },
        {
          label: "Birthday",
          field: "birthDay",
          type: "date",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy"
        }
      ],
      rows: [
        { id: 1, name: "John", age: 20, birthDay: "2000-01-20" },
        { id: 2, name: "Jane", age: 24, birthDay: "1996-10-31" },
        { id: 3, name: "Mary", age: 16, birthDay: "2004-10-30" }
      ]
    };
  }
};
</script>

We set the theme prop to 'black-rhino' to display the header row in black and the cells in gray.

Style Classes

We can also style our table by using the selectors for the table.

To do that, we can add the styleClass prop to set the class name for the table.

For example, we can write:

<template>
  <div>
    <vue-good-table :columns="columns" :rows="rows" styleClass="vgt-table"></vue-good-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      columns: [
        {
          label: "Name",
          field: "name"
        },
        {
          label: "Age",
          field: "age",
          type: "number"
        },
        {
          label: "Birthday",
          field: "birthDay",
          type: "date",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy"
        }
      ],
      rows: [
        { id: 1, name: "John", age: 20, birthDay: "2000-01-20" },
        { id: 2, name: "Jane", age: 24, birthDay: "1996-10-31" },
        { id: 3, name: "Mary", age: 16, birthDay: "2004-10-30" }
      ]
    };
  }
};
</script>

<style>
.vgt-table {
  border: 1px solid red !important;
}
</style>

We set the styleClass to the class name we want for our table.

Then we can add the style tag to set the border for the table.

Conclusion

We can add collapsible rows for grouped tables.

And we can add style classes for our table to make styling easier.