SfDataGrid paging with Firestore

[Marlon Card]

Are there any examples of using the SfDataGrid and Pager with a firestore database? I know I need to override handlePageChange but could use a few more details.

[Tamilarasan Paranthaman]

Hi Marlon Card,

You can override the handlePageChange method to implement logic for fetching specific data samples from Firestore according to pagination requirements. As an example, consider the following approach:

Begin by retrieving the current document from Firestore. Utilize the `startAfterDocument` method to obtain the subsequent set of documents. The process relies on `newPageIndex` and `rowsPerPage` values, which can be applied to a unique property (e.g., document ID or index) for accessing the desired document.

For your reference, a sample implementation is provided below. In this example, `rowsPerPage` is set to 3. The calculation of `startIndex` involves multiplying `newPageIndex` with `rowsPerPage`. Subsequently, retrieve the `lastDocument` by correlating the `startIndex` with the `companyID` value within your Firebase database. Utilize the `lastDocument` reference to fetch another set of rows from Firestore using the `startAfterDocument` method.

For a more in-depth understanding of this process, please review the provided code snippet and accompanying sample.

class CompanyDataSource extends DataGridSource {

 

…

  final collection = FirebaseFirestore.instance.collection('companies');

 

  Stream<QuerySnapshot> getDataFromFirestore() {

    return collection.limit(3).snapshots();

  }

 

…

  @override

  Future<bool> handlePageChange(int oldPageIndex, int newPageIndex) async {

    // Here we are getting the start index of the page

    int startIndex = newPageIndex * rowsPerPage;

 

    List<Company> paginatedData = [];

 

    // Here we are checking whether the page is initial loading or not

    // because we get the first page data from the `getDataFromFirestore` method at the initial loading

    // and we don't need to call the `getDataFromFirestore` method again

    if (!isInitialLoading) {

      // Here we are getting the last document from the FireStore collection

      // based on the start index

      // In my firestore collection, I have added the companyID from 1 to 15

      // So, I am getting the last document based on the start index

      var lastDoument = await collection

          .where("companyID",

              isEqualTo: startIndex == 0 ? '1' : startIndex.toString())

          .get()

          .then((value) => value.docs.first);

 

      QuerySnapshot<Map<String, dynamic>> snap;

 

      // Here we are checking whether the start index is 0 or not

      // because if the start index is 0, then we need to get the first 3 documents

      if (startIndex == 0) {

        snap = await collection.startAtDocument(lastDoument).limit(3).get();

      } else {

        // Here we are getting the next 3 documents from the FireStore collection

        snap = await collection.startAfterDocument(lastDoument).limit(3).get();

      }

 

      // Here we are mapping the data to the DataGridRow

      // and adding it to the dataGridRows list.

      // The dataGridRows is the local collection

      // which is assigned to the `rows` property of DataGridSource.

      for (var data in snap.docs) {

        paginatedData.add(Company(

            id: data['companyID'],

            companyName: data['companyName'],

            city: data['city'],

            country: data['country']));

      }

      // To build the DataGridRow from the paginated data

      buildDataGridRow(paginatedData);

    } else {

      paginatedData = [];

    }

    notifyListeners();

 

    if (isInitialLoading) {

      isInitialLoading = false;

    }

    return true;

  }

…

}

Regards,

Tamilarasan

Attachment: Sample_dbc223ff.zip

[Marlon Card]

Thanks for this example. It seems like this method relies on each database document having an ID or any field really that will exactly match the index value in handlePageChange. Not ideal but doable.

[Tamilarasan Paranthaman]

Marlon Card,

In our previous response, we provided an example based on our Firestore collection structure for your reference. We recommend customizing it according to your specific needs. For example, if you have a collection with a corresponding page index, you can directly retrieve the record using the new page index. If you require further clarification or additional assistance, please let us know. We are happy to help you out.