Customize ColVis menu layout (Bootstrap 4).

washuit-iamm

I have reviewed the ColVis button docs here https://datatables.net/reference/button/colvis

Outside of columnText, and columns I don't see an easy way to truly customize the menu.

Some examples of things id like to do:

• Sort the column text in the menu differently than the column order on the table
• Group some column buttons next to each other

I have 50+ columns on there so users are having to scroll to get to the bottom of the dropdown.

I tried to search the forums for an answer but you can image how muddied the results get with keywords like "ColVis Columns Button Extensions Sort Order Customize Dropdown"

washuit-iamm

Just stumbled on thishttps://datatables.net/release-datatables/examples/api/show_hide.html via https://datatables.net/forums/discussion/8129

I think that about answers it. Ill have to do a custom collection button id imagine. Id like to see the source code for the colvis button if possible

tangerine

See the documentation: https://datatables.net/reference/button/colvis

washuit-iamm

@tangerine thanks but if you read my post you would see the very first line is me mentioning this documentation.

I realize the forums are packed full of incredibly basic questions from people who do not or cant find the correct documentation.

colin

Hi @washuit-iamm ,

Yep, as you say, those customisations (columnText and columns) are the main places to customise the ColVis button. Bear in mind though you could just create groups with colvisGroup, see the example here, these don't have to be real groups, they could just be single columns reordered and retitled as you want.

Cheers,

Colin

washuit-iamm

@colin this is the solution I ended up with, although I am not super happy with it because its so global.

            initComplete: function (settings, json) {
                var table = this.api();            

                // Sort colvis menu
                if (table.button('.buttons-columnVisibility').length > 0) {

                    let $colVisButtonCollectionContainer = $(table.button('.buttons-columnVisibility').node()).parent();

                    $colVisButtonCollectionContainer.children('[data-cv-idx]')
                        .sort(function (a, b) {
                            return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
                        })
                        .appendTo($colVisButtonCollectionContainer);

                }
            }