README.md

How to change the textStyle of the header cells in a Flutter DataTable (SfDataGrid)?.

In this article, we will show you how to change the textStyle of the header cells in a Flutter DataTable.

Initialize the SfDataGrid widget with all the necessary properties. The GridColumn.label is used to display the required widget in a column header. Under the label property of GridColumn, the corresponding header text widget is loaded. Therefore, you can add the required header text style to the loaded text widget.

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Syncfusion Flutter DataGrid'),
      ),
      body: SfDataGrid(
        source: employeeDataSource,
        columnWidthMode: ColumnWidthMode.fill,
        columns: <GridColumn>[
          GridColumn(
              columnName: 'id',
              label: Container(
                  padding: const EdgeInsets.all(16.0),
                  alignment: Alignment.center,
                  child: const Text(
                    'ID',
                    style: TextStyle(
                        color: Colors.red, fontWeight: FontWeight.bold),
                  ))),
          GridColumn(
              columnName: 'name',
              label: Container(
                  padding: const EdgeInsets.all(8.0),
                  alignment: Alignment.center,
                  child: const Text(
                    'Name',
                    style: TextStyle(
                        color: Colors.green, fontWeight: FontWeight.bold),
                  ))),
          GridColumn(
              columnName: 'designation',
              label: Container(
                  padding: const EdgeInsets.all(8.0),
                  alignment: Alignment.center,
                  child: const Text(
                    'Designation',
                    style: TextStyle(
                        color: Colors.blueAccent, fontWeight: FontWeight.bold),
                    overflow: TextOverflow.ellipsis,
                  ))),
          GridColumn(
              columnName: 'salary',
              label: Container(
                  padding: const EdgeInsets.all(8.0),
                  alignment: Alignment.center,
                  child: const Text(
                    'Salary',
                    style: TextStyle(
                        color: Colors.pink, fontWeight: FontWeight.bold),
                  ))),
        ],
      ),
    );
  }

You can download this example in GitHub.