COMPUTED COLUMN AT A FLUTTER DATAGRID

[Jorge Mario]

I wish add a computed column at a flutter datagrid with an expression over another columns.

How I can do it?

[Tamilarasan Paranthaman]

Hi Jorge,

As of now, DataGrid doesn’t have support for the computed column. But you can add it from the sample level itself. In the buildDataGridRow method, apply the expression over the other column's value for the respective column cell value. We have prepared a sample for the same. In that sample, we found the balance value by using credit and debit and column values. Please check the following code snippet and sample.

class SfDataGridDemoState extends State<SfDataGridDemo> {

  late EmployeeDataSource customerDataSource;

  List<Employee> employees = <Employee>[];

 

  @override

  void initState() {

    super.initState();

    employees = getEmployeeData();

    customerDataSource = EmployeeDataSource(employees);

  }

 

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(title: const Text('Flutter SfDataGrid')),

      body: SfDataGrid(source: customerDataSource, columns: getColumns),

    );

  }

}

 

List<GridColumn> get getColumns {

  return [

    GridColumn(

      columnName: 'id',

      label: Container(

        padding: const EdgeInsets.all(16.0),

        alignment: Alignment.centerRight,

        child: const Text('ID'),

      ),

    ),

    GridColumn(

      columnName: 'name',

      label: Container(

        padding: const EdgeInsets.all(16.0),

        alignment: Alignment.centerLeft,

        child: const Text('Name'),

      ),

    ),

    GridColumn(

      columnName: 'credit',

      label: Container(

        padding: const EdgeInsets.all(16.0),

        alignment: Alignment.centerRight,

        child: const Text('Credit'),

      ),

    ),

    GridColumn(

      columnName: 'debit',

      label: Container(

        padding: const EdgeInsets.all(16.0),

        alignment: Alignment.centerRight,

        child: const Text('Debit '),

      ),

    ),

    GridColumn(

      columnName: 'balance',

      label: Container(

        padding: const EdgeInsets.all(16.0),

        alignment: Alignment.centerRight,

        child: const Text('Balance'),

      ),

    ),

  ];

}

 

List<Employee> getEmployeeData() {

  return [

    Employee(10001, 'Kathryn', 75000, 22000, 0),

    Employee(10002, 'Adams', 91000, 12000, 0),

    Employee(10003, 'Lara', 35000, 7000, 0),

    Employee(10004, 'Crowley', 30000, 5000, 0),

    Employee(10005, 'Landry', 32000, 8000, 0),

    Employee(10006, 'Jack', 91000, 40000, 0),

    Employee(10007, 'Perry', 34000, 12000, 0),

    Employee(10008, 'Balnc', 32000, 10000, 0),

    Employee(10009, 'Gable', 70000, 36000, 0),

    Employee(10010, 'James', 35000, 9000, 0)

  ];

}

 

class EmployeeDataSource extends DataGridSource {

  EmployeeDataSource(List<Employee> employees) {

    buildDataGridRow(employees);

  }

 

  void buildDataGridRow(List<Employee> employeeData) {

    dataGridRow = employeeData.map<DataGridRow>((customer) {

      return DataGridRow(cells: [

        DataGridCell<int>(columnName: 'id', value: customer.id),

        DataGridCell<String>(columnName: 'name', value: customer.name),

        DataGridCell<double>(columnName: 'credit', value: customer.credit),

        DataGridCell<double>(columnName: 'debit', value: customer.debit),

        DataGridCell<double>(

            columnName: 'balance', value: customer.credit - customer.debit)

      ]);

    }).toList();

  }

 

  List<DataGridRow> dataGridRow = <DataGridRow>[];

 

  @override

  List<DataGridRow> get rows => dataGridRow.isEmpty ? [] : dataGridRow;

 

  @override

  DataGridRowAdapter? buildRow(DataGridRow row) {

    return DataGridRowAdapter(

        cells: row.getCells().map<Widget>((dataGridCell) {

      return Container(

          padding: const EdgeInsets.all(16.0),

          alignment: dataGridCell.columnName == 'name'

              ? Alignment.centerLeft

              : Alignment.centerRight,

          child: Text(dataGridCell.columnName == 'id' ||

                  dataGridCell.columnName == 'name'

              ? dataGridCell.value.toString()

              : NumberFormat.currency(locale: 'en_US', symbol: r'$')

                  .format(dataGridCell.value)));

    }).toList());

  }

}

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/sample-432973441

We hope this helps. Please let us know if you need any further assistance on this.

Regards,

Tamilarasan