Skip to main content

Column Groups and Pinning

Column groups add a visual header band above related leaf columns. They do not change dataset schema, editing, filtering, sorting, or row layout.

FdcGrid(
  dataSet: customers,
  columnGroups: const [
    FdcGridColumnGroup(
      id: 'location',
      label: 'Location',
    ),
  ],
  columns: const [
    FdcTextColumn<dynamic>(
      fieldName: 'city',
      groupId: 'location',
    ),
    FdcTextColumn<dynamic>(
      fieldName: 'state',
      groupId: 'location',
    ),
  ],
)

Grouped columns cannot be pinned while they belong to a group.

Pinned regions​

const FdcTextColumn<dynamic>(
  fieldName: 'company',
  pin: FdcGridColumnPin.start,
)

The grid can also show labels for start-pinned, scrollable, and end-pinned header bands when the group header row is active:

const FdcGridColumnPinning(
  startPinnedGroupLabel: 'Pinned',
  unpinnedGroupLabel: 'Details',
  endPinnedGroupLabel: 'Actions',
)