Export buttons error: Property 'buttons' does not exist on type 'ExtSettings'

Maido747

I have a datatable with two buttons excel and cs export.
Because of large amount of data the exporting process takes a bit of time I want to show a loadingSpinner when the button is clicked.
I read other questions and tried this:

ngOnInit(): void {
    //configuring the settings for the datatable
    this.createDataTable();
    $('#myDataTable').DataTable().on('buttons-processing', function ( e, indicator ){

      if(indicator){
        $('#exportSpinner').show();
      } else {
        $('#exportSpinner').hide();
      }

    });
  }

This unfortunately only shows the spinner when the export process started, this is a bit late because I want that to start spinning immediately when button is clicked.
Also that only works for the excel button and not the csv button, when clicking the csv export no spinner shows... don't know why.

So I came up with this:

buttons: {
        buttons: [
          { 
            extend: 'excel', 
            className: 'btn btn-outline-success mb-3',
          },
          { 
            extend: 'csv', 
            className: 'btn btn-outline-success mb-3 me-3',
            action: function(e, dt, button, config){
             //call the spinner here
              $.fn.dataTable.ext.buttons.csvHtml5.action.call(this, e, dt, button, config);
            }
          }
        ],
        dom: {
          button: {
            className: 'btn'
          }
        }
      },

Now I get this error:

Property 'buttons' does not exist on type 'ExtSettings'

Also there is no

excelHtml5.action.call()

excel action call if I want to use that, just "csvHTML5" and "collection"

I think I included all the scripts and files I need in my angular.json:

"styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css",
              "node_modules/datatables.net-bs5/css/dataTables.bootstrap5.min.css",
              "node_modules/datatables.net-buttons-dt/css/buttons.dataTables.css",
              "node_modules/datatables.net-fixedheader-bs5/css/fixedHeader.bootstrap5.min.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/datatables.net/js/jquery.dataTables.min.js",
              "node_modules/datatables.net-bs5/js/dataTables.bootstrap5.min.js",

              "node_modules/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js",

              "node_modules/jszip/dist/jszip.js",
              "node_modules/datatables.net-buttons/js/dataTables.buttons.js",
              "node_modules/datatables.net-buttons/js/buttons.colVis.js",
              "node_modules/datatables.net-buttons/js/buttons.flash.js",
              "node_modules/datatables.net-buttons/js/buttons.html5.js",
              "node_modules/datatables.net-buttons/js/buttons.print.js"
            ]

Can someone help?
Basically I want to show the exportSpinner when either of the buttons is clicked.
Immediatley when clicking the button and not just when the export process starts.

colin

As I mentioned in your other thread, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

p.s. and apologies for your multiple attempts to post, the spam filter caught the messages.