paginatedDataTable showing empty rows at the end if rowCount is less than rowsPerPage

Steps to Reproduce

Go to the following DartPad:
https://dartpad.dev/embed-flutter.html?gh_owner=material-components&gh_repo=material-components-flutter&gh_path=docs/components/dartpad/data_tables/normal&gh_ref=develop

Remove 2 rows (line # 63 & 64):

_Row('Cell A3', 'CellB3', 'CellC3', 3),
_Row('Cell A4', 'CellB4', 'CellC4', 4),

Expected results:
There should be no empty rows at the end!
Actual results:

@s3dibrahim

Hi @s3dibrahim
Thanks for filing the issue!

code sample

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: DataTableDemo(),
    );
  }
}

class DataTableDemo extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Data Tables'),
      ),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          PaginatedDataTable(
            header: Text('Header Text'),
            rowsPerPage: 4,
            columns: [
              DataColumn(label: Text('Header A')),
              DataColumn(label: Text('Header B')),
              DataColumn(label: Text('Header C')),
              DataColumn(label: Text('Header D')),
            ],
            source: _DataSource(context),
          ),
        ],
      ),
    );
  }
}

class _Row {
  _Row(
    this.valueA,
    this.valueB,
    this.valueC,
    this.valueD,
  );

  final String valueA;
  final String valueB;
  final String valueC;
  final int valueD;

  bool selected = false;
}

class _DataSource extends DataTableSource {
  _DataSource(this.context) {
    _rows = <_Row>[
      _Row('Cell A1', 'CellB1', 'CellC1', 1),
      _Row('Cell A2', 'CellB2', 'CellC2', 2),
      // _Row('Cell A3', 'CellB3', 'CellC3', 3),
      // _Row('Cell A4', 'CellB4', 'CellC4', 4),
    ];
  }

  final BuildContext context;
  List<_Row> _rows;

  int _selectedCount = 0;

  @override
  DataRow getRow(int index) {
    assert(index >= 0);
    if (index >= _rows.length) return null;
    final row = _rows[index];
    return DataRow.byIndex(
      index: index,
      selected: row.selected,
      onSelectChanged: (value) {
        if (row.selected != value) {
          _selectedCount += value ? 1 : -1;
          assert(_selectedCount >= 0);
          row.selected = value;
          notifyListeners();
        }
      },
      cells: [
        DataCell(Text(row.valueA)),
        DataCell(Text(row.valueB)),
        DataCell(Text(row.valueC)),
        DataCell(Text(row.valueD.toString())),
      ],
    );
  }

  @override
  int get rowCount => _rows.length;

  @override
  bool get isRowCountApproximate => false;

  @override
  int get selectedRowCount => _selectedCount;
}

flutter doctor -v

[✓] Flutter (Channel stable, 2.0.4, on Microsoft Windows [Version 10.0.19042.870], locale en-US)
    • Flutter version 2.0.4 at C:\Users\Taha\Code\flutter_stable
    • Framework revision b1395592de (13 days ago), 2021-04-01 14:25:01 -0700
    • Engine revision 2dce47073a
    • Dart version 2.12.2

[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at C:\Users\Taha\Code\SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = C:\Users\Taha\Code\SDK
    • Java binary at: C:\Users\Taha\Code\android-studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/windows#android-setup for more details.

[✓] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[✓] Visual Studio - develop for Windows (Visual Studio Community 2019 16.9.3)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.9.31129.286
    • Windows 10 SDK version 10.0.19041.0

[✓] Android Studio (version 4.1.0)
    • Android Studio at C:\Users\Taha\Code\android-studio
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)

[✓] IntelliJ IDEA Community Edition (version 2021.1)
    • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2020.3.3
    • Flutter plugin version 55.0.5
    • Dart plugin version 211.6693.108

[✓] VS Code (version 1.55.2)
    • VS Code at C:\Users\Taha\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.21.0

[✓] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.19042.870]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 89.0.4389.114
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 89.0.774.68

! Doctor found issues in 1 category.

[✓] Flutter (Channel master, 2.1.0-13.0.pre.608, on Microsoft Windows [Version 10.0.19042.870], locale en-US)
    • Flutter version 2.1.0-13.0.pre.608 at C:\Users\Taha\Code\flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f0c9710493 (10 hours ago), 2021-04-13 20:29:40 -0500
    • Engine revision 04cd0db032
    • Dart version 2.13.0 (build 2.13.0-232.0.dev)

[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at C:\Users\Taha\Code\SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = C:\Users\Taha\Code\SDK
    • Java binary at: C:\Users\Taha\Code\android-studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/windows#android-setup for more details.

[✓] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[✓] Visual Studio - develop for Windows (Visual Studio Community 2019 16.9.3)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.9.31129.286
    • Windows 10 SDK version 10.0.19041.0

[✓] Android Studio (version 4.1.0)
    • Android Studio at C:\Users\Taha\Code\android-studio
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)

[✓] IntelliJ IDEA Community Edition (version 2021.1)
    • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2020.3.3
    • Flutter plugin version 55.0.5
    • Dart plugin version 211.6693.108

[✓] VS Code (version 1.55.2)
    • VS Code at C:\Users\Taha\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.21.0

[✓] Connected device (5 available)
    • Android SDK built for x86 (mobile) • emulator-5554 • android-x86    • Android 10 (API 29) (emulator)
    • sdk gphone x86 (mobile)            • emulator-5556 • android-x86    • Android 11 (API 30) (emulator)
    • Windows (desktop)                  • windows       • windows-x64    • Microsoft Windows [Version 10.0.19042.870]
    • Chrome (web)                       • chrome        • web-javascript • Google Chrome 89.0.4389.114
    • Edge (web)                         • edge          • web-javascript • Microsoft Edge 89.0.774.68

! Doctor found issues in 1 category.

I am also facing this problem. Has anyone found a solution to this?

Still seeing this issue. Any feedback?

@TahaTesser

If we make PaginatedDataTable.rowsPerPage equal to _rows count. I think issue get's resolved.

Basically if we add PaginatedDataTable.rowsPerPage greater than _rows count it adds extra empty rows.
empty rows added = PaginatedDataTable.rowsPerPage - _rows count .

 
 class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
       title: 'Flutter Demo',
       debugShowCheckedModeBanner: false,
       home: DataTableDemo(),
     );
   }
 }
 
 class DataTableDemo extends StatelessWidget {
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
         title: Text('Data Tables'),
       ),
       body: ListView(
         padding: const EdgeInsets.all(16),
         children: [
           PaginatedDataTable(
             header: Text('Header Text'),
             rowsPerPage: 2,
             columns: [
               DataColumn(label: Text('Header A')),
               DataColumn(label: Text('Header B')),
               DataColumn(label: Text('Header C')),
               DataColumn(label: Text('Header D')),
             ],
             source: _DataSource(context),
           ),
         ],
       ),
     );
   }
 }
 
 class _Row {
   _Row(
     this.valueA,
     this.valueB,
     this.valueC,
     this.valueD,
   );
 
   final String valueA;
   final String valueB;
   final String valueC;
   final int valueD;
 
   bool selected = false;
 }
 
 class _DataSource extends DataTableSource {
   _DataSource(this.context) {
     _rows = <_Row>[
       _Row('Cell A1', 'CellB1', 'CellC1', 1),
       _Row('Cell A2', 'CellB2', 'CellC2', 2),
       // _Row('Cell A3', 'CellB3', 'CellC3', 3),
       // _Row('Cell A4', 'CellB4', 'CellC4', 4),
     ];
   }
 
   final BuildContext context;
   List<_Row> _rows;
 
   int _selectedCount = 0;
 
   @override
   DataRow getRow(int index) {
     assert(index >= 0);
     if (index >= _rows.length) return null;
     final row = _rows[index];
     return DataRow.byIndex(
       index: index,
       selected: row.selected,
       onSelectChanged: (value) {
         if (row.selected != value) {
           _selectedCount += value ? 1 : -1;
           assert(_selectedCount >= 0);
           row.selected = value;
           notifyListeners();
         }
       },
       cells: [
         DataCell(Text(row.valueA)),
         DataCell(Text(row.valueB)),
         DataCell(Text(row.valueC)),
         DataCell(Text(row.valueD.toString())),
       ],
     );
   }
 
   @override
   int get rowCount => _rows.length;
 
   @override
   bool get isRowCountApproximate => false;
 
   @override
   int get selectedRowCount => _selectedCount;
 }

@TahaTesser @s3dibrahim Let me know if it resolves issue.

This is something I tried but it does not resolve the issue in a manner that meets material design.

The pagination toolbar is then halfway down the page instead of at the bottom of the page.

Has this been assigned a priority yet?

having the same issue, any solutions?

This issue is even more annoying when check boxes are shown - you get check boxes for empty rows...

@aakash-pamnani

@aakash-pamnani
Can you please link the correct issue for #130389?

@TahaTesser

@TahaTesser I have linked the correct issue in that PR,
BTW what do you think about this solution?

I don't think this will work as remainingRows will be zero.

There needs to be some kind of expanded material widget between the last row and the footer.

Not the remaining rows the rows that are empty after all rows are done.

I have tried this and is working fine,
Will create a PR in some time

1st approch :aakash-pamnani@898f899
2nd approch : aakash-pamnani@7404c49

Which one is better?

@aakash-pamnani

@aakash-pamnani 1st approch looks good.

Please consider if it will be better when last page has less rows than rowsPerPage the table shouldn't add any empty rows or blank space and shows only data?

Please consider if it will be better when last page has less rows than rowsPerPage the table shouldn't add any empty rows or blank space and shows only data?

If we don't add empty space then the table footer will shift up which is not good according to material design

Fixed : Empty Rows shown at last page in Paginated data table (#132646)

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

paginatedDataTable showing empty rows at the end if rowCount is less than rowsPerPage #80421

Steps to Reproduce

15 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

paginatedDataTable showing empty rows at the end if rowCount is less than rowsPerPage #80421

Description

Steps to Reproduce

Activity

TahaTesser commented on Apr 14, 2021

awasum commented on Nov 4, 2021

raphael-bmec-co commented on Feb 14, 2022

dheerajv09 commented on Apr 29, 2022

raphael-bmec-co commented on Apr 29, 2022

raphael-bmec-co commented on Jun 10, 2022

DmitriyIgnashchenko commented on Jun 26, 2022

michalpie commented on Jun 27, 2022

15 remaining items

TahaTesser commented on Aug 10, 2023

aakash-pamnani commented on Aug 12, 2023

raphael-bmec-co commented on Aug 12, 2023

aakash-pamnani commented on Aug 12, 2023

aakash-pamnani commented on Aug 13, 2023

mrleisen commented on Aug 15, 2023

kaliosek commented on Aug 25, 2023

aakash-pamnani commented on Aug 25, 2023

github-actions commented on Nov 1, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions