Error: [object HTMLDivElement] using datatables.net-responsive-dt

Sanket29 · November 2024

I am getting [object HTMLDivElement] in mobile view when using slots in responsive mode.

allan · November 2024

Happy to take a look at a test case showing the issue.

You might need to use the listHiddenNodes render.

Allan

Sanket29 · November 2024

How to use in React?

This is my current code.

        <DataTable
        columns={[
            {data: 'Alias'},
            {data: 'IsVerified'},
            {data: 'GoldCoin'},
            {data: 'SheeshCoin'},
            {data: 'RewardResult'},
            {data: 'RegisteredDate'}
        ]}
        data={tableData}
         className="display"
         options={{
            responsive: true,
            select: true,
        }}

        slots={{
            0:(data, type, row) => {
                console.log(row)
                if ( type === 'sort' || type == 'filter' ) {
                     return row.Alias;
                } else {
                    return gameView(row);
                }
            },
            1: (data, type, row) =>{
                console.log("Type",type);
                if(type == 'filter'){
                    return row.IsVerified ? 'Yes' : 'No';
                }
                else if ( type === 'sort') {
                    return row.IsVerified;
                } else {
                   return verifiediView(row);
                }
            },
            2: (data, type, row) =>{
                if(type == 'filter' || type=='sort'){
                    return row.GoldCoin;
                }else{
                    return gcView(row);
                }
            },
            3: (data, type,row) =>{
                if(type == 'filter' || type=='sort'){
                    return row.SheeshCoin;
                }else{
                    return scView(row)
                }
            },
            4: (data, type,row) =>{
                if(type == 'filter'){
                    return row.IsVerified?'Credited':'Pending';
                }else if(type == 'sort'){
                     return row.IsVerified;
                 }else{
                     return rewardResultView(row).
                 }
             },
            5: (data,type, row) =>{
                if(type == 'filter'){
                    return toLocaleDateString(new Date(row.RegisteredDate));
                }else if(type == 'sort'){
                    return new Date(row.RegisteredDate);
                }else{
                    return (<><span className="order-2 text-xs font-medium ">{toLocaleDateString(new Date(row.RegisteredDate))}</span></>)
                }
            }
        }}
         >

allan · November 2024

Change responsive: true to be:

    responsive: {
        details: {
            renderer:  DataTable.Responsive.renderer.listHiddenNodes()
        }
    }

Allan

jolupopa · December 2024

Hi Allan, I have the same error but when displaying the slots with a Link component, on the desktop screen it is displayed and redirected perfectly, but on the mobile screen the component is not displayed but the ObjectHtmlDivElement error, I am sending you my code, I have used the solution from the previous post but it does not work, in the console it does not detect the renderer property, I hope you can help me, I am new and I am implementing in an inertia-react project
...
const columns = [
{ data: "id" },
{ data: "title" },
{ data: "codigo" },
{ data: "resumen" },
{ data: "precio" },
{ data: "published_at" },
{ data: "id", orderable: false}
];

<DataTable
ajax={route("apiproperty.index")}
columns={columns}
className="display"
scrollX={true}
options={{
select: true,
responsive: true,
}}
slots={{
6: (data) => (
<Link
className="bg-gray-900 text-white px-3 py-2 mx-5"
href={route("property.edit", data)}
>
Edit
</Link>
),
}}
>
<thead>
<tr>
<th>ID</th>
<th>Título</th>
<th>Código</th>
<th>Resumen</th>
<th>Precio</th>
<th>Publicada</th>
<th>Opciones</th>
</tr>
</thead>
</DataTable>
...

allan · December 2024

Your code above doesn't use the solution given in my previous post in this thread. Try replacing:

responsive: true,

With

responsive: {
    details: {
        renderer:  DataTable.Responsive.renderer.listHiddenNodes()
    }
},

If that doesn't work for you, then please create a test case showing the issue on StackBltiz, or link to a minimal git repo with instructions on how to build and run it to show the problem.

Allan

jolupopa · December 2024

Hi Allan, I'm new to React and reviewing the responsive code further, I managed to solve it and provide the solution for someone who is implementing it.
...
options={{
select: true,
responsive: {
details: {
renderer: function(api, rowIdx, columns) {
const datos = api.row(rowIdx).data(); // Obtiene los datos de la fila
console.log("Datos de la fila:", datos); // Verifica los datos recibidos
console.log("datos de columns", columns);

                                // inicio
                                var hidden = $.map(
                                    columns,
                                    function (col, i) {
                                        if (col.hidden) {
                                            if (i === 6) {
                                                const editLinkHtml = `
                                                    <div>
                                                        <strong>
                                                            <a href="${route(
                                                                "property.edit",
                                                                datos.id
                                                            )}" class="bg-gray-900 text-white px-3 py-2">
                                                                Edit
                                                            </a>
                                                        </strong>
                                                    </div>
                                                `;
                                                return `<li class="flex items-center justify-between">
                                                            <span class="font-bold">${col.title}:</span>
                                                            <span>${editLinkHtml}</span>
                                                        </li>`;
                                            }

                                            return `<li><span class="font-bold">${col.title}:</span> ${col.data}</li>`;

                                        }
                                        return ""; 
                                    }
                                ).join("");

                                return hidden
                                    ? $("<ul/>").append(hidden)
                                    : "";

                                // final
                            }

                        },
                    },
                }}

...
Thank you for your attention and I appreciate the great contribution you provide with DataTables-react-net

texonidas · April 15

Sorry to revive an older thread, but I am running into a similar issue.

// common/DataTable.tsx
import * as bootstrap from 'bootstrap';
import DataTable from 'datatables.net-react';
import DT from 'datatables.net-bs5';
import 'datatables.net-responsive-bs5';
import 'datatables.net-searchpanes-bs5';

DT.use(bootstrap);
DataTable.use(DT);

export default DataTable;

This is the component I import across my SPA without issues. I have attempted to implement the fix you have listed, however DataTable.Responsive is undefined. Is there an additional configuration step I have missed to inject the Responsive extension into the DataTable itself?

allan · April 15

Did you try configuring the renderer option as DataTable.Responsive.renderer.listHiddenNodes() as suggested above?

If so, and it still isn't working, can you create a test case on StackBltiz or a minimal git repo showing the issue so I can help to debug it?

Allan

texonidas · April 16

Hi Allan,

I've managed to resolve the issue itself by using $.fn.DataTable.Responsive.renderer instead of DataTable.Responsive.

Having had a read through the source code now, I believe the issue is that Responsive isn't being injected into the DataTable import itself (when used via npm/yarn), only into the jQuery plugin.

I don't have time to create a repro currently, but I will try to get one together for you in the near future.

Thanks for all your work maintaining this site, and for the quick response to the type issue I submitted on GH yesterday.

Tex

allan · April 16

$.fn.DataTable.Responsive and DataTable.Responsive should be identical. In fact, they should be exactly the same object! If that isn't the case, there is something odd going on with the loader and I'd need to be able to see the project to understand what is happening.

Thanks for all your work maintaining this site

Thank you

Allan

Error: [object HTMLDivElement] using datatables.net-responsive-dt

Error: [object HTMLDivElement] using datatables.net-responsive-dt

Replies

Howdy, Stranger!

Categories

DataTables

Error: [object HTMLDivElement] using datatables.net-responsive-dt

Error: [object HTMLDivElement] using datatables.net-responsive-dt

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables