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% |