How to implement Paginated DataTable in Flutter

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

headerThe table card’s optional header.
onRowsPerPageChangedInvoked when the user selects a different number of rows per page.
onPageChangedInvoked when the user switches to another page.
rowsPerPageThe number of rows to show on each page
columnsconfiguration and labels for the columns in the table using DataColumn.
sourceThe data source provides data to show in each row. Must be non-null.
actionsIcon buttons to show at the top end side of the table. The header must not be null to show the actions.
sortColumnIndexThe current primary sort key’s column.
sortAscendingWhether the column mentioned in sortColumnIndex, if any, is sorted in ascending order.
columnSpacingThe 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