React Lookup - Enable Grouping

The Lookup can organize items in groups. If you use a simple array as a data source, its objects must have the key and items fields.

  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { Lookup } from 'devextreme-react/lookup';
  •  
  • const lookupData = [{
  • key: 'Mr. John Heart',
  • items: ['Google AdWords Strategy', 'New Brochures', 'Update NDA Agreement']
  • }, {
  • key: 'Mrs. Olivia Peyton',
  • items: ['Update Personnel Files', 'Non-Compete Agreements', 'Give Final Approval for Refunds']
  • }, // ...
  • ];
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <Lookup
  • dataSource={lookupData}
  • grouped={true}
  • />
  • );
  • }
  • }
  •  
  • export default App;
NOTE
Only one-level grouping is supported.

If you use the DevExtreme DataSource, specify its group property. In both cases, you need to make the Lookup know that its data source is grouped by assigning true to the grouped property.

  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { Lookup } from 'devextreme-react/lookup';
  • import DataSource from "devextreme/data/data_source";
  •  
  • const lookupData = [
  • { name: 'Amelia', birthYear: 1991, gender: 'female' },
  • { name: 'Benjamin', birthYear: 1983, gender: 'male' },
  • { name: 'Andrew', birthYear: 1991, gender: 'male' },
  • { name: 'Daniela', birthYear: 1983, gender: 'female' },
  • { name: 'Lee', birthYear: 1983, gender: 'male' },
  • { name: 'Betty', birthYear: 1983, gender: 'female' }
  • ];
  •  
  • class App extends React.Component {
  • constructor(props) {
  • super(props);
  •  
  • this.dataSource = new DataSource({
  • store: lookupData,
  • group: 'gender'
  • });
  • }
  •  
  • render() {
  • return (
  • <Lookup
  • dataSource={this.dataSource}
  • grouped={true}
  • displayExpr="name"
  • valueExpr="name"
  • />
  • );
  • }
  • }
  •  
  • export default App;

To customize group headers, specify a groupTemplate.

  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { Lookup } from 'devextreme-react/lookup';
  • import DataSource from "devextreme/data/data_source";
  •  
  • const renderGroup = (data, index) => {
  • return (
  • <div>[{index + 1}] Assigned: {data.key}</div>
  • );
  • }
  •  
  • class App extends React.Component {
  • constructor(props) {
  • super(props);
  •  
  • this.dataSource = [{
  • key: "Mr. John Heart",
  • items: ["Google AdWords Strategy", "New Brochures", "Update NDA Agreement"]
  • }, {
  • key: "Mrs. Olivia Peyton",
  • items: ["Update Personnel Files", "Non-Compete Agreements", "Give Final Approval for Refunds"]
  • }, // ...
  • ];
  • }
  •  
  • render() {
  • return (
  • <Lookup
  • dataSource={this.dataSource}
  • grouped={true}
  • groupRender={renderGroup}
  • />
  • );
  • }
  • }
  •  
  • export default App;
See Also