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

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

Sanket29Sanket29 Posts: 2Questions: 0Answers: 0
edited November 28 in Free community support

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

Replies

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

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

    You might need to use the listHiddenNodes render.

    Allan

  • Sanket29Sanket29 Posts: 2Questions: 0Answers: 0
    edited November 28

    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></>)
                    }
                }
            }}
             >
    
  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    Change responsive: true to be:

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

    Allan

  • jolupopajolupopa Posts: 3Questions: 1Answers: 0

    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>
    ...

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    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

  • jolupopajolupopa Posts: 3Questions: 1Answers: 0

    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

Sign In or Register to comment.