Modified the sample as per the new API structure

Author: ashok-kuvaraja

lib/main.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:collection/collection.dart';
 import 'package:syncfusion_flutter_datagrid/datagrid.dart';
 
 void main() {
@@ -17,21 +18,19 @@ class MyApp extends StatelessWidget {
 }
 
 class MyHomePage extends StatefulWidget {
-  MyHomePage({Key key}) : super(key: key);
+  MyHomePage({Key? key}) : super(key: key);
 
   @override
   _MyHomePageState createState() => _MyHomePageState();
 }
 
-final List<Employee> _employees = <Employee>[];
-
-final EmployeeDataSource _employeeDataSource = EmployeeDataSource();
-
 class _MyHomePageState extends State<MyHomePage> {
+  late EmployeeDataSource _employeeDataSource;
+
   @override
   void initState() {
     super.initState();
-    populateData();
+    _employeeDataSource = EmployeeDataSource(employees: populateData());
   }
 
   @override
@@ -44,26 +43,54 @@ class _MyHomePageState extends State<MyHomePage> {
         source: _employeeDataSource,
         allowSorting: true,
         columns: <GridColumn>[
-          GridNumericColumn(mappingName: 'id', headerText: 'ID'),
-          GridTextColumn(mappingName: 'name', headerText: 'Name'),
-          GridTextColumn(mappingName: 'designation', headerText: 'Designation'),
-          GridNumericColumn(mappingName: 'salary', headerText: 'Salary'),
+          GridTextColumn(
+              columnName: 'id',
+              label: Container(
+                  padding: EdgeInsets.all(16.0),
+                  alignment: Alignment.center,
+                  child: Text(
+                    'ID',
+                  ))),
+          GridTextColumn(
+              columnName: 'name',
+              label: Container(
+                  padding: EdgeInsets.all(8.0),
+                  alignment: Alignment.center,
+                  child: Text('Name'))),
+          GridTextColumn(
+              columnName: 'designation',
+              width: 110,
+              label: Container(
+                  padding: EdgeInsets.all(8.0),
+                  alignment: Alignment.center,
+                  child: Text(
+                    'Designation',
+                    overflow: TextOverflow.ellipsis,
+                  ))),
+          GridTextColumn(
+              columnName: 'salary',
+              label: Container(
+                  padding: EdgeInsets.all(8.0),
+                  alignment: Alignment.center,
+                  child: Text('Salary'))),
         ],
       ),
     );
   }
 
-  void populateData() {
-    _employees.add(Employee(10001, 'James', 'Project Lead', 20000));
-    _employees.add(Employee(10002, 'Kathryn', 'Manager', 30000));
-    _employees.add(Employee(10003, 'Lara', 'Developer', 15000));
-    _employees.add(Employee(10004, 'Michael', 'Designer', 15000));
-    _employees.add(Employee(10005, 'Martin', 'Developer', 15000));
-    _employees.add(Employee(10006, 'Newberry', 'Developer', 15000));
-    _employees.add(Employee(10007, 'Balnc', 'Developer', 15000));
-    _employees.add(Employee(10008, 'Perry', 'Developer', 15000));
-    _employees.add(Employee(10009, 'Gable', 'Developer', 15000));
-    _employees.add(Employee(10010, 'Grimes', 'Developer', 15000));
+  List<Employee> populateData() {
+    return <Employee>[
+      Employee(10001, 'James', 'Project Lead', 20000),
+      Employee(10002, 'Kathryn', 'Manager', 30000),
+      Employee(10003, 'Lara', 'Developer', 15000),
+      Employee(10004, 'Michael', 'Designer', 15000),
+      Employee(10005, 'Martin', 'Developer', 15000),
+      Employee(10006, 'Newberry', 'Developer', 15000),
+      Employee(10007, 'Balnc', 'Developer', 15000),
+      Employee(10008, 'Perry', 'Developer', 15000),
+      Employee(10009, 'Gable', 'Developer', 15000),
+      Employee(10010, 'Grimes', 'Developer', 15000),
+    ];
   }
 }
 
@@ -79,59 +106,66 @@ class Employee {
   final int salary;
 }
 
-class EmployeeDataSource extends DataGridSource<Employee> {
+class EmployeeDataSource extends DataGridSource {
+  EmployeeDataSource({required List<Employee> employees}) {
+    _employeeData = employees
+        .map<DataGridRow>((e) => DataGridRow(cells: [
+              DataGridCell<int>(columnName: 'id', value: e.id),
+              DataGridCell<String>(columnName: 'name', value: e.name),
+              DataGridCell<String>(
+                  columnName: 'designation', value: e.designation),
+              DataGridCell<int>(columnName: 'salary', value: e.salary),
+            ]))
+        .toList();
+  }
+
+  List<DataGridRow> _employeeData = [];
+
   @override
-  List<Employee> get dataSource => _employees;
+  List<DataGridRow> get rows => _employeeData;
 
   @override
-  Object getValue(Employee employee, String columnName) {
-    switch (columnName) {
-      case 'id':
-        return employee.id;
-        break;
-      case 'name':
-        return employee.name;
-        break;
-      case 'salary':
-        return employee.salary;
-        break;
-      case 'designation':
-        return employee.designation;
-        break;
-      default:
-        return ' ';
-        break;
+  int compare(DataGridRow? a, DataGridRow? b, SortColumnDetails sortColumn) {
+    final String? value1 = a
+        ?.getCells()
+        .firstWhereOrNull((element) => element.columnName == sortColumn.name)
+        ?.value
+        .toString();
+    final String? value2 = b
+        ?.getCells()
+        .firstWhereOrNull((element) => element.columnName == sortColumn.name)
+        ?.value
+        .toString();
+
+    int? aLength = value1?.length;
+    int? bLength = value2?.length;
+
+    if (aLength == null || bLength == null) {
+      return 0;
     }
-  }
 
-  @override
-  Future<bool> handleSort() async {
-    if (sortedColumns.isNotEmpty) {
-      final sortColumn = sortedColumns.first;
-      _employees.sort((Employee a, Employee b) {
-        return compare(a, b, sortColumn);
-      });
+    if (aLength.compareTo(bLength) > 0) {
+      return sortColumn.sortDirection == DataGridSortDirection.ascending
+          ? 1
+          : -1;
+    } else if (aLength.compareTo(bLength) == -1) {
+      return sortColumn.sortDirection == DataGridSortDirection.ascending
+          ? -1
+          : 1;
+    } else {
+      return 0;
     }
-    return true;
   }
 
   @override
-  int compare(Employee a, Employee b, SortColumnDetails sortColumn) {
-    var x = getValue(a, sortColumn.name);
-    var y = getValue(b, sortColumn.name);
-    if (x == null || y == null) {
-      if (sortColumn.sortDirection == DataGridSortDirection.ascending)
-        return x == null ? -1 : 1;
-      else
-        return x == null ? 1 : -1;
-    }
-    int xLength = x.toString().length;
-    int yLength = y.toString().length;
-    if (xLength.compareTo(yLength) > 0)
-      return sortColumn.sortDirection == DataGridSortDirection.ascending ? 1 : -1;
-    else if (xLength.compareTo(yLength) == -1)
-      return sortColumn.sortDirection == DataGridSortDirection.ascending ? -1 : 1;
-    else
-      return 0;
+  DataGridRowAdapter buildRow(DataGridRow row) {
+    return DataGridRowAdapter(
+        cells: row.getCells().map<Widget>((e) {
+      return Container(
+        alignment: Alignment.center,
+        padding: EdgeInsets.all(8.0),
+        child: Text(e.value.toString()),
+      );
+    }).toList());
   }
 }

pubspec.yaml

@@ -18,12 +18,12 @@ publish_to: 'none' # Remove this line if you wish to publish to pub.dev
 version: 1.0.0+1
 
 environment:
-  sdk: ">=2.7.0 <3.0.0"
+  sdk: ">=2.12.0 <3.0.0"
 
 dependencies:
   flutter:
     sdk: flutter
-  syncfusion_flutter_datagrid: ^18.3.40-beta
+  syncfusion_flutter_datagrid: 19.1.54-beta.1
 
 
   # The following adds the Cupertino Icons font to your application.