React Common - Object Structures - template
Templates are passed as properties 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 ofdata
, 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 UI component templates.element
A jQuery element that represents the UI component 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 UI component:
- 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 UI components also support templates for individual items. Do not specify the UI component's dataSource property if you use individual templates.
- 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
If you have technical questions, please create a support ticket in the DevExpress Support Center.