Style Classes

Vue-good-table allows providing your own css classes for the table via styleClass option but it also has in-built classes that you can make use of.

NOTE

by default, tables have 'vgt-table striped bordered'

.vgt-table

Base class that initializes all the core styles for the table.

<vue-good-table
  :columns="columns"
  :rows="rows"
  styleClass="vgt-table">
</vue-good-table>

Name	Age	Created On	Percent
John	20	Jul 2nd 11	3.34%
Jane	24	Oct 31st 11	3.34%
Susan	16	Oct 30th 11	3.34%

.vgt-table .striped

Add row striping in your data table.

<vue-good-table
  :columns="columns"
  :rows="rows"
  styleClass="vgt-table striped">
</vue-good-table>

Name	Age	Created On	Percent
John	20	Jul 2nd 11	3.34%
Jane	24	Oct 31st 11	3.34%
Susan	16	Oct 30th 11	3.34%

.vgt-table .bordered

Add borders to columns/rows

<vue-good-table
  :columns="columns"
  :rows="rows"
  styleClass="vgt-table bordered">
</vue-good-table>

Name	Age	Created On	Percent
John	20	Jul 2nd 11	3.34%
Jane	24	Oct 31st 11	3.34%
Susan	16	Oct 30th 11	3.34%

.vgt-table .condensed

Have lots of rows? use condensed class to get more compact rows.

<vue-good-table
  :columns="columns"
  :rows="rows"
  styleClass="vgt-table condensed">
</vue-good-table>

Name	Age	Created On	Percent
John	20	Jul 2nd 11	3.34%
Jane	24	Oct 31st 11	3.34%
Susan	16	Oct 30th 11	3.34%