Export function error in Rails 7.1 "datatables.min.js:34 Uncaught TypeError: Cannot read properties"

onurbaran

Error messages shown:

Uncaught TypeError: Cannot read properties of undefined (reading 'cell')
    at U.<anonymous> (datatables.min.js:34:60303)
    at U.iterator (datatables.min.js:34:46323)
    at U.<anonymous> (datatables.min.js:34:60216)
    at U.<anonymous> (datatables.min.js:34:47993)
    at U.footer (datatables.min.js:34:47252)
    at U.<anonymous> (datatables.min.js:44:24923)
    at U.map (<anonymous>)
    at U.map (datatables.min.js:34:46535)
    at u (datatables.min.js:44:24887)
    at U.<anonymous> (datatables.min.js:44:23406)

Description of problem: When I want to export in any format, I get the above error.

<link href="https://cdn.datatables.net/v/bs4/jq-3.7.0/jszip-3.10.1/dt-2.0.2/b-3.0.1/b-colvis-3.0.1/b-html5-3.0.1/datatables.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/v/bs4/jq-3.7.0/jszip-3.10.1/dt-2.0.2/b-3.0.1/b-colvis-3.0.1/b-html5-3.0.1/datatables.min.js"></script>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    $('#datatables').DataTable({
      paging: false,
      responsive: true,
      language: {
        url: '//cdn.datatables.net/plug-ins/1.11.4/i18n/tr.json'
      },
      scrollY: '55vh',
      scrollCollapse: true,
      processing: true,
      dom: '<lBf<t>ip>',
      buttons: [
        {
          extend: "excel",
          className: "btn btn-default btn-xs"
        },
        {
          extend: "copy",
          className: "btn btn-default btn-xs"
        },
        {
          extend: "csv",
          className: "btn btn-default btn-xs"
        }
      ],
      search: {
          return: true
      },
      initComplete: function () {
        $('.dt_search input[type="search"]').css({ 'width': '350px', 'display': 'inline-block' });
        $('div.loading').remove();
      }
    });

  })
</script>

kthorngren

I copied your code snippet into this test case:
https://live.datatables.net/wixigafu/1/edit

The export buttons work without generating errors. The problem seems to be specific to your table data. Please provide a link to your page or test case (update mine if you want) that replicates the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

kthorngren

Looks like you are generating an HTML table. Make sure there aren't colspan or rowspan tags in the tbody. Also make sure each row has one cell per column. See the HTML requirements doc for details.

Kevin

onurbaran

@kthorngren Thank you so much for helping me see that I made a simple mistake.