React SelectBox - Customize Group Headers

By default, group headers display text of the key field in a bold font. If you need a more flexible solution, specify groupTemplate.

App.js
  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import SelectBox from 'devextreme-react/select-box';
  • import DataSource from "devextreme/data/data_source";
  •  
  • const fruitsVegetables = [{
  • key: "Fruits",
  • items: [
  • { name: "Apples", count: 10 },
  • { name: "Oranges", count: 12 },
  • { name: "Lemons", count: 15 }
  • ]
  • }, {
  • key: "Vegetables",
  • items: [
  • { name: "Potatoes", count: 5 },
  • { name: "Tomatoes", count: 9 },
  • { name: "Turnips", count: 8 }
  • ]
  • }];
  • const selectBoxDataSource = new DataSource({
  • store: fruitsVegetables,
  • map: function(groupedItem) {
  • let overallCount = 0;
  • groupedItem.items.forEach(function(item) {
  • overallCount += item.count;
  • })
  • return Object.assign(groupedItem, { overallCount: overallCount });
  • }
  • });
  •  
  • const renderGroup = (data) => {
  • return (
  • <p>
  • {data.key + ' | Count: ' + data.overallCount}
  • </p>
  • );
  • }
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <SelectBox ...
  • dataSource={selectBoxDataSource}
  • grouped="true"
  • displayExpr="name"
  • valueExpr="count"
  • groupRender={renderGroup}
  • />
  • );
  • }
  • }
  • export default App;

View Demo

See Also