Your search did not match any results.

React Card View - Overview

The DevExtreme 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 CardView component, refer to the following step-by-step tutorial: Getting Started with CardView.

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

Backend API
import React, { useRef } from 'react'; import CardView, { CardCover, Column, Selection, Paging, HeaderFilter, SearchPanel, CardViewRef, } from 'devextreme-react/card-view'; import Button from 'devextreme-react/button'; import notify from 'devextreme/ui/notify'; import { Employee, employees } from './data.ts'; function imageExpr({ First_Name, Last_Name }: Employee): string { return `../../../../images/employees/new/${First_Name} ${Last_Name}.jpg`; } function altExpr({ First_Name, Last_Name }: Employee): string { return `Photo of ${First_Name} ${Last_Name}`; } function calculateFullName({ First_Name, Last_Name }: Employee): string { return `${First_Name} ${Last_Name}`; } function calculateAddress({ State, City }: Employee): string { return `${City}, ${State}`; } function notifyCall() { notify({ message: 'The "Call" button is clicked.', maxWidth: 560, }); } function notifySendEmail() { notify({ message: 'The "Send Email" button is clicked.', maxWidth: 560, }); } function CardFooterComponent() { return <div className='card-footer'> <Button text="Call" icon="tel" type="default" stylingMode="contained" onClick={notifyCall} /> <Button text="Send Email" icon="message" type="default" stylingMode="contained" onClick={notifySendEmail} /> </div> } function StatusComponent({ data: { field: { value }}}) { const classNameMap = { 'Salaried': 'status--salaried', 'Commission': 'status--commission', 'Terminated': 'status--terminated', }; const className = classNameMap[value]; return ( <div className={`status ${className}`}> <div className="indicator"></div> <div>{ value }</div> </div> ); } function EmailComponent({ data: { field: { value, text }}}) { return ( <a href={`mailto:${value}`}>{text}</a> ); } function App() { const cardView = useRef<CardViewRef>(); return ( <CardView dataSource={employees} keyExpr="ID" cardMinWidth={300} cardsPerRow="auto" cardFooterComponent={CardFooterComponent} ref={cardView} > <Paging pageSize={4} /> <HeaderFilter visible={true} /> <SearchPanel visible={true} /> <Selection mode="multiple" /> <CardCover imageExpr={imageExpr} altExpr={altExpr} /> <Column dataField="Status" fieldValueComponent={StatusComponent} allowSearch={false} /> <Column caption="Full Name" allowFiltering={true} allowSorting={true} calculateFieldValue={calculateFullName} /> <Column caption="Position" dataField="Title" /> <Column dataField="Department" /> <Column dataField="Mobile_Phone" /> <Column dataField="Email" fieldValueComponent={EmailComponent} allowSearch={false} /> <Column caption="Address" allowFiltering={true} allowSorting={true} calculateFieldValue={calculateAddress} /> </CardView> ); }; export default App;
import React, { useRef } from 'react'; import CardView, { CardCover, Column, Selection, Paging, HeaderFilter, SearchPanel, } from 'devextreme-react/card-view'; import Button from 'devextreme-react/button'; import notify from 'devextreme/ui/notify'; import { employees } from './data.js'; function imageExpr({ First_Name, Last_Name }) { return `../../../../images/employees/new/${First_Name} ${Last_Name}.jpg`; } function altExpr({ First_Name, Last_Name }) { return `Photo of ${First_Name} ${Last_Name}`; } function calculateFullName({ First_Name, Last_Name }) { return `${First_Name} ${Last_Name}`; } function calculateAddress({ State, City }) { return `${City}, ${State}`; } function notifyCall() { notify({ message: 'The "Call" button is clicked.', maxWidth: 560, }); } function notifySendEmail() { notify({ message: 'The "Send Email" button is clicked.', maxWidth: 560, }); } function CardFooterComponent() { return ( <div className="card-footer"> <Button text="Call" icon="tel" type="default" stylingMode="contained" onClick={notifyCall} /> <Button text="Send Email" icon="message" type="default" stylingMode="contained" onClick={notifySendEmail} /> </div> ); } function StatusComponent({ data: { field: { value }, }, }) { const classNameMap = { Salaried: 'status--salaried', Commission: 'status--commission', Terminated: 'status--terminated', }; const className = classNameMap[value]; return ( <div className={`status ${className}`}> <div className="indicator"></div> <div>{value}</div> </div> ); } function EmailComponent({ data: { field: { value, text }, }, }) { return <a href={`mailto:${value}`}>{text}</a>; } function App() { const cardView = useRef(); return ( <CardView dataSource={employees} keyExpr="ID" cardMinWidth={300} cardsPerRow="auto" cardFooterComponent={CardFooterComponent} ref={cardView} > <Paging pageSize={4} /> <HeaderFilter visible={true} /> <SearchPanel visible={true} /> <Selection mode="multiple" /> <CardCover imageExpr={imageExpr} altExpr={altExpr} /> <Column dataField="Status" fieldValueComponent={StatusComponent} allowSearch={false} /> <Column caption="Full Name" allowFiltering={true} allowSorting={true} calculateFieldValue={calculateFullName} /> <Column caption="Position" dataField="Title" /> <Column dataField="Department" /> <Column dataField="Mobile_Phone" /> <Column dataField="Email" fieldValueComponent={EmailComponent} allowSearch={false} /> <Column caption="Address" allowFiltering={true} allowSorting={true} calculateFieldValue={calculateAddress} /> </CardView> ); } export default App;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );
export interface Employee { ID: number; First_Name: string; Last_Name: string; Prefix: string; Title: string; City: string; State: string; Email: string; Mobile_Phone: string; Birth_Date: string; Hire_Date: string; Department: string; Status: string; } export const employees: Employee[] = [{ 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' }];
window.exports = window.exports || {}; window.config = { transpiler: 'ts', typescriptOptions: { module: 'system', emitDecoratorMetadata: true, experimentalDecorators: true, jsx: 'react', }, meta: { 'react': { 'esModule': true, }, 'typescript': { 'exports': 'ts', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, 'openai': { 'esModule': true, }, }, paths: { 'npm:': 'https://cdn.jsdelivr.net/npm/', 'bundles:': '../../../../bundles/', 'externals:': '../../../../bundles/externals/', }, defaultExtension: 'js', map: { 'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js', 'typescript': 'npm:typescript@4.2.4/lib/typescript.js', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'react': 'npm:react@17.0.2/umd/react.development.js', 'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js', 'prop-types': 'npm:prop-types/prop-types.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign', 'devextreme': 'npm:devextreme@link:../../packages/devextreme/artifacts/npm/devextreme/cjs', 'devextreme-react': 'npm:devextreme-react@link:../../packages/devextreme-react/npm/cjs', 'devextreme-quill': 'npm:devextreme-quill@1.7.6/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.24/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.64/dist/dx-gantt.js', 'inferno': 'npm:inferno@8.2.3/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@8.2.3/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js', '@preact/signals-core': 'npm:@preact/signals-core@1.8.0/dist/signals-core.min.js', 'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3', // SystemJS plugins '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', // Prettier 'prettier/standalone': 'npm:prettier@2.8.8/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js', }, packages: { 'devextreme': { defaultExtension: 'js', }, 'devextreme-react': { main: 'index.js', }, 'devextreme-react/common': { main: 'index.js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/common/core/events/utils': { main: 'index', }, 'devextreme/localization/messages': { format: 'json', defaultExtension: 'json', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', ], babelOptions: { sourceMaps: false, stage0: true, react: true, }, }; System.config(window.config); // eslint-disable-next-line const useTgzInCSB = ['openai'];
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));
export 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', }, ];
<!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.7/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <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.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></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; }

DevExtreme 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 CardView is customizable.