This project is deprecated. Use DevExtreme Vue instead.

Vue Grid - Column Visibility

The DxGrid component with the DxTableColumnVisibility and DxColumnChooser plugins provides the capability to hide or show table columns at runtime.

Basic Setup

Import the plugins listed above to enable a user to hide or show columns at runtime.

Pass the hidden column names to the DxTableColumnVisibility plugin’s hiddenColumnNames property and subscribe to the update:hiddenColumnNames event. Use the .sync modifier for two-way binding.

Disable Column Visibility Toggling

You can use the DxTableColumnVisibility plugin’s columnExtensions property to prevent changing to a specific column’s visibility.