Vuetify: [Feature Request] add support for fixed columns on v-data-table

[lichnow]

What problem does this feature solve?

1.set data-table's min-width for overflow-x scroll without by setting css .v-table width
2.when table in overflow model, fixed one column.

What is your proposed solution?

now i use css solve it,but best solution is set it by component props , so it is possible do it?

the element ui's effect exp:

[KaelWD]

Duplicate of #1547

[lzhoucs]

I implemented a version of it in my fork: https://github.com/lzhoucs/vuetify/pull/4
Here is the demo: https://codepen.io/lzhoucs/pen/dqZvXr

[borisdayma]

@KaelWD I think this issue was not a duplicate of #1547, which is related to fixed header.
This one is related to having a fixed column, as seen on the demo, item 1, provided by @lzhoucs
@nekosaur Just referencing you this issue in case you're interested as I know you're currently working on v2

[brooklynb7]

I implemented a version of it in my fork: lzhoucs#4
Here is the demo: https://codepen.io/lzhoucs/pen/dqZvXr

This implementation is really cool !

[KaelWD]

@borisdayma It was my understanding that this was going to be done as part of that

[close-issue-app[bot]]

Please only create issues with the provided issue creator. In the boilerplate for creating an issue, it explains that any ticket made without this will be automatically closed. Thank you.

[KaelWD]

:angry:

[agusdutra]

hi, is there any update on this? thanks

[morficus]

@lzhoucs - you should open a PR against this issue with your implementation

[georgeglessner]

Really would like to see this feature. I know fixed header is coming in 2.0, but is fixed column also coming?

[pengiundev]

+1 for fixed columns, too

[pengiundev]

There's actually a css only solution which works with 2 or more columns, too if you know the width of them
https://stackoverflow.com/a/50516259

[kerry-perret]

Is there anything new about that feature request?

[inaLar]

Hi, Is this feature supposed to work in 2.1.4 ?

[nekosaur]

No, this has not been implemented

[YangAi]

This function would be really helpful if there are lots of columns in the datatable. if we could fix the ID/name and action column, it would save plenty of time scrolling back and forth.

[Chris2011]

@lzhoucs hey, I saw your repo, is it possible, that you can please rewrite your implementation to fitted into that, so that you can create a new PR?

[zhitnyakov]

Here is my solution for that.
I've used position: sticky CSS directives.

Repo - https://github.com/zhitnyakov/vuetify-fixed-columns
Table Component - https://github.com/zhitnyakov/vuetify-fixed-columns/blob/master/src/components/TableWithFixedColumn.vue
Demo - https://zhitnyakov.github.io/vuetify-fixed-columns/dist/

[Chris2011]

I did it with sticky too, it works quite well.

[morficus]

* cries in IE11 *

[morficus]

I'm actually a big fan of a CSS-only approach since it is probably the cleanest and most performant way to achieve this with out having duplicate markup and doing the "double-table" trick.

[dilapitan]

@zhitnyakov thanks for this! it also worked for me too 😄

[tsangwe]

@zhitnyakov I am trying to have the first 3 columns sticky by changing to td:nth-child(-n + 3)
but ended up only the 3rd column sticky

[zhitnyakov]

td:nth-child(-n + 3)

I'm not so good in such special CSS selectors

Just using td:nth-child(1), td:nth-child(2), td:nth-child(3) for 3 fixed cols

[nekochan7]

@zhitnyakov thanks. it also worked for me. https://codesandbox.io/s/vue-template-forked-do39f?file=/src/components/DataTableFixed.vue