How to use callbacks for server sorting in Flutter DataTable

.gitignore

@@ -0,0 +1,45 @@
+# Miscellaneous
+*.class
+*.log
+*.pyc
+*.swp
+.DS_Store
+.atom/
+.build/
+.buildlog/
+.history
+.svn/
+.swiftpm/
+migrate_working_dir/
+
+# IntelliJ related
+*.iml
+*.ipr
+*.iws
+.idea/
+
+# The .vscode folder contains launch configuration and tasks you configure in
+# VS Code which you may wish to be included in version control, so this line
+# is commented out by default.
+#.vscode/
+
+# Flutter/Dart/Pub related
+**/doc/api/
+**/ios/Flutter/.last_build_id
+.dart_tool/
+.flutter-plugins
+.flutter-plugins-dependencies
+.pub-cache/
+.pub/
+/build/
+
+# Symbolication related
+app.*.symbols
+
+# Obfuscation related
+app.*.map.json
+
+# Android Studio will place build artifacts here
+/android/app/debug
+/android/app/profile
+/android/app/release

README.md

@@ -1,2 +1,112 @@
-# How-to-use-callbacks-for-server-sorting-in-Flutter-DataTable
-This demo shows How to use callbacks for server sorting in Flutter DataTable 
+# How to use callbacks for server sorting in Flutter DataTable (SfDataGrid)?
+
+In this article, we will show how to use callbacks for server sorting in [Flutter DataTable](https://www.syncfusion.com/flutter-widgets/flutter-datagrid).
+
+Initialize the [SfDataGrid](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid-class.html) widget with the necessary properties. The SfDataGrid provides the following callbacks for sorting: [onColumnSortChanging](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/onColumnSortChanging.html) and [onColumnSortChanged](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/onColumnSortChanged.html). The onColumnSortChanged callback is triggered when a column is sorted in the SfDataGrid. You can use [SfDataGrid.source.sortedColumns](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/sortedColumns.html) to retrieve the sorted column details, including the sort direction. Based on this direction, you can load the corresponding data into the DataGrid. After adding new data, make sure to call [notifyListeners](https://api.flutter.dev/flutter/foundation/ChangeNotifier/notifyListeners.html) to refresh the DataGrid when the underlying data changes.
+
+Additionally, note that you should override the [performSorting](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/performSorting.html) method with an empty implementation to disable built-in DataGrid sorting.
+
+```dart
+@override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ appBar: AppBar(title: const Text('Syncfusion Flutter DataGrid')),
+ body: StreamBuilder(
+ stream: loadingController.stream,
+ builder: (BuildContext context, AsyncSnapshot<bool> snapshot) {
+ return Stack(
+ children: [
+ SfDataGrid(
+ source: employeeDataSource,
+ columnWidthMode: ColumnWidthMode.fill,
+ allowSorting: true,
+ sortingGestureType: SortingGestureType.tap,
+ onColumnSortChanged: (newSortedColumn, oldSortedColumn) async {
+ // Show loading indicator
+ loadingController.add(true);
+ await Future<void>.delayed(const Duration(seconds: 2));
+ // Hide loading indicator
+ loadingController.add(false);
+ employeeDataSource._employeeData.clear();
+ for (
+ int i = 0;
+ i < employeeDataSource.sortedColumns.length;
+ i++
+ ) {
+ if (employeeDataSource.sortedColumns[i].sortDirection ==
+ DataGridSortDirection.ascending) {
+ var employee2 = getEmployeeDataAscending();
+ employeeDataSource._buildDataGridRows(employee2);
+ employeeDataSource.updateDataGridSource();
+ } else if (employeeDataSource
+ .sortedColumns[i]
+ .sortDirection ==
+ DataGridSortDirection.descending) {
+ var employee2 = getEmployeeDataDescending();
+ employeeDataSource._buildDataGridRows(employee2);
+ employeeDataSource.updateDataGridSource();
+ }
+ }
+ },
+ columns: <GridColumn>[
+ GridColumn(
+ columnName: 'id',
+ label: Container(
+ padding: const EdgeInsets.all(16.0),
+ alignment: Alignment.center,
+ child: const Text('ID'),
+ ),
+ ),
+ GridColumn(
+ columnName: 'name',
+ label: Container(
+ padding: const EdgeInsets.all(8.0),
+ alignment: Alignment.center,
+ child: const Text('Name'),
+ ),
+ ),
+ GridColumn(
+ columnName: 'designation',
+ label: Container(
+ padding: const EdgeInsets.all(8.0),
+ alignment: Alignment.center,
+ child: const Text(
+ 'Designation',
+ overflow: TextOverflow.ellipsis,
+ ),
+ ),
+ ),
+ GridColumn(
+ columnName: 'salary',
+ label: Container(
+ padding: const EdgeInsets.all(8.0),
+ alignment: Alignment.center,
+ child: const Text('Salary'),
+ ),
+ ),
+ ],
+ ),
+ if (snapshot.data == true)
+ const Center(child: CircularProgressIndicator()),
+ ],
+ );
+ },
+ ),
+ );
+ }
+
+class EmployeeDataSource extends DataGridSource {
+
+….
+
+
+ @override
+ Future<void> performSorting(List<DataGridRow> rows) async {}
+
+ void updateDataGridSource() {
+ notifyListeners();
+ }
+}
+```
+
+You can download this example on [GitHub](https://github.com/SyncfusionExamples/How-to-use-callbacks-for-server-sorting-in-Flutter-DataTable).

android/.gitignore

@@ -0,0 +1,14 @@
+gradle-wrapper.jar
+/.gradle
+/captures/
+/gradlew
+/gradlew.bat
+/local.properties
+GeneratedPluginRegistrant.java
+.cxx/
+
+# Remember to never publicly share your keystore.
+# See https://flutter.dev/to/reference-keystore
+key.properties
+**/*.keystore
+**/*.jks

android/app/build.gradle.kts

@@ -0,0 +1,44 @@
+plugins {
+ id("com.android.application")
+ id("kotlin-android")
+ // The Flutter Gradle Plugin must be applied after the Android and Kotlin Gradle plugins.
+ id("dev.flutter.flutter-gradle-plugin")
+}
+
+android {
+ namespace = "com.example.flutter_application"
+ compileSdk = flutter.compileSdkVersion
+ ndkVersion = flutter.ndkVersion
+
+ compileOptions {
+ sourceCompatibility = JavaVersion.VERSION_11
+ targetCompatibility = JavaVersion.VERSION_11
+ }
+
+ kotlinOptions {
+ jvmTarget = JavaVersion.VERSION_11.toString()
+ }
+
+ defaultConfig {
+ // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
+ applicationId = "com.example.flutter_application"
+ // You can update the following values to match your application needs.
+ // For more information, see: https://flutter.dev/to/review-gradle-config.
+ minSdk = flutter.minSdkVersion
+ targetSdk = flutter.targetSdkVersion
+ versionCode = flutter.versionCode
+ versionName = flutter.versionName
+ }
+
+ buildTypes {
+ release {
+ // TODO: Add your own signing config for the release build.
+ // Signing with the debug keys for now, so `flutter run --release` works.
+ signingConfig = signingConfigs.getByName("debug")
+ }
+ }
+}
+
+flutter {
+ source = "../.."
+}

android/app/src/debug/AndroidManifest.xml

@@ -0,0 +1,7 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+ <!-- The INTERNET permission is required for development. Specifically,
+ the Flutter tool needs it to communicate with the running application
+ to allow setting breakpoints, to provide hot reload, etc.
+ -->
+ <uses-permission android:name="android.permission.INTERNET"/>
+</manifest>

android/app/src/main/AndroidManifest.xml

@@ -0,0 +1,45 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+ <application
+ android:label="flutter_application"
+ android:name="${applicationName}"
+ android:icon="@mipmap/ic_launcher">
+ <activity
+ android:name=".MainActivity"
+ android:exported="true"
+ android:launchMode="singleTop"
+ android:taskAffinity=""
+ android:theme="@style/LaunchTheme"
+ android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
+ android:hardwareAccelerated="true"
+ android:windowSoftInputMode="adjustResize">
+ <!-- Specifies an Android theme to apply to this Activity as soon as
+ the Android process has started. This theme is visible to the user
+ while the Flutter UI initializes. After that, this theme continues
+ to determine the Window background behind the Flutter UI. -->
+ <meta-data
+ android:name="io.flutter.embedding.android.NormalTheme"
+ android:resource="@style/NormalTheme"
+ />
+ <intent-filter>
+ <action android:name="android.intent.action.MAIN"/>
+ <category android:name="android.intent.category.LAUNCHER"/>
+ </intent-filter>
+ </activity>
+ <!-- Don't delete the meta-data below.
+ This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
+ <meta-data
+ android:name="flutterEmbedding"
+ android:value="2" />
+ </application>
+ <!-- Required to query activities that can process text, see:
+ https://developer.android.com/training/package-visibility and
+ https://developer.android.com/reference/android/content/Intent#ACTION_PROCESS_TEXT.
+
+ In particular, this is used by the Flutter engine in io.flutter.plugin.text.ProcessTextPlugin. -->
+ <queries>
+ <intent>
+ <action android:name="android.intent.action.PROCESS_TEXT"/>
+ <data android:mimeType="text/plain"/>
+ </intent>
+ </queries>
+</manifest>

android/app/src/main/kotlin/com/example/flutter_application/MainActivity.kt

@@ -0,0 +1,5 @@
+package com.example.flutter_application
+
+import io.flutter.embedding.android.FlutterActivity
+
+class MainActivity : FlutterActivity()

android/app/src/main/res/drawable-v21/launch_background.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Modify this file to customize your launch splash screen -->
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+ <item android:drawable="?android:colorBackground" />
+
+ <!-- You can insert your own image assets here -->
+ <!-- <item>
+ <bitmap
+ android:gravity="center"
+ android:src="@mipmap/launch_image" />
+ </item> -->
+</layer-list>

android/app/src/main/res/drawable/launch_background.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Modify this file to customize your launch splash screen -->
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+ <item android:drawable="@android:color/white" />
+
+ <!-- You can insert your own image assets here -->
+ <!-- <item>
+ <bitmap
+ android:gravity="center"
+ android:src="@mipmap/launch_image" />
+ </item> -->
+</layer-list>

android/app/src/main/res/values-night/styles.xml

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+ <!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is on -->
+ <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
+ <!-- Show a splash screen on the activity. Automatically removed when
+ the Flutter engine draws its first frame -->
+ <item name="android:windowBackground">@drawable/launch_background</item>
+ </style>
+ <!-- Theme applied to the Android Window as soon as the process has started.
+ This theme determines the color of the Android Window while your
+ Flutter UI initializes, as well as behind your Flutter UI while its
+ running.
+
+ This Theme is only used starting with V2 of Flutter's Android embedding. -->
+ <style name="NormalTheme" parent="@android:style/Theme.Black.NoTitleBar">
+ <item name="android:windowBackground">?android:colorBackground</item>
+ </style>
+</resources>

android/app/src/main/res/values/styles.xml

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+ <!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is off -->
+ <style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
+ <!-- Show a splash screen on the activity. Automatically removed when
+ the Flutter engine draws its first frame -->
+ <item name="android:windowBackground">@drawable/launch_background</item>
+ </style>
+ <!-- Theme applied to the Android Window as soon as the process has started.
+ This theme determines the color of the Android Window while your
+ Flutter UI initializes, as well as behind your Flutter UI while its
+ running.
+
+ This Theme is only used starting with V2 of Flutter's Android embedding. -->
+ <style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
+ <item name="android:windowBackground">?android:colorBackground</item>
+ </style>
+</resources>

android/app/src/profile/AndroidManifest.xml

@@ -0,0 +1,7 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+ <!-- The INTERNET permission is required for development. Specifically,
+ the Flutter tool needs it to communicate with the running application
+ to allow setting breakpoints, to provide hot reload, etc.
+ -->
+ <uses-permission android:name="android.permission.INTERNET"/>
+</manifest>

android/build.gradle.kts

@@ -0,0 +1,21 @@
+allprojects {
+ repositories {
+ google()
+ mavenCentral()
+ }
+}
+
+val newBuildDir: Directory = rootProject.layout.buildDirectory.dir("../../build").get()
+rootProject.layout.buildDirectory.value(newBuildDir)
+
+subprojects {
+ val newSubprojectBuildDir: Directory = newBuildDir.dir(project.name)
+ project.layout.buildDirectory.value(newSubprojectBuildDir)
+}
+subprojects {
+ project.evaluationDependsOn(":app")
+}
+
+tasks.register<Delete>("clean") {
+ delete(rootProject.layout.buildDirectory)
+}

android/gradle.properties

@@ -0,0 +1,3 @@
+org.gradle.jvmargs=-Xmx8G -XX:MaxMetaspaceSize=4G -XX:ReservedCodeCacheSize=512m -XX:+HeapDumpOnOutOfMemoryError
+android.useAndroidX=true
+android.enableJetifier=true

android/gradle/wrapper/gradle-wrapper.properties

@@ -0,0 +1,5 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.10.2-all.zip