如何在DevExtreme DataGrid

Question

我有一个包含大量列和一些分组的大型数据网格表。向右滚动时，分组标签将移出视图。我该如何修复这些标签？见这个截图：

我的列标有Column A，Column B等，按字母顺序显示。

Column A和Column B配置为固定在左侧。

Column C，Column D和Column E已配置为分组。

我的网格配置的摘录如下所示：

{
    dataSource: myData,
    allowColumnReordering: true,
    rowAlternationEnabled: true,
    showColumnLines: true,
    showRowLines: false,
    showBorders: true,
    headerFilter: {
        visible: true
    },
    filterRow: {
        visible: true
    },
    grouping: {
        autoExpand: true
    },
    scrolling: {
        mode: "virtual"
    },
    groupPanel: {
        visible: true
    },
    columns: [
        { caption: "Column A", dataField: "propA", width: 100, fixed: true },
        { caption: "Column B", dataField: "propB", width: 350, fixed: true },
        { caption: "Column C", dataField: "groupA", groupIndex: 0, sortOrder: "asc", sortIndex: 0, width: 180 },
        { caption: "Column D", dataField: "groupB", groupIndex: 1, sortOrder: "asc", sortIndex: 1, width: 180 },
        { caption: "Column E", dataField: "groupC", groupIndex: 2, sortOrder: "asc", sortIndex: 2, width: 180 },
        { caption: "Column F", dataField: "propF", allowFiltering: false, width: 90 },
        { caption: "Column G", dataField: "propG", width: 90 },
        { caption: "Column H", dataField: "propH", width: 90 },
        { caption: "Column I", dataField: "propH", width: 90 },
        ...
    ],
    summary: {
        groupItems: {
            column: "Column I",
            summaryType: "sum",
            showInGroupFooter: false,
            alignByColumn: true
        }
    }
}

如何阻止标签Column C: Group A0，Column D: Group B0等移出视野？

更新

刚刚在配置中添加了一个重要的东西：似乎使用groupItems打破了它。看到这个代码（谢谢@sergey）：codepen