Vuetify: [Feature Request] Column dividers in data tables

[iec989]

New Functionality

To clearly separate columns with a line between them

Improvements

Instead of adding custom CSS for the table, adding a HTML attribute such as "grid-lines" , should paint the dividers between columns

Bugs or Edge Cases it Helps Avoid

Any bugs coming from building custom CSS on the standard vuetify framework, that may stop working without one mentioning it by a Vuetify update.

[chewy94]

Not sure this is material spec, but also I do not see why this cannot be implemented

[nicoepp]

I don't now if they are in the spec but at least one can observe them in the example pictures of the material design docs.

https://material.io/design/components/data-tables.html#behavior

[borisdayma]

In the meantime, if anyone needs to add it, you can just use the following.

<style>
table th + th { border-left:1px solid #dddddd; }
table td + td { border-left:1px solid #dddddd; }
</style>

_Note: Solution adapted from Erasmus https://stackoverflow.com/questions/3313456/css-borders-between-table-columns-only/3313493_

[blalan05]

Available in the 2.0 alpha.

[dblinov]

Available in the 2.0 alpha.

@blalan05 Where can I find example of style setting to get divider?

[naffarn]

Available in the 2.0 alpha.

@blalan05 I can't find anything in the documentation or release notes about being able to use column separators in a table, was this actually implemented?

EDIT: Found the answer. Individual column dividers can be added using the divider: true option in a column header definition.

[renishbabu876]

I also need this feature