Jquery Datatable Buttons Not Showing Up On React js

Question

I initialized Jquery Datatables in my react app and it works perfectly fine, except that the buttons aren't showing up. Here's my code:

I tried this at first and it works but it doesn't display the buttons.

import $ from 'jquery';
import JSZip from 'jszip';
window.JSZip = JSZip;

import 'datatables.net-bs4';
import 'datatables.net-responsive';
import 'datatables.net-buttons-bs4';
import 'datatables.net-buttons/js/buttons.colVis';
import 'datatables.net-buttons/js/buttons.html5';
import 'datatables.net-buttons/js/buttons.flash';
import 'datatables.net-buttons/js/buttons.print';

Next, I tried the code below as well, the error it throws didn't allow my react app to render. It complained about this Uncaught TypeError: Cannot set property '$' of undefined at DataTable

import $ from 'jquery';
const JSZip = require('jszip');
window.JSZip = JSZip;

require('datatables.net')();
require('datatables.net-responsive')();
require('datatables.net-buttons')();
require('datatables.net-buttons/js/buttons.colVis')();
require('datatables.net-buttons/js/buttons.html5')();
require('datatables.net-buttons/js/buttons.print')();

Finally, how I initialize my datatable:

var table = $('#dynamic_table').DataTable({
          'lengthChange': false,
          'buttons': [ 'copy', 'excel', 'pdf', 'colvis' ],
});
table.buttons().container().appendTo( '#dynamic_table_wrapper .col-md-6:eq(0)' );

I came across a similar question Datatables button through React App, but it didn't solve my problem. Without the buttons to export into excel the whole purpose of my using this plugin is defeated. Can I get a little help?

Answer 1

import $ from 'jquery';
import JSZip from 'jszip';
window.JSZip = JSZip;

import 'datatables.net-bs4';
import 'datatables.net-responsive';
import 'datatables.net-buttons-bs4';
import 'datatables.net-buttons/js/buttons.colVis';
import 'datatables.net-buttons/js/buttons.html5';
import 'datatables.net-buttons/js/buttons.flash';
import 'datatables.net-buttons/js/buttons.print';

After importing all my dependencies, it was as simple as adding

"dom": 'Bfrtip'

to my datatable initialization.

$("#dynamic_table").DataTable({
  "lengthChange": true,
  "dom": 'Bfrtip',
  "buttons": [
    'copyHtml5',
    'excelHtml5',
    'csvHtml5',
    'pdfHtml5'
  ]
});

I got rid of this line

table.buttons().container().appendTo( '#dynamic_table_wrapper .col-md-6:eq(0)' );