Как создать таблицу devextreme js с несколькими уровнями значений и нижнего колонтитула

Question

Как создать таблицу, используя DevExtreme js со значениями многоуровневых сводок. Например:

Answer 1

Вы можете иметь два уровня Master Detil dxDataGrid

$(function(){
    $("#gridContainer").dxDataGrid({
        dataSource: employees,
        keyExpr: "ID",
        showBorders: true,
        columns: [{
                dataField: "Prefix",
                caption: "Title",
                width: 70
            },
            "FirstName",
            "LastName", {
                dataField: "Position",
                width: 170
            }, {
                dataField: "State",
                width: 125
            }, {
                dataField: "BirthDate",
                dataType: "date"
            }
        ],
        masterDetail: {
            enabled: true,
            template: function(container, options) { 
                var currentEmployeeData = options.data;

                $("<div>")
                    .addClass("master-detail-caption")
                    .text(currentEmployeeData.FirstName + " " + currentEmployeeData.LastName + "'s Tasks:")
                    .appendTo(container);

                $("<div>")
                    .dxDataGrid({
                        columnAutoWidth: true,
                        showBorders: true,
                        //Here your second level of Master Detail
                        columns: ["Subject", {
                            dataField: "StartDate",
                            dataType: "date"
                        }, {
                            dataField: "DueDate",
                            dataType: "date"
                        }, "Priority", {
                            caption: "Completed",
                            dataType: "boolean",
                            calculateCellValue: function(rowData) {
                                return rowData.Status == "Completed";
                            }
                        }],
                        dataSource: currentEmployeeData.Tasks
                    }).appendTo(container);
            }
        }
    });
});