Backend API
<template>
<div>
<DxDataGrid
id="employees"
:data-source="employees"
:key-expr="'ID'"
:column-auto-width="true"
:show-row-lines="true"
:width="'100%'"
:show-borders="true"
>
<DxColumn
data-field="FirstName"
:allow-hiding="false"
/>
<DxColumn
data-field="LastName"
/>
<DxColumn
data-field="Position"
/>
<DxColumn
data-field="City"
/>
<DxColumn
data-field="State"
/>
<DxColumn caption="Contacts">
<DxColumn
data-field="MobilePhone"
:allow-hiding="false"
/>
<DxColumn
data-field="Email"
/>
<DxColumn
data-field="Skype"
:visible="false"
/>
</DxColumn>
<DxColumn
data-field="HireDate"
data-type="date"
/>
<DxColumnChooser
height="340px"
:enabled="true"
:mode="mode"
>
<DxPosition
my="right top"
at="right bottom"
of=".dx-datagrid-column-chooser-button"
/>
<DxColumnChooserSearch
:enabled="searchEnabled"
:editor-options="editorOptions"
/>
<DxColumnChooserSelection
:allow-select-all="allowSelectAll"
:select-by-click="selectByClick"
:recursive="recursive"
/>
</DxColumnChooser>
</DxDataGrid>
<div class="options">
<div class="caption">Options</div>
<div class="selectboxes-container">
<div class="option">
<span>Column chooser mode </span>
<DxSelectBox
:items="columnChooserModes"
v-model:value="mode"
:input-attr="{ 'aria-label': 'Column Chooser Mode' }"
value-expr="key"
display-expr="name"
/>
</div>
</div>
<div class="checkboxes-container">
<div class="option">
<DxCheckBox
v-model:value="searchEnabled"
text="Search enabled"
/>
</div>
<div class="option">
<DxCheckBox
v-model:value="allowSelectAll"
text="Allow select all"
:disabled="mode === 'dragAndDrop'"
/>
</div>
<div class="option">
<DxCheckBox
v-model:value="selectByClick"
text="Select by click"
:disabled="mode === 'dragAndDrop'"
/>
</div>
<div class="option">
<DxCheckBox
v-model:value="recursive"
text="Recursive"
:disabled="mode === 'dragAndDrop'"
/>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import {
DxDataGrid,
DxColumn,
DxColumnChooser,
DxColumnChooserSearch,
DxColumnChooserSelection,
DxPosition,
type DxDataGridTypes,
} from 'devextreme-vue/data-grid';
import { DxSelectBox } from 'devextreme-vue/select-box';
import { DxCheckBox } from 'devextreme-vue/check-box';
import { type DxTextBoxTypes } from 'devextreme-vue/text-box';
import { employees } from './data.ts';
const columnChooserModes = [{
key: 'dragAndDrop',
name: 'Drag and drop',
}, {
key: 'select',
name: 'Select',
}];
const mode = ref<DxDataGridTypes.ColumnChooserMode>('select');
const searchEnabled = ref(true);
const allowSelectAll = ref(true);
const selectByClick = ref(true);
const recursive = ref(true);
const editorOptions: DxTextBoxTypes.Properties = { placeholder: 'Search column' };
</script>
<style>
#employees {
max-height: 440px;
}
.options {
padding: 20px;
margin-top: 20px;
background-color: rgba(191, 191, 191, 0.15);
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option {
margin-top: 10px;
}
.option > span {
margin-right: 10px;
}
.option > .dx-selectbox {
display: inline-block;
vertical-align: middle;
}
.selectbox-container {
display: flex;
}
.checkboxes-container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
margin-top: 15px;
}
.checkboxes-container > .option {
margin: 10px 30px 10px 0;
width: 200px;
}
</style>
export type Employee = {
ID: number;
FirstName: string;
LastName: string;
Position: string;
BirthDate: string;
HireDate: string;
Title: string;
Address: string;
City: string;
State: string;
Zipcode: number;
Email: string;
Skype: string;
HomePhone: string;
DepartmentID: number;
MobilePhone: string;
};
export const employees: Employee[] = [{
ID: 1,
FirstName: 'John',
LastName: 'Heart',
Position: 'CEO',
BirthDate: '1964/03/16',
HireDate: '1995/01/15',
Title: 'Mr.',
Address: '351 S Hill St.',
City: 'Los Angeles',
State: 'California',
Zipcode: 90013,
Email: 'jheart@dx-email.com',
Skype: 'jheartDXskype',
HomePhone: '(213) 555-9208',
DepartmentID: 6,
MobilePhone: '(213) 555-9392',
}, {
ID: 2,
FirstName: 'Olivia',
LastName: 'Peyton',
Position: 'Sales Assistant',
BirthDate: '1981/06/03',
HireDate: '2012/05/14',
Title: 'Mrs.',
Address: '807 W Paseo Del Mar',
City: 'Los Angeles',
State: 'California',
Zipcode: 90036,
Email: 'oliviap@dx-email.com',
Skype: 'oliviapDXskype',
HomePhone: '(310) 555-2728',
DepartmentID: 5,
MobilePhone: '(818) 555-2387',
}, {
ID: 3,
FirstName: 'Robert',
LastName: 'Reagan',
Position: 'CMO',
BirthDate: '1974/09/07',
HireDate: '2002/11/08',
Title: 'Mr.',
Address: '4 Westmoreland Pl.',
City: 'Bentonville',
State: 'Arkansas',
Zipcode: 91103,
Email: 'robertr@dx-email.com',
Skype: 'robertrDXskype',
HomePhone: '(818) 555-2438',
DepartmentID: 6,
MobilePhone: '(818) 555-2387',
}, {
ID: 4,
FirstName: 'Greta',
LastName: 'Sims',
Position: 'HR Manager',
BirthDate: '1977/11/22',
HireDate: '1998/04/23',
Title: 'Ms.',
Address: '1700 S Grandview Dr.',
State: 'Georgia',
City: 'Atlanta',
Zipcode: 91803,
Email: 'gretas@dx-email.com',
Skype: 'gretasDXskype',
HomePhone: '(818) 555-0976',
DepartmentID: 5,
MobilePhone: '(818) 555-6546',
}, {
ID: 5,
FirstName: 'Brett',
LastName: 'Wade',
Position: 'IT Manager',
BirthDate: '1968/12/01',
HireDate: '2009/03/06',
Title: 'Mr.',
Address: '1120 Old Mill Rd.',
State: 'Idaho',
City: 'Boise',
Zipcode: 91108,
Email: 'brettw@dx-email.com',
Skype: 'brettwDXskype',
HomePhone: '(626) 555-5985',
DepartmentID: 7,
MobilePhone: '(626) 555-0358',
}, {
ID: 6,
FirstName: 'Sandra',
LastName: 'Johnson',
Position: 'Controller',
BirthDate: '1974/11/15',
HireDate: '2005/05/11',
Title: 'Mrs.',
Address: '4600 N Virginia Rd.',
State: 'Utah',
City: 'Beaver',
Zipcode: 90807,
Email: 'sandraj@dx-email.com',
Skype: 'sandrajDXskype',
HomePhone: '(562) 555-8272',
DepartmentID: 5,
MobilePhone: '(562) 555-2082',
}, {
ID: 7,
FirstName: 'Kevin',
LastName: 'Carter',
Position: 'Shipping Manager',
BirthDate: '1978/01/09',
HireDate: '2009/08/11',
Title: 'Mr.',
Address: '424 N Main St.',
State: 'California',
City: 'San Diego',
Zipcode: 90012,
Email: 'kevinc@dx-email.com',
Skype: 'kevincDXskype',
HomePhone: '(213) 555-8038',
DepartmentID: 3,
MobilePhone: '(213) 555-2840',
}, {
ID: 8,
FirstName: 'Cynthia',
LastName: 'Stanwick',
Position: 'HR Assistant',
BirthDate: '1985/06/05',
HireDate: '2008/03/24',
Title: 'Ms.',
Address: '2211 Bonita Dr.',
City: 'Little Rock',
State: 'Arkansas',
Zipcode: 90265,
Email: 'cindys@dx-email.com',
Skype: 'cindysDXskype',
HomePhone: '(818) 555-6808',
DepartmentID: 4,
MobilePhone: '(818) 555-6655',
}, {
ID: 9,
FirstName: 'Kent',
LastName: 'Samuelson',
Position: 'Ombudsman',
BirthDate: '1972/09/11',
HireDate: '2009/04/22',
Title: 'Dr.',
Address: '12100 Mora Dr',
City: 'St. Louis',
State: 'Missouri',
Zipcode: 90272,
Email: 'kents@dx-email.com',
Skype: 'kentsDXskype',
HomePhone: '(562) 555-1328',
DepartmentID: 26,
MobilePhone: '(562) 555-9282',
}, {
ID: 10,
FirstName: 'Taylor',
LastName: 'Riley',
Position: 'Network Admin',
BirthDate: '1982/08/14',
HireDate: '2012/04/14',
Title: 'Mr.',
Address: '7776 Torreyson Dr',
City: 'San Jose',
State: 'California',
Zipcode: 90012,
Email: 'taylorr@dx-email.com',
Skype: 'taylorrDXskype',
HomePhone: '(310) 555-9712',
DepartmentID: 5,
MobilePhone: '(310) 555-7276',
}];
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
<!DOCTYPE html>
<html lang="en">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="./bundle.css" />
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"> </div>
</div>
<script src="bundles/vendor/vue.vendor.js"></script>
<script src="./bundle.js"></script>
</body>
</html>
To display the column chooser, click the appropriate toolbar button above the DataGrid. You can specify the column chooser's position via the columnChooser.position property. The manner in which users can display/hide columns depends on columnChooser.mode:
-
"dragAndDrop"
Users can drag and drop column headers to and from the column chooser. -
"select"
Users can select and deselect check boxes with column names.
In "select" mode, you can choose whether parent element selection affects child/nested elements. Use the selection.recursive property for this purpose.
If the column chooser contains multiple hidden columns, you can enable the DevExtreme Grid’s column search UI. Assign true to the search.enabled property for this purpose.
In this demo, use the check boxes below the DataGrid to toggle search and selection features.
To hide a column in code, set the columns[].visible property to false.