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

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