DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Table disappear

Table disappear

hadarhadar Posts: 17Questions: 4Answers: 0
in General

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

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 21,336Questions: 26Answers: 4,951

    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

  • hadarhadar Posts: 17Questions: 4Answers: 0

    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,
  • kthorngrenkthorngren Posts: 21,336Questions: 26Answers: 4,951

    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

  • hadarhadar Posts: 17Questions: 4Answers: 0

    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

  • kthorngrenkthorngren Posts: 21,336Questions: 26Answers: 4,951

    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

  • hadarhadar Posts: 17Questions: 4Answers: 0

    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

  • kthorngrenkthorngren Posts: 21,336Questions: 26Answers: 4,951

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

    Kevin

  • hadarhadar Posts: 17Questions: 4Answers: 0

    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)
    }

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    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

  • hadarhadar Posts: 17Questions: 4Answers: 0

    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.

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

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

    Colin

  • kthorngrenkthorngren Posts: 21,336Questions: 26Answers: 4,951

    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

  • hadarhadar Posts: 17Questions: 4Answers: 0
    edited March 2022

    https://jsfiddle.net/9zkupmqr/

  • kthorngrenkthorngren Posts: 21,336Questions: 26Answers: 4,951

    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

  • hadarhadar Posts: 17Questions: 4Answers: 0

    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/

  • kthorngrenkthorngren Posts: 21,336Questions: 26Answers: 4,951
    edited March 2022

    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

  • hadarhadar Posts: 17Questions: 4Answers: 0

    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

  • kthorngrenkthorngren Posts: 21,336Questions: 26Answers: 4,951
    Answer ✓

    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

Sign In or Register to comment.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.