vue2-datatable
vue2-datatable copied to clipboard
OneWayTech
Fixed header problems
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.
colStyle: { width: '80px' } => thStyle: { width: '80px' }, tdStyle: { width: '80px' }
I updated:
{ title: 'Akce', tdComp: 'Actions', thStyle: { width: '85px' }, tdStyle: { width: '85px' } , fixed: true },
And I have the same problems...
https://github.com/OneWayTech/vue2-datatable/blob/master/examples/src/Fixed/index.vue#L13
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%)
if the width is enough to display all the columns, you might not need to fix some columns
if you want the fixed columns look normal, you might have to increase their widths
the magic of fixed columns is, creating new tables to cover the origin ones
since BootStrap's table is auto-extendable, you might have to fix the whole table's width
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.