React TileView - Customize Tile Appearance

For a minor customization of tiles, you can define specific fields in item data objects. For example, the following code generates three tiles: the first is disabled, the second is not customized, the third is hidden.

jQuery
JavaScript
$(function() {
    $("#tileViewContainer").dxTileView({
        dataSource: [
            { text: "Alabama", disabled: true },
            { text: "Alaska" },
            { text: "Arizona", visible: false }
        ]
    });
});
Angular
TypeScript
HTML
import { DxTileViewModule } from "devextreme-angular";
// ...
export class AppComponent {
    tileViewData = [
        { text: "Alabama", disabled: true },
        { text: "Alaska" },
        { text: "Arizona", visible: false }
    ];
}
@NgModule({
    imports: [
        // ...
        DxTileViewModule
    ],
    // ...
})
<dx-tile-view 
    [dataSource]="tileViewData">
</dx-tile-view>
Vue
<template>
    <DxTileView :data-source="dataSource"/>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxTileView } from 'devextreme-vue/tile-view';

export default {
    components: {
        DxTileView
    },
    data() {
        return {
            dataSource: [
                { text: 'Alabama', disabled: true },
                { text: 'Alaska' },
                { text: 'Arizona', visible: false }
            ]
        };
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { TileView } from 'devextreme-react/tile-view';

const dataSource = [
    { text: 'Alabama', disabled: true },
    { text: 'Alaska' },
    { text: 'Arizona', visible: false }
];

class App extends React.Component {
    render() {
        return (
            <TileView dataSource={dataSource}/>
        );
    }
}

export default App;

If you need a more flexible solution, define an itemTemplate.

jQuery
JavaScript
CSS
const tileViewData = [
    { name: "Alabama", capital: "Montgomery" },
    { name: "Alaska", capital: "Juneau" },
    { name: "Arizona", capital: "Phoenix" },
    // ...
];

$(function() {
    $("#tileViewContainer").dxTileView({
        dataSource: tileViewData,
        itemTemplate: function (itemData, itemIndex, itemElement) {
            itemElement.addClass("tile");
            itemElement.append(
                "<p style='font-size:larger'><b>" + itemData.name + "</b></p>",
                "<p>Capital: <i>" + itemData.capital + "</i></p>"
            )
        }
    });
});
.tile {
    border-radius: .5em;
    text-align: center;
    color: white;
    background: gray;
}
Angular
HTML
TypeScript
CSS
<dx-tile-view 
    [dataSource]="tileViewData"
    [itemMargin]="15"
    [baseItemHeight]="80"
    [baseItemWidth]="140"
    itemTemplate="tile">
    <div class="tile" *dxTemplate="let data of 'tile'">
        <p style="font-size:larger"><b>{{data.name}}</b></p>
        <p>Capital: <i>{{data.capital}}</i></p>
    </div>
</dx-tile-view>
import { DxTileViewModule } from "devextreme-angular";
// ...
export class AppComponent {
    tileViewData = [
        { name: "Alabama", capital: "Montgomery" },
        { name: "Alaska", capital: "Juneau" },
        { name: "Arizona", capital: "Phoenix" },
        // ...
    ];
}
@NgModule({
    imports: [
        // ...
        DxTileViewModule
    ],
    // ...
})
.tile {
    border-radius: .5em;
    text-align: center;
    color: white;
    background: gray;
}
Vue
App.vue
<template>
    <DxTileView
        :data-source="tileViewData"
        :item-margin="15"
        :base-item-height="80"
        :base-item-width="140"
        item-template="tile">
        <template #tile="{ data }">
            <div>
                <p style="font-size:larger"><b>{{data.name}}</b></p>
                <p>Capital: <i>{{data.capital}}</i></p>
            </div>
        </template>
    </DxTileView>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxTileView from "devextreme-vue/tile-view";

export default {
    components: {
        DxTileView
    },
    data() {
        return {
            tileViewData: [
                { name: "Alabama", capital: "Montgomery" },
                { name: "Alaska", capital: "Juneau" },
                { name: "Arizona", capital: "Phoenix" },
                // ...
            ]
        };
    }
};
</script>

<style>
.tile {
    border-radius: .5em;
    text-align: center;
    color: white;
    background: gray;
}
</style>
React
App.js
styles.css
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { TileView } from 'devextreme-react/tile-view';

const tileViewData = [
    { name: "Alabama", capital: "Montgomery" },
    { name: "Alaska", capital: "Juneau" },
    { name: "Arizona", capital: "Phoenix" },
    // ...
];

const renderTileItem = (itemData) => {
    return (
        <div>
            <p style={{fontSize: "larger"}}>{itemData.name}</p>
            <p><i>{itemData.capital}</i></p>
        </div>
    );
}

class App extends React.Component {
    render() {
        return (
            <TileView
                items={tileViewData}
                itemRender={renderTileItem}
            />
        );
    }
}
export default App;
.tile {
    border-radius: .5em;
    text-align: center;
    color: white;
    background: gray;
}
jQuery

You can also customize individual tiles. Declare them as scripts and reference them in the template property or assign a customization function straight to this property.

HTML
JavaScript
<div id="tileViewContainer"></div>
<script id="individualTileTemplate" type="text/html">
    <span>Comment</span>
</script>
$(function() {
    $("#tileViewContainer").dxTileView({
        dataSource: [{
            name: "Alaska", 
            capital: "Juneau",
            template: $("#individualTileTemplate")
        }]
    });
});
Angular

You can also customize individual tiles. Declare them using the dxItem component.

HTML
TypeScript
<dx-tile-view>
    <dxi-item>
        <span>User</span>
    </dxi-item>
    <dxi-item>
        <span>Comment</span>
    </dxi-item>
</dx-tile-view>
import { DxTileViewModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTileViewModule
    ],
    // ...
})
Vue

You can also customize individual tiles. Declare them using the dxItem component.

<template>
    <DxTileView>
        <DxItem>
            <template #default>
                <span>User</span>
            </template>
        </DxItem>
        <DxItem>
            <template #default>
                <span>Comment</span>
            </template>
        </DxItem>
    </DxTileView>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxTileView, { DxItem } from "devextreme-vue/tile-view";

export default {
    components: {
        DxTileView,
        DxItem
    }
};
</script>
React

You can also customize individual tiles. Declare them using the dxItem component.

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { TileView, Item } from 'devextreme-react/tile-view';

class App extends React.Component {
    render() {
        return (
            <TileView>
                <Item>
                    <span>User</span>
                </Item>
                <Item>
                    <span>Comment</span>
                </Item>
            </TileView>
        );
    }
}

export default App;

Built-In Template Engine Demo 3rd-Party Template Engine Demo

See Also