Dxdatagrid-多行标题和列选择器未按预期工作

Question

我想实现所附的屏幕截图设计，这是我的代码

    $scope.userGridOps = {
    allowColumnResizing: true,
    columnAutoWidth: true,
    wordWrapEnabled: false,
    showColumnLines: true,
    showRowLines: true,
    showBorders: true,
    height: '350',
    onInitialized: function (e) {
        $scope.dxGridInstance = e.component;
    },
    filterRow: {
        visible: true,
        applyFilter: "auto"
    },
    headerFilter: {
        visible: true
    },
    bindingOptions: {
        dataSource: "UserList",
        deep: false
    },
    columnChooser: {
        enabled: true,
        emptyPanelText: 'A place to hide the columns'
    },
    sorting: {
        mode: "single"
    },
    scrolling: {
        mode: "virtual"
    },
    onCellPrepared: function (e) {
        if (e.rowType == "header") {
            e.cellElement.addClass('dx-data-grid-header-color-ct');
        }
        if (e.rowType === "data" && e.column.command === "expand") {
            if (e.data.DashBoardTactics.length == 0) {
                e.cellElement.removeClass("dx-datagrid-expand");
                e.cellElement.empty();
            }
        }
    },
    columns: [
        {
            caption: "User Details", alignment: "center",
            columns: [{ dataField: "ID", dataType: "string", caption: "ID", alignment: "left" },
           { dataField: "FirstName", dataType: "string", caption: "First Name", alignment: "left" },
           { dataField: "LastName", dataType: "string", caption: "Last Name", alignment: "left" },
           { dataField: "Address", dataType: "string", caption: "Address", alignment: "left" } 
            ],
        },
        {
            caption: "Company Details", alignment: "center",

            columns: [{
                caption: "External",
                columns: [{ dataField: "Name", dataType: "string", caption: "Name", alignment: "left" }]                 
            },
           {
                caption: "Internal",
                columns: [{ dataField: "Email", dataType: "string", caption: "Email", alignment: "left" }]


            }]
        },
        {
            caption: "Approval Details", alignment: "center",
            columns: [{ dataField: "Date", dataType: "date", caption: "Date", alignment: "left" }
            ],
        } 


    ]
};

enter image description here

添加多行标题时，列选择器也不起作用。我尝试了多种方法，但是它没有按预期工作，并且标题出现不匹配的情况。

请帮助解决设计和列选择器问题。