Hide initially a column even for important table's width

[fab-girard]

Hello,
I've a problem with "columnSelector-false" class attribute on tablesorter from Mottie's fork.

In my case, "columnSelector-false" seems not working (or I don't understand how it should work). In fact columns are hidden only if I add "data-priority" with a value AND table's width is smaller than max-width defined here : http://view.jquerymobile.com/1.3.2/dist/demos/widgets/table-column-toggle/ And in that case I don't need to add class="columnSelector-false".

I would think writing :

<th class="columnSelector-false">

was sufficient to hide initially a column but it is not the case.

Event on demo page : https://mottie.github.io/tablesorter/docs/example-widget-column-selector.html the sex column is not hidden by default if table's width is greater than 1120px. What I was expected to get is : if I add class="columnSelector-false" the column should be hidden by default, whatever the width of the table. On jsfiddle, the table's width is not important: the column are hidden thanks to "data-priority".

Regards, Fabien

[Herst]

Huh, what are you trying to achieving? Hiding it through jQueryMobile's Column Selector plugin or tablesorter's column selector widget? These two work quite differently and former might cause problems with tablesorter so I would advise against using it with tablesorter tables.

[Mottie]

Hi @fab-girard!

You're correct. Setting the column in the columnSelector_columns option to false will initialize the table with the column hidden, but by default the column selector initializes with "auto" mode enabled. To start out in manual mode, set the columnSelector_mediaqueryState option to false (demo)

$(function () {

    /*** custom css only button popup ***/
    $(".custom-popup").tablesorter({
        theme: 'blue',
        widgets: ['zebra', 'columnSelector'],
        widgetOptions: {
            // target the column selector markup
            columnSelector_container: $('#columnSelector'),
            // column status, true = display, false = hide
            // disable = do not display on list
            columnSelector_columns: {
                2: false /* start with Sex column hidden */
            },
            /* Responsive Media Query settings */
            // breakpoints checkbox initial setting
            columnSelector_mediaqueryState: false
        }
    });

});

[Mottie]

@Herst I do use data-priority attributes to emulate how jQuery mobile uses it... if there is interference, then you can change the data-attribute using the columnSelector_priority option (default is 'data-priority').

[fab-girard]

Hello,
thank you @Mottie
Your proposal works, but it's not exactly what I was expecting. In fact I thought it was possible to hide completely a column when 'auto' is initially selected in columns selector only with class="columnSelector-false" attribute.
What I understand from your answer : it is not possible to customize entirely default view when "auto" is the initial state of the column selector.

I think it would be interesting to hide always some columns initially in the table when 'auto' is selected in columnSelector and whatever the width of the table is.

Regards,
Fabien

[Mottie]

Then that would defeat the purpose of using "auto" which is using media queries to toggle column visibility...

Maybe set the desired column's priority to 7...

<th data-priority="7">Foo</th>

then it will be hidden first in narrow browser windows. You can also set the width at which priority 7 columns become hidden using the columnSelector_breakpoint options.

If you want a column to always be hidden, then add some css:

/* hide the 3rd column (one-based indexing) */
table tr th:nth-child(3),
table tr td:nth-child(3) {
  display: none;
}

[fab-girard]

Hello,
I agree, in one way I would like to customize an auto mode which is by definition "automatic" :)
But since data-priority value allows customization depending table's width, I would not be shocked to be able to hide a column in auto mode.

data-priority="7" seems not to be taken into account... even if I had a columnSelector_breakpoint options.

Modifying the css is not corresponding to what I expect : the column is always hidden and it is not possible to display it even with column selector and auto mode to off.

Thanks for your previous suggestion,
Fabien

[Mottie]

I guess it wouldn't hurt to initially hide selected columns. I'll look into it.

[webdo]

Hi, I don't know if its you are still planning to do it but this function would be very useful to me too!
I have a table with alot of columns that i want to be hidden by default (Those columns contain not vital information) and that prevent me from using the auto mode to scale for mobile devices :(

Thanks

[Mottie]

In the master branch, the columnSelector widget has been updated with a new option columnSelector_mediaqueryHidden (set to false by default).

When true, columns with a "columnSelector-false" class name on the header will now be hidden while "auto" mode is active.