Vue 3 + Keytable
Vue 3 + Keytable
kshinde
Posts: 17Questions: 3Answers: 0
Description of problem: I am using vue-datatables-net for my regular table, and I want to incorporate the inline editing to that. Is there any way we can achieve inline editing similar to keytable in Vue 3? Not sure weather keytables are compatible with Vue 3.
This question has an accepted answers - jump to answer
Answers
Yes, you can use DataTables' extensions inside the Vue component. Have a look at this section of the Vue 3 component blog post which discusses how to use the extensions and has an example (not KeyTable, but the same applies).
Allan
Thanks for the replay Allan.
I tried playing around with extensions on a Stackblitz project, I have added keys configuration in table options but somehow it's not getting applied.
Here is the project.
https://stackblitz.com/edit/datatables-net-vue3-extensions-fbn4tv?file=src%2FApp.vue
Can you please point out what's missing out?
Ok. Update: I managed to select a particular cell and also added "keys.editOnFocus" as true, but still I am not able to edit the cell contents.
I've made a little edit to add
ref="table"to the<DataTable>tag: https://stackblitz.com/edit/datatables-net-vue3-extensions-zkfylh?file=src%2FApp.vue .That helps address the console error that was occurring, however, it doesn't enable inline editing. For that you would need Editor which your example doesn't have there.
Allan
Oh Ok. Here is my understanding, please confirm if it's correct.
So to enable the the inline editing, I would need to purchase the editor and then attach the instance to DataTables. There is no other way to edit the table inline. Is that right?
You could probably get a third party library such as xEditable to work if you had the requirement of using open source only software, but yes, Editor is our solution to editing in a DataTable.
Allan