Vue Card View - Column Chooser

To change field visibility at runtime, set the columnChooser.enabled property to true. To ensure specific fields remain visible, set the columns[].allowHiding property to false. In this demo, allowHiding is disabled for "Full Name" and "Phone" columns.

Set columnChooser.mode to specify how users toggle column visibility:

"dragAndDrop"
Users drag & drop fields between the header panel and column chooser.
"select"
Users toggle check boxes for field names.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

<template> <div className="options-panel"> <div className="caption">Options</div> <div className="options-container"> <div className="option"> <span>Column Chooser Mode:</span> <DxSelectBox :data-source="['dragAndDrop', 'select']" :input-attr="{ 'aria-label': 'Column Chooser Mode' }" :value="columnChooserMode" @value-changed="({ value }) => { columnChooserMode = value; }" /> </div> <div className="option"> <DxCheckBox text="Search Enabled" :value="searchEnabled" @value-changed="({ value }) => { searchEnabled = value; }" /> </div> <div className="option"> <DxCheckBox text="Allow Select All" :value="allowSelectAll" @value-changed="({ value }) => { allowSelectAll = value; }" :disabled="columnChooserMode !== 'select'" /> </div> <div className="option"> <DxCheckBox text="Select By Click On Item" :value="selectByClick" @value-changed="({ value }) => { selectByClick = value; }" :disabled="columnChooserMode !== 'select'" /> </div> <div className="option"> <DxCheckBox text="Allow Column Reordering" :value="allowColumnReordering" @value-changed="({ value }) => { allowColumnReordering = value; }" /> </div> </div> </div> <DxCardView :data-source="employees" key-expr="ID" cards-per-row="auto" :card-min-width="300" :selected-card-keys="[4, 6]" :allow-column-reordering="allowColumnReordering" > <DxSearchPanel :visible="true" /> <DxColumnChooser :enabled="true" :mode="columnChooserMode" height="340px" > <DxColumnChooserSearch :enabled="searchEnabled" /> <DxColumnChooserSelection :allow-select-all="allowSelectAll" :select-by-click="selectByClick" /> </DxColumnChooser> <DxCardCover :alt-expr="altExpr" :image-expr="imageExpr" /> <DxColumn data-field="FullName" :calculate-field-value="calculateFullName" :allow-hiding="false" /> <DxColumn data-field="Birth_Date" data-type="date" /> <DxColumn data-field="Hire_Date" data-type="date" /> <DxColumn data-field="Position"/> <DxColumn data-field="Department"/> <DxColumn data-field="State"/> <DxColumn data-field="City"/> <DxColumn data-field="Phone" :allow-hiding="false" /> <DxColumn data-field="Email" :visible="false" /> </DxCardView> </template> <script setup lang="ts"> import { ref } from 'vue'; import { DxCardView, DxColumn, DxCardCover, DxSearchPanel, DxColumnChooser, DxColumnChooserSearch, DxColumnChooserSelection, } from 'devextreme-vue/card-view'; import { DxSelectBox } from 'devextreme-vue/select-box'; import { DxCheckBox } from 'devextreme-vue/check-box'; import { employees, type Employee } from './data.ts'; function altExpr({ First_Name, Last_Name }: Employee): string { return `Photo of ${First_Name} ${Last_Name}`; } function imageExpr({ First_Name, Last_Name }: Employee): string { return `../../../../images/employees/new/${First_Name} ${Last_Name}.jpg`; } function calculateFullName({ First_Name, Last_Name }: Employee): string { return `${First_Name} ${Last_Name}`; } const columnChooserMode = ref<'select' | 'dragAndDrop'>('select'); const searchEnabled = ref(true); const allowSelectAll = ref(true); const selectByClick = ref(true); const allowColumnReordering = ref(false); </script> <style> .options-panel { margin-top: 20px; padding: 20px; background-color: rgba(191, 191, 191, 0.15); } .options-container { display: flex; flex-wrap: wrap; align-items: center; } .caption { font-size: 18px; font-weight: 500; } .option { margin: 10px; display: flex; align-items: center; width: fit-content; } .option > .dx-selectbox { width: 200px; display: inline-block; vertical-align: middle; } .option > span { margin-right: 10px; } </style>

export interface Employee { ID: number; First_Name: string; Last_Name: string; Position: string; Address: string; City: string; Email: string; Skype: string; Phone: string; Birth_Date: string; Hire_Date: string; Department: string; State: string; } export const employees: Employee[] = [{ 'ID': 3, 'First_Name': 'Arthur', 'Last_Name': 'Miller', 'Position': 'CTO', 'Address': '3800 Homer St.', 'City': 'Los Angeles', 'Email': 'arthurm@dx-email.com', 'Skype': 'arthurm_DX_skype', 'Phone': '3105558583', 'Birth_Date': '1972-07-11T00:00:00', 'Hire_Date': '2007-12-18T00:00:00', 'Department': 'Management', 'State': 'California' }, { 'ID': 4, 'First_Name': 'Robert', 'Last_Name': 'Reagan', 'Position': 'CMO', 'Address': '4 Westmoreland Pl.', 'City': 'Pasadena', 'Email': 'robertr@dx-email.com', 'Skype': 'robertr_DX_skype', 'Phone': '8185552387', 'Birth_Date': '1974-09-07T00:00:00', 'Hire_Date': '2002-11-08T00:00:00', 'Department': 'Management', 'State': 'California' }, { 'ID': 5, 'First_Name': 'Greta', 'Last_Name': 'Sims', 'Position': 'HR Manager', 'Address': '1700 S Grandview Dr.', 'City': 'Alhambra', 'Email': 'gretas@dx-email.com', 'Skype': 'gretas_DX_skype', 'Phone': '8185556546', 'Birth_Date': '1977-11-22T00:00:00', 'Hire_Date': '1998-04-23T00:00:00', 'Department': 'Human Resources', 'State': 'California' }, { 'ID': 6, 'First_Name': 'Brett', 'Last_Name': 'Wade', 'Position': 'IT Manager', 'Address': '1120 Old Mill Rd.', 'City': 'San Marino', 'Email': 'brettw@dx-email.com', 'Skype': 'brettw_DX_skype', 'Phone': '6265550358', 'Birth_Date': '1968-12-01T00:00:00', 'Hire_Date': '2009-03-06T00:00:00', 'Department': 'IT', 'State': 'California' }, { 'ID': 7, 'First_Name': 'Sandra', 'Last_Name': 'Johnson', 'Position': 'Controller', 'Address': '4600 N Virginia Rd.', 'City': 'Long Beach', 'Email': 'sandraj@dx-email.com', 'Skype': 'sandraj_DX_skype', 'Phone': '5625552082', 'Birth_Date': '1974-11-15T00:00:00', 'Hire_Date': '2005-05-11T00:00:00', 'Department': 'Human Resources', 'State': 'California' }, { 'ID': 10, 'First_Name': 'Kevin', 'Last_Name': 'Carter', 'Position': 'Shipping Manager', 'Address': '424 N Main St.', 'City': 'Los Angeles', 'Email': 'kevinc@dx-email.com', 'Skype': 'kevinc_DX_skype', 'Phone': '2135552840', 'Birth_Date': '1978-01-09T00:00:00', 'Hire_Date': '2009-08-11T00:00:00', 'Department': 'Shipping', 'State': 'California' }, { 'ID': 14, 'First_Name': 'Victor', 'Last_Name': 'Norris', 'Position': 'Shipping Assistant', 'Address': '811 West 7th St.', 'City': 'Los Angeles', 'Email': 'victorn@dx-email.com', 'Skype': 'victorn_DX_skype', 'Phone': '2135559278', 'Birth_Date': '1986-07-23T00:00:00', 'Hire_Date': '2012-07-23T00:00:00', 'Department': 'Shipping', 'State': 'California' }, { 'ID': 15, 'First_Name': 'Mary', 'Last_Name': 'Stern', 'Position': 'Shipping Assistant', 'Address': '113 N Cedar St.', 'City': 'Glendale', 'Email': 'marys@dx-email.com', 'Skype': 'marys_DX_skype', 'Phone': '8185557857', 'Birth_Date': '1982-04-08T00:00:00', 'Hire_Date': '2012-08-12T00:00:00', 'Department': 'Shipping', 'State': 'California' }, { 'ID': 16, 'First_Name': 'Robin', 'Last_Name': 'Cosworth', 'Position': 'Shipping Assistant', 'Address': '501 N Main St.', 'City': 'Los Angeles', 'Email': 'robinc@dx-email.com', 'Skype': 'robinc_DX_skype', 'Phone': '8185550942', 'Birth_Date': '1981-06-12T00:00:00', 'Hire_Date': '2012-09-01T00:00:00', 'Department': 'Shipping', 'State': 'California' }, { 'ID': 17, 'First_Name': 'Kelly', 'Last_Name': 'Rodriguez', 'Position': 'Support Assistant', 'Address': '1601 W Mountain St.', 'City': 'Glendale', 'Email': 'kellyr@dx-email.com', 'Skype': 'kellyr_DX_skype', 'Phone': '8185559248', 'Birth_Date': '1988-05-11T00:00:00', 'Hire_Date': '2012-10-13T00:00:00', 'Department': 'Support', 'State': 'California' }, { 'ID': 18, 'First_Name': 'James', 'Last_Name': 'Anderson', 'Position': 'Support Assistant', 'Address': '4800 Hollywood Blvd', 'City': 'Los Angeles', 'Email': 'jamesa@dx-email.com', 'Skype': 'jamesa_DX_skype', 'Phone': '3235554702', 'Birth_Date': '1987-01-29T00:00:00', 'Hire_Date': '2012-10-18T00:00:00', 'Department': 'Support', 'State': 'California' }, { 'ID': 20, 'First_Name': 'Olivia', 'Last_Name': 'Peyton', 'Position': 'Sales Assistant', 'Address': '807 W Paseo Del Mar', 'City': 'San Pedro', 'Email': 'oliviap@dx-email.com', 'Skype': 'oliviap_DX_skype', 'Phone': '3105552728', 'Birth_Date': '1981-06-03T00:00:00', 'Hire_Date': '2012-05-14T00:00:00', 'Department': 'Sales', 'State': 'California' }, { 'ID': 21, 'First_Name': 'Taylor', 'Last_Name': 'Riley', 'Position': 'Network Admin', 'Address': '7776 Torreyson Dr', 'City': 'West Hollywood', 'Email': 'taylorr@dx-email.com', 'Skype': 'taylorr_DX_skype', 'Phone': '3105557276', 'Birth_Date': '1982-08-14T00:00:00', 'Hire_Date': '2012-04-14T00:00:00', 'Department': 'IT', 'State': 'California' }, { 'ID': 22, 'First_Name': 'Amelia', 'Last_Name': 'Harper', 'Position': 'Network Admin', 'Address': '527 W 7th St', 'City': 'Los Angeles', 'Email': 'ameliah@dx-email.com', 'Skype': 'ameliah_DX_skype', 'Phone': '2135554276', 'Birth_Date': '1983-11-19T00:00:00', 'Hire_Date': '2011-02-10T00:00:00', 'Department': 'IT', 'State': 'California' }, { 'ID': 25, 'First_Name': 'Karen', 'Last_Name': 'Goodson', 'Position': 'Programmer', 'Address': '309 Monterey Rd', 'City': 'South Pasadena', 'Email': 'kareng@dx-email.com', 'Skype': 'kareng_DX_skype', 'Phone': '6265550908', 'Birth_Date': '1987-04-26T00:00:00', 'Hire_Date': '2011-03-14T00:00:00', 'Department': 'IT', 'State': 'California' }, { 'ID': 26, 'First_Name': 'Marcus', 'Last_Name': 'Orbison', 'Position': 'Travel Coordinator', 'Address': '501 N Main St', 'City': 'Los Angeles', 'Email': 'marcuso@dx-email.com', 'Skype': 'marcuso_DX_skype', 'Phone': '2135557098', 'Birth_Date': '1982-03-02T00:00:00', 'Hire_Date': '2005-05-19T00:00:00', 'Department': 'Human Resources', 'State': 'California' }, { 'ID': 28, 'First_Name': 'Morgan', 'Last_Name': 'Kennedy', 'Position': 'Graphic Designer', 'Address': '11222 Dilling St', 'City': 'San Fernando Valley', 'Email': 'morgank@dx-email.com', 'Skype': 'morgank_DX_skype', 'Phone': '8185558238', 'Birth_Date': '1984-07-17T00:00:00', 'Hire_Date': '2012-01-11T00:00:00', 'Department': 'IT', 'State': 'California' }, { 'ID': 29, 'First_Name': 'Violet', 'Last_Name': 'Bailey', 'Position': 'Jr Graphic Designer', 'Address': '1418 Descanso Dr', 'City': 'La Canada', 'Email': 'violetb@dx-email.com', 'Skype': 'violetb_DX_skype', 'Phone': '8185552478', 'Birth_Date': '1985-06-10T00:00:00', 'Hire_Date': '2012-01-19T00:00:00', 'Department': 'IT', 'State': 'California' }, { 'ID': 32, 'First_Name': 'Bart', 'Last_Name': 'Arnaz', 'Position': 'Director of Engineering', 'Address': '13109 Old Myford Rd', 'City': 'Irvine', 'Email': 'barta@dx-email.com', 'Skype': 'barta_DX_skype', 'Phone': '7145552000', 'Birth_Date': '1979-11-01T00:00:00', 'Hire_Date': '2008-06-29T00:00:00', 'Department': 'Engineering', 'State': 'California' }, { 'ID': 33, 'First_Name': 'Leah', 'Last_Name': 'Simpson', 'Position': 'Test Coordinator', 'Address': '6755 Newlin Ave', 'City': 'Whittier', 'Email': 'leahs@dx-email.com', 'Skype': 'leahs_DX_skype', 'Phone': '5625595830', 'Birth_Date': '1983-04-19T00:00:00', 'Hire_Date': '2009-02-14T00:00:00', 'Department': 'Engineering', 'State': 'California' }, { 'ID': 36, 'First_Name': 'Samantha', 'Last_Name': 'Piper', 'Position': 'Engineer', 'Address': '200 E Ave 43', 'City': 'Los Angeles', 'Email': 'samanthap@dx-email.com', 'Skype': 'samanthap_DX_skype', 'Phone': '3235554512', 'Birth_Date': '1984-12-01T00:00:00', 'Hire_Date': '2008-01-22T00:00:00', 'Department': 'Engineering', 'State': 'California' }, { 'ID': 38, 'First_Name': 'Terry', 'Last_Name': 'Bradley', 'Position': 'QA Engineer', 'Address': '4595 Cochran St', 'City': 'Simi Valley', 'Email': 'terryb@dx-email.com', 'Skype': 'terryb_DX_skype', 'Phone': '8055552788', 'Birth_Date': '1984-01-09T00:00:00', 'Hire_Date': '2007-10-18T00:00:00', 'Department': 'Engineering', 'State': 'California' }, { 'ID': 40, 'First_Name': 'Lucy', 'Last_Name': 'Ball', 'Position': 'Sales Assistant', 'Address': '203 Chautauqua Blvd', 'City': 'Pacific Palisades', 'Email': 'lucyb@dx-email.com', 'Skype': 'lucyb_DX_skype', 'Phone': '3105553357', 'Birth_Date': '1986-08-09T00:00:00', 'Hire_Date': '2006-07-19T00:00:00', 'Department': 'Sales', 'State': 'California' }, { 'ID': 44, 'First_Name': 'Clark', 'Last_Name': 'Morgan', 'Position': 'Retail Sales Manager', 'Address': '4202 Alhambra Ave', 'City': 'Martinez', 'Email': 'clarkm@dx-email.com', 'Skype': 'clarkm_DX_skype', 'Phone': '9255552525', 'Birth_Date': '1988-04-07T00:00:00', 'Hire_Date': '2012-04-11T00:00:00', 'Department': 'Sales', 'State': 'California' }, { 'ID': 45, 'First_Name': 'Todd', 'Last_Name': 'Hoffman', 'Position': 'Retail Sales Manager', 'Address': '2647 Arroyo Rd', 'City': 'Livermore', 'Email': 'toddh@dx-email.com', 'Skype': 'toddh_DX_skype', 'Phone': '9255553579', 'Birth_Date': '1987-03-25T00:00:00', 'Hire_Date': '2012-04-19T00:00:00', 'Department': 'Sales', 'State': 'California' }, { 'ID': 47, 'First_Name': 'Lincoln', 'Last_Name': 'Bartlett', 'Position': 'Sales Assistant', 'Address': '800 N Alameda St', 'City': 'Los Angeles', 'Email': 'lincolnb@dx-email.com', 'Skype': 'lincoln_DX_skype', 'Phone': '2135558272', 'Birth_Date': '1990-08-02T00:00:00', 'Hire_Date': '2012-05-11T00:00:00', 'Department': 'Sales', 'State': 'California' }, { 'ID': 48, 'First_Name': 'Brad', 'Last_Name': 'Farkus', 'Position': 'Engineer', 'Address': '1635 Woods Drive', 'City': 'Los Angeles', 'Email': 'bradf@dx-email.com', 'Skype': 'brad_DX_skype', 'Phone': '2135553626', 'Birth_Date': '1991-03-17T00:00:00', 'Hire_Date': '2010-04-15T00:00:00', 'Department': 'Engineering', 'State': 'California' }, { 'ID': 50, 'First_Name': 'Dallas', 'Last_Name': 'Lou', 'Position': 'Shipping Assistant', 'Address': '1 Bunker Hill', 'City': 'Los Angeles', 'Email': 'dallas@dx-email.com', 'Skype': 'dallas_DX_skype', 'Phone': '2135558357', 'Birth_Date': '1994-08-19T00:00:00', 'Hire_Date': '2012-06-18T00:00:00', 'Department': 'Shipping', 'State': 'California' }, { 'ID': 51, 'First_Name': 'Stu', 'Last_Name': 'Pizaro', 'Position': 'Engineer', 'Address': '200 N. Spring St', 'City': 'Los Angeles', 'Email': 'stu@dx-email.com', 'Skype': 'stu_DX_skype', 'Phone': '2135552552', 'Birth_Date': '1985-09-11T00:00:00', 'Hire_Date': '2011-07-19T00:00:00', 'Department': 'Engineering', 'State': 'California' }];

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/25.1.3/css/dx.light.css" /> <script type="module"> import * as vueCompilerSFC from "https://cdn.jsdelivr.net/npm/@vue/compiler-sfc@3.4.27/dist/compiler-sfc.esm-browser.js"; window.vueCompilerSFC = vueCompilerSFC; </script> <script src="https://cdn.jsdelivr.net/npm/typescript@5.4.5/lib/typescript.js"></script> <script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.ts"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app" /> </div> </body> </html>

To display the CardView Column Chooser, click the column chooser icon in the CardView toolbar. You can specify the column chooser's position with the columnChooser.position property.

If the column chooser contains multiple hidden columns, assign true to the search.enabled property to enable DevExtreme’s field search UI.

In this demo, use the checkboxes above the CardView to toggle search and selection features.

To hide a field programmatically, change the columns[].visible property to false.