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!