React Accordion - Customize Item Appearance

For a minor customization of Accordion panels, you can define specific fields in panel data objects. For example, the following code generates three panels, the first and third are not customized, the second is disabled.

App.js
  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { Accordion } from 'devextreme-react/accordion';
  •  
  • const accordionData = [{
  • title: "Employee",
  • text: "John Smith"
  • }, {
  • title: "Phone Number",
  • text: "(555)555-5555",
  • disabled: true
  • }, {
  • title: "Position",
  • text: "Network Administrator"
  • }];
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <Accordion
  • dataSource={accordionData}
  • />
  • );
  • }
  • }
  •  
  • export default App;

If you need a more flexible solution, define an itemTemplate and itemTitleTemplate:

App.js
  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { Accordion } from 'devextreme-react/accordion';
  •  
  • const accordionData = [{
  • firstName: "John", lastName: "Smith",
  • birthDate: "1986/03/14",
  • position: "Network Administrator"
  • }, {
  • firstName: "Samantha", lastName: "Jones",
  • birthDate: "1972/11/13",
  • position: "Technical Writer"
  • }];
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <Accordion
  • dataSource={accordionData}
  • itemTitleRender={this.renderTitle}
  • itemRender={this.renderItem}
  • />
  • );
  • }
  •  
  • renderTitle(data) {
  • return (
  • <div>
  • <span>{data.firstName}&nbsp;</span>
  • <span>{data.lastName}</span>
  • </div>
  • );
  • }
  •  
  • renderItem(data) {
  • return (
  • <div>
  • <span>{data.birthDate}&nbsp;</span>
  • <span>{data.position}</span>
  • </div>
  • );
  • }
  • }
  •  
  • export default App;

View Demo

You can also customize individual items. Declare them using the dxItem component:

App.js
  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { Accordion, Item } from 'devextreme-react/accordion';
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <Accordion>
  • <Item title="John Smith">
  • <span>Network Administrator</span>
  • </Item>
  • <Item title="Samantha Jones">
  • <span>Technical Writer</span>
  • </Item>
  • </Accordion>
  • );
  • }
  • }
  •  
  • export default App;
See Also