Unable to integrating DataTables Extensions as per documentation in aldeed:tabular

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!

1 Like

I followed the same thing and am able to see the buttons. copy,excel work, but clicking colvis doesn’t do anything. No popup displays.

Have you found anything? Thanks