Your search did not match any results.
Tree List

Column Chooser

If you want users to change column visibility at runtime, enable the Column Chooser. Set the columnChooser.enabled property to true. Note that you can make sure that certain columns always stay visible. To do so, set the columns[].allowHiding property to false.

To open the column chooser, users should click the button in the toolbar above the TreeList. The way users show and hide columns depends on the columnChooser.mode:

  • "dragAndDrop"
    Users drag and drop column headers to and from the column chooser.

  • "select"
    Users select and deselect checkboxes with column names.

If the allowSearch property is set to true, users can search through column names. In this demo, use the checkbox below the TreeList to toggle this feature.

To hide a column in code, set the columns[].visible property to false.

Backend API
Copy to CodeSandBox
Apply
Reset
<template> <div> <DxTreeList id="employees" :data-source="employees" :column-auto-width="true" :show-row-lines="true" :show-borders="true" :expanded-row-keys="expandedRowKeys" key-expr="ID" parent-id-expr="Head_ID" > <DxColumn data-field="Title" caption="Position" /> <DxColumn :allow-hiding="false" data-field="Full_Name" /> <DxColumn data-field="City" /> <DxColumn data-field="State" /> <DxColumn data-field="Mobile_Phone" /> <DxColumn :visible="false" data-field="Email" /> <DxColumn data-field="Hire_Date" data-type="date" /> <DxColumn :visible="false" data-field="Skype" /> <DxColumnChooser :enabled="true" :allow-search="allowSearch" :mode="mode" /> </DxTreeList> <div class="options"> <div class="caption">Options</div> <div class="option"> <span>Column chooser mode </span> <DxSelectBox :items="columnChooserModes" v-model:value="mode" value-expr="key" display-expr="name" /> </div> <div class="option"> <DxCheckBox v-model:value="allowSearch" text="Allow search" /> </div> </div> </div> </template> <script> import { employees } from './data.js'; import { DxTreeList, DxColumn, DxColumnChooser } from 'devextreme-vue/tree-list'; import { DxSelectBox } from 'devextreme-vue/select-box'; import { DxCheckBox } from 'devextreme-vue/check-box'; export default { components: { DxTreeList, DxColumn, DxColumnChooser, DxSelectBox, DxCheckBox }, data() { return { employees: employees, columnChooserModes: [{ key: 'dragAndDrop', name: 'Drag and drop' }, { key: 'select', name: 'Select' }], mode: 'dragAndDrop', allowSearch: true, expandedRowKeys: [1] }; } }; </script> <style scoped> #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; } </style>
import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');
<!DOCTYPE html> <html> <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=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.5/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.5/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </body> </html>
export const employees = [{ 'ID': 1, 'Head_ID': 0, 'Full_Name': 'John Heart', 'Prefix': 'Mr.', 'Title': 'CEO', 'City': 'Los Angeles', 'State': 'California', 'Email': 'jheart@dx-email.com', 'Skype': 'jheart_DX_skype', 'Mobile_Phone': '(213) 555-9392', 'Birth_Date': '1964-03-16', 'Hire_Date': '1995-01-15' }, { 'ID': 2, 'Head_ID': 1, 'Full_Name': 'Samantha Bright', 'Prefix': 'Dr.', 'Title': 'COO', 'City': 'Los Angeles', 'State': 'California', 'Email': 'samanthab@dx-email.com', 'Skype': 'samanthab_DX_skype', 'Mobile_Phone': '(213) 555-2858', 'Birth_Date': '1966-05-02', 'Hire_Date': '2004-05-24' }, { 'ID': 3, 'Head_ID': 1, 'Full_Name': 'Arthur Miller', 'Prefix': 'Mr.', 'Title': 'CTO', 'City': 'Denver', 'State': 'Colorado', 'Email': 'arthurm@dx-email.com', 'Skype': 'arthurm_DX_skype', 'Mobile_Phone': '(310) 555-8583', 'Birth_Date': '1972-07-11', 'Hire_Date': '2007-12-18' }, { 'ID': 4, 'Head_ID': 1, 'Full_Name': 'Robert Reagan', 'Prefix': 'Mr.', 'Title': 'CMO', 'City': 'Bentonville', 'State': 'Arkansas', 'Email': 'robertr@dx-email.com', 'Skype': 'robertr_DX_skype', 'Mobile_Phone': '(818) 555-2387', 'Birth_Date': '1974-09-07', 'Hire_Date': '2002-11-08' }, { 'ID': 5, 'Head_ID': 1, 'Full_Name': 'Greta Sims', 'Prefix': 'Ms.', 'Title': 'HR Manager', 'City': 'Atlanta', 'State': 'Georgia', 'Email': 'gretas@dx-email.com', 'Skype': 'gretas_DX_skype', 'Mobile_Phone': '(818) 555-6546', 'Birth_Date': '1977-11-22', 'Hire_Date': '1998-04-23' }, { 'ID': 6, 'Head_ID': 3, 'Full_Name': 'Brett Wade', 'Prefix': 'Mr.', 'Title': 'IT Manager', 'City': 'Reno', 'State': 'Nevada', 'Email': 'brettw@dx-email.com', 'Skype': 'brettw_DX_skype', 'Mobile_Phone': '(626) 555-0358', 'Birth_Date': '1968-12-01', 'Hire_Date': '2009-03-06' }, { 'ID': 7, 'Head_ID': 5, 'Full_Name': 'Sandra Johnson', 'Prefix': 'Mrs.', 'Title': 'Controller', 'City': 'Beaver', 'State': 'Utah', 'Email': 'sandraj@dx-email.com', 'Skype': 'sandraj_DX_skype', 'Mobile_Phone': '(562) 555-2082', 'Birth_Date': '1974-11-15', 'Hire_Date': '2005-05-11' }, { 'ID': 8, 'Head_ID': 4, 'Full_Name': 'Ed Holmes', 'Prefix': 'Dr.', 'Title': 'Sales Manager', 'City': 'Malibu', 'State': 'California', 'Email': 'edwardh@dx-email.com', 'Skype': 'edwardh_DX_skype', 'Mobile_Phone': '(310) 555-1288', 'Birth_Date': '1973-07-14', 'Hire_Date': '2005-06-19' }, { 'ID': 9, 'Head_ID': 3, 'Full_Name': 'Barb Banks', 'Prefix': 'Mrs.', 'Title': 'Support Manager', 'City': 'Phoenix', 'State': 'Arizona', 'Email': 'barbarab@dx-email.com', 'Skype': 'barbarab_DX_skype', 'Mobile_Phone': '(310) 555-3355', 'Birth_Date': '1979-04-14', 'Hire_Date': '2002-08-07' }, { 'ID': 10, 'Head_ID': 2, 'Full_Name': 'Kevin Carter', 'Prefix': 'Mr.', 'Title': 'Shipping Manager', 'City': 'San Diego', 'State': 'California', 'Email': 'kevinc@dx-email.com', 'Skype': 'kevinc_DX_skype', 'Mobile_Phone': '(213) 555-2840', 'Birth_Date': '1978-01-09', 'Hire_Date': '2009-08-11' }, { 'ID': 11, 'Head_ID': 5, 'Full_Name': 'Cindy Stanwick', 'Prefix': 'Ms.', 'Title': 'HR Assistant', 'City': 'Little Rock', 'State': 'Arkansas', 'Email': 'cindys@dx-email.com', 'Skype': 'cindys_DX_skype', 'Mobile_Phone': '(818) 555-6655', 'Birth_Date': '1985-06-05', 'Hire_Date': '2008-03-24' }, { 'ID': 12, 'Head_ID': 8, 'Full_Name': 'Sammy Hill', 'Prefix': 'Mr.', 'Title': 'Sales Assistant', 'City': 'Pasadena', 'State': 'California', 'Email': 'sammyh@dx-email.com', 'Skype': 'sammyh_DX_skype', 'Mobile_Phone': '(626) 555-7292', 'Birth_Date': '1984-02-17', 'Hire_Date': '2012-02-01' }, { 'ID': 13, 'Head_ID': 10, 'Full_Name': 'Davey Jones', 'Prefix': 'Mr.', 'Title': 'Shipping Assistant', 'City': 'Pasadena', 'State': 'California', 'Email': 'davidj@dx-email.com', 'Skype': 'davidj_DX_skype', 'Mobile_Phone': '(626) 555-0281', 'Birth_Date': '1983-03-06', 'Hire_Date': '2011-04-24' }, { 'ID': 14, 'Head_ID': 10, 'Full_Name': 'Victor Norris', 'Prefix': 'Mr.', 'Title': 'Shipping Assistant', 'City': 'Little Rock', 'State': 'Arkansas', 'Email': 'victorn@dx-email.com', 'Skype': 'victorn_DX_skype', 'Mobile_Phone': '(213) 555-9278', 'Birth_Date': '1986-07-23', 'Hire_Date': '2012-07-23' }, { 'ID': 15, 'Head_ID': 10, 'Full_Name': 'Mary Stern', 'Prefix': 'Ms.', 'Title': 'Shipping Assistant', 'City': 'Beaver', 'State': 'Utah', 'Email': 'marys@dx-email.com', 'Skype': 'marys_DX_skype', 'Mobile_Phone': '(818) 555-7857', 'Birth_Date': '1982-04-08', 'Hire_Date': '2012-08-12' }, { 'ID': 16, 'Head_ID': 10, 'Full_Name': 'Robin Cosworth', 'Prefix': 'Mrs.', 'Title': 'Shipping Assistant', 'City': 'Los Angeles', 'State': 'California', 'Email': 'robinc@dx-email.com', 'Skype': 'robinc_DX_skype', 'Mobile_Phone': '(818) 555-0942', 'Birth_Date': '1981-06-12', 'Hire_Date': '2012-09-01' }, { 'ID': 17, 'Head_ID': 9, 'Full_Name': 'Kelly Rodriguez', 'Prefix': 'Ms.', 'Title': 'Support Assistant', 'City': 'Boise', 'State': 'Idaho', 'Email': 'kellyr@dx-email.com', 'Skype': 'kellyr_DX_skype', 'Mobile_Phone': '(818) 555-9248', 'Birth_Date': '1988-05-11', 'Hire_Date': '2012-10-13' }, { 'ID': 18, 'Head_ID': 9, 'Full_Name': 'James Anderson', 'Prefix': 'Mr.', 'Title': 'Support Assistant', 'City': 'Atlanta', 'State': 'Georgia', 'Email': 'jamesa@dx-email.com', 'Skype': 'jamesa_DX_skype', 'Mobile_Phone': '(323) 555-4702', 'Birth_Date': '1987-01-29', 'Hire_Date': '2012-10-18' }, { 'ID': 19, 'Head_ID': 9, 'Full_Name': 'Antony Remmen', 'Prefix': 'Mr.', 'Title': 'Support Assistant', 'City': 'Boise', 'State': 'Idaho', 'Email': 'anthonyr@dx-email.com', 'Skype': 'anthonyr_DX_skype', 'Mobile_Phone': '(310) 555-6625', 'Birth_Date': '1986-02-19', 'Hire_Date': '2013-01-19' }, { 'ID': 20, 'Head_ID': 8, 'Full_Name': 'Olivia Peyton', 'Prefix': 'Mrs.', 'Title': 'Sales Assistant', 'City': 'Atlanta', 'State': 'Georgia', 'Email': 'oliviap@dx-email.com', 'Skype': 'oliviap_DX_skype', 'Mobile_Phone': '(310) 555-2728', 'Birth_Date': '1981-06-03', 'Hire_Date': '2012-05-14' }, { 'ID': 21, 'Head_ID': 6, 'Full_Name': 'Taylor Riley', 'Prefix': 'Mr.', 'Title': 'Network Admin', 'City': 'San Jose', 'State': 'California', 'Email': 'taylorr@dx-email.com', 'Skype': 'taylorr_DX_skype', 'Mobile_Phone': '(310) 555-7276', 'Birth_Date': '1982-08-14', 'Hire_Date': '2012-04-14' }, { 'ID': 22, 'Head_ID': 6, 'Full_Name': 'Amelia Harper', 'Prefix': 'Mrs.', 'Title': 'Network Admin', 'City': 'Los Angeles', 'State': 'California', 'Email': 'ameliah@dx-email.com', 'Skype': 'ameliah_DX_skype', 'Mobile_Phone': '(213) 555-4276', 'Birth_Date': '1983-11-19', 'Hire_Date': '2011-02-10' }, { 'ID': 23, 'Head_ID': 6, 'Full_Name': 'Wally Hobbs', 'Prefix': 'Mr.', 'Title': 'Programmer', 'City': 'Chatsworth', 'State': 'California', 'Email': 'wallyh@dx-email.com', 'Skype': 'wallyh_DX_skype', 'Mobile_Phone': '(818) 555-8872', 'Birth_Date': '1984-12-24', 'Hire_Date': '2011-02-17' }, { 'ID': 24, 'Head_ID': 6, 'Full_Name': 'Brad Jameson', 'Prefix': 'Mr.', 'Title': 'Programmer', 'City': 'San Fernando', 'State': 'California', 'Email': 'bradleyj@dx-email.com', 'Skype': 'bradleyj_DX_skype', 'Mobile_Phone': '(818) 555-4646', 'Birth_Date': '1988-10-12', 'Hire_Date': '2011-03-02' }, { 'ID': 25, 'Head_ID': 6, 'Full_Name': 'Karen Goodson', 'Prefix': 'Miss', 'Title': 'Programmer', 'City': 'South Pasadena', 'State': 'California', 'Email': 'kareng@dx-email.com', 'Skype': 'kareng_DX_skype', 'Mobile_Phone': '(626) 555-0908', 'Birth_Date': '1987-04-26', 'Hire_Date': '2011-03-14' }, { 'ID': 26, 'Head_ID': 5, 'Full_Name': 'Marcus Orbison', 'Prefix': 'Mr.', 'Title': 'Travel Coordinator', 'City': 'Los Angeles', 'State': 'California', 'Email': 'marcuso@dx-email.com', 'Skype': 'marcuso_DX_skype', 'Mobile_Phone': '(213) 555-7098', 'Birth_Date': '1982-03-02', 'Hire_Date': '2005-05-19' }, { 'ID': 27, 'Head_ID': 5, 'Full_Name': 'Sandy Bright', 'Prefix': 'Ms.', 'Title': 'Benefits Coordinator', 'City': 'Denver', 'State': 'Colorado', 'Email': 'sandrab@dx-email.com', 'Skype': 'sandrab_DX_skype', 'Mobile_Phone': '(818) 555-0524', 'Birth_Date': '1983-09-11', 'Hire_Date': '2005-06-04' }, { 'ID': 28, 'Head_ID': 6, 'Full_Name': 'Morgan Kennedy', 'Prefix': 'Mrs.', 'Title': 'Graphic Designer', 'City': 'San Fernando Valley', 'State': 'California', 'Email': 'morgank@dx-email.com', 'Skype': 'morgank_DX_skype', 'Mobile_Phone': '(818) 555-8238', 'Birth_Date': '1984-07-17', 'Hire_Date': '2012-01-11' }, { 'ID': 29, 'Head_ID': 28, 'Full_Name': 'Violet Bailey', 'Prefix': 'Ms.', 'Title': 'Jr Graphic Designer', 'City': 'La Canada', 'State': 'California', 'Email': 'violetb@dx-email.com', 'Skype': 'violetb_DX_skype', 'Mobile_Phone': '(818) 555-2478', 'Birth_Date': '1985-06-10', 'Hire_Date': '2012-01-19' }, { 'ID': 30, 'Head_ID': 5, 'Full_Name': 'Ken Samuelson', 'Prefix': 'Dr.', 'Title': 'Ombudsman', 'City': 'St. Louis', 'State': 'Missouri', 'Email': 'kents@dx-email.com', 'Skype': 'kents_DX_skype', 'Mobile_Phone': '(562) 555-9282', 'Birth_Date': '1972-09-11', 'Hire_Date': '2009-04-22' }];
window.config = { transpiler: 'plugin-babel', meta: { '*.vue': { loader: 'vue-loader' }, 'devextreme/localization.js': { "esModule": true }, }, paths: { 'npm:': 'https://unpkg.com/' }, map: { 'vue': 'npm:vue@3.0.0/dist/vue.esm-browser.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@1.0.15/index.js', 'mitt': 'npm:mitt/dist/mitt.umd.js', 'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@21.1.5/cjs', 'devextreme-vue': 'npm:devextreme-vue@21.1.5', 'jszip': 'npm:jszip@3.7.0/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.3.1/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.1.25/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@3.0.4/dist/dx-gantt.js', '@devextreme/vdom': 'npm:@devextreme/vdom@1.2.2', 'inferno': 'npm:inferno@7.4.8/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat@7.4.8/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.8/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom@1.0.7/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.8/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode@7.4.8/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class@7.4.8/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras@7.4.8/dist/inferno-extras.min.js', 'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js' }, packages: { 'devextreme-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' }, '@devextreme/vdom': { defaultExtension: 'js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js' } }, packageConfigPaths: [ "npm:@devextreme/*/package.json", ], babelOptions: { sourceMaps: false, stage0: true } }; System.config(window.config);