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
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.