Do you have a UX team? I Would really appreciate their feedback on my new product - UserBit

# 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%
Last Updated: 6/17/2018, 10:51:28 PM