How to change the mouse cursor in Flutter DataTable?

This article illustrates how to change the mouse cursor to SystemMouseCursors.click in a Flutter DataGrid.

STEP 1: Create a data source class by extending DataGridSource for mapping data to the SfDataGrid. In the buildRow method, wrap the MouseRegion widget as a parent of the Container widget. Set the desired cursor using the MouseRegion.cursor property.

class EmployeeDataSource extends DataGridSource {
 EmployeeDataSource(List<employee> employees) {
   buildDataGridRows(employees);
 }

 List<datagridrow> datagridRows = [];

 @override
 List<datagridrow> get rows => datagridRows;

 void buildDataGridRows(List<employee> employeesData) {
   datagridRows = employeesData
       .map<datagridrow>((e) =&gt; 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();
 }

 @override
 DataGridRowAdapter buildRow(DataGridRow row) {
   return DataGridRowAdapter(
       cells: row.getCells().map<widget>((dataGridCell) {
     return MouseRegion(
       cursor: SystemMouseCursors.click,
       child: Container(
         alignment: Alignment.center,
         padding: const EdgeInsets.symmetric(horizontal: 8.0),
         child: Text(dataGridCell.value.toString()),
       ),
     );
   }).toList());
 }
}

STEP 2: Initialize the SfDataGrid widget with all the required properties. For changing the mouse cursor in the header cell, wrap the MouseRegion widget as a parent of the Container widget within the SfDataGrid.columns property and set the desired cursor using the MouseRegion.cursor property.

 late EmployeeDataSource _employeeDataSource;
 List<employee> _employees = [];

 @override
 void initState() {
   super.initState();
   _employees = populateData();
   _employeeDataSource = EmployeeDataSource(_employees);
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(title: const Text('Syncfusion DataGrid Demo')),
     body: SfDataGrid(
       source: _employeeDataSource,
       columns: <gridcolumn>[
         GridColumn(
             columnName: 'ID',
             label: MouseRegion(
                 cursor: SystemMouseCursors.click,
                 child: Container(
                     alignment: Alignment.center, child: const Text('ID')))),
         GridColumn(
             columnName: 'Name',
             label: MouseRegion(
               cursor: SystemMouseCursors.click,
               child: Container(
                   alignment: Alignment.center, child: const Text('Name')),
             )),
         GridColumn(
             columnName: 'Designation',
             label: MouseRegion(
               cursor: SystemMouseCursors.click,
               child: Container(
                   alignment: Alignment.center,
                   child: const Text('Designation')),
             )),
         GridColumn(
             columnName: 'Salary',
             label: MouseRegion(
               cursor: SystemMouseCursors.click,
               child: Container(
                   alignment: Alignment.center, child: const Text('Salary')),
             )),
       ],
       columnWidthMode: ColumnWidthMode.fill,
     ),
   );
 }

You can download the example from GitHub.

Conclusion
I hope you enjoyed learning about how to change the mouse cursor in Flutter DataTable.

You can refer to our Flutter DataGrid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Flutter DataGrid example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!