Using PaginatedDataTable get error about diagonal_scrollview

[RanfiCD]

It seems like the PaginatedDataTable has no size during the rendering of the widget tree. Could you try to put it inside a SizedBox (or another widget) with a given width and height?

[svsno1]

Thank you for reply me!

I tried using a SizedBox with fixed width and height but it doesn't work the way I want.
When I scroll, it scroll the SizedBox, so I cann't scroll the PaginatedDataTable.

Please advise me!

[RanfiCD]

I'm not quite sure of what are you trying to do exactly. I've never used PaginatedDataTable before but I just tried it out and it seems to me that you don't need DiagonalScrollView at all.

PaginatedDataTable has horizontal scroll by default. In order to also scroll vertically, you just need to wrap it inside a SingleChildScrollView:

class MyHomePage extends StatelessWidget {
  final DataTableSource _dataSource = DTS();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: 250,
          height: 250,
          padding: EdgeInsets.all(4),
          color: Colors.yellow,
          child: SingleChildScrollView(
            child: PaginatedDataTable(
              source: _dataSource,
              header: Text('My Header'),
              columns: [
                DataColumn(label: Text('')),
                DataColumn(label: Text('Column 1')),
                DataColumn(label: Text('Column 2')),
                DataColumn(label: Text('Column 3')),
                DataColumn(label: Text('Column 4')),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class DTS extends DataTableSource {

  @override
  DataRow getRow(int index) {
    return DataRow.byIndex(index: index, cells: [
      DataCell(Text('#$index')),
      DataCell(Text('Cell $index-1')),
      DataCell(Text('Cell $index-2')),
      DataCell(Text('Cell $index-3')),
      DataCell(Text('Cell $index-4')),
    ]);
  }

  @override
  bool get isRowCountApproximate => true;

  @override
  int get rowCount => 10;

  @override
  int get selectedRowCount => 0;
}

With this setup I'm able to scroll nicely through the data in whatever size I give to the Container.

[svsno1]

The reason I want to use the DiagonalScrollView is a scrollable and zoomable PaginatedDataTable with its original width and height. Your solution is good but i want it zoomable too.
Sorry for not making it clear in the first place!
It would be great if the way DiagonalScrollView works with DataTable is similar to PaginatedDataTable.

[RanfiCD]

It doesn't work like DataTable in DiagonalScrollView because by default PaginatedDataTable comes with horizontal scrolling. It basically has infinite width and that is what triggers the error. In order to prevent it, you have to limit the width of the PaginatedDataTable inside DiagonalScrollView. Something like this:

class MyHomePage extends StatelessWidget {
  final DataTableSource _dataSource = DTS();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: 250,
          height: 250,
          padding: EdgeInsets.all(4),
          color: Colors.yellow,
          child: DiagonalScrollView(
            enableZoom: true,
            child: SizedBox(
              width: 700,
              child: PaginatedDataTable(
                dragStartBehavior: DragStartBehavior.down,
                source: _dataSource,
                header: Text('My Header'),
                columns: [
                  DataColumn(label: Text('')),
                  DataColumn(label: Text('Column 1')),
                  DataColumn(label: Text('Column 2')),
                  DataColumn(label: Text('Column 3')),
                  DataColumn(label: Text('Column 4')),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

This solution works but scrolling is not smooth along the whole PaginatedDataTable because there is a conflict between the horizontal scrolling of PaginatedDataTable and DiagonalScrollView.

The best way to solve the problem would be disabling scrolling on PaginatedDataTable, but I don't see any way to do that currently. Maybe you should open an issue and ask them for it: https://github.com/flutter/flutter/issues?q=is%3Aissue+PaginatedDataTable