Your First Data Grid

Bind the dataset from the previous step directly to FdcGrid.

FdcGrid(
  dataSet: customers,
  statusBar: const FdcGridStatusBar(visible: true),
  columns: const <FdcGridColumn<dynamic>>[
    FdcIntegerColumn<dynamic>(
      fieldName: 'id',
      width: 80,
      readOnly: true,
    ),
    FdcTextColumn<dynamic>(
      fieldName: 'company',
      width: 220,
    ),
    FdcDecimalColumn<dynamic>(
      fieldName: 'credit_limit',
      width: 150,
    ),
    FdcBooleanColumn<dynamic>(
      fieldName: 'active',
      width: 100,
    ),
  ],
)

Columns refer to dataset fields by fieldName. The dataset remains the source of data state and edit state; the grid provides the interaction surface.

This separation matters: the same dataset can also be bound to data-aware editors, observed by other widgets, filtered programmatically, or connected to an adapter without changing the screen's data model.

Opening adapter-backed data

When a dataset has an adapter, open it before showing the data-dependent UI:

await customers.open();

In a Flutter widget, this is commonly coordinated during initialization and rendered with FutureBuilder, a controller layer, or the application's existing state-management approach.

Next: Editing Data