Vuetable-2: How to make multiple header? (I need 2-row header)

[Bombay]

Hi.
This is not about bugs.

Will I be able to create a 2-row header table?

I can not speak English well.
I apologize if my expression was rude.
Thank you.

[ratiw]

@Bombay The 2 or more rows table header will be available in Vuetable-2 v2.0. It is currently in the alpha state.

[Bombay]

@ratiw
Thank you for quick response!

[Bombay]

@ratiw
Could you roughly know the schedule?

[kakakhang]

@Bombay
Here is a temporary way for you to achieve this while waiting official release.

You can customize fields object by adding extra property such as subHeader
{
name: 'fieldName',
title: 'Title',
subHeader: {
template : 'Your template here',
// callback(){}
// what ever
},
},

Listen event: 'vuetable:loaded': function() {
// 1. Check if fields definition has your custom property then render it
// 2. create element attach to specific place on vuetable
// 3. create your subheader component and mount to attached element.
new Vue.extend(SubHeader)({
propsData: {
fields: this.fields, //Passing fields from parent
tableData: this.$refs.vuetable.tableData,
},
}).$mount(elementAtStep2);
}

Hope that help

[Bombay]

Oh thank you. I'll test it. :)

[ratiw]

@Bombay Originally, it was targeted to be released during January, but I got stuck with other works and cannot finish it in time. For this feature, I need to fine-tune it a little bit. The documentation is a major show stopper though because there are so many more features and customization than the current version.

@kakakhang Your solution is quite advance. I myself also never thought that it could be done that way. Anyway, thanks for sharing and I hope that the next release could make your life a bit easier.

[kakakhang]

This is field definition for amount column: