Grid - Grouping HTML UI Elements for Mobile & Web Applications | www.HtmlElements.com
JavaScriptJavaScriptAngularAngularVueVueReactReact

Grid Grouping

Grouping by one or multiple columns(data fields) is supported by Smart.Grid.

Grouping is configured via the property/object grouping. To enable it, set grouping.enabled to true.

Once the Grid is grouped by a column, group rows appear with information about the group name, group data field, and the count of rows in the group. Lower-level group rows have indentation that represents group hierarchy.

Additional settings of the grouping object that control grouping behavior are:

  • allowCollapse - enables collapsing of groups.
  • autoExpandAll - automatically expands all groups.
  • expandMode - sets whether a group is expanded on 'buttonClick' or 'rowClick'.
  • groupRowHeight - sets the group row height.
  • toggleButtonIndent - sets the indent of the group toggle button (arrow).
  • groupIndent - sets the indent of the group.

Theare are three ways to apply grouping to the Grid:

Whether or not a column can be grouped can be set via the property allowGroup applied to the column's respective object.


More information: property grouping in the Grid API documentation.

Grouping through the UI can be done through the group menu (part of the column menu). The group menu can be opened by clicking the menu button in a column's header and offsers the option to either group by a column or remove grouping (whichever is applicable):

Grouping through the dataSource Object

An initial grouping can be applied by setting groupBy in the dataSource object to an array of data fields (columns to group by), e.g.:

dataSource: new Smart.DataAdapter({
    dataSource: generateData(100),
    groupBy: ['firstName', 'lastName'],
    dataFields: [
        'id: number',
        'firstName: string',
        'lastName: string',
        'productName: string',
        'quantity: number',
        'price: number',
        'total: number'
    ]
}),

Grouping-related Methods:

For AI tooling

Developer Quick Reference

Topic: grid-grouping   Component: Grid   Framework: JavaScript

Main methods: (none detected)

Common config keys: dataSource

Implementation Notes

Compatibility: Modern browsers / Web Components   API access pattern: const component = document.querySelector(...) + component.method()

Lifecycle guidance: Initialize configuration first, then invoke imperative API when element is available in DOM.

Common pitfalls:

  • Calling methods before element initialization.
  • Reassigning large configuration partially without understanding merge behavior.
  • Missing required module script import for component type.

Validation checklist:

  • Ensure module scripts and CSS are loaded once.
  • Keep data schema aligned with columns/series definitions.
  • Verify method calls target initialized component instance.