Fixed column and row header for DataTable on Flutt

问题:

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!

回答1:

I could come up with a workaround using scroll controllers, looks like this: Video

Basically it's an horizontal scroll for the first row, a vertical scroll for the first column and a mixed horizontal and vertical scroll for the subtable. Then when you move the subtable, its controllers move the column and the row.

Here is a custom widget with an example of how to use it:

final _rowsCells = [
  [7, 8, 10, 8, 7],
  [10, 10, 9, 6, 6],
  [5, 4, 5, 7, 5],
  [9, 4, 1, 7, 8],
  [7, 8, 10, 8, 7],
  [10, 10, 9, 6, 6],
  [5, 4, 5, 7, 5],
  [9, 4, 1, 7, 8],
  [7, 8, 10, 8, 7],
  [10, 10, 9, 6, 6],
  [5, 4, 5, 7, 5],
  [9, 4, 1, 7, 8],
  [7, 8, 10, 8, 7],
  [10, 10, 9, 6, 6],
  [5, 4, 5, 7, 5],
  [9, 4, 1, 7, 8]
];
final _fixedColCells = [
  "Pablo",
  "Gustavo",
  "John",
  "Jack",
  "Pablo",
  "Gustavo",
  "John",
  "Jack",
  "Pablo",
  "Gustavo",
  "John",
  "Jack",
  "Pablo",
  "Gustavo",
  "John",
  "Jack",
];
final _fixedRowCells = [
  "Math",
  "Informatics",
  "Geography",
  "Physics",
  "Biology"
];

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: CustomDataTable(
      rowsCells: _rowsCells,
      fixedColCells: _fixedColCells,
      fixedRowCells: _fixedRowCells,
      cellBuilder: (data) {
        return Text('$data', style: TextStyle(color: Colors.red));
      },
    ),
  );
}

class CustomDataTable<T> extends StatefulWidget {
  final T fixedCornerCell;
  final List<T> fixedColCells;
  final List<T> fixedRowCells;
  final List<List<T>> rowsCells;
  final Widget Function(T data) cellBuilder;
  final double fixedColWidth;
  final double cellWidth;
  final double cellHeight;
  final double cellMargin;
  final double cellSpacing;

  CustomDataTable({
    this.fixedCornerCell,
    this.fixedColCells,
    this.fixedRowCells,
    @required this.rowsCells,
    this.cellBuilder,
    this.fixedColWidth = 60.0,
    this.cellHeight = 56.0,
    this.cellWidth = 120.0,
    this.cellMargin = 10.0,
    this.cellSpacing = 10.0,
  });

  @override
  State<StatefulWidget> createState() => CustomDataTableState();
}

class CustomDataTableState<T> extends State<CustomDataTable<T>> {
  final _columnController = ScrollController();
  final _rowController = ScrollController();
  final _subTableYController = ScrollController();
  final _subTableXController = ScrollController();

  Widget _buildChild(double width, T data) => SizedBox(
      width: width, child: widget.cellBuilder?.call(data) ?? Text('$data'));

  Widget _buildFixedCol() => widget.fixedColCells == null
      ? SizedBox.shrink()
      : Material(
          color: Colors.lightBlueAccent,
          child: DataTable(
              horizontalMargin: widget.cellMargin,
              columnSpacing: widget.cellSpacing,
              headingRowHeight: widget.cellHeight,
              dataRowHeight: widget.cellHeight,
              columns: [
                DataColumn(
                    label: _buildChild(
                        widget.fixedColWidth, widget.fixedColCells.first))
              ],
              rows: widget.fixedColCells
                  .sublist(widget.fixedRowCells == null ? 1 : 0)
                  .map((c) => DataRow(
                      cells: [DataCell(_buildChild(widget.fixedColWidth, c))]))
                  .toList()),
        );

  Widget _buildFixedRow() => widget.fixedRowCells == null
      ? SizedBox.shrink()
      : Material(
          color: Colors.greenAccent,
          child: DataTable(
              horizontalMargin: widget.cellMargin,
              columnSpacing: widget.cellSpacing,
              headingRowHeight: widget.cellHeight,
              dataRowHeight: widget.cellHeight,
              columns: widget.fixedRowCells
                  .map((c) =>
                      DataColumn(label: _buildChild(widget.cellWidth, c)))
                  .toList(),
              rows: []),
        );

  Widget _buildSubTable() => Material(
      color: Colors.lightGreenAccent,
      child: DataTable(
          horizontalMargin: widget.cellMargin,
          columnSpacing: widget.cellSpacing,
          headingRowHeight: widget.cellHeight,
          dataRowHeight: widget.cellHeight,
          columns: widget.rowsCells.first
              .map((c) => DataColumn(label: _buildChild(widget.cellWidth, c)))
              .toList(),
          rows: widget.rowsCells
              .sublist(widget.fixedRowCells == null ? 1 : 0)
              .map((row) => DataRow(
                  cells: row
                      .map((c) => DataCell(_buildChild(widget.cellWidth, c)))
                      .toList()))
              .toList()));

  Widget _buildCornerCell() =>
      widget.fixedColCells == null || widget.fixedRowCells == null
          ? SizedBox.shrink()
          : Material(
              color: Colors.amberAccent,
              child: DataTable(
                  horizontalMargin: widget.cellMargin,
                  columnSpacing: widget.cellSpacing,
                  headingRowHeight: widget.cellHeight,
                  dataRowHeight: widget.cellHeight,
                  columns: [
                    DataColumn(
                        label: _buildChild(
                            widget.fixedColWidth, widget.fixedCornerCell))
                  ],
                  rows: []),
            );

  @override
  void initState() {
    super.initState();
    _subTableXController.addListener(() {
      _rowController.jumpTo(_subTableXController.position.pixels);
    });
    _subTableYController.addListener(() {
      _columnController.jumpTo(_subTableYController.position.pixels);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Row(
          children: <Widget>[
            SingleChildScrollView(
              controller: _columnController,
              scrollDirection: Axis.vertical,
              physics: NeverScrollableScrollPhysics(),
              child: _buildFixedCol(),
            ),
            Flexible(
              child: SingleChildScrollView(
                controller: _subTableXController,
                scrollDirection: Axis.horizontal,
                child: SingleChildScrollView(
                  controller: _subTableYController,
                  scrollDirection: Axis.vertical,
                  child: _buildSubTable(),
                ),
              ),
            ),
          ],
        ),
        Row(
          children: <Widget>[
            _buildCornerCell(),
            Flexible(
              child: SingleChildScrollView(
                controller: _rowController,
                scrollDirection: Axis.horizontal,
                physics: NeverScrollableScrollPhysics(),
                child: _buildFixedRow(),
              ),
            ),
          ],
        ),
      ],
    );
  }
}

Since the first column, the first row and the subtable are independent, I had to create a DataTable for each one. And since DataTable has headers that can't be removed, the headers of the first column and the subtable are hidden by the first row.

Also, I had to make the first column and first row not manually scrollable because if you scroll them the subtable won't scroll.

This might not be the best solution, but at the moment doesn't seem to be another way to do it. You could try to improve this approach, maybe using Table or other widgets instead of DataTable at least you could avoid hiding the headers of the subtable and first column.

回答2:

Good afternoon, I got your code and I'm adapting for testing, I created a dynamic list for _fixedColCells

worked perfectly,

var disciplina =[];
     for (var c = 0; c <= notas?.length -1; c++) {
     disciplina.add(notas[c].disciplina.toString())  ;
    }

..... fixedColCells: disciplina, ....

_fixedRowCells is a fixed String list, so I used the same variable just by hitting cell labels

but _rowsCells, which by the statement is a <list <list <dynamic>>, set the routine is equal to the fixed variable of the example, but gives error.

type List<dynamic> is not a subtype of type List<List<dynamic>>

and print output basically equals fixed variable _rowsCells example, see below

[[8.5, 7.0, 6.5, 0.0, 5.5, 5.5, 5.5, 0.0, 0.0, 5.5, ATIVA], 
[8.5, 6.0, 8.5, 0.0, 6.0, 6.0, 6.0, 0.0, 0.0, 6.0, ATIVA], 
[7.5, 7.5, 6.0, 0.0, 5.5, 5.5, 5.5, 0.0, 0.0, 5.5, ATIVA], 
[9.5, 9.0, 8.0, 0.0, 6.5, 6.5, 6.5, 0.0, 0.0, 6.5, ATIVA], 
[7.5, 6.0, 8.0, 0.0, 5.5, 5.5, 5.5, 0.0, 0.0, 5.5, ATIVA], 
[10.0, 7.5, 8.5, 0.0, 6.5, 6.5, 6.5, 0.0, 0.0, 6.5, ATIVA], 
[9.0, 9.5, 8.0, 0.0, 6.5, 6.5, 6.5, 0.0, 0.0, 6.5, ATIVA], 
[10.0, 10.0, 10.0, 0.0, 7.5, 7.5, 7.5, 0.0, 0.0, 7.5, ATIVA], 
[10.0, 9.5, 9.5, 0.0, 7.5, 7.5, 7.5, 0.0, 0.0, 7.5, ATIVA], 
[9.0, 7.0, 8.5, 0.0, 6.0, 6.5, 6.5, 0.0, 0.0, 6.0, ATIVA], 
[6.0, 6.0, 6.5, 0.0, 4.5, 4.5, 4.5, 0.0, 0.0, 4.5, ATIVA], 
[9.0, 7.5, 8.5, 0.0, 6.5, 6.5, 6.5, 0.0, 0.0, 6.5, ATIVA], 
[5.0, 5.0, 7.5, 0.0, 4.5, 4.5, 4.5, 0.0, 0.0, 4.5, ATIVA], 
[8.5, 9.0, 8.0, 0.0, 6.5, 6.5, 6.5, 0.0, 0.0, 6.5, ATIVA]]

Thanks for the possible help.