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

Sanket29

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

allan

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

You might need to use the listHiddenNodes render.

Allan

Sanket29

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

Change responsive: true to be:

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

Allan

jolupopa

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

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

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