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.

  • 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.

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;
  • }

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