Cannot read properties of undefined (reading 'style')

MrLony

Hello, I have a problem with my datatable when I try to make a custom column. When I assign the property ScrollY or ScrollX it gives me the error of (Cannot read properties of undefined (reading 'style')).
Removing that property works fine.
I need the table to have a fixed size. Please does anyone know how to fix this?

my code:

TablaEditar = $('#tFichasOT').DataTable({
scrollY: "",
scrollY: true,
scrollCollapse: true,
"data": datos,
"columns": [
{
"orderable": false,
"data": null,
"defaultContent": '',
"render": function (data) {
return <div class="w-100"> <div class="float-start pt-2 pb-2" style="width:80%; height: 80px"> <label class="label-capa w-100">${data.NombreCapa}</label> <label class="label-aspecto-class w-100">${data.NombreAspectoAmbiental}</label> <label class="label-aspecto-class w-100">${data.NombreClasfAspecto}</label> </div> <div class="column-tabla" style="width:20%"> <i class="${data.Icono} fs-3"></i> </div> </div>
},
}
],
dom: '',
searching: false,
responsive: true,
autoWidth: false,
search: false,
bFilter: true,
ordering: false,
pageLength: 10,
lengthMenu: [
[10, 25, 50, -1],
[10, 25, 50, 'Todos'],
]
});

kthorngren

Usually the error means that the columns defined in HTML (thead) don't match what is defined in Datatables. If you have more than one column then use columnDefs instead of columns, like this example.

If you still need help then please provide a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

MrLony

Thanks for the reply.
I leave a link with an html file where the exercise is.
Thank you

https://drive.google.com/file/d/1zPK5d0IIa6qcv9QHRqHIHigDoo0KwyYZ/view?usp=sharing

kthorngren

You need to create the thead along with a header row of th elements for each column. See the HTML docs for more details. You can create the th elements in HTML or use columns.title.

Additionally you might need to remove the style="display:none;" from the -tag thead` tag.

Kevin

MrLony

I did that, and it doesn't work. The error occurs when adding the scrollY property and giving it an equality. If you look at the two functions, one has it and does not give an error and the other does.

kthorngren

Its much better to provide a running test case. This way we can work with what you have and find the errors easier. I placed the code you are asking about in this test case:
https://live.datatables.net/wipeleve/1/edit

I added the th tags and removed the style="display:none;" as described above. Also found that you have dom: '',. This is telling Datatables to not display any of the Datatable elements including the table. Minimally you need to have dom: 't',. I commented out this line and now it works.

Kevin

MrLony

Thank you very much kthorngren, my problem was the sun, I had to define something or comment on it.

Thank you so much!!!!