SFDataGrid column and cell values swapping

Question

I am trying to implement a grid using SFDataGrid in syncfusion. All data appears correctly but not agains the correct column name. Cell and column names are incorrectly matched. Please help.

Flutter Code:

Grid Definition:

SfDataGridTheme(
          data: SfDataGridThemeData(
              headerColor: Theme.of(context).colorScheme.primary),
          child: SfDataGrid(
            key: key,
            allowPullToRefresh: true,
            source: InvestmentDataSource(
              investmentProvider: investmentProvider,
              investments: investmentProvider.investments,
            ),
            columnWidthMode: ColumnWidthMode.fitByColumnName,
            allowEditing: false,
            allowSorting: true,
            columns: <GridColumn>[ //<------------------- Column Definitions
              getGridColumn('id', 'id'),
              getGridColumn('initAmount', 'Initial'),
              getGridColumn('recurringAmount', 'Rec. Amount'),
              getGridColumn('frequency', 'Frequency'),
              getGridColumn('duration', 'Duration'),
              getGridColumn('estReturn', 'Est. Return'),
              getGridColumn('category', 'Category'),
              getGridColumn('startDate', 'Start'),
              getGridColumn('endDate', 'End'),
              getGridColumn('action', 'Action'),
            ],
          ),
        ),

GridColumn getGridColumn(String colName, String displayText,
      {bool visibility = true}) {
    return GridColumn(
      visible: visibility,
      columnName: colName,
      label: Container(
        padding: EdgeInsets.symmetric(horizontal: 16.0),
        alignment: Alignment.centerLeft,
        child: Text(
          displayText,
          overflow: TextOverflow.ellipsis,
        ),
      ),
    );
  }

Creating the Rows for grid:

List<DataGridRow> createDataGridRows(List<Investment> investments) {
    return investments
        .map<DataGridRow>(
          (dataGridRow) => DataGridRow( //<----------------------- Row and Cell Definitions
            cells: [
              DataGridCell<int>(columnName: 'id', value: dataGridRow.key),
              DataGridCell<String>(
                  columnName: 'category', value: dataGridRow.investmentType),
              DataGridCell<double>(
                  columnName: 'initAmount',
                  value: dataGridRow.initialInvestment),
              DataGridCell<double>(
                  columnName: 'recurringAmount',
                  value: dataGridRow.recurringAddition),
              DataGridCell<String>(
                  columnName: 'frequency', value: dataGridRow.frequency),
              DataGridCell<num>(
                  columnName: 'duration', value: dataGridRow.investmentTerm),
              DataGridCell<double>(
                  columnName: 'estReturn', value: dataGridRow.terminalValue),
              DataGridCell<String>(
                  columnName: 'startDate', value: dataGridRow.startDate),
              DataGridCell<String>(
                  columnName: 'endDate', value: dataGridRow.endDate),
              DataGridCell<Widget>(
                columnName: 'action',
                value: null,
              ),
            ],
          ),
        )
        .toList();
  }

Answer 1

After spending good amount of time I figured out that cell to column mapping also relies on the order they are added in the code. I assumed that it would use columnName for mapping row cell to the column.

Fix: Rearrange the cell definitions to map to the order of the column definitions.