Typescript & Button extensions

Vaielab

I'm trying to recreate a simple example for the button and typescript based on your examples but I always get typescript errors.

If I try

import DataTable from "datatables.net";
import 'datatables.net-buttons';
import 'datatables.net-buttons/js/buttons.html5';
import 'datatables.net-buttons/js/buttons.print';

new DataTable('#myTable', {
    layout: {
        topStart: {
            buttons: [
                'copy', 'excel', 'pdf'
            ]
        }
    }
});

I get the error: TS2353: Object literal may only specify known properties, and 'buttons' does not exist in type 'Feature | (keyof Feature)[] | Feature[]'.

And if I try to use top level button instead like so:

import DataTable from "datatables.net";
import 'datatables.net-buttons';
import 'datatables.net-buttons/js/buttons.html5';
import 'datatables.net-buttons/js/buttons.print';

new DataTable('#myTable',{
    buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
    layout: {
        topStart: 'buttons'
    }
});

I get TS2322: Type '"buttons"' is not assignable to type 'Feature | keyof Feature | (keyof Feature)[] | Feature[] | null | undefined'.

Am I doing something wrong, or the types are incompletes for buttons?

allan

or the types are incompletes for buttons?

This one I'm embarrassed to say. Sorry! I'm really surprised I didn't come across this one before. I'll get a fix out shortly and post back here with progress.

Allan

allan

Fix committed here. I'll get a release out in the next day or two with the fix.

Thanks,
Allan

Vaielab

Hello again,
Since we are talking about missing property in typescript, I might have found some other

In this example:

import DataTable from "datatables.net";
import 'datatables.net-buttons';
import 'datatables.net-buttons/js/buttons.html5';
import 'datatables.net-buttons/js/buttons.print';
 
new DataTable('#myTable',{
      layout: {

            topStart: [
                {
                    buttons: [{
                        extend: "collection",
                        align: "button-right",
                        background: false,
                        fade: 0,
                        className: "btnTableOption",
                        text: "Test collection",
                        buttons: [{
                            text: "test 01",
                            action: function(e, dt, node, config) {
                                alert('test 01');
                            }
                        }]
                    }]
                }
            ],
});

I get an error of type Object literal may only specify known properties, and '...' does not exist in type 'ButtonConfig' for align, background, fade, and buttons.
Based on https://datatables.net/reference/button/collection, thoses properties should be valid.

Also, in the function action: function(e, dt, node, config) all 4 parameters does not have types.

Thank you

allan

Hi,

Sorry I wasn't able to reply to this yesterday. I've just committed a rewrite of how the buttons are defined for Typescript which makes it more extensible for other extensions and more correct for Buttons itself.

I'll release the changes tomorrow.

Allan