Fixed header problems

[mhascak]

Hello, thanks for you work. I have some problems with fixed header behavior.
I have this grid component:

<template>
<div style="width: 100%">
        <datatable v-bind="$data" :HeaderSettings="false" tblStyle="table-layout: fixed" tblClass="table-bordered"></datatable>
</div>
</template>



<script>
    import Vue from 'vue';
    import GridComponents from '../../components/dataGrid'

    export default {
        props: ['row'],
        name: 'SettingTable',
        components: { ...GridComponents },
        methods: {
            alertSelectedUids() {
                alert(this.selection.map(({ uid }) => uid))
            },
            loadData() {
            }
        },
        data() {
            return {
                columns: [
                    { title: 'Akce', tdComp: 'Actions', fixed: true, colStyle: { width: '80px' }   , fixed: true  },
                    { title: 'Název', field: 'name', sortable: true, colStyle: { width: '200px' }  },
                    { title: 'Doporučeno?', field: 'isFeatured', tdComp: 'Check', sortable: true , colStyle: { width: '200px' } },
                    { title: 'Na zavolení', field: 'isCallForPricing', tdComp: 'Check', sortable: true, colStyle: { width: '200px' }  },
                    { title: 'K objednání', field: 'isAllowToOrder', tdComp: 'Check', sortable: true, colStyle: { width: '200px' }  },
                    { title: 'Skladem ks.', field: 'stockQuantity', sortable: true, colStyle: { width: '200px' }  },
                    { title: 'Publikováno', field: 'isPublished', tdComp: 'Check', sortable: true, colStyle: { width: '200px' }  },
                ],
                data: [
                    {uid: 1,  name: "Testovací produkt",  isFeatured: true,  isCallForPricing: true,  isAllowToOrder: false, stockQuantity:6,  isPublished: false },
                    {uid: 2,  name: "Testovací produkt 2",  isFeatured: true,  isCallForPricing: true,  isAllowToOrder: false, stockQuantity:6,  isPublished: false },
                    {uid: 3,  name: "Testovací produkt 3",  isFeatured: false,  isCallForPricing: true,  isAllowToOrder: true, stockQuantity:5,  isPublished: false },
                    {uid: 4,  name: "Testovací produkt 4",  isFeatured: true,  isCallForPricing: false,  isAllowToOrder: true, stockQuantity:2,  isPublished: false }
                ],
                fixHeaderAndSetBodyMaxHeight: 200,
                pageSizeOptions: [5, 10, 15, 20],
               // selection: [],
                //summary: {},
                total: 1,
                query: {},
                xprops: {
                    editRouteName: 'edit',
                    eventbus: new Vue() // only for current Datatable instance
                }

            }
        },
        created() {

        },
        watch: {
            query: {
                handler() {
                    this.loadData()
                },
                deep: true
            }
        },

    };

And this custom td templates:

td-Actions.vue :

<template>
    <div class="page card">
        <div class="page-header card-header">
            <slot name="page-title">
                <div class="page-title">
                    <h2>{{ pageTitle.toUpperCase() }}</h2>
                </div>
            </slot>
            <slot name="page-head-menu">
            </slot>
        </div>
        <div class="page-body card-body">
            <slot></slot>
        </div>
    </div>
</template>


<script>
export default {
    data() {
        return {
            pageTitle: this.$route.meta.title || ""
        }
    }
}

</script>

td-Check.vue :

<template>
   <i :class="icon"></i>
</template>
<script>
export default {
        props: ['value'],
        computed: {
            icon: function () {
                if (this.value == true) {
                    return "fa fa-check";
                } else {
                    return "fa fa-times";
                }
            }
        }
}
</script>

And there are 2 problems:

On second picture is first column < 80 px it should have fixed width: 80px. When I´m horizontaly scrolling column width change dynamically.

On 3 image is problem with heder filter menu which is displayed under the grid, so I do not see it.

Thanks for help.

[kenberkeley]

colStyle: { width: '80px' } => thStyle: { width: '80px' }, tdStyle: { width: '80px' }

[mhascak]

I updated:

{ title: 'Akce', tdComp: 'Actions',  thStyle: { width: '85px' }, tdStyle: { width: '85px' } , fixed: true  },

And I have the same problems...

[kenberkeley]

https://github.com/OneWayTech/vue2-datatable/blob/master/examples/src/Fixed/index.vue#L13

[mhascak]

I have already set this props..

<datatable v-bind="$data" :HeaderSettings="false" tblStyle="table-layout: fixed" tblClass="table-bordered"></datatable>

But when I do it in data() there is not any difference... Your example with fixed columns have the same problems, (try disable right fixed columns and wrapped div set with: 100%)

[mhascak]

Any idea how to solve this problem ? Thanks

[kenberkeley]

sorry for the forgettery...

[kenberkeley]

if the width is enough to display all the columns, you might not need to fix some columns

[kenberkeley]

if you want the fixed columns look normal, you might have to increase their widths

[kenberkeley]

the magic of fixed columns is, creating new tables to cover the origin ones

[kenberkeley]

since BootStrap's table is auto-extendable, you might have to fix the whole table's width

[mhascak]

Hi thanks for reply.
I looked to kendo grid fixed column solution: link

It might be better to solve fixed column that way. Show fidex colums in fixed table and do not show it in base table at all.

[kenberkeley]

PR is warmly welcome

[kenberkeley]

I no longer work for OneWay Tech, so this repo might be deprecated

[mhascak]

Hi, I implemented working prototype, you can see it in my fork.

[kenberkeley]

cool