search

DataTables / Vue

Vue plugin for DataTables
MIT License
62 stars 12 forks source link

Added all dt event emitters #15

Closed LittleLama closed 1 year ago

LittleLama commented 1 year ago

Adding DT event emitters at component scope to let trig event listeners to parent component. By example to get selected row, to style after draw ...

LittleLama commented 1 year ago

Now when you call your DataTable component you can pass as props callbacks for all DT events as @draw, @order, @select ...

<DataTable          
    :columns="columns"
   :options="options"
   :data="data"
   @draw="drawCallback"
   ref="table"
 />

drawCallback(){ console.log("Draw"); }

AllanJard commented 1 year ago

Cool - thanks for this. Are you happy for this to be included under the MIT license?

LittleLama commented 1 year ago

For sure. I'm glad to help. Best regards

AllanJard commented 1 year ago

I'm having trouble compiling this change.

this.$emit(eName, { event: event, dt: dt });

is resulting in:

src/datatables.net-vue.vue:156:5 - error TS2532: Object is possibly 'undefined'.

156     this.$emit(eName, { event: event, dt: dt });

Reading this issue it appears that the event cycle hooks don't have access to this any more. Are you familiar with any of those changes? Its the first I've encountered it and I'm not sure what the fix is.

LittleLama commented 1 year ago

Hi Allan No I think it is only due to to TypeScript syntax. I got no problem accessing this from DT even when destroying it.

Maybe should I declare types of event parameters emitted regarding this thread. I'm not familiar with TypeScript at all. Will give a look.

https://itsjavascript.com/object-is-possibly-undefined-error-in-typescript?utm_content=cmp-true

AllanJard commented 1 year ago

Thanks for the reply. I was getting errors unfortunately, but I found the solution was to use getCurrentInstance() from Vue and then call emit on that. That seems to do the business.

PeterPilley commented 1 month ago

Is this part of the library now? I am having massive issues trying to call events on datatables but if these props are available this is awesome

AllanJard commented 1 month ago

Yes, event emitters are in. Add a @{eventName}="{functionName}" attribute to the <DataTable> tag: https://stackblitz.com/edit/datatables-net-vue3-ajax-8vmpz4?file=src%2FApp.vue .

I'll add that into the docs.

PeterPilley commented 1 month ago

The supplied link doesnt work are you able to create a new one