Anyone have a working example of Vue with layout options working?
Anyone have a working example of Vue with layout options working?
darklordstudios
Posts: 4Questions: 0Answers: 0
Link to test case:
Debugger code (debug.datatables.net):
Error messages shown: Type '{ layout: { top: string; }; buttons: string[]; }' is not assignable to type 'Config'
Description of problem:
I can not seem to find an example of using vue and buttons where I can change the location of where the buttons render. I read that I should be using layout and several examples show using it, but none of them seem to use vue.
<DataTable v-if="dataretrieved" :data="pages" :columns="columns" :options="dtoptions" [rest removed]
in my data attribute (options api)
dtoptions: {
layout: {
top: 'buttons'
},
buttons: ['copy', 'csv', 'excel', 'pdf', 'print']
}
If I remove the layout it compiles fine but the buttons are not where I want them.
I tried topN as well, but I think that is an older reference.
Replies
Here is an example: https://stackblitz.com/edit/datatables-net-vue3-extensions-7qxhp4?file=src%2FApp.vue%2Cpackage.json .
Allan
I have tried this and in VSCode I receive this error message: Type '{ layout: { topStart: string; }; select: boolean; }' is not assignable to type 'Config'.
If I remove the layout the error goes away.
The only difference is I am using the -bs5 option for bootstrap
Actually, I think also the problem is I am using the options api and that might be an issue to set up the layout in that scenario as well
If you can update the test case to show the issue, I can look into it.
Allan
So, what I did to fix it. Converted the component to composition API. Made the options an empty ref. Set the options in the "OnMounted" event to include the layout option and this worked. VSCode still complains about it if I do it any other way. It is working so WOOHOO!! Thanks for the suggestions!!