Column Group area displayed in the Footer or Header of the grid, is basically displayed according to the configuration of child columns contained in the column group. However, sometimes it can be more helpful to display only a representative column rather than all the child columns for the user.
There are several ways, but we will learn the way to use Delegate Columns in this example.
In the example above, headerDelegate of "Customer" column group has been set as "CustomerID" column, and only "CustomerID" column will be displayed in the header instead of three child column headers of this column group.
In the footer cell of "Country" column group, it displays only the total of "Quantity" column set in footerDelegate. Also, it can be set similarly in the case of an overlapped column. For example, in the footer cell of "Date" column group, it will display "ShipDate" column cell of 2 steps below.