Aldeed:tabular 2.1.1 missing styling?

help
1

After some unrelated updates to my project, my tabular tables have no styling on the “Show”, “Search” and Page buttons. Comparing against an older version of the project where the styling is working, the new version is missing some bootstrap columns. Also responsiveness is not working.

I have not modified the Tables.js (where tabular is defined), nor have I modified the table html.

However during some patching/updates I ran, aldeed:tabular was upgraded to 2.1.1. The previous version was 1.6.1.

I have since downgraded and see the styling working fine.

Anyone else seeing this? I checked aldeed’s tabular github and only found the responsiveness issue.

2

All the info is here - I’ve pasted it in here for you.

This example is for the Bootstrap theme. You can use another theme package. See https://datatables.net/download/npm

First:

$ npm install --save jquery@1.11.2 datatables.net-bs
Note that we install jquery@1.11.2. This needs to match the current version of jQuery included with Meteor’s jquery package. (See the version comment in https://github.com/meteor/meteor/blob/master/packages/jquery/package.js) Otherwise, due to the datatables.net package depending on jquery NPM package, it might automatically install the latest jquery version, which may conflict with Bootstrap or Meteor.

Then, somewhere in your client JavaScript:

import { $ } from ‘meteor/jquery’;
import dataTablesBootstrap from ‘datatables.net-bs’;
import ‘datatables.net-bs/css/dataTables.bootstrap.css’;
dataTablesBootstrap(window, $);

3

thank you @marklynch, I had seen that but glossed over the jquery version details. #readingcomprehension… I did try it just now but ended up getting “Cannot read property ‘Table’ of undefined” message. My Tables.js is located in my collections folder. Maybe it needs to be moved? I’ll play around with it some, but as mentioned this all works fine in 1.6.1.

4

You need to explicitly import the Tabular object now.

import Tabular from 'meteor/aldeed:tabular';
1 Like
5

That did it @marklynch ! Thank you!

One note that may be obvious to most, though I had to fail once to get it; the “import Tabular” statement needs to be in the js file where the tables are defined.