Group items in popup in React Split button component

2 Mar 20265 minutes to read

Organize SplitButton popup items into logical groups using the ListView component for templating. By leveraging ListView’s grouping capabilities, you can categorize related actions into collapsible or visually distinct sections, improving usability for menus with many items.

To implement grouped items, create a ListView component with the id listview and assign it as the SplitButton’s target. For detailed ListView grouping options, see the ListView grouping documentation.

The following example demonstrates how to create grouped popup items using the ListView component.

app.jsx

import { enableRipple } from '@syncfusion/ej2-base';
import { SplitButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// To render SplitButton.
function App() {
    // Datasource for listview.
    let listItems = [
        {
            'category': 'Basic',
            'text': 'Cut'
        },
        {
            'category': 'Basic',
            'text': 'Copy',
        },
        {
            'category': 'Basic',
            'text': 'Paste'
        },
        {
            'category': 'Advanced',
            'text': 'Paste as Formula'
        },
        {
            'category': 'Advanced',
            'text': 'Paste as Hyperlink'
        },
    ];
    let field = { groupBy: 'category' };
    return (<div>
       <ListViewComponent id="listview" dataSource={listItems} fields={field} sortOrder="Descending"/>
       <SplitButtonComponent target="#listview">ClipBoard</SplitButtonComponent>
      </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));

app.tsx

import { enableRipple } from '@syncfusion/ej2-base';
import { SplitButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import * as React from 'react';
import * as ReactDom from 'react-dom';

enableRipple(true);

// To render SplitButton.
function App() {

    // Datasource for listview.
    let listItems: Array<{ [key: string]: string; }> = [
        {
            'category': 'Basic',
            'text': 'Cut'
        },
        {
            'category': 'Basic',
            'text': 'Copy',
        },
        {
            'category': 'Basic',
            'text': 'Paste'
        },
        {
            'category': 'Advanced',
            'text': 'Paste as Formula'
        },
        {
            'category': 'Advanced',
            'text': 'Paste as Hyperlink'
        },
    ];

   let field: any = { groupBy: 'category' };
    return (
    <div>
       <ListViewComponent id="listview" dataSource={listItems} fields={field} sortOrder="Descending"/>
       <SplitButtonComponent target="#listview">ClipBoard</SplitButtonComponent>
      </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));