# Columns Visibility

#### Columns Dropdown

If you would like to enable the user to control the columns' visibility set the `columnsDropdown` option to `true`. This will add a dropdown button to the left of the per-page control. The drop down will contain a list of the columns with checkboxes to toggle visibility.

#### Responsive Columns Display

The `columnsDisplay` option allows you control over columns visibility depending on window size.
 Columns will only be shown when the window width is within the defined limits.

It accepts key-value pairs of column name and device.
 Possible values are: 

* mobile (x < 480)
* mobileP (x < 320)&#x20;
* mobileL (320 <= x < 480)
* tablet (480 <= x < 1024)
* tabletP (480 <= x < 768)
* tabletL (768 <= x < 1024)
* desktop (1024 <= x < 1280)
* desktopLarge (1280 <= x < 1920)
* desktopHuge (x >= 1920)

&#x20;All options can be preceded by the logical operators `min`,`max`, and `not` followed by an underscore.

For example, a column which is set to `not_mobile` will be shown when the width of the window is greater than or equal to 480px, while a column set to `max_tabletP` will only be shown when the width is under 768px

This option can work in conjunction with the `columnsDropdown` option, so by default only visible columns will be checked in the dropdown list

{% hint style="info" %}
The `columnsDropdown` option can work in conjunction with `columnsDisplay`. The rule is that as long as the user hasn't toggled a column himself, the rules you have declared in `columnsDisplay` takes precedence. Once the user toggled a column, he is in charge of columns' visibility, and the settings of `columnsDisplay` are disregarded.
{% endhint %}