Flutter Paginated data table fill height

Question

I'm trying to create Paginated Data Table to fill the height. However, whatever I'm trying nothing seems to work. How can I make the table fill the height? Also, how can I change the pagination background color?

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(state.department.name),
      ),
      body: Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              TextButton(onPressed: () {}, child: Text('TEst 1')),
              TextButton(onPressed: () {}, child: Text('TEst 1'))
            ],
          ),
          Container(
            child: PaginatedDataTable(
                showCheckboxColumn: false,
                headingRowHeight: 35,
                columns: const <DataColumn>[
                  DataColumn(
                    label: Text(
                      'First Name',
                      style: TextStyle(fontStyle: FontStyle.italic),
                    ),
                  ),
                  DataColumn(
                    label: Text(
                      'Last Name',
                      style: TextStyle(fontStyle: FontStyle.italic),
                    ),
                  ),
                  DataColumn(
                    label: Text(
                      'Id',
                      style: TextStyle(fontStyle: FontStyle.italic),
                    ),
                  ),
                  DataColumn(
                    label: Text(
                      'Time',
                      style: TextStyle(fontStyle: FontStyle.italic),
                    ),
                  ),
                  DataColumn(
                    label: Text(
                      'Operator',
                      style: TextStyle(fontStyle: FontStyle.italic),
                    ),
                  ),
                ],
                source: tableSource
            ),
          )
        ],
      ),
    );
  }

With Container the container itself is filling up the height, but the paginated data table not.

If you mean having your table stretched to fill the height, I think you have no other solution than computing the height, see https://stackoverflow.com/questions/59921422/expand-datatable-to-fill-height-in-flutter — Yann39, Jan 30 '21 at 16:29

score 3 · Accepted Answer · answered Jan 30 '21 at 19:06

Solution

  static const double topViewHeight = 50.0;
  static const double paginateDataTableHeaderRowHeight = 35.0;
  static const double pagerWidgetHeight = 56;
  static const double paginateDataTableRowHeight = kMinInteractiveDimension;

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hello'),
      ),
      body: LayoutBuilder(
        builder: (context, constraint) {
          return Column(
            children: <Widget>[
              Container(
                width: constraint.maxWidth,
                height: topViewHeight,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    TextButton(onPressed: () {}, child: Text('TEst 1')),
                    TextButton(onPressed: () {}, child: Text('TEst 1'))
                  ],
                ),
              ),
              Container(
                  color: Colors.greenAccent,
                  height: constraint.maxHeight - topViewHeight,
                  child: Center(
                    child: PaginatedDataTable(
                        showCheckboxColumn: false,
                        headingRowHeight: paginateDataTableHeaderRowHeight,
                        rowsPerPage: ((constraint.maxHeight -
                                    topViewHeight -
                                    paginateDataTableHeaderRowHeight -
                                    pagerWidgetHeight) ~/
                                paginateDataTableRowHeight)
                            .toInt(),
                        columns: const <DataColumn>[
                          DataColumn(
                            label: Text(
                              'First Name',
                              style: TextStyle(fontStyle: FontStyle.italic),
                            ),
                          ),
                        ],
                        source: TableSource()),
                  ))
            ],
          );
        },
      ),
    );
  }

Need to know

note:

Column is an infinite height constraint so it will not suit to fit the height.
If, you warp the column inside the SingleChildScrollViewWidget to avoid constraint errors and warnings

Nice! Thanks. The only thing I've added also was `width: constraint.maxWidth` to the container with the data table itself as well, because it was not filling entire width. — Expressingx, Jan 30 '21 at 20:04

score 2 · Answer 2 · answered Aug 07 '21 at 07:55

There's a derivative of Flutter's DataTable widget on pub.dev (called DataTable2) which solves exactly that issues - filling the height of the parent widget. It is in-place substitute for DataTable and also provides data rows scrolling and sticky header.

https://pub.dev/packages/data_table_2

Flutter Paginated data table fill height

2 Answers2