Fixed column in V-Datatable

[Meenakshise]

Hi,

https://codepen.io/lzhoucs/pen/dqZvXr

I saw your code pen regarding the fixed column freezing for the v-datatable. Is it available in vuetify? Means is it merged to vuetify if yes, in which version we can. And could you please explain how to set a column and row fixed using your code. I saw your code pen but not able to make out which line of code is doing the freezing part. I need both the first column and the first header row to be fixed when the user scrolls.

[lzhoucs]

It is not merged into vuetify, and probably never will. The latest version of this package is '1.2.8' which you can get on npm: https://www.npmjs.com/package/@lzhoucs/vuetify/v/1.2.8-modified.7.
Please refer to readme for more details on how to install/get this modified package.

To fix a column, simply mark it as fixed in the headers array:

[
  {text: "Dessert", value: "name", width: "200px", fixed: true}
]

It currently does not support fixed header row, but only fixed columns.

Please let me know if you have more questions.

[Meenakshise]

Thanks for the reply.

Let me try if I need any help will approach you.

[Meenakshise]

Also any reason why it will never be merged into vuetify?

[Meenakshise]

Our project is used in the live environment is it safe to use your package? Also tomorrow if i want to upgrade the vuetify to the new version. Then is it possible. Will i lose your changes? I am little scared to proceed. Can you please help me

[lzhoucs]

Reason why it will not be merged, please see: vuetifyjs#1547 (comment). Basically I think vuetify table is being rewritten using css flexbox approach instead of native html table, so no major table change PRs can be accepted at this point. From what I've heard, it might be released in vuetify 2.0.

This package is no different from the official one except for two added features, namely grouping table and fixed columns table. We use both in live production as well. So far it works fine.

I will keep it up to date with latest official vuetify 1.2.x release and 1.3.x release(in the near future). If you update lzhoucs/vuetify version, you will get the latest from vuetify + the two added features. If you switch to official vuetify, you will lose the two features.

[usrbinsam]

This comment claims they've merged this feature in to v2 but I don't see where it's even documented on the v-data-table API and they've closed the thread there... Am I missing something?

Looks like they only implemented half of the feature - fixed headers but you can't fix an entire column.