Working TypeScript example with current Editor + DataTable?

kylecordes

Is anyone aware of a working TypeScript example with the current Editor and current DataTable?

I'm installing from npm, which is of course the normal natural way to do this in a TypeScript application.

https://editor.datatables.net/manual/installing/

I'm running, as of a few days ago, the most current version of each relevant package:

    "@datatables.net/editor-dt": "^2.4.2",
    "datatables.net-dt": "^2.3.2",
    "datatables.net-react": "^1.0.1",

And I'm starting with just the tiniest bit of code, roughly this:

import DataTable from 'datatables.net-react';
import DataTablesCore from 'datatables.net-dt';
import Editor from '@datatables.net/editor-dt';

DataTable.use(DataTablesCore);

The last line results in a bevy of TypeScript errors. The errors go away if commenting out the line that imports the editor. This is because the editor is bringing in a different set of TypeScript definitions, causing that last line, which doesn't even mention editor, to become broken.

An actual working example with TypeScript, Editor, and Data Table would resolve the question of whether this is possible and what combinations of versions, etc., are needed to make it work.

allan

I would have expected that to work. I'll put something together to check what is happening and get back to you.

Allan

allan

I've just tried this and haven't been able to recreate any Typescript errors I'm afraid. Here's what I did:

1) Go to the Editor download page and add the private repository information to my ~/.npmrc file.

2) Created a new npm project and install the related software:

mkdir editor
cd editor
npm install -y
npm install typescript datatables.net-react datatables.net-dt @datatables.net/editor-dt

3) Create index.ts with:

import DataTable from 'datatables.net-react';
import DataTablesCore from 'datatables.net-dt';
import Editor from '@datatables.net/editor-dt';
 
DataTable.use(DataTablesCore);

new Editor({
    table: '#myTable'
});

new DataTablesCore('#myTable', {
    info: false
});

I've added the two initialisations just to check the Typescript types where what I expected.

With that file open in VS Code I'm getting no warnings or errors about types. All the type completion information etc is showing up as expected for the parameters and objects.

So there must be something different in your project that I've missed. Are you able to walk me through similar steps to create the issue, or provide a git repo that shows the problem?

Thanks,
Allan

kylecordes

Thank you, I followed your process and got up and running. I had somehow ended up with a corrupt package cache (!) Resolved by purging it.

(Would be great if there was a published example of DT + Editor in TS with some common features in use. I realize that might be a pretty small percent of the datatables customer base, and there is never enough time to do every good idea!)

allan

I don't have any numbers to back it up, but I'd be surprised if Typescript use wasn't a very large fraction, perhaps the majority. I use it myself all the time and that's why I was reasonably sure what you had posted would work.

What form would you like the published example to be? An extra download option for each of the five current download packages, or something else? Perhaps Generator could have a TS target, but then I'd need to consider the use of Vite, ESBuild, Webpack, etc as well. It has a lot of depth for what appears to be a fairly simple request .

Allan

hodoninska

These examples don't work for me but I'm not using either npm or react.

I struggled to get the main DataTables library working with TypeScript. With version 1.10.19 of DataTables I was able to use libman and jsdelivr to download a version of index.d.ts that worked just fine with my code, but when I upgraded to version 2.3.3 I couldn't find a usable copy of index.d.ts anywhere.

I download the DataTables js and css files from the main download page and eventually found that if I downloaded types.d.ts from github (https://github.com/DataTables/DataTablesSrc/blob/master/types/types.d.ts) then renamed it to index.d.ts and fiddled around with some of the definitions I could get my TypeScript code to recognise all of the DataTables classes that I needed. That never felt like the right thing to do but I ran out of time and was glad to have something working.

I'm now in a similar position with the Editor as I would like to be able to integrate that into my TypeScript code and have all of the type definitions available to me. Do I need to craft my own index.d.ts somehow or does this already exist somewhere?

allan

The datatables.net npm package has the types available. This is the specific file and is pointed to by the types parameter in the package.json file. Your editor and bundler should pick it up automatically. If you editor is only accepting index.d.ts for type files, it sounds like it is misconfigured to me.

Here is a trivial example that uses Typescript and you'll see the the interface for the package is typed without messing around with any other files.

Editor (and all the other extensions for DataTables) are the same - they all ship with typings and they will be automatically detected through the types parameter from package.json.

Perhaps worth me adding here that I'm in the process of porting DataTables and all of the extensions to Typescript at the moment. That will help provide stronger typing in future .

Allan