Skip to main content

Column Moving

Column moving lets users reorder visible columns directly from the grid header. Enable it when users need to adapt the grid layout to their current workflow without changing the dataset schema or rebuilding column definitions.

Column moving
Loading FDC sample…
FdcGrid(
  dataSet: customers,
  options: const FdcGridOptions(
    readOnly: true,
    allowColumnReordering: true,
  ),
  columns: customerColumns,
);

Press and hold a column header until the move interaction activates, then drag it horizontally and drop it over another valid position. A normal click or immediate drag does not start column moving; the header uses a long press gesture to avoid accidental reordering. The grid updates the runtime column order immediately after a valid drop.

Enable column moving​

Column moving is opt-in:

FdcGrid(
  dataSet: customers,
  options: const FdcGridOptions(
    allowColumnReordering: true,
  ),
  columns: customerColumns,
)

allowColumnReordering controls pointer-driven reordering only. It does not change field order in the dataset and does not mutate the original list of column definitions.

User interaction​

To move a column:

  1. Press and hold a column header until the long-press drag activates.
  2. Keep holding and drag horizontally toward the desired position.
  3. Drop when the target position is valid.

The long-press activation is intentional: ordinary clicks continue to interact with the header normally, while column reordering starts only after the hold gesture has been recognized.

The grid keeps moving constrained to a compatible layout region:

  • an unpinned column stays in the scrollable region;
  • a start-pinned column stays in the start-pinned region;
  • an end-pinned column stays in the end-pinned region;
  • a column inside a group can be reordered only within that same group;
  • grouped and ungrouped columns cannot be mixed by dragging.

These constraints preserve the structural meaning of pinning and column groups while still allowing users to personalize local order.

Column moving with pinning and groups​

Column moving works together with pinning and groups, but each feature keeps its own boundaries. For example, users can reorder Company and Contact inside a Customer group, while ungrouped columns such as Status can be reordered among other compatible ungrouped columns.

For grouped headers and user-controlled pinned regions, continue with Column Groups and Pinning.