Skip to main content

Compact Card

The Compact Card control is designed to display a set of compact cards containing information such as fullname, email, and avatars. Users can interact with these cards by selecting or performing actions.

Compact Card Preview
Compact Card Preview

Binding Data Options

The Compact Card control accepts data in an array of objects, each representing a card's information. Here's an example of the data bind format:

"fullname": "Maria Gerhold",
"email": "",
"avatar": "",
"_isSelected": false
"fullname": "Fermin Schumm",
"email": "",
"avatar": "",
"_isSelected": false
// ... (additional card data)


ThemeBorder color of the control.
LayoutChoose between "Card" or "List" layout.
Max WidthMaximum width of the control (percentage).
SpacingSpacing between cards (in pixels).
Cards In RowNumber of cards displayed in a row on different devices.


HeadersDisplay options like cover image, title, detailed view.
Cover ImageShows the image column as Cover Image
TitleIs the column name selected as Title for the card.
Detailed ViewShows the detailed view icon that opens the Detailed view of the selected row.


Font SizeFont size of the data.
Font WeightFont weight of the data.
Font ColorFont color of the data.
Spacing Between PropertiesSpacing between different properties.
Visible ColumnsNumber of visible columns.
Fit to ScreenOption to fit data to the screen.


AllowOption to enable or disable pagination.


SearchbarOption to show or hide the search bar.
PlaceholderText for the search bar placeholder.
ButtonsAvailable action buttons (e.g., Download, Refresh).
FiltersOption to persist filters.
Quick FilterOption to enable quick filter.
SortingOption to enable sorting.
On Card ClickAction to perform when a card is clicked.
Select CardOption to enable single card selection or multiple or navigation with selection.
ActionOptions to show or hide specific action buttons.

Control Outputs

The output from the Compact Card control is represented in the following table:

compactcardSelected card's data, including fullname, email, avatar, etc.


selection_changeTriggers when there is a change in the selected card(s).
action1_clickTriggers when the first custom action button is clicked.