Skip to main content

Column Pinning

Column pinning keeps selected columns visible at the start or end edge while the central region scrolls horizontally.

Interactive column pinning
Loading FDC sample…
FdcGrid(
  dataSet: customers,
  options: const FdcGridOptions(
    readOnly: true,
    allowColumnReordering: true,
  ),
  pinning: const FdcGridColumnPinning(enabled: true),
  columns: const <FdcGridColumn<dynamic>>[
    FdcIntegerColumn<dynamic>(fieldName: 'customer_id', width: 96),
    FdcTextColumn<dynamic>(fieldName: 'company_name', width: 210),
    FdcTextColumn<dynamic>(fieldName: 'contact_name', width: 165),
    FdcTextColumn<dynamic>(fieldName: 'city', width: 135),
    FdcTextColumn<dynamic>(fieldName: 'state', width: 90),
    FdcTextColumn<dynamic>(fieldName: 'industry', width: 145),
    FdcComboColumn<String>(fieldName: 'status', width: 110),
    FdcDecimalColumn<dynamic>(fieldName: 'credit_limit', width: 145),
    FdcBooleanColumn<dynamic>(fieldName: 'active', width: 100),
    FdcDateColumn<dynamic>(fieldName: 'registered_at', width: 130),
  ],
);

No column in this sample is pinned in code. Every displayed column starts in the scrollable region and can be pinned or unpinned by the user through its column menu.

Enable interactive pinning​

Interactive pinning is opt-in through FdcGridColumnPinning:

FdcGrid(
  dataSet: customers,
  pinning: const FdcGridColumnPinning(enabled: true),
  columns: customerColumns,
)

With enabled: true, compatible column menus expose the Column pinning submenu. Because the sample does not assign FdcGridColumn.pin, the initial layout remains neutral and demonstrates the user-controlled workflow directly.

Try the sample​

  1. Open the menu on any column.
  2. Open Column pinning.
  3. Choose the start or end region.
  4. Pin several different columns and scroll horizontally.
  5. Use Unpin to return a column to the central scrollable region.

All columns in the sample are intentionally ungrouped, so every column is eligible for interactive pinning.

Optional region labels​

When the upper group-header band is visible, custom labels can identify the three pinning regions:

const FdcGridColumnPinning(
  enabled: true,
  startPinnedGroupLabel: 'Pinned start',
  unpinnedGroupLabel: 'Scrollable',
  endPinnedGroupLabel: 'Pinned end',
)

These labels describe the layout regions. They do not pin any column by themselves.

Initial pinning in code​

A column can define an initial pinned region when the product requires a fixed starting layout:

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

Programmatic initial pinning and interactive pinning are separate concerns:

  • FdcGridColumn.pin defines the initial region;
  • FdcGridColumnPinning(enabled: true) lets users change the region at runtime.

For general-purpose grids, prefer an unpinned initial layout unless a specific column must remain visible by design. This keeps the default neutral and leaves layout control to the user.

Interaction boundaries​

Pinned columns remain in their own start or end region while the middle region scrolls. When column moving is enabled, a column can reorder only within its current pinning region.

Columns that belong to a column group are not pinnable because pinning one leaf would split the visual group across incompatible regions. See Column Groups for the grouping model.