Uncaught runtime errors: × ERROR Cannot set properties of undefined (setting '_DT_CellIndex') TypeEr

ayaaa

usually this error appears in browser console errors but after i added a new datatable to my code its now a runtime error
may that is because i am using react and the tables are empty at the first render but handled that by adding a "loading" & "no records to show" messages i also checked the number of <th> <td> messages as most of the answers suggest but it has nothing to do with that

Error messages shown
Uncaught runtime errors:
Cannot set properties of undefined (setting '_DT_CellIndex')
TypeError: Cannot set properties of undefined (setting '_DT_CellIndex')

Description of problem:

kthorngren

i also checked the number of <th> <td> messages as most of the answers suggest but it has nothing to do with that

That is the usual problem. I've seen similar type issues if columns.render is missing a return statement. The other thing to look for is to make sure the tbody doesn't have rowspan or colspan settings.

We will need to see the problem to help debug. If you still need help please post a link to your page or a test case replicating the issues.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

ayaaa

          <thead>
            <tr>
              <th>title 1</th>
              <th>title 2</th>
            </tr>
          </thead>
          <tbody>
            {data ? (
              data.length > 0 ? (
                data.map((d) => (
                  <reactComponent key={"} {...d}>
                    {" "}
                  </reactComponent>
                ))
              ) : (
                <tr>
                  <td colSpan="100%" className="py-5 text-center">
                    There is no records to display
                  </td>
                </tr>
              )
            ) : (
              <tr>
                <td colSpan="100%" className="py-5 text-center">
                  LOADING
                </td>
              </tr>
            )}
          </tbody>

i am using reactjs

allan

It won't work with DataTable I'm afraid. You have both React and DataTables trying to control the DOM of the table there. They will interfere with each other causing all sorts of problems.

Let DataTables control the display of the table elements.

Allan

ayaaa

can u please explain further how can i access the table elements with datatables although its not rendered yet

ayaaa

also what makes it appears as a runtime error on my website. it was at first just an error in the inspect console

jquery.min.js:2 Uncaught TypeError: Cannot set properties of undefined (setting '_DT_CellIndex')

allan

The error is caused by mixing React and DataTables on the same DOM. In the code above you have a colspan in the table body, which is not supported by DataTables. That is fundamentally what is causing the error. You then appear to be looking for React to rerender the table body with the data. But DataTables doesn't know anything about that, so that won't work. You need to populate the DataTable using its options or API.

Allan