React CardView - Overview

DevExtreme CardView is a responsive grid that disaplays data in cards. It supports data editing with validation, search, filtering, layout customization, and more.

This overview highlights CardView elements, key features, and what to explore next.

Key Features

  • Data Binding
    CardView supports loading and updating data from different data source types. It handles large data sets efficiently with both local data stores and remote data operations.

  • Editing Operations
    CardView allows users to add, update, and delete cards. You can specify which operations are accessible to users by defining allowAdding, allowDeleting, and allowUpdating in the editing object.

  • Adaptability
    CardView supports screens of all sizes. To adapt the component to your needs, you can specify the following properties:

  • Filtering, Sorting, and Searching
    Configure headerFilter or filterPanel to allow users to filter CardView data. Enable sorting by single or multiple fields in the sorting object. Specify search settings in the searchPanel object.

  • Selection Modes
    CardView supports single and multiple card selection. Users can select cards with mouse actions or keyboard shortcuts. Configure selection mode and other settings in the selection object.

  • Column Hiding and Reordering
    You can use columnChooser to change column visibiity. To reorder columns, rearrange column headers in the headerPanel. You can also initialize columns in a specific order and visibility state by configuring the columns[] array.

  • Card Customization
    You can customize the appearance of card visual elements with different properties, including:

    To customize card layout and appearance, configure cardTemplate.

  • Component Customization
    The following properties customize the appearance and functionality of the CardView component: