ColumControl ccSearchClear Not Working in React

TerraX3000

Link to test case: https://stackblitz.com/edit/datatables-net-react-extensions-s3dmoopf?file=src%2FApp.tsx

Error messages shown:

Uncaught TypeError: Cannot read properties of undefined (reading 'isSplit')
at Buttons.disable (chunk-3S63YLI2.js?v=d692a371:191:16)
at Buttons.enable (chunk-3S63YLI2.js?v=d692a371:230:19)
at _Api.<anonymous> (chunk-3S63YLI2.js?v=d692a371:1693:16)
at _Api.each (chunk-4IG36CYP.js?v=d692a371:10294:10)
at _Api.<anonymous> (chunk-3S63YLI2.js?v=d692a371:1692:17)
at _Api.enable (chunk-4IG36CYP.js?v=d692a371:10407:18)
at HTMLTableElement.<anonymous> (datatables__net-colu…?v=67207941:1876:13)
at HTMLTableElement.dispatch (chunk-4IG36CYP.js?v=d692a371:2961:103)
at elemData.handle (chunk-4IG36CYP.js?v=d692a371:2848:116)
at Object.trigger (chunk-4IG36CYP.js?v=d692a371:5106:22)

Description of problem:

I added ColumnControl to the StackBlitz example of the DataTables React component and it worked for filtering column content. However, it crashes when I added ccSearchClear as a button.

Code:

import jszip from 'jszip';
import DataTable from 'datatables.net-react';
import DT from 'datatables.net-dt';
import 'datatables.net-buttons-dt';
import 'datatables.net-buttons/js/buttons.colVis.mjs';
import 'datatables.net-buttons/js/buttons.html5.mjs';
import 'datatables.net-columncontrol-dt';
import 'datatables.net-responsive-dt';
import 'datatables.net-select-dt';

import './App.css';

DataTable.use(DT);
DT.Buttons.jszip(jszip);

function App() {
  const columns = [
    { data: 'name' },
    { data: 'position' },
    { data: 'office' },
    { data: 'extn' },
    { data: 'start_date' },
    { data: 'salary' },
  ];

  return (
    <>
      <div>
        <h1>Using DataTables Extensions</h1>
        <h2>DataTables + React example</h2>
        <p>
          This example demonstrates the <code>datatables.net-react</code>
          package being used with DataTable's events through <code>
            on*
          </code>{' '}
          properties on the component.
        </p>
        <p>
          Full documentation for the DataTables React component is{' '}
          <a href="https://datatables.net/manual/react">
            available in the DataTables manual
          </a>
          .
        </p>

        <DataTable
          ajax="/data.json"
          columns={columns}
          className="display"
          options={{
            responsive: true,
            select: true,
            columnControl: ['order', 'searchDropdown'],
            layout: {
              topStart: { buttons: ['pageLength', 'excel', 'ccSearchClear'] },
            },
            ordering: {
              indicators: false,
            },
          }}
        >
          <thead>
            <tr>
              <th>Name</th>
              <th>Position</th>
              <th>Office</th>
              <th>Extn.</th>
              <th>Start date</th>
              <th>Salary</th>
            </tr>
          </thead>
        </DataTable>
      </div>
    </>
  );
}

export default App;

allan

Many thanks for the test case! I think I missed removing an event handler which is what is causing the issue here. I've committed this change but I forgot to add files to the repo from my other machine, so it won't build atm. I'll fix that tomorrow and try the test case with the change. Hopefully I've got it right!

Allan

TerraX3000

Thank you for the quick response, Allan! I'll look for the update in Column Control

allan

Hi,

That does indeed appear to have fixed it. Updated test case.

I'm working on some other changes to ColumnControl at the moment. This fix will be included in the upcoming release.

Regards,
Allan