Add DevExtreme to your jQuery application and use the code below to create a TileView component. This example specifies the dataSource property to define items. You can also specify TileView items in the items[] array.

index.js

index.html

data.js

$(function() {
    $('#tileview').dxTileView({
        dataSource: tiles,
    });
});

<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.6/css/dx.light.css">
        <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/25.1.6/js/dx.all.js"></script>
        <script type="text/javascript" src="index.js"></script>
        <script type="text/javascript" src="data.js"></script>
    </head>
    <body>
        <div id="tileview"></div>
    </body>
</html>

const tiles = [{
    icon: 'datatrending',
    title: 'Boost Productivity',
    text: 'Tools and data that help you get the most from your team.',
}, ... ]

Angular

Add DevExtreme to your Angular application and use the code below to create a TileView component. This example specifies the dataSource property to define items. You can also specify TileView items in the items[] array.

app.component.html

app.component.ts

app.module.ts

data.ts

<dx-tile-view
    [dataSource]="tiles"
></dx-tile-view>

import { Component } from '@angular/core';
import { tiles } from './data';

export class AppComponent {
    // Create a local version of tiles to implement in app.component.html
    tiles = tiles;
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DxTileViewModule } from 'devextreme-angular/ui/tile-view';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

export const tiles = [{
    icon: 'datatrending',
    title: 'Boost Productivity',
    text: 'Tools and data that help you get the most from your team.',
}, ... ]

Vue

Add DevExtreme to your Vue application and use the code below to create a TileView component. This example specifies the dataSource property to define items. You can also specify TileView items in the items[] array.

App.vue

data.js

<script setup lang="ts">
    import { DxTileView } from 'devextreme-vue/tile-view';
    import { tiles } from '@/data.js';
</script>
<template>
    <DxTileView
        :data-source="tiles"
    ></DxTileView>
</template>

export const tiles = [{
    icon: 'datatrending',
    title: 'Boost Productivity',
    text: 'Tools and data that help you get the most from your team.',
}, ... ]

React

Add DevExtreme to your React application and use the code below to create a TileView component. This example specifies the dataSource property to define items. You can also specify TileView items in the items[] array.

App.tsx

data.js

import { TileView } from 'devextreme-react/tile-view';
import { tiles } from './data.js';

export default function App(): JSX.Element {
    return (
        <TileView
            dataSource={tiles}
        />
    );
}

const tiles = [{
    icon: 'datatrending',
    title: 'Boost Productivity',
    text: 'Tools and data that help you get the most from your team.',
}, ... ]

Specify an Item Template

jQuery

At this point, tiles display text defined in the items[].text property. To customize tile content, define templates. Specify items[].template to customize a specific item and itemTemplate to customize all items. This example uses the itemTemplate property:

index.js

$(function() {
    $('#tileview').dxTileView({
        dataSource: tiles,
        itemTemplate(itemData, itemIndex, itemElement) {
            const iconBox = $('<div>')
                .addClass('icon-box')
                .append(
                    $('<i>').addClass(`dx-icon-${itemData.icon}`),
                );

            const textBox = $('<div>')
                .addClass('text-box')
                .append(
                    $('<h3>')
                        .addClass('tile-title')
                        .text(itemData.title),
                    $('<p>')
                        .addClass('tile-text')
                        .text(itemData.text),
                );

            itemElement.append(iconBox);
            itemElement.append(textBox);
        },
    });
});

Angular

app.component.html

<dx-tile-view
    [dataSource]="tiles"
    itemTemplate="tileTemplate"
>
    <div *dxTemplate="let data of 'tileTemplate'">
        <div class="icon-box">
            <i class="dx-icon-{{data.icon}}"></i>
        </div>
        <div class="text-box">
            <h3 class="tile-title">{{data.title}}</h3>
            <p class="tile-text">{{data.text}}</p>
        </div>
    </div>
</dx-tile-view>

Vue

App.vue

<template>
    <DxTileView
        :data-source="tiles"
        item-template="tileTemplate"
    >
        <template #tileTemplate="data">
            <div class="icon-box">
                <i :class="`dx-icon-${data.data.icon}`"></i>
            </div>
            <div class="text-box">
                <h3 class="tile-title">{{ data.data.title }}</h3>
                <p class="tile-text">{{ data.data.text }}</p>
            </div>
        </template>
    </DxTileView>
</template>

React

At this point, tiles display text defined in the items[].text property. To customize tile content, define templates. Specify items[].render or items[].component to customize a specific item and itemRender or itemComponent to customize all items. This example uses the itemRender property:

App.tsx

function TileRender(data: { icon: string; title: string; text: string }): JSX.Element {
    return (
        <>
            <div className="icon-box">
                <i className={`dx-icon-${data.icon}`}></i>
            </div>
            <div className="text-box">
                <h3 className="tile-title">{data.title}</h3>
                <p className="tile-text">{data.text}</p>
            </div>
        </>
    );
}

export default function App(): JSX.Element {
    return (
        <TileView
            dataSource={tiles}
            itemRender={TileRender}
        />
    );
}

Customize TileView Appearance

To customize the appearance of TileView items, this example implements the following styles:

CSS

:root {
    color-scheme: dark;
}

.demo-container {
    height: 496px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dx-tile {
    border-radius: 8px;
    border-color: var(--dx-color-border);
}

.dx-tile-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
}

.icon-box {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    background-color: light-dark(#f0f0f0, #383838);
}

.text-box {
    margin-top: auto;
    height: 84px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

h3.tile-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px;
}

.tile-text {
    margin: 0;
    height: 54px;
}

.icon-box i {
    font-size: 20px;
}

.dx-tile.dx-state-hover {
    border-color: var(--dx-color-border);
    background-color: light-dark(#f5f5f5, #3d3d3d);
}

.dx-state-focused {
    outline: 2px solid var(--dx-color-primary);
}

This application modifies DevExtreme CSS variables defined in the imported theme file (dx.fluent.blue.dark.css). To integrate support for dark and light themes, this example also implements the color-scheme CSS style and specifies multiple color styles using the light-dark() function.

Configure TileView Properties

This example specifies the following TileView properties:

itemMargin
Configures the margin between TileView items.
baseItemWidth/baseItemHeight
Specify the base width/height of TileView items.
height
Configures component height.
activeStateEnabled
Specifies if TileView items are clickable.

jQuery

index.js

$(function() {
    $('#tileview').dxTileView({
        dataSource: tiles,
        itemMargin: 16,
        baseItemWidth: 280,
        baseItemHeight: 160,
        height: 368,
        activeStateEnabled: false,
        itemTemplate() {
            // ...
        }
    });
});

Angular

app.component.html

<dx-tile-view
    [dataSource]="tiles"
    [itemMargin]="16"
    [baseItemWidth]="280"
    [baseItemHeight]="160"
    [height]="368"
    [activeStateEnabled]="false"
    itemTemplate="tileTemplate"
>
    <!-- ... -->
</dx-tile-view>

Vue

App.vue

<template>
    <DxTileView
        :data-source="tiles"
        :item-margin="16"
        :base-item-width="280"
        :base-item-height="160"
        :height="368"
        :active-state-enabled="false"
        item-template="tileTemplate"
    >
        <!-- ... -->
    </DxTileView>
</template>

React

App.tsx

export default function App(): JSX.Element {
    return (
        <TileView
            dataSource={tiles}
            itemMargin={16}
            baseItemWidth={280}
            baseItemHeight={160}
            height={368}
            activeStateEnabled={false}
            itemRender={TileRender}
        />
    );
}

You can also configure the following properties to further customize the TileView component:

items[].widthRatio/items[].heightRatio
Adjust an item's width/height. Set these properties to create tiles of different sizes.
onItemClick
Configures a handler function for the ItemClickEvent.
direction
Specifies TileView orientation.
showScrollbar
Configures scrollbar visibility. The TileView scrollbar appears at the bottom of the component when direction is "horizontal" (default) and on the right when direction is "vertical".

Feedback

Was this page helpful?

Thanks for your feedback!
Any other suggestions? Tell us here.

Additional Feedback

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

JavaScript/jQuery TileView - Getting Started

jQuery

Angular

Vue

React

Create TileView and Assign a Data Source

jQuery

Angular

Vue

React

Specify an Item Template

jQuery

Angular

Vue

React

Customize TileView Appearance

Configure TileView Properties

jQuery

Angular

Vue

React