SFDataGrid pagination with SFDataPager not working

Question

I am a beginner in flutter mobile development. I am currently using a Package in flutter called syncfusion_flutter_datagrid, I am having a problem where the SFDataPager, which is used for pagination, is not working and the SFDataGrid is still scrolling and not divided into pages, although the pageCount is working and does have 2 pages (I currently have 15 items for the data table) because it only does calculations, but the rowsPerPages is not working because the data table still has 15 items and is still scrollable. I do not know if there is anything missing in my code especially in the DataGridSource class because both the SFDataGrid and SFDataPager is connected to the DataGridSource.

Here is my widgets in the view class:

              AppDataGrid(
                dtrHistoryData: _controller.historyData.value,
                columns: _controller.columns,
              ),
              SizedBox(
                height: dataPagerHeight,
                width: double.maxFinite,
                // color: Colors.white,
                child: Center(
                  child: SfDataPager(
                    pageCount: ((_controller.historyData.value.timeData
                                    ?.length ??
                                1) /
                            10)
                        .ceilToDouble(),
                    delegate: DTRHistoryDataGridSource(
                        dtrHistoryData: _controller.historyData.value),
                    direction: Axis.horizontal,
                  ),
                ),
              ),

This is the SFDataGrid (AppDataGrid):

import 'package:flutter/material.dart';
import 'package:puncher_app/app/global/constants/colors.dart';
import 'package:puncher_app/app/models/dtr_history_data.dart';
import 'package:syncfusion_flutter_core/theme.dart';
import 'package:syncfusion_flutter_datagrid/datagrid.dart';

import '../../data/table/history_table2_data.dart';

class AppDataGrid extends StatelessWidget {
  final DTRHistoryData dtrHistoryData;
  final List<GridColumn> columns;

  const AppDataGrid({
    super.key,
    required this.dtrHistoryData,
    required this.columns,
  });

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Card(
        clipBehavior: Clip.antiAliasWithSaveLayer,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
        color: transparent,
        elevation: 0,
        child: SfDataGridTheme(
          data: SfDataGridThemeData(
            headerColor: secondaryColor,
          ),
          child: SfDataGrid(
            rowsPerPage: 11,
            verticalScrollPhysics: const ClampingScrollPhysics(),
            horizontalScrollPhysics: const ClampingScrollPhysics(),
            headerGridLinesVisibility: GridLinesVisibility.none,
            gridLinesVisibility: GridLinesVisibility.horizontal,
            source: DTRHistoryDataGridSource(
              dtrHistoryData: dtrHistoryData,
            ),
            columns: columns,
          ),
        ),
      ),
    );
  }
}

And here is the DataGridSource:

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:puncher_app/app/global/constants/colors.dart';
import 'package:puncher_app/app/global/constants/styles.dart';
import 'package:puncher_app/app/global/widgets/app_text.dart';
import 'package:puncher_app/app/models/dtr_history_data.dart';
import 'package:syncfusion_flutter_datagrid/datagrid.dart';

class DTRHistoryDataGridSource extends DataGridSource {
  late List<DataGridRow> _dtrHistoryDataGridRows;
  late DTRHistoryData _dtrHistoryData = DTRHistoryData();

  DTRHistoryDataGridSource({required DTRHistoryData dtrHistoryData}) {
    _dtrHistoryData = dtrHistoryData;
    buildDataGridRows();
  }

  void buildDataGridRows() {
    final dateFormat = DateFormat('hh:mm a');
    _dtrHistoryDataGridRows = _dtrHistoryData.timeData
            ?.map<DataGridRow>(
              (timeData) => DataGridRow(
                cells: [
                  DataGridCell<String>(
                    columnName: 'Date',
                    value: timeData.date,
                  ),
                  DataGridCell<String>(
                    columnName: 'Time In',
                    value: timeData.timeIn?.isNotEmpty == true
                        ? dateFormat.format(
                            DateTime.parse(timeData.timeIn!),
                          )
                        : '--',
                  ),
                  DataGridCell<String>(
                    columnName: 'Time Out',
                    value: timeData.timeOut?.isNotEmpty == true
                        ? dateFormat.format(
                            DateTime.parse(timeData.timeOut!),
                          )
                        : '--',
                  ),
                  DataGridCell<String>(
                    columnName: 'Duration',
                    value: timeData.duration != null
                        ? formatDuration(timeData.duration!)
                        : '--',
                  )
                ],
              ),
            )
            .toList() ??
        [];
  }

  String formatDuration(String duration) {
    final parts = duration.split(' ');
    final hours = parts[0];
    final minutes = parts[2];

    return '${hours}h${minutes}m';
  }

  @override
  List<DataGridRow> get rows => _dtrHistoryDataGridRows;

  @override
  DataGridRowAdapter buildRow(DataGridRow row) {
    return DataGridRowAdapter(
        cells: row.getCells().map<Widget>((dataGridCell) {
      return Container(
          alignment: Alignment.center,
          // padding: const EdgeInsets.all(16.0),
          child: AppText(
            text: dataGridCell.value.toString(),
            textColor: secondaryColor,
            style: kRegTextBlack,
            alignment: TextAlign.center,
          ));
    }).toList());
  }

  @override
  Object getValue(int rowIndex, String columnName) {
    final TimeData timeData = _dtrHistoryData.timeData![rowIndex];
    switch (columnName) {
      case 'Date':
        return timeData.date!;
      case 'Time In':
        return timeData.timeIn!;
      case 'Time Out':
        return timeData.timeOut!;
      case 'Duration':
        return timeData.duration!;
      default:
        return '';
    }
  }
}

Answer 1

Looking at the code snippets you provided, it seems like the pagination logic is implemented correctly, but there might be an issue with the data source for the SFDataGrid. Here are a few things you can try to get the pagination working:

1. Update rowsPerPage property of SfDataGrid widget to 10, which is the number of rows to display per page, to match with rowsPerPages property of SfDataPager.

SfDataGrid(
  rowsPerPage: 10,
  // rest of the properties
)

1. In your DataGridSource implementation, update the rows getter to only return the number of rows that should be displayed on the current page. This can be done by calculating the starting and ending index based on the pageIndex and rowsPerPage properties provided by the SfDataPager.

class DTRHistoryDataGridSource extends DataGridSource {
  // rest of the implementation
  
  @override
  List<DataGridRow> get rows {
    final startIndex = _pageIndex * _rowsPerPage;
    final endIndex = startIndex + _rowsPerPage;
    return _dtrHistoryDataGridRows.sublist(startIndex, endIndex);
  }
  
  // rest of the implementation
}

1. Make sure that you are using the DTRHistoryDataGridSource instance created in the SfDataPager widget as the source for your SfDataGrid.

SfDataGrid(
  source: _dataGridSource, // use the same instance as SfDataPager
  // rest of the properties
)

With these changes, you should be able to get the pagination working as expected.