Angular List - Customize Item Appearance

For a minor customization of List items, you can define specific fields in item data objects. For example, the following code generates three items: each item has a badge, the second is disabled and the third is hidden.

App.js
  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import List from 'devextreme-react/list';
  •  
  • const fruits = [
  • { text: "Apples", badge: 10 },
  • { text: "Oranges", badge: 12, disabled: true },
  • { text: "Lemons", badge: 15, visible: false }
  • ];
  •  
  • export default function App() {
  • return (
  • <List
  • dataSource={fruits}
  • />
  • );
  • }

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

App.js
  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import List from 'devextreme-react/list';
  •  
  • const fruits = [
  • { name: "Apples", count: 10 },
  • { name: "Oranges", count: 12 },
  • { name: "Lemons", count: 15 },
  • { name: "Pears", count: 20 },
  • { name: "Pineapples", count: 3 }
  • ];
  •  
  • const ListItem = (data) => {
  • return (
  • <div>
  • <b>{ data.name }</b>
  • <br />
  • <p style={{ margin: '0px' }}>{ data.count }</p>
  • </div>
  • );
  • };
  •  
  • export default function App() {
  • return (
  • <List
  • dataSource={fruits}
  • itemRender={ListItem}
  • />
  • );
  • }

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

See Also