Datatable 2.0.7 button in layout giving error

Asmita_Adh

new DataTable('#SpfxDatatable', {
      pageLength: 10,
      language: { "search": "Filter: " },
      retrieve: true,
      responsive: true,
      scrollCollapse: true,
      scrollY: '50vh',
      buttons: [{ text: 'Show all groups', action: function () { alert('Clicked'); }, className:'hideEmptyButton' }],
      layout: {
        topStart: {
          buttons: [
            'copy', 'excel', 'pdf'
          ]
        },
        topEnd: 'search',
        bottomStart: 'info',
        bottomEnd: 'paging'
}
    })

When i use DOM opttions all the features align left. When I try to use layouts, buttons is not available.
I am using it in a spfx solution with react and have imported all the necessary components.

import 'datatables.net-buttons-dt';
import 'datatables.net-dt/css/dataTables.dataTables.min.css';
import 'datatables.net-responsive-dt';
import DataTable from 'datatables.net-dt';

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Can you use StackBltiz or similar to create a test case showing the issue please?

Buttons does work at the basic level, so we'd need a way to debug your build environment.

Allan

Asmita_Adh

https://stackblitz.com/~/github.com/asmita-adh/Datatables_buttons?file=src/webparts/beheergroepen/components/Beheergroepen.tsx

Does it help? I have never used stackbltiz before so i hope this is what you were looking for.

allan

Thanks! Is there a command to serve the built page(s) so I can run it? There doesn't appear to be a npm run serve command or similar.

Allan

Asmita_Adh

@allan Well, normally with a spfx solution we work with "gulp serve" But when I try it, it doesn't seem to work in this environment. I tried to make it work, but i do not have a solution for it sadly. Is it a option for you to clone my git repo to reproduce the issue? Otherwise I feel like i'm trying to solve a problem (in stackblitz) that is maybe a overkill?

Thanks for looking into it.
For reference

allan

Yeah that would work fine. AllanJard is my github user name if you want to send me an inviation to it, or if it is open, just PM me the link.

Allan

Asmita_Adh

Hi @allan,
were you able to check my repo and reproduce the issue?

allan

Sorry for the delay. I've sent a PM back with a question.

Allan