Is it possible to make a dynamic height for DataTables?

Question

Hi guys I have a question. I have a DataTable where I display my database data. Now not all my data are not the same length some are bigger and some are smaller. I know that I can make a fixed height with dataRowHeight but this also means that I have a lot of free space when I don't have such a long dataset to display. Is it possible to make dataRowHeight dynamic so that it always fits perfectly to each dataset?

Answer 1

Maybe an approach like this would help you to achieve your goal? You could calculate the value for your dataRowHeight based on the number of elements in the list you use to populate your DataTable. LayoutBuilder gives you the max. available height.

    return LayoutBuilder(
      builder: (context, constraints) {
        final rowHeight = (constraints.maxHeight - 40) / someList.length;
        return DataTable(
          dataRowHeight: rowHeight,
          headingRowHeight: 40,
          showCheckboxColumn: false,
          columns: const <DataColumn>[
            DataColumn(
              label: Text(
                'FirstColumn',
              ),
            ),
            DataColumn(
              label: Text(
                'SecondColumn',
              ),
            ),
          ],
          rows: someList.map<DataRow>((element) {
            return DataRow(
              cells: <DataCell>[
                DataCell(
                  Text(
                    element[0],
                  ),
                ),
                DataCell(
                  Text(
                    element[1],
                  ),
                ),
              ],
            );
          }).toList(),
        );
      },
    );