Custom component not rendering inside responsive dropdown

DataTables / Vue

Vue plugin for DataTables

MIT License

64 stars 12 forks source link

Custom component not rendering inside responsive dropdown #31

Closed BayBreezy closed 6 months ago

BayBreezy commented 6 months ago

Hey @AllanJard,

I noticed that when rendering custom buttons inside the table it gets converted to a weird object when the responsive option is set to true.

If the column with the button gets placed inside the responsive dropdown it says [object HTMLDivElement]. Here is an image

AllanJard commented 6 months ago

Have you tried using the listHiddenNodes() renderer? https://datatables.net/extensions/responsive/examples/child-rows/original-nodes.html

That, I think, will resolve this.

BayBreezy commented 6 months ago

Ohhhhhhhh!!!! Spot on!

Thank you @AllanJard ❤️

P.S: The type of renderer need some updating. I get this Typescript error when I follow the docs

Type 'ResponsiveRenderer' is not assignable to type '(api: Api<any>, rowIdx: number, columns: ResponsiveColumn) => false | Node'.
  Types of parameters 'columns' and 'columns' are incompatible.ts(2322)

I just put a //@ts-ignore over it for now. but it works like a charm.