jQuery/JS Common - Object Structures - template
Templates are passed as properties that end with ...Render or ...Component. 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. Can be available only in collection UI component templates.
The following code shows how to declare a template and use these parameters. This code declares an itemRender for the List UI component:
- import React from 'react';
- 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 are components that include the items property. These 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.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.