load table with groups of columns hidden; toggle state with colvisGroup button?

louking

I have several columns which are summaries of other detail columns, e.g., col A, which is summary of cols Ax, Ay and col B which is summary of cols Bx, By, Bz.

I'd like the table to be displayed initially with the detail columns not shown, and buttons to show these columns. Once shown, I'd like the button behavior to change to allow the columns to be hidden.

Looking at colvisGroup, it appears the button will either show or hide a set of columns, but not toggle. Am I getting that right? Is there any way to force this to toggle?

1. Can you recommend the best way to do achieve what I'm trying to achieve?
2. Additionally, I think I can set the column classname to reference from colvisGroup button with columns.classname. But the docs read that I'm setting the classname of the cells in the column, not the column itself, so I'm not clear on that.
3. Finally, this would work best if I could place the button in the header of each of the columns which are the summary columns, e.g., with text "+" to expand, and toggles to "-" to contract. Is that possible?

As you may see I'm trying to emulate the excel grouping feature.

Any advice would be very helpful.

louking

Actually I made some progress on this after reverse engineering the Buttons colVis plugin some (that was hard to find, by the way).

See http://codepen.io/louking/pen/rMEMLy to see my progress.

I haven't yet figured out how to start with visibility : false. Also I need to debug why the margin disappears on the button the first time I change the text.

Finally, I'd really like to position a single button within the column header of the summary column, for several summary columns. Any guidance on that would be appreciated.

But I'll continue to hack away on this.

As always, thanks for all the work you have done, which saves me (and many others) much time.

louking

FWIW, based on this discussion, it seems like there is no way other than columns.visible to set the initial visibility.

Also, I figured out my text problem, needed to call button().text() rather than just operate on the button node directly.

And with more research I found columnToggle which will be sufficient for my needs.

See http://codepen.io/louking/pen/pEXRBv

Still, my ultimate would be to have a +/- button in the summary column header to toggle the detail columns visibility.

louking

As an alternative to -button columnToggle, I created a colvisToggleGroup button. This has the additional options noted below. I'm not sure the best way to submit this to your included plugins, but seems like it can be added to buttons.colvis.js. Also you may want to consider using visibile option technique for other colvis plugins.

• visible - boolean which indicates if the group is initially visible
• visibletext - text to show when columns are visible
• hiddentext - text to show when columns are hidden

// provide colvisToggleGroup plugin for Buttons

var DataTable = $.fn.dataTable;

function button_update( dt, button, conf ) {
    dt.columns( conf.columns ).visible( conf.visible, false );
    dt.columns.adjust();
    dt.draw();

    if (conf.visible) {
        dt.button(button).text( conf.visibletext );
    } else {
        dt.button(button).text( conf.hiddentext );  
    }
}

$.extend( DataTable.ext.buttons, {
    colvisToggleGroup: {
        className: 'buttons-colvisToggleGroup',

        init: function ( dt, button, conf ) {
            dt.on('init.dt', function(){
                button_update ( dt, button, conf )  
        });
    }, 
    
    action: function ( e, dt, button, conf ) {
        conf.visible = !conf.visible
        button_update ( dt, button, conf )       
        },

    visible: true,
    
    columns: [],
    
    visibletext: '',
    hiddentext: '',

    }
} );

allan

Hi,

Thanks very much for this - it looks very interesting and I can see how useful it would be for complex arrangements of columns.

Also you may want to consider using visibile option technique for other colvis plugins.

The default state should be defined by columns.visible, and the buttons base their state upon that.

Regards,
Allan

louking

Thanks. My problem with columns.visible is that this option, I think, operates on a single column. The colvisToggleGroup.visible option would operate on the set of columns related to this button.

Also if I'm configuring each column separately, with its own columns.visible, what state does the button assume initially?

In any case, to me it seems better to configure the visible option from the thing controlling it (the button in this case).

allan

It typically does, although you can use the columnDefs.targets option as an array and target multiple columns with it (or a string that will target columns with a common class).

Allan