DxTableColumnVisibility Plugin Reference

A plugin that manages Grid columns’ visibility.

Import

Use the following statement to import a plugin with embedded theme components:

import { DxTableColumnVisibility } from '@devexpress/dx-vue-grid-bootstrap4';

If you want to use custom components, you can import the themeless plugin:

import { DxTableColumnVisibility } from '@devexpress/dx-vue-grid';

Name	Type	Default	Description
hiddenColumnNames	Array<string>		Hidden column names.
columnTogglingEnabled?	boolean	true	Specifies whether an end-user can change column visibility.
columnExtensions?	Array<DxTableColumnVisibility.ColumnExtension>		Additional column properties that the plugin can handle.
emptyMessageComponent	DxTableColumnVisibility.DxEmptyMessage		A component that renders a message that is displayed when all columns are hidden.
messages?	DxTableColumnVisibility.LocalizationMessages		An object that specifies localization messages.

Describes additional column properties that the plugin can handle.

Field	Type	Description
columnName	string	The name of a column to extend.
togglingEnabled	boolean	Specifies whether an end-user can change column visibility.

Field	Type	Description
getMessage	(messageKey: string) => string	Returns the text displayed when all columns are hidden.

Field	Type	Default	Description
noColumns?	string	‘Nothing to show’	Specifies the text that is displayed when the plugin does not contain visible columns.

Name	Type	Description
DxTableColumnVisibility.components.DxEmptyMessage	DxTableColumnVisibility.DxEmptyMessage	A component that renders a message displayed when all columns are hidden.

Name	Plugin	Type	Description
tableColumns	Getter	Array<TableColumn>	Table columns.
table	Template	object?	A template that renders a table.

Name	Plugin	Type	Description
tableColumns	Getter	Array<TableColumn>	Visible table columns.
hiddenColumnNames	Getter	Array<string>	Hidden table column names.
isColumnTogglingEnabled	Getter	(columnName: string) => boolean	A function used to define if an end-user can change column visibility.
toggleColumnVisibility	Action	({ columnName: string }) => void	Toggles a column’s visibility.