Author: John Au-Yeung

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.

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.

.vgt-table .striped

We can add row striping with the striped class.

For example, we can write:

<template>
  <div>
    <vue-good-table :columns="columns" :rows="rows" styleClass="vgt-table striped"></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>

Now the rows are striped.

.vgt-table .bordered

We can make the table row bordered with the bordered class.

For example, we can write:

<template>
  <div>
    <vue-good-table :columns="columns" :rows="rows" styleClass="vgt-table bordered"></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 bordered class to add borders to rows and columns.

Condensed Table

To make the table condensed, we can add the condensed class:

<template>
  <div>
    <vue-good-table :columns="columns" :rows="rows" styleClass="vgt-table condensed"></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>

Sass

We can import SASS styling provided by the vue-good-table library by writing:

<template>
  <div>
    <vue-good-table :columns="columns" :rows="rows" styleClass="vgt-table condensed"></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 lang="scss">
@import "../node_modules/vue-good-table/src/styles/style.scss";
</style>

The @import directive lets us import styles into our app.

Conclusion

We can add styles with various methods with the vue-good-table plugin.

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.

Selected Row Action Slot

We can populate the selected-row-actions slot so that we can add our own content to display when table rows are selected.

To do this, we can write:

<template>
  <div>
    <vue-good-table :columns="columns" :rows="rows" :select-options="{
    enabled: true,
  }">
      <div slot="selected-row-actions">
        <button>Action 1</button>
      </div>
    </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>

to add a button to the container that shows the number of rows selected.

Grouped Table

We can add a grouped table with the group-options prop.

For example, we can write:

<template>
  <div>
    <vue-good-table :columns="columns" :rows="rows" :group-options="{
    enabled: 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"
        },
        {
          label: "Before",
          field: "before"
        }
      ],
      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>

to add a group by changing the rows array into an object with various properties.

The mode is set to 'span' which means the header will span all columns.

labels is the label to display in the header.

html set to true means that the label will be rendered as HTML.

The heading will be displayed above the group.

We can customize the heading with the table-header-row slot.

For example, we can write:

<template>
  <div>
    <vue-good-table
      :columns="columns"
      :rows="rows"
      :group-options="{
        enabled: true,
        headerPosition: 'top'
      }"
    >
      <template slot="table-header-row" slot-scope="props">
        <span v-if="props.column && props.column.field === 'name'">
          {{props.row.label}}
          <button class="fancy-btn">Action</button>
        </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"
        }
      ],
      rows: [
        {
          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>

to add the group heading.

We populate the table-header-row slot to populate the heading.

Also, we set the headerPosition to 'top' to place the group heading above the rows.

The mode property is removed so that we can display the custom heading within the Name column.

Conclusion

We can display table rows in groups with vue-good-table.

Also, we can add content for the select row display.

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.

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.

Select Event

We can listen to the table row select all event which is emitted when all the table rows are selected.

For example, we can write:

<template>
  <div>
    <vue-good-table
      :columns="columns"
      :rows="rows"
      :select-options="{ enabled: true }"
      @on-select-all="onSelectAll"
    />
  </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" }
      ]
    };
  },
  methods: {
    onSelectAll(params) {
      console.log(params);
    }
  }
};
</script>

We add a checkbox to each row to let us select the row with the select-options prop with an object that has the enabled property set to true .

Also, we added a checkbox to select all the rows on the top left corner.

Search Options

We can add a search box to our vue-good-table .

All we have to do is to add the search-options prop with an object with various options.

For example, we can write:

<template>
  <div>
    <vue-good-table
      :columns="columns"
      :rows="rows"
      :search-options="{
        enabled: true,
        placeholder: 'Search table',
      }"
      @on-search="onSearch"
    />
  </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 added the search-options prop with an object with various properties.

The enabled property set to true will make the search box show above the table.

placeholder lets us add a placeholder to for the search box.

We can also change the trigger property to change the way that a search is triggered.

For instance, we can write:

<template>
  <div>
    <vue-good-table
      :columns="columns"
      :rows="rows"
      :search-options="{
        enabled: true,
        placeholder: 'Search table',
        trigger: 'enter'
      }"
      @on-search="onSearch"
    />
  </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 trigger to 'enter' so that the search is done only when we press Enter.

Also, we can add the skipDiacritics property to stop vue-good-table from comparing accented characters.

This will speed up our search.

For instance, we add:

<template>
  <div>
    <vue-good-table
      :columns="columns"
      :rows="rows"
      :search-options="{
        enabled: true,
        skipDiacritics: true,
      }"
      @on-search="onSearch"
    />
  </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>

to skip accented character comparison.

To customize how the search is done, we can set the searchFn property to our own function.

For example, we can write:

<template>
  <div>
    <vue-good-table
      :columns="columns"
      :rows="rows"
      :search-options="{
        enabled: true,
        searchFn
      }"
      @on-search="onSearch"
    />
  </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" }
      ]
    };
  },
  methods: {
    searchFn(row, col, cellValue, searchTerm) {
      return cellValue === searchTerm;
    }
  }
};
</script>

We have the searchTerm with the search term.,

cellValue has the cell value that can be compared with the search term to find a matching row.

row and col have the row and column objects respectively.

Conclusion

We can add a search box to do table searches with vue-good-table.

Also, we can enable row selection and get what’s selected.