Typescript & Button extensions

Typescript & Button extensions

VaielabVaielab Posts: 8Questions: 4Answers: 0

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?

This question has accepted answers - jump to:

Answers

  • allanallan Posts: 63,489Questions: 1Answers: 10,469 Site admin

    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

  • allanallan Posts: 63,489Questions: 1Answers: 10,469 Site admin
    Answer ✓

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

    Thanks,
    Allan

  • VaielabVaielab Posts: 8Questions: 4Answers: 0

    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

  • allanallan Posts: 63,489Questions: 1Answers: 10,469 Site admin
    Answer ✓

    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

Sign In or Register to comment.