{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "grid-grouping",
  "framework": "react",
  "type": "registry:component",
  "component": "Grid",
  "variant": "grouping",
  "dependencies": [
    "@syncfusion/ej2-react-grids",
    "@syncfusion/ej2-react-popups"
  ],
  "description": "Data grid groups orders by field while supporting paging, filtering, sorting, and editing.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": false,
    "platformIndex": "https://ai.syncfusion.com/react/llms.txt",
    "skillPack": "syncfusion/react-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/react/ts/grid-grouping.md"
  },
  "files": [
    {
      "target": "src/components/grid-grouping/Grid.tsx",
      "content": "import { GridComponent, ColumnsDirective, ColumnDirective, Page, Edit, Toolbar, Group, Sort, Inject, type FilterSettingsModel, Filter } from '@syncfusion/ej2-react-grids';\nimport { DialogComponent } from '@syncfusion/ej2-react-popups';\nlet refresh: Boolean;\n\nconst purchaseData = JSON.stringify([\n    {\n        'OrderID': 10248,\n        'CustomerID': 'VINET',\n        'OrderDate': '1996-07-04T10:10:00.000Z',\n        'ShippedDate': '1996-07-16T12:20:00.000Z',\n        'Freight': 32.38,\n        'ShipName': 'Vins et alcools Chevalier',\n        'ShipAddress': '59 rue de l\\'Abbaye',\n        'ShipCity': 'Reims',\n        'ShipRegion': null,\n        'ShipCountry': 'France'\n    },\n    {\n        'OrderID': 10249,\n        'CustomerID': 'TOMSP',\n        'OrderDate': '1996-07-05T12:20:00.000Z',\n        'ShippedDate': '1996-07-10T13:20:00.000Z',\n        'Freight': 11.61,\n        'ShipName': 'Toms Spezialitäten',\n        'ShipAddress': 'Luisenstr. 48',\n        'ShipCity': 'Münster',\n        'ShipRegion': null,\n        'ShipCountry': 'Germany'\n    },\n    {\n        'OrderID': 10250,\n        'CustomerID': 'HANAR',\n        'OrderDate': '1996-07-08T08:40:00.000Z',\n        'ShippedDate': '1996-07-12T07:50:00.000Z',\n        'Freight': 65.83,\n        'ShipName': 'Hanari Carnes',\n        'ShipAddress': 'Rua do Paço, 67',\n        'ShipCity': 'Rio de Janeiro',\n        'ShipRegion': 'RJ',\n        'ShipCountry': 'Brazil'\n    },\n    {\n        'OrderID': 10251,\n        'CustomerID': 'VICTE',\n        'OrderDate': '1996-07-08T07:50:00.000Z',\n        'ShippedDate': '1996-07-15T15:50:00.000Z',\n        'Freight': 41.34,\n        'ShipName': 'Victuailles en stock',\n        'ShipAddress': '2, rue du Commerce',\n        'ShipCity': 'Lyon',\n        'ShipRegion': null,\n        'ShipCountry': 'France'\n    },\n    {\n        'OrderID': 10252,\n        'CustomerID': 'SUPRD',\n        'OrderDate': '1996-07-09T12:05:00.000Z',\n        'ShippedDate': '1996-07-11T17:30:00.000Z',\n        'Freight': 51.3,\n        'ShipName': 'Suprêmes délices',\n        'ShipAddress': 'Boulevard Tirou, 255',\n        'ShipCity': 'Charleroi',\n        'ShipRegion': null,\n        'ShipCountry': 'Belgium'\n    },\n    {\n        'OrderID': 10253,\n        'CustomerID': 'HANAR',\n        'OrderDate': '1996-07-10T11:20:00.000Z',\n        'ShippedDate': '1996-07-16T10:10:00.000Z',\n        'Freight': 58.17,\n        'ShipName': 'Hanari Carnes',\n        'ShipAddress': 'Rua do Paço, 67',\n        'ShipCity': 'Rio de Janeiro',\n        'ShipRegion': 'RJ',\n        'ShipCountry': 'Brazil'\n    },\n    {\n        'OrderID': 10254,\n        'CustomerID': 'CHOPS',\n        'OrderDate': '1996-07-11T10:00.00.000Z',\n        'ShippedDate': '1996-07-23T20:40:00.000Z',\n        'Freight': 22.98,\n        'ShipName': 'Chop-suey Chinese',\n        'ShipAddress': 'Hauptstr. 31',\n        'ShipCity': 'Bern',\n        'ShipRegion': null,\n        'ShipCountry': 'Switzerland'\n    },\n    {\n        'OrderID': 10255,\n        'CustomerID': 'RICSU',\n        'OrderDate': '1996-07-12T10:40:00.000Z',\n        'ShippedDate': '1996-07-15T05:40:00.000Z',\n        'Freight': 148.33,\n        'ShipName': 'Richter Supermarkt',\n        'ShipAddress': 'Starenweg 5',\n        'ShipCity': 'Genève',\n        'ShipRegion': null,\n        'ShipCountry': 'Switzerland'\n    },\n    {\n        'OrderID': 10256,\n        'CustomerID': 'WELLI',\n        'OrderDate': '1996-07-15T20:50:00.000Z',\n        'ShippedDate': '1996-07-17T21:50:00.000Z',\n        'Freight': 13.97,\n        'ShipName': 'Wellington Importadora',\n        'ShipAddress': 'Rua do Mercado, 12',\n        'ShipCity': 'Resende',\n        'ShipRegion': 'SP',\n        'ShipCountry': 'Brazil'\n    },\n    {\n        'OrderID': 10257,\n        'CustomerID': 'HILAA',\n        'OrderDate': '1996-07-16T03:20:00.000Z',\n        'ShippedDate': '1996-07-22T14:40:00.000Z',\n        'Freight': 81.91,\n        'ShipName': 'HILARION-Abastos',\n        'ShipAddress': 'Carrera 22 con Ave. Carlos Soublette #8-35',\n        'ShipCity': 'San Cristóbal',\n        'ShipRegion': 'Táchira',\n        'ShipCountry': 'Venezuela'\n    },\n    {\n        'OrderID': 10258,\n        'CustomerID': 'ERNSH',\n        'OrderDate': '1996-07-17T18:30:00.000Z',\n        'ShippedDate': '1996-07-23T14:50:00.000Z',\n        'Freight': 140.51,\n        'ShipName': 'Ernst Handel',\n        'ShipAddress': 'Kirchgasse 6',\n        'ShipCity': 'Graz',\n        'ShipRegion': null,\n        'ShipCountry': 'Austria'\n    },\n    {\n        'OrderID': 10259,\n        'CustomerID': 'CENTC',\n        'OrderDate': '1996-07-18T01:20:00.000Z',\n        'ShippedDate': '1996-07-25T16:20:00.000Z',\n        'Freight': 3.25,\n        'ShipName': 'Centro comercial Moctezuma',\n        'ShipAddress': 'Sierras de Granada 9993',\n        'ShipCity': 'México D.F.',\n        'ShipRegion': null,\n        'ShipCountry': 'Mexico'\n    },\n    {\n        'OrderID': 10260,\n        'CustomerID': 'OTTIK',\n        'OrderDate': '1996-07-19T11:20:00.000Z',\n        'ShippedDate': '1996-07-29T03:10:00.000Z',\n        'Freight': 55.09,\n        'ShipName': 'Ottilies Käseladen',\n        'ShipAddress': 'Mehrheimerstr. 369',\n        'ShipCity': 'Köln',\n        'ShipRegion': null,\n        'ShipCountry': 'Germany'\n    },\n    {\n        'OrderID': 10261,\n        'CustomerID': 'QUEDE',\n        'OrderDate': '1996-07-19T18:30:00.000Z',\n        'ShippedDate': '1996-07-30T23:10:00.000Z',\n        'Freight': 3.05,\n        'ShipName': 'Que Delícia',\n        'ShipAddress': 'Rua da Panificadora, 12',\n        'ShipCity': 'Rio de Janeiro',\n        'ShipRegion': 'RJ',\n        'ShipCountry': 'Brazil'\n    },\n    {\n        'OrderID': 10262,\n        'CustomerID': 'RATTC',\n        'OrderDate': '1996-07-22T21:40:00.000Z',\n        'ShippedDate': '1996-07-25T19:10:00.000Z',\n        'Freight': 48.29,\n        'ShipName': 'Rattlesnake Canyon Grocery',\n        'ShipAddress': '2817 Milton Dr.',\n        'ShipCity': 'Albuquerque',\n        'ShipRegion': 'NM',\n        'ShipCountry': 'USA'\n    }]);\nconst customerData = [\n    {\n        'CustomerID': 'ALFKI',\n        'ContactName': 'Maria ',\n        'CompanyName': 'Alfreds Futterkiste',\n        'Address': 'Obere Str. 57',\n        'Country': 'Germany'\n    },\n    {\n        'CustomerID': 'ANATR',\n        'ContactName': 'Ana Trujillo',\n        'CompanyName': 'Ana Trujillo Emparedados y helados',\n        'Address': 'Avda. de la Constitución 2222',\n        'Country': 'Mexico'\n    },\n    {\n        'CustomerID': 'ANTON',\n        'ContactName': 'Antonio Moreno',\n        'CompanyName': 'Antonio Moreno Taquería',\n        'Address': 'Mataderos  2312',\n        'Country': 'Mexico'\n    },\n    {\n        'CustomerID': 'AROUT',\n        'ContactName': 'Thomas Hardy',\n        'CompanyName': 'Around the Horn',\n        'Address': '120 Hanover Sq.',\n        'Country': 'UK'\n    },\n    {\n        'CustomerID': 'BERGS',\n        'ContactName': 'Christina Berglund',\n        'CompanyName': 'Berglunds snabbköp',\n        'Address': 'Berguvsvägen  8',\n        'Country': 'Sweden'\n    },\n    {\n        'CustomerID': 'BLAUS',\n        'ContactName': 'Hanna Moos',\n        'CompanyName': 'Blauer See Delikatessen',\n        'Address': 'Forsterstr. 57',\n        'Country': 'Germany'\n    },\n    {\n        'CustomerID': 'BLONP',\n        'ContactName': 'Frédérique Citeaux',\n        'CompanyName': 'Blondesddsl père et fils',\n        'Address': '24, place Kléber',\n        'Country': 'France'\n    },\n    {\n        'CustomerID': 'BOLID',\n        'ContactName': 'Martín Sommer',\n        'CompanyName': 'Bólido Comidas preparadas',\n        'Address': 'C/ Araquil, 67',\n        'Country': 'Spain'\n    },\n    {\n        'CustomerID': 'BONAP',\n        'ContactName': 'Laurence Lebihan',\n        'CompanyName': 'Bon app',\n        'Address': '12, rue des Bouchers',\n        'Country': 'France'\n    },\n    {\n        'CustomerID': 'BOTTM',\n        'ContactName': 'Elizabeth Lincoln',\n        'CompanyName': 'Bottom-Dollar Markets',\n        'Address': '23 Tsawassen Blvd.',\n        'Country': 'Canada'\n    },\n    {\n        'CustomerID': 'BSBEV',\n        'ContactName': 'Victoria Ashworth',\n        'CompanyName': 'B\\'s Beverages',\n        'Address': 'Fauntleroy Circus',\n        'Country': 'UK'\n    },\n    {\n        'CustomerID': 'CACTU',\n        'ContactName': 'Patricio Simpson',\n        'CompanyName': 'Cactus Comidas para llevar',\n        'Address': 'Cerrito 333',\n        'Country': 'Argentina'\n    },\n    {\n        'CustomerID': 'CENTC',\n        'ContactName': 'Francisco Chang',\n        'CompanyName': 'Centro comercial Moctezuma',\n        'Address': 'Sierras de Granada 9993',\n        'Country': 'Mexico'\n    },\n    {\n        'CustomerID': 'CHOPS',\n        'ContactName': 'Yang Wang',\n        'CompanyName': 'Chop-suey Chinese',\n        'Address': 'Hauptstr. 29',\n        'Country': 'Switzerland'\n    },\n    {\n        'CustomerID': 'COMMI',\n        'ContactName': 'Pedro Afonso',\n        'CompanyName': 'Comércio Mineiro',\n        'Address': 'Av. dos Lusíadas, 23',\n        'Country': 'Brazil'\n    },\n    {\n        'CustomerID': 'CONSH',\n        'ContactName': 'Elizabeth Brown',\n        'CompanyName': 'Consolidated Holdings',\n        'Address': 'Berkeley Gardens 12  Brewery',\n        'Country': 'UK'\n    }];\n\nexport const orderDataSource = JSON.parse(purchaseData, (_field, value) => {\n    if (typeof value === 'string' && /^\\d{4}-\\d\\d-\\d\\dT/.test(value)) {\n        return new Date(value);\n    }\n    return value;\n});\n\nconst customerNames = new Map(customerData.map((customer) => [customer.CustomerID, customer.ContactName]));\n\nexport const data1 = orderDataSource.map((item) => ({\n    ...item,\n    CustomerName: customerNames.get(item.CustomerID) ?? item.CustomerID\n}));\n\nfunction Grouping() {\n    const filterSettings: FilterSettingsModel = {type: 'Excel'};\n    const toolbarOptions: any = ['Edit', 'Update', 'Cancel'];\n    const editSettings: any = { allowEditing: true };\n    const editparams: any = { params: { popupHeight: '300px' } };\n    const validationRule: Object = { required: true };\n    const orderidRules: Object = { required: true, number: true };\n    const format: any = { type: 'dateTime', format: 'M/d/y hh:mm a' };\n\n    const groupOptions: Object = { showGroupedColumn: false, columns: ['ShipCountry'] };\n    let gridInstance: GridComponent;\n    const visible = false;\n    const animationSettings: Object = { effect: 'None' };\n    let alertDialogInstance: DialogComponent;\n    const alertButtons = [{\n        click: () => {  \n            alertDialogInstance.hide();\n        },\n        buttonModel: { content: 'OK', isPrimary: true }\n    }];\n    function dataBound() {\n        if (refresh) {\n            gridInstance.groupColumn('ShipCountry');\n            refresh = false;\n        }\n    }\n    function load() {\n        refresh = (this as any).refreshing;\n    }\n    function columnDragStart(args) {\n        if (args.column.field === 'OrderDate') {\n            alertDialogInstance.show();\n        }\n    }\n    function created() {\n        gridInstance.on('columnDragStart', columnDragStart, this);\n    }\n    return (\n        <div className='control-pane'>\n            <div className='control-section'>\n                <GridComponent dataSource={data1} allowPaging={true} ref={grid => gridInstance = grid} toolbar={toolbarOptions} pageSettings={{ pageCount: 5 }} allowFiltering={true} filterSettings={filterSettings} editSettings={editSettings} allowGrouping={true} groupSettings={groupOptions} allowSorting={true} height=\"320\"\n                    dataBound={dataBound.bind(this)} load={load} created={created}>\n                    <ColumnsDirective>\n                        <ColumnDirective field='OrderID' headerText='Order ID' width='140' textAlign='Right' validationRules={orderidRules} isPrimaryKey={true}></ColumnDirective>\n                        <ColumnDirective field='CustomerName' headerText='Customer Name' width='150' validationRules={validationRule}></ColumnDirective>\n                        <ColumnDirective field='Freight' headerText='Freight' width='140' format='C2' textAlign='Right' editType='numericedit' ></ColumnDirective>\n                        <ColumnDirective field='OrderDate' headerText='Order Date' allowGrouping={false} editType='datetimepickeredit' format= {format} width='160' ></ColumnDirective>\n                        <ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit' edit={editparams} ></ColumnDirective>\n                    </ColumnsDirective>\n                    <Inject services={[Page, Group, Sort, Edit, Toolbar, Filter]} />\n                </GridComponent>\n                <DialogComponent id=\"alertDialog\" header='Grouping' visible={visible} animationSettings={animationSettings} width='300px' content='Grouping is disabled for this column' ref={alertdialog => alertDialogInstance = alertdialog} target='.control-section' buttons={alertButtons} ></DialogComponent>\n                <div className=\"e-dsalign\">Source:\n                    <a href=\"https://en.wikipedia.org/wiki/List_of_prolific_inventors\" target='_blank'>Wikipedia: List of Prolific inventors</a>\n                </div>\n            </div>\n        </div>\n    )\n}\nexport default Grouping;"
    }
  ]
}