Material PaginatedDataTable Widget Tutorial

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 from a DataTableSource. The widget is presented as a Card.


Material PaginatedDataTable Widget useful inputs

  • 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: The configuration and labels for the columns in the table using DataColumn.

  • source: The data source which 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.


Material PaginatedDataTable Widget example

PaginatedDataTable(
    header: Text("Pagination Example"),
    onRowsPerPageChanged: (perPage) {},
    rowsPerPage: 10,
    columns: <DataColumn>[
      DataColumn(
        label: Text('Country'),
        onSort: (columnIndex, ascending) {
          print("$columnIndex $ascending");
        },
      ),
      DataColumn(
        label: Text('Code'),
      ),
      DataColumn(
        label: Text('Continent'),
      ),
    ],
    source: tableRow,
)

Full codes example

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => (runApp(DataTablePaginationExample()));


class DataTablePaginationExample extends StatelessWidget {
  var tableRow = new TableRow();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: const Text('Data Table Pagination Example Code'),
          ),
          body: Container(
            width: double.infinity,
            child: SingleChildScrollView(
              child: PaginatedDataTable(
                header: Text("Pagination Example"),
                onRowsPerPageChanged: (perPage) {},
                rowsPerPage: 10,
                columns: <DataColumn>[
                  DataColumn(
                    label: Text('Country'),
                    onSort: (columnIndex, ascending) {
                      print("$columnIndex $ascending");
                    },
                  ),
                  DataColumn(
                    label: Text('Code'),
                  ),
                  DataColumn(
                    label: Text('Continent'),
                  ),
                ],
                source: tableRow,
              ),
            ),
          )),
    );
  }
}

class TableRow extends DataTableSource {
  @override
  DataRow? getRow(int index) {
    return DataRow.byIndex(index: index, cells: [
      DataCell(Text("Cell $index")),
      DataCell(Text("Cell $index")),
      DataCell(Text("Cell $index")),
    ]);
  }

  @override
  bool get isRowCountApproximate => true;

  @override
  int get rowCount => 50;

  @override
  int get selectedRowCount => 0;
}

Output

material-widget


References