Example for options API

[theinvisible]

Hi,

are there somewhere examples how to use with Vue3 + options API?

I always get the warning in browser console: [Vue warn]: Failed to resolve component: DataTable If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

Some examples would be nice, thanks

[LittleLama]

Hi, I work only with option API.

Here a sample.

https://codesandbox.io/s/datatables-option-api-example-6g3ksj

[AllanJard]

There are StackBltiz examples linked to in the blog post announcing the Vue plug-in for DataTables.

For example: https://stackblitz.com/edit/datatables-net-vue3-simple?file=src%2FApp.vue .

[abdosaeedelhassan]

@LittleLama thank you for optional api example, i am very interesting on it because i am develop with optional api, can you please add export buttons to your example, so that i will know the correct way.

[abdosaeedelhassan]

@LittleLama it not worked for me in local dev, it shows next: ` runtime-core.esm-bundler.js:2984

   Uncaught (in promise) TypeError: Cannot read properties of null (reading 'isCE')
at renderSlot (runtime-core.esm-bundler.js:2984:34)
at Proxy.render (datatables.net-vue.esm.js:115:7)
at renderComponentRoot (runtime-core.esm-bundler.js:890:44)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5598:57)
at ReactiveEffect.run (reactivity.esm-bundler.js:185:25)
at instance.update (runtime-core.esm-bundler.js:5712:56)
at setupRenderEffect (runtime-core.esm-bundler.js:5726:9)
at mountComponent (runtime-core.esm-bundler.js:5508:9)
at processComponent (runtime-core.esm-bundler.js:5466:17)
at patch (runtime-core.esm-bundler.js:5068:21)

`

[LittleLama]

You got there an example with buttons. https://codesandbox.io/s/datatables-option-api-example-with-buttons-cee309?file=/src/App.vue You may have a problem with your transpiler. I really can't help for this subject sorry :)

@AllanJard : I found two repos of datatables.net-buttons : one with -dt at the end and another without. The last one has colVis & html5 buttons, the first not. What is the deal ?

[AllanJard]

The -dt one is the styling library for the default DataTables styling. Other styles include -bs5 Bootstrap 5 and so on.

See also this post for details.

[abdosaeedelhassan]

@LittleLama , i think my problem in template script that i used, thank you for your help

[theinvisible]

@LittleLama Thanks that worked