CODEWITHSUNDEEP
javascriptjquerydatatables
magic_turtle
magic_turtle

Reputation: 1333

datatables column visibility plugin does not hide buttons

I am using column visibility extension of datatables in React.js. datatables, extensions and jQuery are of newest versions. When I click on Show Hide button, it doesn't bring the shadow overlay to screen and just loads the popover with a list of columns. When I then click on the column I want to hide, the column gets hidden. However, when I do an off-click to close the popover, it remains. I included all the libraries and css required by Download Packages manager on datatables website.

import 'jquery';
import 'datatables.net-dt';


import * as jsZip from 'jszip';
import * as pdfMake from 'pdfmake/build/pdfmake';
import * as pdfFonts from 'pdfmake/build/vfs_fonts';
import 'datatables.net-buttons-dt';
import 'datatables.net-buttons/js/buttons.colVis.js';
import 'datatables.net-buttons/js/buttons.flash.js';
import 'datatables.net-buttons/js/buttons.html5.js';
import 'datatables.net-buttons/js/buttons.print.js';
import 'datatables.net-colreorder-dt';
import 'datatables.net-fixedcolumns-dt';
import 'datatables.net-responsive-dt';
import 'datatables.net-scroller-dt';

window.JSZip = jsZip;
window.PdfPrinter = pdfMake;
pdfMake.vfs = pdfFonts.pdfMake.vfs;

So, this column visibility example does not work for me.

I can see in the code that when I click on the button, a div with .dt-button-background class appends to the dom and hides when I off-click, but the UI persists.

UPD

I made a workaround using buttons-action event method. I added a wrapper to my button, which dynamically gets the css class that sets visibility to none or to block depending on user click. I am still looking for a proper fix.

Upvotes: 0

Views: 953

Answers (1)

magic_turtle
magic_turtle

Reputation: 1333

Was able to solve the above issue by checking the paths in my node_modules and altering it to match. Originally I used paths for my import defined in docs in Download Packages Manager. Apparently these paths differ from my folders' structure, though the versions of libraries are the same between my project and the docs (unless I'm mistaking). So, I had to change 

import 'datatables.net-buttons/js/buttons.colVis.js';

to

import 'datatables.net-buttons-dt/node_modules/datatables.net-buttons/js/buttons.colVis.js';

Note the dt thingy at the end of -buttons.

Workaround is no longer required.

I also had to manually import css for datatables.net-buttons-dt as import 'datatables.net-buttons-dt/css/buttons.dataTables.css';.

Now the overlay screen is loading and buttons are showing/hiding appropriately.

By the way, ColVis extension got deprecated, so if you are using drmonty-datatables-colvis library, you should better replace it with the new Buttons library.

As from their website:

This extension has now been retired and replaced with the column visibility module for Buttons. The documentation is retained for legacy reference only. New projects should use Buttons in preference to ColVis.

Upvotes: 0

Related Questions