DataTable Button Collection

zgoforth

Hello, I have created a simple DataTable to replace a SharePoint list on a certain subsite. I have another much bigger DataTable on another landing page, and it has a button collection that drops down perfectly. This other datatable on the other hand looks like this. How do I fix it?

Here is my JS:

$(document).ready(function() {
    
  $('#myTable').DataTable( {
    "columns": [
      { "data": "Program" },
      { "data": "Deliverable" },
      { "data": "To" },
      { "data": "Date" },
      { "data": "Approved" },
      { "data": "Notes" }
    ],
    dom: 'Bfrtip',
    buttons: [{
                extend: 'collection',
                className: "btn-dark",
                text: 'Export',
                buttons: [{
                        extend: "excel",
                        className: "btn-dark"
                    },
                    {
                        extend: "pdf",
                        className: "btn-dark"
                    },
                    {
                        extend: "print",
                        className: "btn-dark"
                    },
                ],
            }]
  } );
    
 loadData();
    
} );

kthorngren

That is a styling issue. Make sure you downloaded all the correct files via the Download Builder.

Styling issues are almost impossible to diagnose without seeing them. If you still need help please post a link to your page or a running test case showing the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin