Meteor-Community-Packages / Meteor-Community-Packages/meteor-tabular
Unable to integrating DataTables Extensions as per documentation
- Dominant language
- JavaScript
- Stars
- 360
- Forks
- 132
- PR merge metrics
- No merged PRs in 30d
Description
Hello,
I have followed the instructions as mentioned in the Read Me regarding use of extensions with the tabular table. [link](https://github.com/longshotlabs/meteor-tabular#integrating-datatables-extensions). 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!
Contributor guide
Research direction
Start with the README section linked in the issue, then compare its DataTables Extensions setup with index.js and the table configuration in table.js. Verify the documented button integration and buttonContainer behavior, and consider the issue done when the requested buttons appear around the table and the container configuration is clear.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100