Unable to integrating DataTables Extensions as per documentation

[bluefangs]

Hello,

I have followed the instructions as mentioned in the Read Me regarding use of extensions with the tabular table. link. However, doing so does not get me the extra set of buttons on my table. I was wondering if I was doing something wrong. If someone could guide me with this issue, it would be most helpful!

index.js

import dataTablesBootstrap from "datatables.net-bs4/js/dataTables.bootstrap4.js";
import "datatables.net-bs4/css/dataTables.bootstrap4.css";
dataTablesBootstrap(window, $);

// BUTTONS DATATABLES

import dataTableButtons from "datatables.net-buttons-bs4";
// Import whichever buttons you are using
import columnVisibilityButton from "datatables.net-buttons/js/buttons.colVis.js";
import html5ExportButtons from "datatables.net-buttons/js/buttons.html5.js";
import flashExportButtons from "datatables.net-buttons/js/buttons.flash.js";
import printButton from "datatables.net-buttons/js/buttons.print.js";

// Then initialize everything you imported
dataTableButtons(window, $);
columnVisibilityButton(window, $);
html5ExportButtons(window, $);
flashExportButtons(window, $);
printButton(window, $);

table.js

import Tabular from "meteor/aldeed:tabular";
// import { Template } from 'meteor/templating';

new Tabular.Table({
    name: "listUsersTable",
    collection: Meteor.users,
    autoWidth: false,
    order: [
        [0, "asc"],
        // [1, "desc"],
    ],

    // results dropdown
    lengthMenu: [
        [10, 25, 50, 100], // value
        [10, 25, 50, 100], // label
    ],
    // other properties...
    buttonContainer: ".col-sm-6:eq(0)",
    buttons: ["copy", "excel", "csv", "colvis"],
    throttleRefresh: 5000, // throttle the reactivity
    search: {
        caseInsensitive: true,
        smart: true,
        onEnterOnly: true,
    },
    responsive: true,
   
    columns: [
        {
            data: "username",
            title: "Username",
            width: "20%",
            autoWidth: false,
        },

        {
            title: "Profile",
            bSortable: false,
            width: "40%",
            tmpl: Meteor.isClient && Template.edit_user_links,
            tmplContext(rowData) {
                return {
                    item: rowData,
                    column: "profile",
                };
            },
        },
// other columns 
]
});

I am unable to view the "copy", "excel", "csv", "colvis" buttons anywhere around my table. In addition to this, I would like to know the role of "buttonContainer: ".col-sm-6:eq(0)", Am I supposed to declare a div with that class?

Thanks!

[smohantyCME]

Any updates on this? I'm able to see my buttons and the copy,csv ones work. However, pressing colvis doesn't do anything

[guncebektas]

same for me