groupable

Optional. Enables grouping data by values in all columns

pro version only

The described functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package.

note

The groupable property works only with the group panel.

groupable?: boolean;

Default value: false

Example

 
const grid = new dhx.Grid("grid_container", {
    columns: [
        { width: 150, id: "country", header: [{ text: "Country" }] },
        { width: 150, id: "population", header: [{ text: "Population" }] },
        { width: 150, id: "destiny", header: [{ text: "Density (P/Km²)" }] },
        { width: 150, id: "area", header: [{ text: "Land Area (Km²)" }] },
    ],
    group: true,
    groupable: true,
    data: dataset
});

Note that:

• You can drag column headers to the special grouping area - group panel. Grid will automatically create groups based on the values from these columns
• You can group data by several fields by moving a column header to the group panel
• You can also sort the grouped data in two ways:
  • either by sorting the grouped field beforehand
  • or by clicking a group element on the group panel
• You can edit the nesting level of grouping by modifying the grouping order via either moving elements to the group panel or removing elements from the group panel

Related article: Grouping data

Change log:

added in v9.0