Vue 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.
jQuery
const fruits = [ { text: "Apples", badge: 10 }, { text: "Oranges", badge: 12, disabled: true }, { text: "Lemons", badge: 15, visible: false } ]; $(function() { $("#listContainer").dxList({ dataSource: fruits }); });
Angular
import { DxListModule } from "devextreme-angular"; // ... export class AppComponent { fruits = [ { text: "Apples", badge: 10 }, { text: "Oranges", badge: 12, disabled: true }, { text: "Lemons", badge: 15, visible: false } ]; } @NgModule({ imports: [ // ... DxListModule ], // ... })
<dx-list [dataSource]="fruits"> </dx-list>
Vue
<template> <DxList :data-source="fruits" /> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxList from 'devextreme-vue/list'; const fruits = [ { text: "Apples", badge: 10 }, { text: "Oranges", badge: 12, disabled: true }, { text: "Lemons", badge: 15, visible: false } ]; export default { components: { DxList }, data() { return { fruits } } } </script>
React
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.
jQuery
const fruits = [ { name: "Apples", count: 10 }, { name: "Oranges", count: 12 }, { name: "Lemons", count: 15 }, { name: "Pears", count: 20 }, { name: "Pineapples", count: 3 } ]; $(function() { $("#listContainer").dxList({ dataSource: fruits, itemTemplate: function(data, _, element) { element.append( $("<b>").text(data.fruit), $("<br />"), $("<p>").text(data.count).css("margin", 0) ) } }); });
Angular
<dx-list [dataSource]="fruits" itemTemplate="listItem"> <div *dxTemplate="let item of 'listItem'"> <b>{{item.name}}</b><br /> <p style="margin:0px">{{item.count}}</p> </div> </dx-list>
import { DxListModule } from "devextreme-angular"; // ... export class AppComponent { fruits = [ { name: "Apples", count: 10 }, { name: "Oranges", count: 12 }, { name: "Lemons", count: 15 }, { name: "Pears", count: 20 }, { name: "Pineapples", count: 3 } ]; } @NgModule({ imports: [ // ... DxListModule ], // ... })
Vue
<template> <DxList :data-source="fruits" item-template="list-item"> <template #list-item="{ data }"> <div> <b>{{ data.name }}</b> <br /> <p style="margin:0px">{{ data.count }}</p> </div> </template> </DxList> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxList from 'devextreme-vue/list'; const fruits = [ { name: "Apples", count: 10 }, { name: "Oranges", count: 12 }, { name: "Lemons", count: 15 }, { name: "Pears", count: 20 }, { name: "Pineapples", count: 3 } ]; export default { components: { DxList }, data() { return { fruits } } } </script>
React
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} /> ); }
jQuery
You can also customize an individual List item. For this purpose, declare a template for this item as a script and pass its id
to the template field.
<script id="individualTemplate" type="text/html"> <!-- ... --> </script>
const fruits = [ { name: "Apples", count: 10 }, { name: "Oranges", count: 12, template: $("#individualTemplate") }, // ... ];
Built-In Template Engine Demo 3rd-Party Template Engine Demo
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.