Name
This example showcases the Syncfusion EJ2 Grid component which features stacked headers, column resizing, and a customizable column chooser template.
Customer ID | Name | Order Details | Shipping Details | Delivery Status | ||||||
|---|---|---|---|---|---|---|---|---|---|---|
ID | Date | Country | Charges | Status | Feedback | |||||
| 1001 | TOMSP | 150001 | 2/1/2024 |  Germany | $20.75 | Delivered | |
| 1002 | HANAR | 150002 | 11/1/2024 | Brazil | $30.00 | In-progress | |
| 1003 | VICTE | 150003 | 10/1/2024 | Belgium | $40.25 | Delivered | |
| 1004 | SUPRD | 150004 | 9/1/2024 | Switzerland | $50.60 | In-progress | |
| 1005 | CHOPS | 150005 | 8/1/2024 | Austria | $60.85 | In-progress | |
| 1006 | RICSU | 150006 | 7/1/2024 | Mexico | $70.90 | Delivered | |
| 1007 | WELLI | 150007 | 6/2/2024 | Venezuela | $80.10 | Delivered | |
| 1008 | HILAA | 150008 | 5/3/2024 | France | $90.45 | In-progress | |
| 1009 | ERNSH | 150009 | 4/2/2024 | Germany | $100.55 | Delivered | |
| 1010 | CENTC | 150010 | 3/3/2024 | Brazil | $10.50 | Delivered | |
| 1011 | OTTIK | 150011 | 2/1/2024 | Belgium | $20.75 | Delivered | |
| 1012 | QUEDE | 150012 | 1/3/2024 | Switzerland | $30.00 | In-progress |
Column Options
- ID
- Date
- Country
- Charges
- Status
- Feedback
Description
Stacked Headers: The Grid allows grouping columns to display multiple levels of headers using the columns->columns property. In this demo, the columns are grouped as follows: Order Details: ID and Date Shipping Details: Country and Charges Delivery Status: Status and Feedback Column Resizing: Columns can be resized by clicking and dragging the right edges of the column header. To enable this feature, set allowResizing to true. To disable resizing for specific columns, set columns->allowResizing to false. Column Chooser Templates: The column chooser template is used to customize layout and manage column visibility. Key properties: columnChooserSettings->headerTemplate :- Defines the header template. columnChooserSettings->template :- Defines the content template. columnChooserSettings->footerTemplate :- Defines the footer template. columnChooserSettings->enableSearching :- Enables or disables search functionality. In this demo, the showInColumnChooser of the Customer ID column is set to false, preventing it from being displayed in the column chooser popup. More information on the stacked header configuration can be found in this documentation section.