React Common - Object Structures - template

A template notation used to specify templates for widget elements.

Templates are passed as options that end with ...Template (in jQuery, Angular, and Vue) or ...Render/...Component (in React).

Each template has access to the following parameters:

  • data
    A data source object or an object with fields specific to a particular template. For information on the contents of data, refer to the Template Data section of the template's API reference article.

  • index
    A zero-based index of the item in the collection. Available only in collection widget templates.

  • element
    A jQuery element that represents the widget element being customized. Available only if you use jQuery.

The following code shows how to declare a template and use these parameters. This code declares an itemTemplate for the List widget:

App.js
  • import React from 'react';
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import List from 'devextreme-react/list';
  •  
  • const renderListItem = (data, index) => {
  • return (
  • <div>{index} - {data.itemProperty}</div>
  • );
  • }
  •  
  • class App extends React.Component {
  • listData = [
  • { itemProperty: 'someValue' },
  • // ...
  • ];
  •  
  • render() {
  • return (
  • <List
  • items={this.listData}
  • itemRender={renderListItem}
  • />
  • );
  • }
  • }
  • export default App;

Collection widgets also support templates for individual items. Do not specify the widget's dataSource option if you use individual templates.

App.js
  • import React from 'react';
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import List, { Item } from 'devextreme-react/list';
  • import Button from 'devextreme-react/button';
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <List>
  • <Item>
  • <i>Item 1</i>
  • </Item>
  • <Item>
  • <i>Item 2</i>
  • </Item>
  • <Item>
  • Item with a nested component
  • <Button text="Click me" />
  • </Item>
  • </List>
  • );
  • }
  • }
  • export default App;
See Also