React TabPanel - Customize Item Appearance

An item in the TabPanel UI component includes a tab and a view. For a minor customization of TabPanel items, you can define specific fields in item data objects. For example, the following code generates three items: the first has a badge, the second is disabled, the third has an icon.

App.js
  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import TabPanel from 'devextreme-react/tab-panel';
  •  
  • const tabPanelItems = [{
  • title: 'Info',
  • text: 'This is Info Tab',
  • badge: 'New'
  • }, {
  • title: 'Contacts',
  • text: 'This is Contacts Tab',
  • disabled: true
  • }, {
  • title: 'Address',
  • text: 'This is Address Tab',
  • icon: 'home'
  • }];
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <TabPanel
  • items={tabPanelItems}
  • />
  • );
  • }
  • }
  •  
  • export default App;

If you need a more flexible solution, define itemTemplate and itemTitleTemplate for views and tabs, respectively.

App.js
  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { TabPanel } from 'devextreme-react/tab-panel';
  •  
  • const tabPanelItems = [{
  • title: 'Info',
  • data: { firstName: 'John', lastName: 'Smith', birthYear: 1986 }
  • }, {
  • title: 'Contacts',
  • data: { phone: '(555)555-5555', email: 'John.Smith@example.com' }
  • }];
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <TabPanel
  • items={tabPanelItems}
  • itemTitleRender={this.renderTitle}
  • itemRender={this.renderItem}
  • />
  • );
  • }
  •  
  • renderTitle(data) {
  • return (
  • <div>
  • <p>{data.title};</p>
  • </div>
  • );
  • }
  •  
  • renderItem(content) {
  • return (
  • <div style={{ margin: 25 }}>
  • <h1>{content.title}</h1>
  • <div style={{ textAlign: 'left' }}>
  • {
  • Object.keys(content.data).map(key => {
  • return (
  • <p key={key}>
  • {key}: <b>{content.data[key]}</b>
  • </p>
  • )}
  • )
  • }
  • </div>
  • </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 { TabPanel, Item } from 'devextreme-react/tab-panel';
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <TabPanel>
  • <Item title="Info">
  • <p>This is Info Tab</p>
  • </Item>
  • <Item title="Contacts">
  • <p>This is Contacts Tab</p>
  • </Item>
  • </TabPanel>
  • );
  • }
  • }
  •  
  • export default App;
See Also