vue-good-table — Custom Rows and Columns, and Row Selections

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.

Adding Custom Columns

We can add columns that aren’t created from the properties of row objects.

For instance, we can write:

<template>
  <div>
    <vue-good-table :columns="columns" :rows="rows">
      <template slot="table-row" slot-scope="props">
        <span v-if="props.column.field === 'before'">before</span>
        <span v-else>{{props.formattedRow[props.column.field]}}</span>
      </template>
    </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"
        },
        {
          label: "Before",
          field: "before"
        }
      ],
      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 populate the table-row slot with the content that we want to display in the cells for the column.

props.formattedRow[props.column.field] displays the data from the row object properties.

props.column.field has the field name.

The columns array is updated to have the 'before' column that isn’t created from the row property.

Custom Column Headers

We can also create custom column headers.

To do that, we populate the table-column slot with our own content

Then we can check the props.column.label to check for the column heading that we want to change.

For example, we can write:

<template>
  <div>
    <vue-good-table :columns="columns" :rows="rows">
      <template slot="table-column" slot-scope="props">
        <span v-if="props.column.label === 'Name'">
          <em>{{props.column.label}}</em>
        </span>
        <span v-else>{{props.column.label}}</span>
      </template>
    </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 have the table-column slot with the prop.column.label check to check for the column heading that we want to change.

We make the Name column display with an italicized font with the em tag.

Checkbox Table

We can add a table with rows that are selectable.

To do that, we can write:

<template>
  <div>
    <vue-good-table
      :columns="columns"
      :rows="rows"
      :select-options="{
        enabled: true,
        selectOnCheckboxOnly: true,
        selectionInfoClass: 'selected',
        selectionText: 'rows selected',
        clearSelectionText: 'clear',
        disableSelectInfo: true,
        selectAllByGroup: 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: [
        { 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 add the selected-options prop with an object.

The enabled property lets us enable row selection.

selectOnCheckOnly lets us select rows when we check off the checkbox.

selectionText lets us display the number of rows selected with our own text.

clearSelectionText is the text to display on the link to clear the selections.

disableSelectInfo lets us disable the selected row info. This info should be displayed above the table if it’s false .

And selectAllByGroup lets us set whether we can select all the rows at once.

Conclusion

We can change columns and rows to display what we want by populating slots.

Also, we can make rows selectable.