DevExtreme v25.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

JavaScript/jQuery Card View - Overview

The DevExtreme JavaScript CardView component allows you to display business data using a 'card' UI metaphor — a visually engaging alternative to traditional grid views. Use it for employee directories, contact lists, product catalogs, or task boards.

To get started with the JavaScript CardView component, refer to the following step-by-step tutorial: Getting Started with JavaScript CardView.

For a complete overview of JavaScript CardView options, refer to the JavaScript CardView API Reference.

Backend API
$(() => { const cardView = $('#card-view').dxCardView({ dataSource: employees, keyExpr: 'ID', cardMinWidth: 300, cardsPerRow: 'auto', paging: { pageSize: 4, }, cardCover: { imageExpr: ({ First_Name, Last_Name }) => `../../../../images/employees/new/${First_Name} ${Last_Name}.jpg`, altExpr: ({ First_Name, Last_Name }) => `Photo of ${First_Name} ${Last_Name}`, }, columns: [ { dataField: 'Status', fieldValueTemplate({ field: { value } }) { return $('<div>') .append( $('<div>').addClass('indicator') ) .append( $('<div>').text(value) ) .addClass('status') .toggleClass('status--salaried', value === 'Salaried') .toggleClass('status--commission', value === 'Commission') .toggleClass('status--terminated', value === 'Terminated'); }, allowSearch: false, }, { caption: 'Full Name', allowFiltering: true, allowSorting: true, calculateFieldValue({ First_Name, Last_Name }) { return `${First_Name} ${Last_Name}`; }, }, { caption: 'Position', dataField: 'Title', }, 'Department', 'Mobile_Phone', { dataField: 'Email', fieldValueTemplate({ field: { value, text }}) { return $('<a>') .attr('href', `mailto:${value}`) .text(text); }, allowSearch: false, }, { caption: 'Address', allowFiltering: true, allowSorting: true, calculateFieldValue({ State, City }) { return `${City}, ${State}`; }, }, ], cardFooterTemplate() { return $('<div>') .addClass('card-footer') .append( $('<div>').dxButton({ text: 'Call', icon: 'tel', type: 'default', stylingMode: 'contained', onClick() { DevExpress.ui.notify({ message: 'The "Call" button is clicked.', maxWidth: 560, }); }, }), $('<div>').dxButton({ text: 'Send Email', icon: 'message', type: 'default', stylingMode: 'contained', onClick() { DevExpress.ui.notify({ message: 'The "Send Email" button is clicked.', maxWidth: 560, }); }, }), ) }, selection: { mode: 'multiple', }, headerFilter: { visible: true, }, searchPanel: { visible: true, }, }).dxCardView('instance'); });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" 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" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.1.3/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="js/dx.all.js"></script> <script src="data.js"></script> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="card-view"></div> </div> </body> </html>
.card-footer { display: flex; padding: 12px; gap: 8px; } .card-footer > * { flex-grow: 1; width: 100% } .status { display: flex; align-items: center; } .status--salaried { color: var(--dx-color-success); } .status--commission { color: #f7630c; } .status--terminated { color: var(--dx-color-danger); } .indicator { background-color: currentcolor; margin-right: 8px; border-radius: 50%; height: 12px; width: 12px; }
const employees = [{ ID: 3, First_Name: 'Arthur', Last_Name: 'Miller', Prefix: 'Mr.', Title: 'CTO', City: 'Los Angeles', State: 'California', Email: 'arthurm@dx-email.com', Mobile_Phone: '+1 (310) 555-8583', Birth_Date: '1972-07-11', Hire_Date: '2007-12-18', Status: 'Salaried', Department: 'Management' }, { ID: 4, First_Name: 'Robert', Last_Name: 'Reagan', Prefix: 'Mr.', Title: 'CMO', City: 'Pasadena', State: 'California', Email: 'robertr@dx-email.com', Mobile_Phone: '+1 (818) 555-2387', Birth_Date: '1974-09-07', Hire_Date: '2002-11-08', Status: 'Salaried', Department: 'Management' }, { ID: 5, First_Name: 'Greta', Last_Name: 'Sims', Prefix: 'Ms.', Title: 'HR Manager', City: 'Alhambra', State: 'California', Email: 'gretas@dx-email.com', Mobile_Phone: '+1 (818) 555-6546', Birth_Date: '1977-11-22', Hire_Date: '1998-04-23', Status: 'Salaried', Department: 'Human Resources' }, { ID: 6, First_Name: 'Brett', Last_Name: 'Wade', Prefix: 'Mr.', Title: 'IT Manager', City: 'San Marino', State: 'California', Email: 'brettw@dx-email.com', Mobile_Phone: '+1 (626) 555-0358', Birth_Date: '1968-12-01', Hire_Date: '2009-03-06', Status: 'Salaried', Department: 'IT' }, { ID: 7, First_Name: 'Sandra', Last_Name: 'Johnson', Prefix: 'Mrs.', Title: 'Controller', City: 'Long Beach', State: 'California', Email: 'sandraj@dx-email.com', Mobile_Phone: '+1 (562) 555-2082', Birth_Date: '1974-11-15', Hire_Date: '2005-05-11', Status: 'Salaried', Department: 'Human Resources' }, { ID: 10, First_Name: 'Kevin', Last_Name: 'Carter', Prefix: 'Mr.', Title: 'Shipping Manager', City: 'Los Angeles', State: 'California', Email: 'kevinc@dx-email.com', Mobile_Phone: '+1 (213) 555-2840', Birth_Date: '1978-01-09', Hire_Date: '2009-08-11', Status: 'Salaried', Department: 'Shipping' }, { ID: 14, First_Name: 'Victor', Last_Name: 'Norris', Prefix: 'Mr.', Title: 'Shipping Assistant', City: 'Los Angeles', State: 'California', Email: 'victorn@dx-email.com', Mobile_Phone: '+1 (213) 555-9278', Birth_Date: '1986-07-23', Hire_Date: '2012-07-23', Status: 'Salaried', Department: 'Shipping' }, { ID: 15, First_Name: 'Mary', Last_Name: 'Stern', Prefix: 'Ms.', Title: 'Shipping Assistant', City: 'Glendale', State: 'California', Email: 'marys@dx-email.com', Mobile_Phone: '+1 (818) 555-7857', Birth_Date: '1982-04-08', Hire_Date: '2012-08-12', Status: 'Salaried', Department: 'Shipping' }, { ID: 16, First_Name: 'Robin', Last_Name: 'Cosworth', Prefix: 'Mrs.', Title: 'Shipping Assistant', City: 'Los Angeles', State: 'California', Email: 'robinc@dx-email.com', Mobile_Phone: '+1 (818) 555-0942', Birth_Date: '1981-06-12', Hire_Date: '2012-09-01', Status: 'Salaried', Department: 'Shipping' }, { ID: 17, First_Name: 'Kelly', Last_Name: 'Rodriguez', Prefix: 'Ms.', Title: 'Support Assistant', City: 'Glendale', State: 'California', Email: 'kellyr@dx-email.com', Mobile_Phone: '+1 (818) 555-9248', Birth_Date: '1988-05-11', Hire_Date: '2012-10-13', Status: 'Salaried', Department: 'Support' }, { ID: 18, First_Name: 'James', Last_Name: 'Anderson', Prefix: 'Mr.', Title: 'Support Assistant', City: 'Los Angeles', State: 'California', Email: 'jamesa@dx-email.com', Mobile_Phone: '+1 (323) 555-4702', Birth_Date: '1987-01-29', Hire_Date: '2012-10-18', Status: 'Salaried', Department: 'Support' }, { ID: 20, First_Name: 'Olivia', Last_Name: 'Peyton', Prefix: 'Mrs.', Title: 'Sales Assistant', City: 'San Pedro', State: 'California', Email: 'oliviap@dx-email.com', Mobile_Phone: '+1 (310) 555-2728', Birth_Date: '1981-06-03', Hire_Date: '2012-05-14', Status: 'Salaried', Department: 'Sales' }, { ID: 21, First_Name: 'Taylor', Last_Name: 'Riley', Prefix: 'Mr.', Title: 'Network Admin', City: 'West Hollywood', State: 'California', Email: 'taylorr@dx-email.com', Mobile_Phone: '+1 (310) 555-7276', Birth_Date: '1982-08-14', Hire_Date: '2012-04-14', Status: 'Salaried', Department: 'IT' }, { ID: 22, First_Name: 'Amelia', Last_Name: 'Harper', Prefix: 'Mrs.', Title: 'Network Admin', City: 'Los Angeles', State: 'California', Email: 'ameliah@dx-email.com', Mobile_Phone: '+1 (213) 555-4276', Birth_Date: '1983-11-19', Hire_Date: '2011-02-10', Status: 'Salaried', Department: 'IT' }, { ID: 25, First_Name: 'Karen', Last_Name: 'Goodson', Prefix: 'Miss', Title: 'Programmer', City: 'South Pasadena', State: 'California', Email: 'kareng@dx-email.com', Mobile_Phone: '+1 (626) 555-0908', Birth_Date: '1987-04-26', Hire_Date: '2011-03-14', Status: 'Salaried', Department: 'IT' }, { ID: 26, First_Name: 'Marcus', Last_Name: 'Orbison', Prefix: 'Mr.', Title: 'Travel Coordinator', City: 'Los Angeles', State: 'California', Email: 'marcuso@dx-email.com', Mobile_Phone: '+1 (213) 555-7098', Birth_Date: '1982-03-02', Hire_Date: '2005-05-19', Status: 'Salaried', Department: 'Human Resources' }, { ID: 28, First_Name: 'Morgan', Last_Name: 'Kennedy', Prefix: 'Mrs.', Title: 'Graphic Designer', City: 'San Fernando Valley', State: 'California', Email: 'morgank@dx-email.com', Mobile_Phone: '+1 (818) 555-8238', Birth_Date: '1984-07-17', Hire_Date: '2012-01-11', Status: 'Salaried', Department: 'IT' }, { ID: 29, First_Name: 'Violet', Last_Name: 'Bailey', Prefix: 'Ms.', Title: 'Jr Graphic Designer', City: 'La Canada', State: 'California', Email: 'violetb@dx-email.com', Mobile_Phone: '+1 (818) 555-2478', Birth_Date: '1985-06-10', Hire_Date: '2012-01-19', Status: 'Salaried', Department: 'IT' }, { ID: 32, First_Name: 'Bart', Last_Name: 'Arnaz', Prefix: 'Mr.', Title: 'Director of Engineering', City: 'Irvine', State: 'California', Email: 'barta@dx-email.com', Mobile_Phone: '+1 (714) 555-2000', Birth_Date: '1979-11-01', Hire_Date: '2008-06-29', Status: 'Salaried', Department: 'Engineering' }, { ID: 33, First_Name: 'Leah', Last_Name: 'Simpson', Prefix: 'Mrs.', Title: 'Test Coordinator', City: 'Whittier', State: 'California', Email: 'leahs@dx-email.com', Mobile_Phone: '+1 (562) 559-5830', Birth_Date: '1983-04-19', Hire_Date: '2009-02-14', Status: 'Salaried', Department: 'Engineering' }, { ID: 36, First_Name: 'Samantha', Last_Name: 'Piper', Prefix: 'Ms.', Title: 'Engineer', City: 'Los Angeles', State: 'California', Email: 'samanthap@dx-email.com', Mobile_Phone: '+1 (323) 555-4512', Birth_Date: '1984-12-01', Hire_Date: '2008-01-22', Status: 'Salaried', Department: 'Engineering' }, { ID: 38, First_Name: 'Terry', Last_Name: 'Bradley', Prefix: 'Mr.', Title: 'QA Engineer', City: 'Simi Valley', State: 'California', Email: 'terryb@dx-email.com', Mobile_Phone: '+1 (805) 555-2788', Birth_Date: '1984-01-09', Hire_Date: '2007-10-18', Status: 'Salaried', Department: 'Engineering' }, { ID: 40, First_Name: 'Lucy', Last_Name: 'Ball', Prefix: 'Ms.', Title: 'Sales Assistant', City: 'Pacific Palisades', State: 'California', Email: 'lucyb@dx-email.com', Mobile_Phone: '+1 (310) 555-3357', Birth_Date: '1986-08-09', Hire_Date: '2006-07-19', Status: 'Salaried', Department: 'Sales' }, { ID: 44, First_Name: 'Clark', Last_Name: 'Morgan', Prefix: 'Mr.', Title: 'Retail Sales Manager', City: 'Martinez', State: 'California', Email: 'clarkm@dx-email.com', Mobile_Phone: '+1 (925) 555-2525', Birth_Date: '1988-04-07', Hire_Date: '2012-04-11', Status: 'Commission', Department: 'Sales' }, { ID: 45, First_Name: 'Todd', Last_Name: 'Hoffman', Prefix: 'Mr.', Title: 'Retail Sales Manager', City: 'Livermore', State: 'California', Email: 'toddh@dx-email.com', Mobile_Phone: '+1 (925) 555-3579', Birth_Date: '1987-03-25', Hire_Date: '2012-04-19', Status: 'Commission', Department: 'Sales' }, { ID: 47, First_Name: 'Lincoln', Last_Name: 'Bartlett', Prefix: 'Mr.', Title: 'Sales Assistant', City: 'Los Angeles', State: 'California', Email: 'lincolnb@dx-email.com', Mobile_Phone: '+1 (213) 555-8272', Birth_Date: '1990-08-02', Hire_Date: '2012-05-11', Status: 'Salaried', Department: 'Sales' }, { ID: 48, First_Name: 'Brad', Last_Name: 'Farkus', Prefix: 'Mr.', Title: 'Engineer', City: 'Los Angeles', State: 'California', Email: 'bradf@dx-email.com', Mobile_Phone: '+1 (213) 555-3626', Birth_Date: '1991-03-17', Hire_Date: '2010-04-15', Status: 'Terminated', Department: 'Engineering' }, { ID: 50, First_Name: 'Dallas', Last_Name: 'Lou', Prefix: 'Mr.', Title: 'Shipping Assistant', City: 'Los Angeles', State: 'California', Email: 'dallas@dx-email.com', Mobile_Phone: '+1 (213) 555-8357', Birth_Date: '1994-08-19', Hire_Date: '2012-06-18', Status: 'Terminated', Department: 'Shipping' }, { ID: 51, First_Name: 'Stu', Last_Name: 'Pizaro', Prefix: 'Mr.', Title: 'Engineer', City: 'Los Angeles', State: 'California', Email: 'stu@dx-email.com', Mobile_Phone: '+1 (213) 555-2552', Birth_Date: '1985-09-11', Hire_Date: '2011-07-19', Status: 'Terminated', Department: 'Engineering' }];

DevExtreme JavaScript CardView ships with the following built-in data management options:

  • Sorting
  • Paging
  • Column reordering
  • Column visibility control
  • Editing
  • Filtering
  • Searching
  • Data selection

Each card within the JavaScript CardView is customizable.