Adobe Commerce 2.3 reached end of support in September 2022.

ColumnsControls component

The ColumnsControls component is a collection of columns. It provides an interface for showing and hiding columns. The interface contains:

  • The total number of all available columns in a grid.
  • The number of columns currently active/displayed.

Configuration options

Option Description Type Default Value
minVisible Minimum number of columns that must be visible. Number 1
maxVisible Maximum number of columns that can be visible. Number 30
template The path to the component’s .html template. String ui/grid/controls/columns

Source files

Extends uiCollection:

Example

Changing “minVisible” and “maxVisible” values in the javascript file.

To change attribute values, override the vendor JS file in a custom module:

/vendor/magento/module-ui/view/base/web/js/grid/controls/columns.js

Step one: override the javascript file

In /app/code/[VENDOR_NAME]/[MODULE_NAME]/view/base/requirejs-config.js, add the following:

1
2
3
4
5
6
7
var config = {
    map: {
        '*': {
            'Magento_Ui/js/grid/controls/columns':'VENDOR_NAME_MODULE_NAME/js/grid/controls/columns'
        }
    }
}

Step two: set the custom values

In /app/code/[VENDOR_NAME]/[MODULE_NAME]/view/base/web/js/grid/controls/columns.js, change the “minVisible” and “maxVisible” values as needed:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
return Collection.extend({
        defaults: {
            template: 'ui/grid/controls/columns',
            minVisible: 1,
            maxVisible: 4,
            viewportSize: 18,
            displayArea: 'dataGridActions',
            columnsProvider: 'ns = ${ $.ns }, componentType = columns',
            imports: {
                addColumns: '${ $.columnsProvider }:elems'
            },
            templates: {
                headerMsg: $t('${ $.visible } out of ${ $.total } visible')
            }
        }
    });

Result

ColumnsControls component example