Paging is an important feature for loading large amounts of data and displaying it instantly in the DataGrid widget. It also provides easy navigation through the data. We at  Syncfusion have developed the  Syncfusion Flutter Data Pager widget to achieve pagination in the Flutter DataGrid widget. You can get this Data Pager in our  2020 Volume 3 release.

Let’s discuss in this blog how to integrate the  SfDataPager with  SfDataGrid and the customization options available in the Data Pager widget.

Integrating SfDataPager into SfDataGrid

Step 1: Include the Syncfusion Flutter DataGrid package dependency in the pubspec.yaml file of your project with the following code.

1 syncfusion_flutter_datagrid: ^18.3.35-beta

Step 2: Import the DataGrid package in the main.dart file using the following code example.

1 import 'package:syncfusion_flutter_datagrid/datagrid.dart'``;

**Step 3: **Create a common delegate for both the SfDataPager and SfDataGrid and do the following. Please note that, by default,  DataGridSource is extended with the  DataPagerDelegate.

1. Set the  SfDataGrid.DataGridSource to the  SfDataPager.delegate property.
2. Set the number of rows to be displayed on a page by setting the  SfDataPager.rowsPerPage property.
3. Set the number of items that should be displayed in view by setting the  SfDataPager.visibleItemsCount property.
4. Override the  SfDataPager.delegate.rowCount property and  SfDataPager.delegate.handlePageChanges method in the SfDataGrid.DataGridSource.
5. You can also load data for a specific page using the handlePageChanges method. This method is called for every page navigation in the Data Pager.

#flutter #productivity