[syncfusion_flutter_datagrid] shows only 5 rows bug!

[mohamed-okaily]

As shown in the preview below the table only shows the first 5 rows!

The bug happens only when wrapping the table inside a ListView Widget!!
Code example below:

class _TableTestState extends State<TableTest> {
  @override
  Widget build(BuildContext context) {
    var _columns = ["ID", "Name"];
    List<Demo> tableUtils = [
      Demo(1, "name1"),
      Demo(2, "name2"),
      Demo(3, "name3"),
      Demo(4, "name4"),
      Demo(5, "name5"),
      Demo(6, "name6"),
      Demo(7, "name7"),
      Demo(8, "name8"),
      Demo(9, "name9"),
      Demo(1, "name1"),
      Demo(2, "name2"),
      Demo(3, "name3"),
      Demo(4, "name4"),
      Demo(5, "name5")
    ];
    TableSource _dataTable =
        TableSource(data: tableUtils);
    return Scaffold(
      body: ListView(
        children: [
          //any other widgets ...
          Expanded(
            child: SfDataGrid(
              defaultColumnWidth: 150,
              columnWidthMode: ColumnWidthMode.fill,
              source: _dataTable,
              columns: List<GridColumn>.generate(_columns.length, (index) {
                return GridColumn(
                  columnName: _columns[index],
                  label: Text(_columns[index]),
                );
              }),
            ),
          ),
        ],
      ),
    );
  }
}

class TableSource extends DataGridSource {
  TableSource({required List<Demo> data}) {
    _tableData = List<DataGridRow>.generate(data.length, (rv) {
      return DataGridRow(
          cells: List<DataGridCell>.generate(data[rv].data().length, (index) {
        return DataGridCell(
            columnName: data[rv].data()[index].toString(),
            value: data[rv].data()[index]);
      }));
    }).toList();
  }

  List<DataGridRow> _tableData = [];

  @override
  List<DataGridRow> get rows => _tableData;

  @override
  DataGridRowAdapter buildRow(DataGridRow row) {
    return DataGridRowAdapter(
        cells: List<Widget>.generate(row.getCells().length, (index) {
      return Text(row.getCells()[index].columnName);
    }).toList());
  }
}

class Demo {
  int id;
  String name;

  Demo(this.id, this.name);

  List<dynamic> data() {
    return [id, name];
  }
}

@monolidth

[Tamilarasan-Paranthaman]

Hi @mohamed-okaily,

Greetings from Syncfusion.

If you wrap the DataGrid inside the ListView widget, since the ListView essentially has an infinite height, the DataGrid gets the height of infinity. In that case, we set the DataGrid default height as 300. That’s why the 5 rows are only visible. It’s the behavior of the DataGrid.

You can achieve your requirement by setting the shrinkWrapRows property to true. It sets the height based on the number of rows available in the DataGrid. We have modified your sample. Please check the following code snippet and sample.

Code Snippet:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          SfDataGrid(
              shrinkWrapRows: true,
              columnWidthMode: ColumnWidthMode.fill,
              source: _dataTable,
              columns: _columns),
        ],
      ),
    );
  }

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/sample257621181

We have already provided examples in our UG documentation. Please go through this,

UG Documentation: https://help.syncfusion.com/flutter/datagrid/scrolling#set-height-and-width-of-datagrid-based-on-rows-and-columns-available

We hope this helps. Please let us know if you need any further assistance. We will be glad to assist you

Regards,
Tamilarasan

[mohamed-okaily]

That solved the issue, thank you Tamilarasan.