Fixed column and row header for DataTable on Flutter Dart

Question

I've build a table on Flutter Dart using DataTable. This table is very large, and I'm using both Vertical and Horizontal scrolling. When scrolling I lose reference to columns, I need to know what is the column.

As example. On the screenshot i don't know what the numbers 20.0 and 25.0 on the means, unless I scroll to the top.

I've added a GIF example of what i want to achieve. (Using LibreOffice). I need fixed column name (first row).

Example of the table, while scrolling around the middle of the table:

Example of what i want to do:

Code sample for my table:

    return SingleChildScrollView(
      scrollDirection: Axis.vertical,
      child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: DataTable(
          columns: MyDataSet.getColumns(),
          rows: widget._data.map<DataRow>((row) => DataRow(
            onSelectChanged: (d) {
              setState(() {
                selectedRow = d ? row.hashCode : null;
              });
            },
            selected: row.hashCode == selectedRow,
            cells: MyDataSet.toDataCells(row)
          )).toList()
        )
      ),
    );

Missing code sample:

return columns.map<DataColumn>((name) => DataColumn(
      label: Text(name, style: TextStyle(fontWeight: FontWeight.bold, color: Colors.black),)
    )).toList();

---

Update (24/10/2019)

Current code works well if header name is the same size as cell content. Otherwise both sizes will be different.

---

Update (21/02/2020)

People created a package to do that. :D

https://pub.dev/packages/table_sticky_headers

Image from pub.dev!

Answer 1

Try the flutter package horizontal_data_table
A Flutter Widget that create a horizontal table with fixed column on left hand side.

dependencies:
  horizontal_data_table: ^2.5.0