카탈로그

1. 1. Style Classes
   1. 1.1. .vgt-table
   2. 1.2. .vgt-table .striped
   3. 1.3. .vgt-table .bordered
   4. 1.4. .vgt-table .condensed

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.

::: tip 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>

.vgt-table .striped

Add row striping in your data table.

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

.vgt-table .bordered

Add borders to columns/rows

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

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