[Enhancement] Fixed DataTable Headers

[JacksMyth]

What will it allow you to do that you can't do today

It will allow you to have scrollable tables with fixed / sticky header, which is becoming more and more popular. It'll also give a polished feel to the application. See https://codepen.io/anon/pen/qbLaMb?editors=101

How will it make current work-arounds straightforward?

To fix the headers in datatables, some hacks are likely needed right now. This will reduce the need for hacks

Something like a "fix-header' prop would be amazing: ` <v-data-table v-bind:headers="headers" :items="items" fix-header

`

[smares]

To be honest, this is one of the cool features of Element's tables. Not only can you have fixed headers, but also fixed columns: http://element.eleme.io/#/en-US/component/table#table-with-fixed-column Would really love to see this feature, too. :)

[haggys22]

Both examples provided make the header fixed by making the body scrollable. I'd like the body to scroll with the page and the header still being fixed as shown in https://codepen.io/jgx/pen/wiIGc (from https://stackoverflow.com/a/22996338) or http://jsfiddle.net/jmosbech/stFcx/ (from https://github.com/jmosbech/StickyTableHeaders)

IMO it would be awesome to be able to choose between both solutions by either setting a height attribute on the table like Element's tables or adding a fix-header prop as proposed by @JacksMyth

[ckitt]

Is anyone working on this at this moment? if not, I will give it a try

[nekosaur]

:+1:

[shihanjun19]

This feature will be achieved in 1.0 version ?

[mizzao]

Especially useful if the outside layout is fixed as in many of the examples: https://vuetifyjs.com/layout/pre-defined

[guyschlider]

Any progress on this? :(

[ckitt]

@mp3il pull request has been created, pending for review

[guyschlider]

@ckitt thats awesome! will try to use it in our project until they merge it to master etc..

[sentbyravens]

Dear owners and contributors, we really need that feature!

[juhasev]

This would be totally awesome! I have a table that will not even fit into my ultra-wide screen! This also means you really need to really watch how many items go into the table or things like action buttons maybe pushed outside the visible screen. Also it is not clear to the user that the table has additional items outside the visible screen.

[bsas]

The fixed header and fixed column is one of the most useful features on systems with a large dataset.

[bsor-dev]

And also the fixed table action

[takotuesday]

@ckitt thanks for providing the PR. Any update on the status of this?

[binzcodes]

+1 would love to see this merged, would benefit our reporting app massively

[dmitrij-schmidt]

unfortunately his PR is still open. see here: https://github.com/vuetifyjs/vuetify/pull/2868

[aaron0713]

Dear owners and contributors, we really need that feature!

[renatosistemasvc]

I really need this

[ais-one]

Actually all you need to do is set CSS

1) max-height: (something that fits to the screen that you want 2) overflow-y: auto

however, easier said than done, if they can allow use to configure those, it would help...

[renatosistemasvc]

@ais-one it's not just defining css You need to use display block (or something like that) to keep the header at the top when scrolling. The problem is that in the table this property separates the header from the body.

width of the header columns does not follow the width of the body columns. You need to use javascript to be able to do this work well

[ais-one]

I just saw the PR

https://github.com/vuetifyjs/vuetify/pull/2868

Looks like it may be coming soon...

[nathakits]

Need this feature too!

[brightmohan]

Can't wait for this feature. Thanks.

[renatosistemasvc]

I migrated to the element by vuetify not having this functionality. I'm enjoying the element.

[ais-one]

My problem with element is that it is not responsive enough. Each UI project have their own good points and bad, we try to work around it...

but yes you are right, the non-fixed headers are a problem and it should be fixed (no pun intended).

Warmest Regards,

Aaron

The information herein is given on a general basis without obligation and is strictly for information purposes only. We do not warrant the accuracy or completeness of the information, graphics, links, or other items contained herein, and expressly disclaim liability for errors or omissions in these materials.

On Tue, Apr 10, 2018 at 10:22 AM, Renato Souza notifications@github.com wrote:

I migrated to the element by vuetify not having this functionality. I'm enjoying the element.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/vuetifyjs/vuetify/issues/1547#issuecomment-379952825, or mute the thread https://github.com/notifications/unsubscribe-auth/AEFgnrR2ICPm62thP8ohic3NBVpRqB-Iks5tnBdtgaJpZM4PIyAl .

[fazulk]

this feature would make vuetify the top dog for vue imo. its' already amazing but would be icing on the cake. Any updates?

[michaelsogos]

any news about this?

[ais-one]

Seems like it is in 2.0 road map, very far off...

On Wed, May 16, 2018, 5:35 AM Michael Sogos notifications@github.com wrote:

any news about this?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/vuetifyjs/vuetify/issues/1547#issuecomment-389321147, or mute the thread https://github.com/notifications/unsubscribe-auth/AEFgnuREV1sQ0nS95noeh2mBx3-i794cks5ty0oggaJpZM4PIyAl .

[matthanson12]

Only feature keeping me from production 😑

[michaelsogos]

Dear All,

I like to share my easy and working solution in both situation where v-data-table doesn't have a specific height and when it has :).

Fortunately we can fix header columns with just few line of CSS (or STYLUS) without JS and\or customizing v-data-table.

CSS

.fixed-header table {
    table-layout: fixed;
}

.fixed-header th {
    background-color: #fff; /* just for LIGHT THEME, change it to #474747 for DARK */
    position: sticky;
    top: 0;
    z-index: 10;
}

.fixed-header tr.datatable__progress th {
    top: 56px;
}

.fixed-header .table__overflow {
    overflow: auto;
    height: 100%;
}

STYLUS

@import 'node_modules/vuetify/src/stylus/bootstrap'
@import 'node_modules/vuetify/src/stylus/theme'

/* Theme */
fixed-header($material)

    table
        table-layout: fixed

    th
        background-color: $material.cards
        position: sticky
        top: 0
        z-index: 10

    tr.datatable__progress
        th
            top: 56px

    .table__overflow
        overflow: auto
        height: 100%

theme(fixed-header, 'fixed-header')

In html (or pug) you just need to add to v-data-table a class="fixed-header" and the stylesheet do the job.

If developers of vuetify like this, there are few small things to improve:

1. Add a COMPONENT PROPS "fixed-header" to v-data-table so we don't need to manage class="..."
2. The class fixed-header must be added after theme--light or theme--dark
3. Will be nice to having a kind of class to specify if to SCROLL VERTICALLY (overflow-y: auto; overflow-x: hidden) or SCROLL HORIZONTALLY (overflow-y: hidden; overflow-x: auto) or both (overflow: auto)

[ais-one]

I tried using it, fixed header not seem to work, (using the example code)...

added the class to v-data-table, and also the css

You can look at codepen sample here

https://codepen.io/anon/pen/PaPJyZ

[ograndebe]

I Don't know if fits with this request, but I prefer another solution for small and big screens that IMHO works better than a fixed header. A Float Header, like this example http://mkoryak.github.io/floatThead/

The scrolling works normally, but while the table is on the viewport the header stay at the top, after the table left the view port the header disapears.

[LeoMartinDev]

The feature would be awesome !

[michaelsogos]

Dear All,

I'd like to share our improved stylus version that is working for us and has been fixed to be compatible with version 1.1.8+

@import 'node_modules/vuetify/src/stylus/bootstrap'
@import 'node_modules/vuetify/src/stylus/theme'

/* Theme */
fixed-header($material)
    &
        display: flex
        flex-direction: column
        height: 100%
        background-color: $material.cards

    table
        table-layout: fixed

    th
        background-color: $material.cards
        position: sticky
        top: 0
        z-index: 10

        &:after
            content: ''
            position: absolute
            left: 0
            bottom: 0
            width: 100%
            border-bottom: 1px solid rgba($material.fg-color, $material.divider-percent)

    tr.v-datatable__progress
        th
            top: 56px

    .v-table__overflow
        flex-grow: 1
        flex-shrink: 1
        overflow-x: auto
        overflow-y: auto

    /*

        height: 100% */
    .v-datatable.v-table
        flex-grow: 0
        flex-shrink: 1

        .v-datatable__actions
            flex-wrap: nowrap

            .v-datatable__actions__pagination
                white-space: nowrap

theme(fixed-header, 'fixed-header')

[ais-one]

Instead of just dumping the code here (which we do not know if it will work or not, leading to waste of time and frustrated people leaving you negative feedback)...

have a simple example on Codepen to show the result...

[pudjamansyurin]

@michaelsogos how to use it ??

[husayt]

Thank you very much @michaelsogos.

I had to slightly change it, for this to work:

@import '~vuetify/src/stylus/bootstrap'
@import '~vuetify/src/stylus/settings/_theme.styl'

fixed-header($material)
    &
        background-color: $material.cards

    th
        background-color: $material.cards

        &:after
            border-bottom: 1px solid rgba($material.fg-color, $material.divider-percent)

theme($component, $name)
  light($component, $name)
  dark($component, $name)

light($component, $name)
  .theme--light .{$name}
    $component($material-light)

dark($component, $name)
  .theme--dark .{$name}
    $component($material-dark)

/* Theme */
.fixed-header
    &
        display: flex
        flex-direction: column
        height: 100%

    table
        table-layout: fixed

    th
        position: sticky
        top: 0
        z-index: 5

        &:after
            content: ''
            position: absolute
            left: 0
            bottom: 0
            width: 100%

    tr.v-datatable__progress
        th
            // top: 56px
            height: 1px;

    .v-table__overflow
        flex-grow: 1
        flex-shrink: 1
        overflow-x: auto
        overflow-y: auto
        // overflow: auto
        // height: 100%

    .v-datatable.v-table
        flex-grow: 0
        flex-shrink: 1

        .v-datatable__actions
            flex-wrap: nowrap

            .v-datatable__actions__pagination
                white-space: nowrap

One issue, doesn't work with IE 11

[lzhoucs]

I am not sure about fixed header, but for fixed column, 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

[michaelsogos]

You are welcome @husayt

I love to see when contribution is appreciated.

[michaelsogos]

Amazing job @lzhoucs we will implement it in our project also.

[michaelsogos]

Dear @pudjamansyurin

it is a bit complicated to explain. Are writing a node js web app, or you use other framework ? In case you use other framework are you using npm or yarn or bower? Are you writing in pure CSS or you use stylus?

In case you use nodejs or npm or yarn with stylus then simply configure your transpiler but my example should pretty work. Instead it must be adapted a bit.

Of course don't forget to add to data table component the class "fixed-header".

Do you need help? you can contact me on discord😆

[ais-one]

thanks @lzhoucs

Just a note for everyone, you need to use the fork https://github.com/lzhoucs/vuetify/pull/4 to get it to work for now,

I think it is not in 1.2.2 branch yet...

[lzhoucs]

Thanks for your interest @michaelsogos, and your note @ais-one

For anyone who is interested in the added features, namely:

• Grouping table https://github.com/lzhoucs/vuetify/pull/1
• Fixed columns table https://github.com/lzhoucs/vuetify/pull/4

I am maintaining a 1.2.x.modified branch that contains the latest release from vuetify, as the time of writing, it is v1.2.3. These added features probably won't be included in official vuetify release, as I made a PR originally that is rejected: https://github.com/vuetifyjs/vuetify/pull/4966 since a full rewrite is ongoing: https://github.com/vuetifyjs/vuetify/pull/3833.

The branch is published to npm: https://www.npmjs.com/package/@lzhoucs/vuetify

https://github.com/lzhoucs/vuetify/pull/2 contains brief instruction on how to use the modified package.

[oscar-gardiazabal]

Dear All,

I like to share my easy and working solution in both situation where v-data-table doesn't have a specific height and when it has :).

Fortunately we can fix header columns with just few line of CSS (or STYLUS) without JS and\or customizing v-data-table.

CSS

.fixed-header table {
    table-layout: fixed;
}

.fixed-header th {
    background-color: #fff; /* just for LIGHT THEME, change it to #474747 for DARK */
    position: sticky;
    top: 0;
    z-index: 10;
}

.fixed-header tr.datatable__progress th {
    top: 56px;
}

.fixed-header .table__overflow {
    overflow: auto;
    height: 100%;
}

STYLUS

@import 'node_modules/vuetify/src/stylus/bootstrap'
@import 'node_modules/vuetify/src/stylus/theme'

/* Theme */
fixed-header($material)

    table
        table-layout: fixed

    th
        background-color: $material.cards
        position: sticky
        top: 0
        z-index: 10

    tr.datatable__progress
        th
            top: 56px

    .table__overflow
        overflow: auto
        height: 100%

theme(fixed-header, 'fixed-header')

In html (or pug) you just need to add to v-data-table a class="fixed-header" and the stylesheet do the job.

If developers of vuetify like this, there are few small things to improve:

1. Add a COMPONENT PROPS "fixed-header" to v-data-table so we don't need to manage class="..."
2. The class fixed-header must be added after theme--light or theme--dark
3. Will be nice to having a kind of class to specify if to SCROLL VERTICALLY (overflow-y: auto; overflow-x: hidden) or SCROLL HORIZONTALLY (overflow-y: hidden; overflow-x: auto) or both (overflow: auto)

New versions is .fixed-header .v-table__overflow instead of .fixed-header .table__overflow

[Drintios]

@trollderius will this work for all supported browsers of vuetify ?

[nekosaur]

sticky is not supported on IE11

[ais-one]

Sorry I had to check and make sure as best as I can that everything is ok before posting this.

To get the desired result, I took the codes posted in this thread as reference. This comment was the one that made me explore this again. https://github.com/vuetifyjs/vuetify/issues/1547#issuecomment-418698573

The code below works for me but MAY NOT work for you. It works in the component I am supporting https://github.com/ais-one/vue-crud-x. I have pushed it to the develop branch. You can see the effect when you have many records...

I am trying to get it to work in Codepen also (easier for you to see the effect) and will post the link if I succeed.

<template>
  ...
  <v-data-table
    class="fixed-header fixed-header v-table__overflow"
    style="max-height: calc(100vh - 144px);backface-visibility: hidden;"
    ...
  ></v-data-table>
  ...
</template>

<script>
  ...
</script>

<style lang="stylus" scoped>
>>> .theme--dark.v-table thead th {
  background-color: #424242;
}
>>> .theme--light.v-table thead th {
  background-color: #ffffff;
}
/* Theme */
>>> .fixed-header
    &
        display: flex
        flex-direction: column
        height: 100%

    table
        table-layout: fixed

    th
        position: sticky
        top: 0
        z-index: 5

        &:after
            content: ''
            position: absolute
            left: 0
            bottom: 0
            width: 100%

    tr.v-datatable__progress
        th
            // top: 56px
            height: 1px;

    .v-table__overflow
        flex-grow: 1
        flex-shrink: 1
        overflow-x: auto
        overflow-y: auto
        // overflow: auto
        // height: 100%

    .v-datatable.v-table
        flex-grow: 0
        flex-shrink: 1

        .v-datatable__actions
            flex-wrap: nowrap

            .v-datatable__actions__pagination
                white-space: nowrap
</style>

[ais-one]

Please have a look at this pen for the desired result....

https://codepen.io/ais-one/pen/eQrexj

NOTE: Does not work on IE11

Set Pen layout to code snippets on the right (as seen in image below)

[Drintios]

i think we should take this approach https://www.iviewui.com/components/table-en#Fixed_Header, it is more stable

[grishnyakov]

I need a solution, that will work on IE11. Help