How to create paginated Flutter DataTable (SfDataGrid)?

2 mins read

The Syncfusion® Flutter DataTable widget interactively supports the manipulation of data using SfDataPager. The SfDataPager provides support to load data in the segment when dealing with large volumes of data.The datagrid performs paging of data in SfDataPager by using following properties,

The following steps explains how to create SfDataPager with SfDataGrid,

STEP 1:

Create data source class by extending from DataGridSource class for mapping data to the SfDataGrid. Override handlePageChange method and all other required methods. Provide the required logic to load the data for the specific pages in handlePageChange. This method is called for every page navigation from data pager.

class _OrderInfoDataSource extends DataGridSource {
  _OrderInfoDataSource(
      {required List<OrderInfo> dataSource,
      required List<OrderInfo> paginatedDataSource,
      required int rowsPerPage}) {
    _dataSource = dataSource;
    _paginatedDataSource = paginatedDataSource;
    _rowsPerPage = rowsPerPage;
  }
 
  late List<OrderInfo> _dataSource;
  late List<OrderInfo> _paginatedDataSource;
  late int _rowsPerPage;
 
  @override
  List<DataGridRow> get rows => _paginatedDataSource.map<DataGridRow>((e) {
        return DataGridRow(cells: [
          DataGridCell(columnName: 'orderID', value: e.orderID),
          DataGridCell(columnName: 'customerID', value: e.customerID),
          DataGridCell(columnName: 'orderDate', value: e.orderData),
          DataGridCell(columnName: 'freight', value: e.freight),
          DataGridCell(columnName: 'shippingDate', value: e.shippingDate),
          DataGridCell(columnName: 'shipCountry', value: e.shipCountry),
        ]);
      }).toList(growable: false);
 
  @override
  DataGridRowAdapter buildRow(DataGridRow row) {
    return DataGridRowAdapter(cells: [
      Container(
        padding: EdgeInsets.symmetric(horizontal: 16.0),
        alignment: Alignment.centerRight,
        child: Text(
          row.getCells()[0].value.toString(),
          overflow: TextOverflow.ellipsis,
        ),
      ),
      Container(
          padding: EdgeInsets.symmetric(horizontal: 16.0),
          alignment: Alignment.centerLeft,
          child: Text(
            row.getCells()[1].value.toString(),
            overflow: TextOverflow.ellipsis,
          )),
      Container(
          padding: EdgeInsets.symmetric(horizontal: 16.0),
          alignment: Alignment.centerRight,
          child: Text(
            DateFormat.yMd().format(row.getCells()[2].value).toString(),
            overflow: TextOverflow.ellipsis,
          )),
      Container(
          padding: EdgeInsets.symmetric(horizontal: 16.0),
          alignment: Alignment.center,
          child: Text(
            NumberFormat.currency(locale: 'en_US', symbol: '\$')
                .format(row.getCells()[3].value)
                .toString(),
            overflow: TextOverflow.ellipsis,
          )),
      Container(
          padding: EdgeInsets.symmetric(horizontal: 16.0),
          alignment: Alignment.centerRight,
          child: Text(
            DateFormat.yMd().format(row.getCells()[4].value).toString(),
            overflow: TextOverflow.ellipsis,
          )),
      Container(
          padding: EdgeInsets.symmetric(horizontal: 16.0),
          alignment: Alignment.centerLeft,
          child: Text(
            row.getCells()[5].value.toString(),
            overflow: TextOverflow.ellipsis,
          )),
    ]);
  }
 
  @override
  Future<bool> handlePageChange(int oldPageIndex, int newPageIndex) async {
    int startIndex = newPageIndex * _rowsPerPage;
    int endIndex = startIndex + _rowsPerPage;
    _paginatedDataSource =
        _dataSource.getRange(startIndex, endIndex).toList(growable: false);
    notifyDataSourceListeners();
    return true;
  }
}

STEP 2:

Create a new SfDataPager widget, and set the SfDataGrid.DataGridSource to the SfDataPager.Delegate property.

Set the number of pages required to display in the Data Pager to pageCount property.

Widget _buildDataPager() {
    return SfDataPager(
      delegate: orderInfoDataSource,
      pageCount: dataSource.length / rowsPerPage,
    );
  }

STEP 3:

Initialize the SfDataGrid widget with all the required properties. SfDataPager can place above or below based on the requirement of managing the easy data paging. Wrap the SfDataGrid inside the SizedBox and wrap the SfDataPager inside the Container. Here we are placed the SfDataPager below of the SfDataGrid inside a Column widget.

 @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('DataPager with DataGrid Demo')),
        body: LayoutBuilder(builder: (context, constraint) {
          return Column(
            children: [
              SizedBox(
                  height: constraint.maxHeight - dataPagerHeight,
                  width: constraint.maxWidth,
                  child: _buildDataGrid(constraint)),
              Container(
                height: dataPagerHeight,
                decoration: BoxDecoration(
                    color:
                        SfTheme.of(context).dataPagerThemeData.backgroundColor,
                    border: Border(
                        top: BorderSide(
                            width: .5,
                            color: SfTheme.of(context)
                                .dataGridThemeData
                                .gridLineColor),
                        bottom: BorderSide.none,
                        left: BorderSide.none,
                        right: BorderSide.none)),
                child: Align(
                    alignment: Alignment.center, child: _buildDataPager()),
              )
            ],
          );
        }));
  }

How to create paginated Flutter DataTable (SfDataGrid)?

Access denied