Vue CardView - Getting Started

jQuery

NOTE

Before you start the tutorial, ensure DevExtreme is installed in your application.

Angular

NOTE

Before you start the tutorial, ensure DevExtreme is installed in your application.

Vue

NOTE

Before you start the tutorial, ensure DevExtreme is installed in your application.

React

NOTE

Before you start the tutorial, ensure DevExtreme is installed in your application.

CardView is a UI component that enables you to display data in a card-based format. You can use it for employee directories, contact lists, product catalogs, or task boards.

This tutorial explains how to add a CardView to a page and configure the component's core settings.

Each section in this tutorial covers a single configuration step. You can find the complete source code in the following GitHub repository:

View on GitHub

Create a CardView

jQuery

Add DevExtreme to your jQuery application and use the following code to create a CardView:

index.js

index.html

$(function() {
    $("#card-view").dxCardView({
        // Configuration goes here
    });
});

<html>
    <head>
        <!-- ... -->
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

        <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/25.1.3/css/dx.light.css">
        <link rel="stylesheet" href="index.css">

        <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/25.1.3/js/dx.all.js"></script>
        <script type="text/javascript" src="index.js"></script>
    </head>
    <body class="dx-viewport">
        <div id="card-view"></div>
    </body>
</html>

Angular

Add DevExtreme to your Angular application and use the following code to create a CardView:

app.component.html

app.component.ts

app.module.ts

<dx-card-view id="card-view"
    <!-- Configuration goes here -->
>
</dx-card-view>

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {

}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxCardViewModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxCardViewModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Vue

Add DevExtreme to your Vue application and use the following code to create a CardView:

App.vue

<template>
    <DxCardView id="card-view">
        <!-- Configuration goes here -->
    </DxCardView>
</template>

<script setup lang="ts">
import 'devextreme/dist/css/dx.light.css';
import DxCardView from 'devextreme-vue/card-view';
</script>

React

Add DevExtreme to your React application and use the following code to create a CardView:

App.tsx

import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import CardView from 'devextreme-react/card-view';

function App() {
    return (
        <CardView id="card-view">
            {/* Configuration goes here */}
        </CardView>
    );
}

export default App;

Bind CardView to Data

The CardView component can load and update data from different data source types. To use a local array, assign it to the dataSource property and specify the key field in the keyExpr property:

jQuery

index.js

data.js

$(function() {
    $("#card-view").dxCardView({
        dataSource: employees,
        keyExpr: "ID",
    });
});

const employees = [
    {
        ID: 1,
        FullName: "John Heart",
        Position: "CEO",
        Picture: "images/employees/01.png",
        Department: "Management",
        Phone: "+1 (213) 555-9392",
        Email: "jheart@dx-email.com"
    },
    {
        ID: 2,
        FullName: "Samantha Bright",
        Position: "COO",
        Picture: "images/employees/30.png",
        Department: "Management",
        Phone: "+1 (213) 555-2858",
        Email: "samanthab@dx-email.com"
    },
    {
        ID: 3,
        FullName: "Arthur Miller",
        Position: "CTO",
        Picture: "images/employees/10.png",
        Department: "Management",
        Phone: "+1 (310) 555-8583",
        Email: "arthurm@dx-email.com"
    },
    {
        ID: 4,
        FullName: "Robert Reagan",
        Position: "CMO",
        Picture: "images/employees/03.png",
        Department: "Management",
        Phone: "+1 (818) 555-2387",
        Email: "robertr@dx-email.com"
    },
    {
        ID: 5,
        FullName: "Greta Sims",
        Position: "HR Manager",
        Picture: "images/employees/04.png",
        Department: "Human Resources",
        Phone: "+1 (818) 555-6546",
        Email: "gretas@dx-email.com"
    },
    {
        ID: 6,
        FullName: "Brett Wade",
        Position: "IT Manager",
        Picture: "images/employees/05.png",
        Department: "IT",
        Phone: "+1 (626) 555-0358",
        Email: "brettw@dx-email.com"
    },
];

Angular

app.component.html

app.component.ts

employees.service.ts

<dx-card-view
    [dataSource]="employees"
    keyExpr="ID">
</dx-card-view>

import { Component } from '@angular/core';
import { Employee, EmployeesService } from './employees.service';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    employees: Employee[] = [];

    constructor(service: EmployeesService) {
        this.employees = service.getEmployees();
    }
}

import { Injectable } from '@angular/core';

export interface Employee {
    ID: number;
    FullName: string;
    Position: string;
    Picture: string;
    Department: string;
    Phone: string;
    Email: string;
}

const employees: Employee[] = [
    {
        ID: 1,
        FullName: 'John Heart',
        Position: 'CEO',
        Picture: 'images/employees/01.png',
        Department: 'Management',
        Phone: '+1 (213) 555-9392',
        Email: 'jheart@dx-email.com',
    },
    {
        ID: 2,
        FullName: 'Samantha Bright',
        Position: 'COO',
        Picture: 'images/employees/30.png',
        Department: 'Management',
        Phone: '+1 (213) 555-2858',
        Email: 'samanthab@dx-email.com',
    },
    {
        ID: 3,
        FullName: 'Arthur Miller',
        Position: 'CTO',
        Picture: 'images/employees/10.png',
        Department: 'Management',
        Phone: '+1 (310) 555-8583',
        Email: 'arthurm@dx-email.com',
    },
    {
        ID: 4,
        FullName: 'Robert Reagan',
        Position: 'CMO',
        Picture: 'images/employees/03.png',
        Department: 'Management',
        Phone: '+1 (818) 555-2387',
        Email: 'robertr@dx-email.com',
    },
    {
        ID: 5,
        FullName: 'Greta Sims',
        Position: 'HR Manager',
        Picture: 'images/employees/04.png',
        Department: 'Human Resources',
        Phone: '+1 (818) 555-6546',
        Email: 'gretas@dx-email.com',
    },
    {
        ID: 6,
        FullName: 'Brett Wade',
        Position: 'IT Manager',
        Picture: 'images/employees/05.png',
        Department: 'IT',
        Phone: '+1 (626) 555-0358',
        Email: 'brettw@dx-email.com',
    },
];

@Injectable({
    providedIn: 'root'
})
export class EmployeesService {
    getEmployees(): Employee[] {
        return employees;
    }
}

Vue

App.vue

data.ts

<template>
    <DxCardView
        :data-source="employees"
        key-expr="ID">
    </DxCardView>
</template>

<script setup lang="ts">
// ...
import { employees } from './data.ts';
</script>

const employees = [
    {
        ID: 1,
        FullName: "John Heart",
        Position: "CEO",
        Picture: "images/employees/01.png",
        Department: "Management",
        Phone: "+1 (213) 555-9392",
        Email: "jheart@dx-email.com"
    },
    {
        ID: 2,
        FullName: "Samantha Bright",
        Position: "COO",
        Picture: "images/employees/30.png",
        Department: "Management",
        Phone: "+1 (213) 555-2858",
        Email: "samanthab@dx-email.com"
    },
    {
        ID: 3,
        FullName: "Arthur Miller",
        Position: "CTO",
        Picture: "images/employees/10.png",
        Department: "Management",
        Phone: "+1 (310) 555-8583",
        Email: "arthurm@dx-email.com"
    },
    {
        ID: 4,
        FullName: "Robert Reagan",
        Position: "CMO",
        Picture: "images/employees/03.png",
        Department: "Management",
        Phone: "+1 (818) 555-2387",
        Email: "robertr@dx-email.com"
    },
    {
        ID: 5,
        FullName: "Greta Sims",
        Position: "HR Manager",
        Picture: "images/employees/04.png",
        Department: "Human Resources",
        Phone: "+1 (818) 555-6546",
        Email: "gretas@dx-email.com"
    },
    {
        ID: 6,
        FullName: "Brett Wade",
        Position: "IT Manager",
        Picture: "images/employees/05.png",
        Department: "IT",
        Phone: "+1 (626) 555-0358",
        Email: "brettw@dx-email.com"
    },
];

React

App.tsx

data.ts

import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import CardView from 'devextreme-react/card-view';
import { employees } from './data.ts';

function App() {
    return (
        <CardView
            dataSource={employees}
            keyExpr="ID">
        </CardView>
    );
}

export default App;

const employees = [
    {
        ID: 1,
        FullName: "John Heart",
        Position: "CEO",
        Picture: "images/employees/01.png",
        Department: "Management",
        Phone: "+1 (213) 555-9392",
        Email: "jheart@dx-email.com"
    },
    {
        ID: 2,
        FullName: "Samantha Bright",
        Position: "COO",
        Picture: "images/employees/30.png",
        Department: "Management",
        Phone: "+1 (213) 555-2858",
        Email: "samanthab@dx-email.com"
    },
    {
        ID: 3,
        FullName: "Arthur Miller",
        Position: "CTO",
        Picture: "images/employees/10.png",
        Department: "Management",
        Phone: "+1 (310) 555-8583",
        Email: "arthurm@dx-email.com"
    },
    {
        ID: 4,
        FullName: "Robert Reagan",
        Position: "CMO",
        Picture: "images/employees/03.png",
        Department: "Management",
        Phone: "+1 (818) 555-2387",
        Email: "robertr@dx-email.com"
    },
    {
        ID: 5,
        FullName: "Greta Sims",
        Position: "HR Manager",
        Picture: "images/employees/04.png",
        Department: "Human Resources",
        Phone: "+1 (818) 555-6546",
        Email: "gretas@dx-email.com"
    },
    {
        ID: 6,
        FullName: "Brett Wade",
        Position: "IT Manager",
        Picture: "images/employees/05.png",
        Department: "IT",
        Phone: "+1 (626) 555-0358",
        Email: "brettw@dx-email.com"
    },
];

Configure Columns (Fields)

CardView uses the concept of columns from DataGrid. While it has rows and columns, the columns appear as fields on each card. The header shows the column names, and each field on a card includes a caption that usually matches the column dataField, and a unique value specific to the card.

The following code snippet restricts the CardView columns (fields) to FullName, Position, and Email and allows column reordering:

jQuery

index.js

$(function() {
    $("#card-view").dxCardView({
        // ...
        allowColumnReordering: true,
        columns: [
            {
                dataField: "FullName",
                allowHiding: false
            },
            "Position",
            "Email"
        ],
    });
});

Angular

app.component.html

<dx-card-view ...
    [allowColumnReordering]="true"
>
    <dxi-card-view-column
        dataField="FullName"
        [allowHiding]="false"
    >
    </dxi-card-view-column>
    <dxi-card-view-column
        dataField="Position"
    >
    </dxi-card-view-column>
    <dxi-card-view-column
        dataField="Email"
    >
    </dxi-card-view-column>
</dx-card-view>

Vue

App.vue

<template>
    <DxCardView ...
        :allow-column-reordering="true"
    >
        <DxColumn data-field="FullName" :allow-hiding="false" />
        <DxColumn data-field="Position" />
        <DxColumn data-field="Email" />
    </DxCardView>
</template>

<script setup lang="ts">
// ...
import DxCardView, { DxColumn } from 'devextreme-vue/card-view';
</script>

React

App.tsx

import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import CardView, { Column } from 'devextreme-react/card-view';
import { employees } from './data.ts';

function App() {
    return (
        <CardView ...
            allowColumnReordering={true}
        >
            <Column dataField="FullName" allowHiding={false} />
            <Column dataField="Position" />
            <Column dataField="Email" />
        </CardView>
    );
}

export default App;

Filter and Search Data

The CardView includes the following UI elements used to search and filter data:

In this tutorial, the header filter and the search panel are displayed:

jQuery

index.js

$(function() {
    $("#card-view").dxCardView({
        // ...
        headerFilter: {
            visible: true
        },
        searchPanel: {
            visible: true
        },
    });
});

Angular

app.component.html

<dx-card-view ... >
    <dxo-card-view-header-filter [visible]="true"></dxo-card-view-header-filter>
    <dxo-card-view-search-panel [visible]="true"></dxo-card-view-search-panel>
</dx-card-view>

Vue

App.vue

<template>
    <DxCardView ... >
        <DxHeaderFilter :visible="true" />
        <DxSearchPanel :visible="true" />
    </DxCardView>
</template>

<script setup lang="ts">
// ...
import DxCardView, { DxHeaderFilter, DxSearchPanel } from 'devextreme-vue/card-view';
</script>

React

App.tsx

import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import CardView, { HeaderFilter, SearchPanel } from 'devextreme-react/card-view';
import { employees } from './data.ts';

function App() {
    return (
        <CardView ... >
            <HeaderFilter visible={true} />
            <SearchPanel visible={true} />
        </CardView>
    );
}

export default App;

Select Cards

CardView supports single and multiple selection modes. Use the selection.mode property to specify the mode.

jQuery

index.js

$(function() {
    $("#card-view").dxCardView({
        // ...
        selection: {
            mode: "multiple"
        },
    });
});

Angular

app.component.html

<dx-card-view ... >
    <dxo-card-view-selection mode="multiple"></dxo-card-view-selection>
</dx-card-view>

Vue

App.vue

<template>
    <DxCardView ... >
        <DxSelection mode="multiple" />
    </DxCardView>
</template>

<script setup lang="ts">
// ...
import DxCardView, { DxSelection } from 'devextreme-vue/card-view';
</script>

React

App.tsx

import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import CardView, { Selection } from 'devextreme-react/card-view';
import { employees } from './data.ts';

function App() {
    return (
        <CardView ... >
            <Selection mode="multiple" />
        </CardView>
    );
}

export default App;

Add Pagination

To add pagination to CardView, configure the following settings:

paging - enables paging
pager - activates UI elements for pagination

jQuery

index.js

$(function() {
    $("#card-view").dxCardView({
        // ...
        paging: {
            pageSize: 3,
        },
        pager: {
            showInfo: true,
            showNavigationButtons: true,
            showPageSizeSelector: true
        },
    });
});

Angular

app.component.html

<dx-card-view ... >
    <dxo-card-view-paging [pageSize]="3"></dxo-card-view-paging>
    <dxo-card-view-pager
        [showInfo]="true"
        [showNavigationButtons]="true"
        [showPageSizeSelector]="true"
    ></dxo-card-view-pager>
</dx-card-view>

Vue

App.vue

<template>
    <DxCardView ... >
        <DxPaging :page-size="3" />
        <DxPager
            :show-info="true"
            :show-navigation-buttons="true"
            :show-page-size-selector="true"
        />
    </DxCardView>
</template>

<script setup lang="ts">
// ...
import DxCardView, { DxPaging, DxPager } from 'devextreme-vue/card-view';
</script>

React

App.tsx

import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import CardView, { Paging, Pager } from 'devextreme-react/card-view';
import { employees } from './data.ts';

function App() {
    return (
        <CardView ... >
            <Paging
                pageSize={3}
            />
            <Pager
                showInfo={true}
                showNavigationButtons={true}
                showPageSizeSelector={true}
            />
        </CardView>
    );
}

export default App;

Configure Column Chooser

CardView displays all columns from the columns array. To hide a column, set its visible property to false. Hidden columns appear in the columnChooser. Users can restore hidden columns from it. To enable the column chooser, set the columnChooser.enabled property to true. If a column should not be visible in the column chooser, do not declare it in the columns array.

You can also specify other column chooser settings, such as mode, position, and selection:

jQuery

index.js

$(function() {
    $("#card-view").dxCardView({
        // ...
        columnChooser: {
            enabled: true,
            height: 340,
            mode: "select",
            position: {
                my: "right top",
                at: "right bottom",
                of: ".dx-cardview-column-chooser-button"
            },
            selection: {
                selectByClick: true
            }
        }
    });
});

Angular

app.component.html

<dx-card-view ... >
    <dxo-card-view-column-chooser [enabled]="true" [height]="340" mode="select">
        <dxo-card-view-column-chooser-selection
            [selectByClick]="true"
        ></dxo-card-view-column-chooser-selection>
        <dxo-card-view-position
            my="right top"
            at="right bottom"
            of=".dx-cardview-column-chooser-button"
        ></dxo-card-view-position>
    </dxo-card-view-column-chooser>
</dx-card-view>

Vue

App.vue

<template>
    <DxCardView ... >
        <DxColumnChooser
            :enabled="true"
            :height="340"
            mode="select"
        >
            <DxPosition
                my="right top"
                at="right bottom"
                of=".dx-cardview-column-chooser-button"
            />
            <DxSelection :select-by-click="true" />
        </DxColumnChooser>
    </DxCardView>
</template>

<script setup lang="ts">
// ...
import DxCardView, { DxColumnChooser, DxPosition, DxSelection } from 'devextreme-vue/card-view';
</script>

React

App.tsx

import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import CardView, { ColumnChooser, Position, Selection } from 'devextreme-react/card-view';
import { employees } from './data.ts';

function App() {
    return (
        <CardView ... >
            <ColumnChooser
                enabled={true}
                height={340}
                mode="select"
            >
                <Position
                    my="right top"
                    at="right bottom"
                    of=".dx-cardview-column-chooser-button"
                />
                <Selection selectByClick={true} />
            </ColumnChooser>
        </CardView>
    );
}

export default App;

Was this topic helpful?

Thank you!

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

Thank you for the feedback!