Working TypeScript example with current Editor + DataTable?

Working TypeScript example with current Editor + DataTable?

kylecordeskylecordes Posts: 2Questions: 0Answers: 0

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.

Replies

  • allanallan Posts: 64,593Questions: 1Answers: 10,683 Site admin

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

    Allan

  • allanallan Posts: 64,593Questions: 1Answers: 10,683 Site admin

    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

  • kylecordeskylecordes Posts: 2Questions: 0Answers: 0

    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!)

  • allanallan Posts: 64,593Questions: 1Answers: 10,683 Site admin

    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

Sign In or Register to comment.