DataTable with Paginate Firestore

Question

How we can create DataTable from Firestore collection and keep only one column on the top of ListView ?, with below code column is present for each row, also if the collection contain 1000 docs the column should not be hidden when user scoll

Below is my code:

  @override
  Widget build(BuildContext context) {
    return FirestoreQueryBuilder<Map<String, dynamic>>(
      pageSize: 5,
      query: FirebaseFirestore.instance.collection('users'),
      builder: (context, snapshot, _) {
        return ListView.builder(
          scrollDirection: Axis.vertical,
          itemCount: snapshot.docs.length,
          itemBuilder: (context, index) {
            if (snapshot.hasMore && index + 1 == snapshot.docs.length) {
              snapshot.fetchMore();
            }
            final user = snapshot.docs[index].data();
            return DataTable(
              columns: const <DataColumn>[
                DataColumn(
                  label: Text('User Name'),
                ),
                DataColumn(
                  label: Text('User email'),
                ),
                DataColumn(
                  label: Text('User Id'),
                ),
              ],
              rows: [
                DataRow(
                  cells: [
                    DataCell(
                      Text(user['name']),
                    ),
                    DataCell(
                      Text(user['email']),
                    ),
                    DataCell(
                      Text(user['id']),
                    ),
                  ],
                ),
              ],
            );
          },
        );
      },
    );
  }

NOTE : I'm using flutterfire_ui to paginate collection

Thanks

Answer 1

I'm able to achieve this using data_table_2 package

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          IconButton(
            iconSize: 30.0,
            icon: const Icon(CupertinoIcons.search),
            onPressed: () {},
          )
        ],
        title: const Text('DataTable2 Firebase'),
        elevation: 0,
        centerTitle: true,
      ),
      body: Column(
        children: [
          SizedBox(
            height: 60,
            child: DataTable2(
              columns: const <DataColumn>[
                DataColumn(
                  label: Text('name'),
                ),
                DataColumn(label: Text('age'), numeric: true),
                DataColumn(label: Text('score'), numeric: true),
              ],
              rows: const [],
            ),
          ),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.only(bottom: 50),
              child: FirestoreQueryBuilder<Map<String, dynamic>>(
                pageSize: 10,
                query: FirebaseFirestore.instance.collection('users'),
                builder: (context, snapshot, _) {
                  if (snapshot.hasMore) {
                    snapshot.fetchMore();
                  }
                  return DataTable2(
                    columnSpacing: 0,
                    horizontalMargin: 12,
                    bottomMargin: 10,
                    minWidth: 50,
                    headingRowHeight: 0,
                    columns: const <DataColumn>[
                      DataColumn(
                        label: Text(''),
                      ),
                      DataColumn(label: Text(''), numeric: true),
                      DataColumn(label: Text(''), numeric: true),
                    ],
                    rows: snapshot.docs
                        .map((e) => DataRow(cells: [
                              DataCell(
                                Text(
                                  e.data()['name'],
                                ),
                              ),
                              DataCell(
                                Text(
                                  e.data()['age'].toString(),
                                ),
                              ),
                              DataCell(
                                Text(
                                  e.data()['score'].toString(),
                                ),
                              ),
                            ]))
                        .toList(),
                  );
                },
              ),
            ),
          ),
          const SizedBox(
            height: 50,
          )
        ],
      ),
    );
  }

Answer 2

1. You are not required to use ListView while using DataTable class because it also required List<Widget>.

2. You can use PaginatedDataTable class for this purpose. Instead of using DataTable just use PaginatedDataTable

@override
  Widget build(BuildContext context) {
    return FirestoreQueryBuilder<Map<String, dynamic>>(
      pageSize: 5,
      query: FirebaseFirestore.instance.collection('users'),
      builder: (context, snapshot, _) {
            return PaginatedDataTable(
              columns: const <DataColumn>[
                DataColumn(
                  label: Text('User Name'),
                ),
                DataColumn(
                  label: Text('User email'),
                ),
                DataColumn(
                  label: Text('User Id'),
                ),
              ],
               source: MyData(snapshot.docs),
                onPageChanged: snapshot.fetchMore,  
            );
          },
    );
  }
}

// The "soruce" of the table
class MyData extends DataTableSource {
  MyData(this._data);
final List<dynamic> _data;
  

  @override
  bool get isRowCountApproximate => false;
  @override
  int get rowCount => _data.length;
  @override
  int get selectedRowCount => 0;
  @override
  DataRow getRow(int index) {
    return DataRow(cells: [
      DataCell(Text(_data[index].data()['name'])),
      DataCell(Text(_data[index].data()["email"])),
      DataCell(Text(_data[index].data()["id"])),
    ]);
  }
}