Is it possible to make only the rows of DataTable widget scrollable?

Viewed 562

I'm trying to implement a DataTable where the content is scrollable.

The issue is that the whole Table is scrollable, but I want the header to be static. Does someone have an idea how to realize this?

Maybe two seperated DataTables? One just with the header and another scrollable one just with the content.

Though I think there must be a more elegant way to do this.

Here is my current, custom DataTable widget:

Widget _widgetDatatable(List<Client> clients) {
return Expanded(
    child: SingleChildScrollView(
  scrollDirection: Axis.vertical,
  child:
  DataTable(
      showCheckboxColumn: false,
      columns: [
        DataColumn(label: Text('Name')),
        DataColumn(label: Text('First')),
        DataColumn(label: Text('Date Birth')),
        DataColumn(label: Text('Date Moved In')),
      ],
      rows: clients
          .map(
            (e) => DataRow(
                onSelectChanged: (value) {
                  bloc.dataRowKlientSingleClicked(e);
                },
                selected: e.clickedInDataTable,
                cells: [
                  DataCell(Text(e.lastName)),
                  DataCell(Text(e.firstName)),
                  DataCell(
                    Text(format(e.dateOfBirth)),
                  ),
                  DataCell(
                    Text(format(e.dateMovedIn)),
                  ),
                ]),
          )
          .toList()),
),);
}
1 Answers

At the moment, there is no option to do this with the DataTable widget. But luckily, there is a package that implements a table that can do just that: table_sticky_headers.

Related