In this guide, we will learn how to implement the Paginated DataTable in Flutter. For these, we should learn what Paginated DataTable in flutter is. A material design data table that shows data using multiple pages. A paginated data table shows rowsPerPage rows of data per page and provides controls for showing other pages. Data is read lazily from a DataTableSource. The widget is presented as a Card.
Properties of Paginated DataTable
header | The table card’s optional header. |
onRowsPerPageChanged | Invoked when the user selects a different number of rows per page. |
onPageChanged | Invoked when the user switches to another page. |
rowsPerPage | The number of rows to show on each page |
columns | configuration and labels for the columns in the table using DataColumn. |
source | The data source provides data to show in each row. Must be non-null. |
actions | Icon buttons to show at the top end side of the table. The header must not be null to show the actions. |
sortColumnIndex | The current primary sort key’s column. |
sortAscending | Whether the column mentioned in sortColumnIndex, if any, is sorted in ascending order. |
columnSpacing | The horizontal margin between the contents of each data column |
We will create an app that displays a list of products list in a data table. Each page of the table will display 8 rows. Users can move between pages with a left chevron or right chevron.
Create the data source for the paginated data table by extending the DataTableSouce class:
class MyData extends DataTableSource {
// Generate some made-up data
final List<Map<String, dynamic>> _data = List.generate(
150,
(index) => {
"id": index,
"title": "Item $index",
"price": Random().nextInt(35000)
});
@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]['id'].toString())),
DataCell(Text(_data[index]["title"])),
DataCell(Text(_data[index]["price"].toString())),
]);
}
}
Now we Implement the data table with the PaginatedDataTable widget which look like to show on the UI Screen:
import 'dart:math';
import 'package:flutter/material.dart';
class PaginatedDataTableScreen extends StatefulWidget {
const PaginatedDataTableScreen({Key? key}) : super(key: key);
@override
State<PaginatedDataTableScreen> createState() =>
_PaginatedDataTableScreenState();
}
class _PaginatedDataTableScreenState extends State<PaginatedDataTableScreen> {
final DataTableSource _data = MyData();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Paginated Data Table'),
centerTitle: true,
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
PaginatedDataTable(
source: _data,
header: const Center(child: Text('My Products List')),
columns: const [
DataColumn(label: Text('ID')),
DataColumn(label: Text('Name')),
DataColumn(label: Text('Price'))
],
columnSpacing: 90,
horizontalMargin: 60,
rowsPerPage: 8,
),
],
),
),
);
}
}
Meanwhile, when we run this application in the emulator or device, we should get the UI similar to the screenshot below:
Get the full snippet from here