DataTable with Paginate Firestore - flutter

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

You are not required to use ListView while using DataTable class because it also required List<Widget>.
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"])),
]);
}
}

Answer 2

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,
)
],
),
);
}