ColVis with UIKit not working

ColVis with UIKit not working

ndcisivndcisiv Posts: 1Questions: 1Answers: 0

Link to test case: http://live.datatables.net/yuyafeto/1/edit?html,js,output
Debugger code (debug.datatables.net): None
Error messages shown: None
Description of problem: The ColVis button shows up as expected, but the individual column toggles do nothing when clicked. I've slimmed down the test case to as little as possible to show the problem. There is nothing displayed in the console, no errors on screen either, it just simply does nothing.

Answers

  • kthorngrenkthorngren Posts: 21,315Questions: 26Answers: 4,948
    edited May 2021

    Looks like the biggest problem is you are loading the Datatables CSS and JS with Bootstrap 3 styling: https://cdn.datatables.net/v/bs..... Changing to the default Datatables styles seems to help:
    http://live.datatables.net/yuyafeto/2/edit

    You can open the CDN link and in the file is a link to the Download builder with all the extensions you have selected. This allows for easy changes.

    Kevin

  • kthorngrenkthorngren Posts: 21,315Questions: 26Answers: 4,948

    I just looked at my example again and noticed there are two sets of sorting icons. There is a conflicting CSS. The concatenated CDN loads jquery.dataTables.min.css which isn't used with uikit integration. You will need to use the non-concatenated version so you can remove jquery.dataTables.min.css. For example:
    http://live.datatables.net/kedekigo/1/edit

    Kevin

This discussion has been closed.