How can I render a component from the render function?

Manthan7856

Hi there,

Here is the problem I am facing, How can I render a component from the render function?

{
      title: '',
      data: "name",
      orderable: false,
      render: function (data, type, row) {
        return '(Component with data)'
      }
}

Here is the code and I tried many ways to render a component over here but it does not work.

I implement the data table into angular 14.

Can anyone help me over here?

kthorngren

Are you referring to a VUE3 component? If so see this thread. Sounds like you will be able to do this when Datatables 2 is released very soon.

If not please provide more details of what you are trying to do.

Kevin

Manthan7856

These are the core feature I want to implement
1. Row Grouping
2. Sorting
3. Column reordering
4. Lazy Loading (With row groups)

I implemented these features.
But, After archiving these features
1. I want to show tooltip on some data using Ngboostrap Library.
2. In the row grouped header I want to render a custom component that I have created in the angular 14.
3. Render child components created in angular 14 to the particular cells.
Ex.
1. I have a component that take the image name from the parent component to show the product images and I want to pass that component into the datatable to display the product image.
2. Also I have a component to manage the shipping data and this component also takes data from the parent component.

I have few more components to render. But I can not render those components from the dtOption render method. It consider that components as a normal HTML tab not as a angular component. My main purpose to use these components from the render method is for lazy loading. I append more data into the datatable on scroll and it is working perfectly with only usgin dtOptions.

I hope I explain the problem properly.

allan

How can I render a component from the render function?

At this time you cannot. As Kevin says, you'll need to wait for DataTables 2 which will allow you to return an HTML element from a rendering function when the display type is asked for.

Allan

Manthan7856

Okay, Thank you, Allan!