Sample has been added

Author: Tamilarasan-Paranthaman

.gitignore

@@ -0,0 +1,46 @@
+# Miscellaneous
+*.class
+*.log
+*.pyc
+*.swp
+.DS_Store
+.atom/
+.buildlog/
+.history
+.svn/
+
+# 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
+.packages
+.pub-cache/
+.pub/
+/build/
+
+# Web related
+lib/generated_plugin_registrant.dart
+
+# 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 +1,134 @@
-# How-to-add-button-column-in-Flutter-DataTable-SfDataGrid-
+# How-to-add-button-column-in-Flutter-DataTable--SfDataGrid-
+
+The Syncfusion [Flutter DataGrid](https://help.syncfusion.com/flutter/datagrid/overview) provides the support to load any widget in the cells. In this article, you can learn about how to load the button widget for specific column and perform any action on that button click. 
+
+## STEP 1:
+Initialize the [SfDataGrid](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid-class.html) widget with all the required properties. 
+
+
+```dart
+  List<Employee> _employees = <Employee>[];
+  late EmployeeDataSource _employeeDataSource;
+
+  @override
+  void initState() {
+    super.initState();
+    _employees = getEmployeeData();
+    _employeeDataSource = EmployeeDataSource(_employees);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('Flutter SfDataGrid'),
+      ),
+      body: SfDataGrid(source: _employeeDataSource, columns: [
+        GridColumn(
+          columnName: 'id',
+          label: Container(
+            padding: const EdgeInsets.all(8.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'),
+          ),
+        ),
+        GridColumn(
+          columnName: 'salary',
+          label: Container(
+            padding: const EdgeInsets.all(8.0),
+            alignment: Alignment.center,
+            child: const Text('Salary '),
+          ),
+        ),
+        GridColumn(
+          columnName: 'button',
+          label: Container(
+            padding: const EdgeInsets.all(8.0),
+            alignment: Alignment.center,
+            child: const Text('Details '),
+          ),
+        ),
+      ]),
+    );
+  }
+
+```
+## STEP 2: 
+Create a data source class by extending [DataGridSource](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource-class.html) for mapping data to the SfDataGrid. In the [buildRow](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/buildRow.html) method, you can load the button widget based on the condition. Here, the respective row detail will be shown in the AlertDialog with a button click.
+
+```dart
+class EmployeeDataSource extends DataGridSource {
+  EmployeeDataSource(List<Employee> employees) {
+    buildDataGridRow(employees);
+  }
+
+  void buildDataGridRow(List<Employee> employeeData) {
+    dataGridRow = employeeData.map<DataGridRow>((employee) {
+      return DataGridRow(cells: [
+        DataGridCell<int>(columnName: 'id', value: employee.id),
+        DataGridCell<String>(columnName: 'name', value: employee.name),
+        DataGridCell<String>(
+            columnName: 'designation', value: employee.designation),
+        const DataGridCell<Widget>(columnName: 'button', value: null),
+      ]);
+    }).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(
+          alignment: Alignment.center,
+          child: dataGridCell.columnName == 'button'
+              ? LayoutBuilder(
+                  builder: (BuildContext context, BoxConstraints constraints) {
+                  return ElevatedButton(
+                      onPressed: () {
+                        showDialog(
+                            context: context,
+                            builder: (context) => AlertDialog(
+                                content: SizedBox(
+                                    height: 100,
+                                    child: Column(
+                                      mainAxisAlignment:
+                                          MainAxisAlignment.spaceBetween,
+                                      children: [
+                                        Text(
+                                            'Employee ID: ${row.getCells()[0].value.toString()}'),
+                                        Text(
+                                            'Employee Name: ${row.getCells()[1].value.toString()}'),
+                                        Text(
+                                            'Employee Designation: ${row.getCells()[2].value.toString()}'),
+                                      ],
+                                    ))));
+                      },
+                      child: const Text('Details'));
+                })
+              : Text(dataGridCell.value.toString()));
+    }).toList());
+  }
+}
+
+```