This sample demonstrates the Grid component with the stacked header and and resize feature. In this sample, we have shown multiple level of column headers.
Order ID | Order Details | Ship Details | |||||
|---|---|---|---|---|---|---|---|
Customer Name | Order Date | Shipped Date | Ship Country | Freight Charges($) | |||
| 10248 | VINET | 7/4/1996 | 7/16/1996 | France | $32.38 |
| 10249 | TOMSP | 7/5/1996 | 7/10/1996 | Germany | $11.61 |
| 10250 | HANAR | 7/8/1996 | 7/12/1996 | Brazil | $65.83 |
| 10251 | VICTE | 7/8/1996 | 7/15/1996 | France | $41.34 |
| 10252 | SUPRD | 7/9/1996 | 7/11/1996 | Belgium | $51.30 |
| 10253 | HANAR | 7/10/1996 | 7/16/1996 | Brazil | $58.17 |
| 10254 | CHOPS | 7/11/1996 | 7/23/1996 | Switzerland | $22.98 |
| 10255 | RICSU | 7/12/1996 | 7/15/1996 | Switzerland | $148.33 |
| 10256 | WELLI | 7/15/1996 | 7/17/1996 | Brazil | $13.97 |
| 10257 | HILAA | 7/16/1996 | 7/22/1996 | Venezuela | $81.91 |
| 10258 | ERNSH | 7/17/1996 | 7/23/1996 | Austria | $140.51 |
| 10259 | CENTC | 7/18/1996 | 7/25/1996 | Mexico | $3.25 |
The Grid columns can be stacked/grouped in order to show multiple level of column headers. It can be done by setting the columns->columns property.
The Grid columns can be resized by clicking and dragging at the right edge of columns header. To enable column, resize behavior, set allowResizing property as true. You can also prevent the resize of the particular column by setting columns->allowResizing as false in columns definition.
In this demo, the columns OrderDate, Freight are grouped under Order Details, the columns ShippedDate, ShipCountry are grouped under Ship Details.
Injecting Module:
Grid features are segregated into individual feature-wise modules. To use Resize feature, we need to inject ResizeService into the @NgModule.providers section.
More information on the stacked header configuration can be found in this documentation section.