React/Datatables.net - Cannot extend unknown button type: selected

bhatijay

Link to test case: https://codesandbox.io/s/react-with-graphqlapollo-w-datatables-kb2ds?file=/src/components/Jobs/JobsList/index.js
https://codesandbox.io/s/react-with-graphqlapollo-w-datatables-kb2ds?file=/src/components/Jobs/DataTable/index.js

Error messages shown: Cannot extend unknown button type: selected
Description of problem:
I'm using datatables in a React app. Everything seems to work fine except when 'extend: "selected" (or 'extend: "selectedSingle"') is added it gives me the above error. Also, button 'selected' gives a similar error.

options: {
      dom: "Blfrtip",
      buttons: [
        {
          // extend: "selectedSingle",
          extend: "selected", // this gives an error
          text: "My button",
          className: "my-button",
          action: function(e, dt, button, config) {
            const rowData = dt.row(".selected").data();
            if (rowData) {
              let id = dt.row(".selected").data().id;
              alert(id);
            }
          }
          // enabled: true
        }
      ],
      select: true
    }

Can someone please help. Thanks!

colin

Your test case didn't load, but I suspect the problem is that you haven't included the Select extension library. If you look at this example here, ensure you have the necessary files listed on the Javascript and CSS tabs beneath the table.

Colin

bhatijay

Thanks @Colin. I'm not sure why the test case didn't load. I just check the link and it worked. Anyway I have loaded following modules as listed in download page.

import $ from "jquery";
require("datatables.net")();
require("datatables.net-dt")();
require("datatables.net-select-dt")();
require("datatables.net-buttons-dt")();

But I'll check out your link to see what else is missing.

bhatijay

Seems I have required dependencies loaded. Anyone?

colin

I just tried it again, and yep, it's loading now. It also seem the code is working as expecting - the button is displaying details of the selected row - so I'm assuming the issue is fixed?

Colin

bhatijay

Hey @Colin, thanks for taking the time to get back. The issue I'm having is for one: 'Button' supposed to be disabled until a row is selected. But it's not the case. Second, I'm unable to use for example, 'extend: "selected"' and it throws an error, "Cannot extend unknown button type: selected".

Also this works (referring to row selection by class 'selected')...

action: function(e, dt, button, config) {
            const rowData = dt.row(".selected").data();
           .....
}

but not the following (This code just returns the first row, doesn't matter which row I select) ...

action: function(e, dt, button, config) {
            const rowData = dt.row({ selected: true }).data();
            ....
}

So something is not right with the setup. What am I doing wrong?. Thanks!

colin

Those will be related. As I mentioned above in my first reply, you need to include the Select extension library too, and enable it by setting select to true,

Colin