Meteor-Community-Packages / Meteor-Community-Packages/meteor-tabular

Unable to integrating DataTables Extensions as per documentation

Open
#437 2 comments 1 reaction 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.