How to use $.fn.dataTableExt with TypeScript

farber72

Here a working Javascript code: https://jsfiddle.net/afarber/asjuvqdz/

When I try to port it to TypeScript then I get the error in VS Code (for the $.fn.dataTableExt.afnFiltering.push line):

Property 'dataTableExt' does not exist on type 'JQuery'

I have tried to create a test case here at StackBlitz: https://stackblitz.com/edit/typescript-datatables

Thank you for any insights and greetings from Germany

allan

Don't - instead use $.fn.dataTable.ext. It is the same object with typings on it.

$.fn.dataTable.ext.search specifically is the property you want. See the manual.

Allan

farber72

Thank you, Allan, using $.fn.dataTable.ext.search.push() has helped.

Would you also have a hint, why is TypeScript unhappy with renderAvgData call below?

  $('#topTable tbody').on('click', 'td.details-control', function() {
    var span = $(this).find('span').first();
    var tr = $(this).closest('tr');
    var row = topTable.row(tr);

    if (row.child.isShown()) {
      row.child.hide();
      span.html('▹');
    } else {
      row.child(renderAvgData(row.data())).show();
      span.html('▿');
    }
  });

The TypeScript error is

    No overload matches this call.
      Overload 1 of 3, '(showRemove: boolean): Api<any> | RowChildMethods<any>', gave the following error.
        Argument of type 'void' is not assignable to parameter of type 'boolean'.
      Overload 2 of 3, '(data: string | Node | JQuery<HTMLElement> | (string | number | JQuery<HTMLElement>)[], className?: string | undefined): Api<...> | RowChildMethods<...>', gave the following error.
        Argument of type 'void' is not assignable to parameter of type 'string | Node | JQuery<HTMLElement> | (string | number | JQuery<HTMLElement>)[]'.

allan

What is the signature of the renderAvgData method and what does it return?

Allan

farber72

It is:

function renderAvgData(data: { avg_score: string; avg_time: string }): string {
  return (
    '<TABLE WIDTH=100%>' +
    '<TR><TH>Average score: ' +
    data.avg_score +
    '</TH></TR>' +
    '<TR><TH>Average time: ' +
    data.avg_time +
    '</TH></TR></TABLE>'
  );
}

and it is called:

  $('#topTable tbody').on('click', 'td.details-control', function () {
    var span = $(this).find('span').first();
    var tr = $(this).closest('tr');
    var row = topTable.row(tr);

    if (row.child.isShown()) {
      row.child.hide();
      span.html('▹');
    } else {
      row.child(renderAvgData(row.data())).show(); // ERROR
      span.html('▿');
    }
  });

allan

I'm not sure why it is giving that error to be honest! The void seems to suggest that the function is returning void, which it obviously isn't.

I think it will be a case of trying to narrow it down. For example if you did:

row.child('ABC').show();

does that give an error?

Allan

farber72

Great idea! Sorry, that I am too newbie to come up with that myself. The error for row.child('ABC').show(); is now:

Property 'show' does not exist on type 'Api<any> | RowChildMethods<any>'.
Property 'show' does not exist on type 'Api<any>'.

allan

That looks rather like an error on my list in that case! I'll investigate on Monday. Just to check, you are using the current release (1.13.4)?

Allan

farber72

Yes, I have the line "datatables.net-dt": "^1.13.4", in the package.json file:

allan

Yup, 100% my error. Apologies for that. I've committed a fix and the plan is for 1.13.5 to drop tomorrow, which will include that fix.

Allan

farber72

Thank you Allan, I will try it out!

Do you develop the Datatables plugin in Typescript?

I am asking, because I have just finished a Udemy course on Typescript

Or are you planning to switch to it in future? I am in no way "preaching" and am asking out of pure curiosity.

allan

Do you develop the Datatables plugin in Typescript?

No - it is plain Javascript with an ES3 target. If I were starting it over, then yes, I'd write it in Typescript (DataTables was started long before Typescript existed). Our newer extensions are all Typescript, CloudTables is as well and also Editor.

Moving DataTables core to Typescript is something I'd like to do, but it would be a large effort and there are other things I want to do first. Some day...

Allan

farber72

I have noticed, that the both links shown in the screenshot below (to the doc and the commit) at https://cdn.datatables.net/1.13.5/#Fixes do not work:

Possibly a known issue?

allan

Doh - I had a typo in the function name - it should be row().child().show().

There is also a typo in the URL. This is the correct commit.

I've got them updated in the notes locally and will deploy shortly.

Thanks,
Allan

farber72

Allan, I have changed the line in packages.json to:

"datatables.net-dt": "^1.13.5",

and then run "npm ci" and "npx tsc"... but the error message is unchanged for me:

    Property 'show' does not exist on type 'Api<any> | RowChildMethods<any>'.
      Property 'show' does not exist on type 'Api<any>'.ts(2339)

Hopefully I am not doing something obviously stupid, being a Typescript and VS Code and npm newbie. But I tried changing the line to the (non existing) 1.13.6 and then get the expected error message:

No matching version found for datatables.net-dt@^1.13.6.

Then I change the line back to 1.13.5 - and the ".show()" related error is back in VS Code.

allan

I've just tried it in the Typescript playground (example code) and it appears to work okay there.

After doing an npm install on the 1.13.5 version of DataTables, perhaps you might have needed to reload the VSCode window for it to have picked up the new typing?

Allan

farber72

I have finally realized, that "datatable.net-dt" is just the data types. And in my package.json the actual "datatable.net" was missing.

So I have added both to my package.json:

{
  "dependencies": {
    "@pixi/ui": "^0.7.3",
    "@tweenjs/tween.js": "^21.0.0",
    "chart.js": "^4.3.0",
    "datatables.net": "^1.13.5",
    "jquery": "^3.7.0",
    "leaflet": "^1.9.4",
    "pixi.js-legacy": "^7.2.4"
  },
  "devDependencies": {
    "datatables.net-dt": "^1.13.5",
    "@types/chart.js": "^2.9.37",
    "@types/css-font-loading-module": "^0.0.8",
    "@types/jquery": "^3.5.16",
    "@types/leaflet": "^1.9.3",
    "@types/node": "^20.3.1",
    "@types/tweenjs": "^1.0.4",
    "typescript": "^5.1.3"
  }
}

And after that I have executed:

npm cache clear --force
npm install
npm clean-install

and finally the VS Code was no more showing the ".show()" error.

Thank you!

allan

datatable.net is a dependency of datatables.net-dt. The -dt package is largely redundant, but it is available to match the styling integrations such as Bootstrap 5 (datatables.net-bs5).

Anyway, good to hear you've got it working now - phew!

Allan