# Freeze Panes in Flutter DataGrid (SfDataGrid) The rows and columns can freeze in view like in Excel. They can be frozen by setting the following properties.
Property Name Description
frozenRowsCount Set the frozen rows count at the top of the SfDataGrid.
footerFrozenRowsCount Set the footer rows count at the bottom of the SfDataGrid.
frozenColumnsCount Set the frozen columns count on the left side of the SfDataGrid.
footerFrozenColumnsCount Set the footer columns on the right side of the SfDataGrid.
## Freeze columns The columns can be frozen in view at left and right like Excel by setting the [frozenColumnsCount](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/frozenColumnsCount.html) and [footerFrozenColumnsCount](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/footerFrozenColumnsCount.html) properties. The following code example shows how to freeze a column at left using `frozenColumnsCount`, {% tabs %} {% highlight Dart %} @override Widget build(BuildContext context) { return Scaffold( body: SfDataGrid( source: _orderDataGridSource, frozenColumnsCount: 1, columns: [ GridColumn( columnName: 'id', label: Container( alignment: Alignment.centerRight, padding: EdgeInsets.symmetric(horizontal: 16.0), child: Text( 'ID', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'productId', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerRight, child: Text( 'Product ID', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'name', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerLeft, child: Text( 'Customer Name', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'product', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerLeft, child: Text( 'Product', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'orderDate', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.center, child: Text( 'Order Date', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'quantity', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerRight, child: Text( 'Quantity', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'city', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerLeft, child: Text( 'City', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'unitPrice', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerRight, child: Text( 'Unit Price', overflow: TextOverflow.ellipsis, ))) ])); } {% endhighlight %} {% endtabs %} ![flutter datagrid shows frozen column at left](images/frozen-pane/flutter-datagrid-frozen-column.gif) The following code example shows how to freeze a column at right using the `footerFrozenColumnsCount.` {% tabs %} {% highlight Dart %} @override Widget build(BuildContext context) { return Scaffold( body: SfDataGrid( source: _orderDataGridSource, footerFrozenColumnsCount: 1, columns: [ GridColumn( columnName: 'id', label: Container( alignment: Alignment.centerRight, padding: EdgeInsets.symmetric(horizontal: 16.0), child: Text( 'ID', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'productId', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerRight, child: Text( 'Product ID', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'name', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerLeft, child: Text( 'Customer Name', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'product', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerLeft, child: Text( 'Product', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'orderDate', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.center, child: Text( 'Order Date', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'quantity', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerRight, child: Text( 'Quantity', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'city', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerLeft, child: Text( 'City', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'unitPrice', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerRight, child: Text( 'Unit Price', overflow: TextOverflow.ellipsis, ))) ])); } {% endhighlight %} {% endtabs %} ![flutter datagrid shows frozen column at right](images/frozen-pane/flutter-datagrid-footer-frozen-column.png) ### Limitation * The `frozenColumnsCount` or `footerFrozenColumnsCount` should be less than the total number of columns displayed in the view. For example, If you have 5 columns in the view, you can set `frozenColumnsCount` to a maximum value of 4. * [SfDataGrid](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/SfDataGrid.html) supports freezing a specific number of columns from the left or right. but not freezing specific columns by name or index. ## Freeze rows The rows can be frozen in view at the top and bottom like in Excel by setting the [frozenRowsCount](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/frozenRowsCount.html) and [footerFrozenRowsCount](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/footerFrozenRowsCount.html) properties. The following code example shows how to freeze a row at the top using the `frozenRowsCount`, {% tabs %} {% highlight Dart %} @override Widget build(BuildContext context) { return Scaffold( body: SfDataGrid( source: _orderDataGridSource, frozenRowsCount: 1, columns: [ GridColumn( columnName: 'id', label: Container( alignment: Alignment.centerRight, padding: EdgeInsets.symmetric(horizontal: 16.0), child: Text( 'ID', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'productId', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerRight, child: Text( 'Product ID', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'name', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerLeft, child: Text( 'Customer Name', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'product', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerLeft, child: Text( 'Product', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'orderDate', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.center, child: Text( 'Order Date', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'quantity', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerRight, child: Text( 'Quantity', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'city', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerLeft, child: Text( 'City', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'unitPrice', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerRight, child: Text( 'Unit Price', overflow: TextOverflow.ellipsis, ))) ])); } {% endhighlight %} {% endtabs %} ![flutter datagrid shows frozen row at top](images/frozen-pane/flutter-datagrid-frozen-row.gif) The following code example shows how to freeze a row at the bottom using the `footerFrozenRowsCount.` {% tabs %} {% highlight Dart %} @override Widget build(BuildContext context) { return Scaffold( body: SfDataGrid( source: _orderDataGridSource, footerFrozenRowsCount: 1, columns: [ GridColumn( columnName: 'id', label: Container( alignment: Alignment.centerRight, padding: EdgeInsets.symmetric(horizontal: 16.0), child: Text( 'ID', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'productId', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerRight, child: Text( 'Product ID', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'name', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerLeft, child: Text( 'Customer Name', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'product', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerLeft, child: Text( 'Product', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'orderDate', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.center, child: Text( 'Order Date', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'quantity', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerRight, child: Text( 'Quantity', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'city', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerLeft, child: Text( 'City', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'unitPrice', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerRight, child: Text( 'Unit Price', overflow: TextOverflow.ellipsis, ))) ])); } {% endhighlight %} {% endtabs %} ![flutter datagrid shows frozen row at bottom](images/frozen-pane/flutter-datagrid-footer-frozen-row.png) ### Limitation * `frozenRowsCount` or `footerFrozenRowsCount` should be lesser than the number of rows displayed in the view. For example, If you have 10 rows in view, then you set `frozenRowsCount` to a maximum value of 9. * SfDataGrid has support to freeze the number of rows from top or bottom. There is no support to freeze a specific row. N> Header row is frozen by default and works regardless of the `frozenRowsCount` property. ## Appearance The `SfDataGrid` allows customizing the appearance of the freeze pane through the [SfDataGridTheme.SfDataGridThemeData](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData-class.html) property. The DataGrid should be wrapped inside the `SfDataGridTheme.` The `SfDataGridThemeData` and `SfDataGridTheme` classes are available in the [syncfusion_flutter_core](https://pub.dev/packages/syncfusion_flutter_core) package. So, import the following file. {% tabs %} {% highlight Dart %} import 'package:syncfusion_flutter_core/theme.dart'; {% endhighlight %} {% endtabs %} The frozen line will be shown only the [SfDataGridThemeData.frozenPaneElevation](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/frozenPaneElevation.html) property to 0. The freeze pane line and freeze pane width can be changed by [frozenPaneLineColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/frozenPaneLineColor.html) and [frozenPaneLineWidth](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/frozenPaneLineWidth.html). {% tabs %} {% highlight Dart %} import 'package:syncfusion_flutter_core/theme.dart'; import 'package:syncfusion_flutter_datagrid/datagrid.dart'; @override Widget build(BuildContext context) { return Scaffold( body: SfDataGridTheme( data: SfDataGridThemeData( frozenPaneElevation: 0.0, frozenPaneLineColor: Colors.red, frozenPaneLineWidth: 1.5), child: SfDataGrid( source: _orderDataGridSource, frozenRowsCount: 1, footerFrozenRowsCount: 1, frozenColumnsCount: 1, footerFrozenColumnsCount: 1, columns: [ GridColumn( columnName: 'id', label: Container( alignment: Alignment.centerRight, padding: EdgeInsets.symmetric(horizontal: 16.0), child: Text( 'ID', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'productId', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerRight, child: Text( 'Product ID', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'name', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerLeft, child: Text( 'Customer Name', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'product', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerLeft, child: Text( 'Product', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'orderDate', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.center, child: Text( 'Order Date', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'quantity', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerRight, child: Text( 'Quantity', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'city', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerLeft, child: Text( 'City', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'unitPrice', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerRight, child: Text( 'Unit Price', overflow: TextOverflow.ellipsis, ))) ]), )); } {% endhighlight %} {% endtabs %} ![flutter datagrid shows freeze pane customization](images/frozen-pane/flutter-datagrid-frozen-pane-customization.png) The `SfDataGrid` allows customizing the appearance of the freeze pane elevation by using the `SfDataGridThemeData.frozenPaneElevation`. The default value of frozenPaneElevation is 5.0. {% tabs %} {% highlight Dart %} @override Widget build(BuildContext context) { return Scaffold( body: SfDataGridTheme( data: SfDataGridThemeData(frozenPaneElevation: 7.0), child: SfDataGrid( source: _orderDataGridSource, frozenRowsCount: 1, frozenColumnsCount: 1, columns: [ GridColumn( columnName: 'id', label: Container( alignment: Alignment.centerRight, padding: EdgeInsets.symmetric(horizontal: 16.0), child: Text( 'ID', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'productId', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerRight, child: Text( 'Product ID', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'name', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerLeft, child: Text( 'Customer Name', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'product', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerLeft, child: Text( 'Product', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'orderDate', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.center, child: Text( 'Order Date', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'quantity', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerRight, child: Text( 'Quantity', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'city', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerLeft, child: Text( 'City', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'unitPrice', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerRight, child: Text( 'Unit Price', overflow: TextOverflow.ellipsis, ))) ]), )); } {% endhighlight %} {% endtabs %} ![flutter datagrid shows customization of freeze pane elevation](images/frozen-pane/flutter-datagrid-customized-frozen-elevation.png) ## Hide freeze pane elevation By default, the elevation effect is applied to frozen panes. If you want to hide the freeze pane elevation and show only the frozen pane line, simply set the `SfDataGridThemeData.frozenPaneElevation` property to 0. Customize the appearance of the frozen line by using the `SfDataGridThemeData.frozenPaneLineColor` and `SfDataGridThemeData.frozenPaneLineWidth` properties. {% tabs %} {% highlight Dart %} @override Widget build(BuildContext context) { return Scaffold( body: SfDataGridTheme( data: SfDataGridThemeData( frozenPaneElevation: 0.0, frozenPaneLineColor: Colors.red, frozenPaneLineWidth: 1.5), child: SfDataGrid( source: _orderDataGridSource, frozenRowsCount: 1, frozenColumnsCount: 1, columns: [ GridColumn( columnName: 'id', label: Container( alignment: Alignment.centerRight, padding: EdgeInsets.symmetric(horizontal: 16.0), child: Text( 'ID', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'productId', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerRight, child: Text( 'Product ID', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'name', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerLeft, child: Text( 'Customer Name', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'product', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerLeft, child: Text( 'Product', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'orderDate', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.center, child: Text( 'Order Date', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'quantity', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerRight, child: Text( 'Quantity', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'city', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerLeft, child: Text( 'City', overflow: TextOverflow.ellipsis, ))), GridColumn( columnName: 'unitPrice', label: Container( padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerRight, child: Text( 'Unit Price', overflow: TextOverflow.ellipsis, ))) ]), )); } {% endhighlight %} {% endtabs %} ![flutter datagrid shows how to hide the frozen pane elevation](images/frozen-pane/flutter-datagrid-hide-frozen-elevation.png)