Table disappear

hadar

Hi,

I have table created by google.visualization.Table and than I use DataTable.

All works OK except that when I click on the table column header I am getting error and table disappear .

this is like the "th" looks like
<th class="google-visualization-table-th gradient unsorted sorting" tabindex="0" role="button" aria-label="SUBTYPE: activate to sort column ascending" aria-controls="DataTables_Table_5" rowspan="1" colspan="1" data-column-index="5" style="width: 66px;">SUBTYPE<span class="google-visualization-table-sortind"></span></th>

Below is the error I got .

What can cause it ? Can I disable the click event on the table header ?

Thanks

Uncaught TypeError: Cannot read properties of undefined (reading 'firstChild')
at gvjs_hh (jsapi_compiled_default_module.js:120:35)
at gvjs_mM (jsapi_compiled_ui_module.js:1092:91)
at gvjs_pha (jsapi_compiled_ui_module.js:1091:15)
at gvjs_hM.gvjs_.Qt (jsapi_compiled_ui_module.js:1084:501)
at gvjs_hM.gvjs_.raa (jsapi_compiled_ui_module.js:1107:192)
at HTMLTableCellElement.gvjs_Zaa (jsapi_compiled_default_module.js:161:402)
at HTMLTableCellElement.a (jsapi_compiled_default_module.js:158:63)
gvjs_hh @ jsapi_compiled_default_module.js:120
gvjs_mM @ jsapi_compiled_ui_module.js:1092
gvjs_pha @ jsapi_compiled_ui_module.js:1091
gvjs_.Qt @ jsapi_compiled_ui_module.js:1084
gvjs_.raa @ jsapi_compiled_ui_module.js:1107
gvjs_Zaa @ jsapi_compiled_default_module.js:161
a @ jsapi_compiled_default_module.js:158

kthorngren

Sounds like you might be initializing Datatables first then populating the HTML table. In this case Datatables doesn't know about any of the table rows. Initialize Datatables after the HTML table is populated.

If this is not the issue or you still need help then please post 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

hadar

Hi,

Below is part of the code to init the DataTable,
Once I removed the "scrollY: 300" it works OK.
It try replace it with : "scrollY": "300px", but didnt help
I try change paging,scrollCollapse but nothing help beside removing the scrollY parameter.

Any idea why it cause this problem ?

            scrollY: 300,
            scrollCollapse: true,
            fixedHeader: { 
                header: true,
                footer: true
            },
            paging: true,
            colReorder: true,

kthorngren

You code snippet with FixedHeader and ColReorder seems to work here:
http://live.datatables.net/wilafiwa/1/edit

We will need to see the problem to help debug. Do you get errors in the browsers console?

Kevin

hadar

The error in the browser is :
jsapi_compiled_default_module.js:120 Uncaught TypeError: Cannot read properties of undefined (reading 'firstChild')
at gvjs_hh (jsapi_compiled_default_module.js:120:35)
at gvjs_mM (jsapi_compiled_ui_module.js:1092:91)
at gvjs_pha (jsapi_compiled_ui_module.js:1091:15)
at gvjs_hM.gvjs_.Qt (jsapi_compiled_ui_module.js:1084:501)
at gvjs_hM.gvjs_.raa (jsapi_compiled_ui_module.js:1107:192)
at HTMLTableCellElement.gvjs_Zaa (jsapi_compiled_default_module.js:161:402)
at HTMLTableCellElement.a (jsapi_compiled_default_module.js:158:63)

I am getting the error with this code :
let table = $('#table_' + kNameWithNoSpecialChar + ' table').DataTable({
scrollY: 300,
});

If I remove the scrollY property it works

It happen only after click on one of the cloumn header

kthorngren

The test case I provided is woking. You can click on the header to sort or to reorder the columns without the error. Maybe you have outdated ColReorder or FixHeader libraries causing the issue. Might be worth trying the latest version. Use the Download Builder to get the latest versions.

Can you post a link to your page or provide 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

hadar

Thanks for your answers,
I saw in your example that it working

My guess is that this is somehow related to the fact that I use google.visualization.DataTable

I dont understand why this parameter cause issue .
As you can see I remove all configurations (ColReorder,FixHeade,...) and stay only with this param

kthorngren

Looks like the error is in jsapi_compiled_default_module.js. What is line 120 doing in this script?

Kevin

hadar

This is the error (In the formatted version)
jsapi_compiled_default_module.js:formatted:2545 Uncaught TypeError: Cannot read properties of undefined (reading 'firstChild')
at gvjs_hh (jsapi_compiled_default_module.js:formatted:2545:23)
at gvjs_mM (jsapi_compiled_ui_module.js:1092:91)
at gvjs_pha (jsapi_compiled_ui_module.js:1091:15)
at gvjs_hM.gvjs_.Qt (jsapi_compiled_ui_module.js:1084:501)
at gvjs_hM.gvjs_.raa (jsapi_compiled_ui_module.js:1107:192)
at HTMLTableCellElement.gvjs_Zaa (jsapi_compiled_default_module.js:formatted:3423:15)
at HTMLTableCellElement.a (jsapi_compiled_default_module.js:formatted:3360:18)
gvjs_hh @ jsapi_compiled_default_module.js:formatted:2545
gvjs_mM @ jsapi_compiled_ui_module.js:1092
gvjs_pha @ jsapi_compiled_ui_module.js:1091
gvjs_.Qt @ jsapi_compiled_ui_module.js:1084
gvjs_.raa @ jsapi_compiled_ui_module.js:1107
gvjs_Zaa @ jsapi_compiled_default_module.js:formatted:3423
a @ jsapi_compiled_default_module.js:formatted:3360

and this is the code in line 2545 :
function gvjs_hh(a) {
for (var b; b = a.firstChild; )
a.removeChild(b)
}

colin

I'm not seeing any reference to DataTables in that stack trace.

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

hadar

I see that the problem is not in DataTable code.
I try to understand what the parameter scrollY,scrollX do that can cause this issue .

The page will not work outside the VPN of company.

colin

Yep, please post a link to the page, or create a test page, and as I said, we'll take a look,

Colin

kthorngren

Datatables scrolling features clone the header to facilitate scrolling. The original header is set to a height of 0. Could be something is trying to use the original header causing the Cannot read properties of undefined (reading 'firstChild error.

If this doesn't help then we will need to see the test case Colin asked for.

Kevin

hadar

https://jsfiddle.net/9zkupmqr/

kthorngren

Your test case doesn't seem to replicate the issue of getting the Cannot read properties of undefined (reading 'firstChild. Please update the test case to show the issue so we can help debug. Or provide the steps to show the problem.

Kevin

hadar

Hi,

the problem that table disappear after click on one of the column header reprodce in the jsfiddle and also in http://live.datatables.net/pepetaxi/1/

kthorngren

You are initializing Datatables with this:

var data = new google.visualization.DataTable();

Then you have this:

            $('table').DataTable({
                scrollY: true
            });

I commented this init code out because its causing the issue. If you want to add Datatables option apply them in the first initialization statement.

http://live.datatables.net/pepetaxi/3/edit

Kevin

hadar

but than I dont have DataTable at all .
If I remove the scrollY it's work

See http://live.datatables.net/nemakeva/1/edit

I have both the DataTable from google and DataTable from datatables.net and I can click on column header and it works

kthorngren

The problem is you now have two API's (google and Datafables) trying to control the same table. This isn't going to work very well. You can either use the Google Datatable or you can fetch the data you want via ajax and use Datatables to populate and control the table. But, as you see, you can't use both API's at the same time.

Kevin