How to fix top row and first column to be always visible in a datatable

Question

I have a data table that scrolls horizontally and vertically due to the amount of data available. I want the top row which specifies the column names to always be visible when scrolling down vertically and the leftmost column to always be visible when scrolling horizontally.

datatable

@override
  Widget build(BuildContext context) => Scaffold(
    appBar: AppBar(
      title: Text(appTitle),
    ),
    body: DataTableWidget(),
  );

class DataTableWidgetState extends State<DataTableWidget> {

  @override
  Widget build(BuildContext context) {
    final width = 100 * cityColumns.length;
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: SizedBox(
        width: width * 1.4,
        child: ListView(
          children: <Widget>[
            buildDataTable(),
          ],
        ),
      ),
    );
  }

  Widget buildDataTable() => DataTable(
    sortAscending: ascending,
    sortColumnIndex: 0,
    columns: cityColumns
        .map(
          (String column) => DataColumn(
        label: Text(column),
        onSort: (int columnIndex, bool ascending) => onSortColumn(
            columnIndex: columnIndex, ascending: ascending),
      ),
    )
        .toList(),
    rows: cities
        .map((City city) => DataRow(
      selected: selectedCities.contains(city),
      cells: [
        DataCell(Text('${city.name}')),
        DataCell(Text('${city.nation}')),
        DataCell(Text('${city.name2}')),
        DataCell(Text('${city.nation2}')),
        DataCell(Text('${city.name3}')),
        DataCell(Text('${city.nation3}')),
        DataCell(Text('${city.population}')),
        DataCell(Text('${city.nation}')),
      ],
    ))
        .toList(),
  );
}

Have a look at the Sliver App Bar. Great example can be found here https://medium.com/@diegoveloper/flutter-collapsing-toolbar-sliver-app-bar-14b858e87abe — Tinus Jackson, Jun 19 '19 at 07:50

score 0 · Answer 1 · answered Sep 28 '22 at 16:20

You can use the table_sticky_headers plugin to freeze table rows and columns. The row and column header can be populated using rowsTitleBuilder and columnsTitleBuilder.

StickyHeadersTable(
  columnsLength: titleColumn.length,
  rowsLength: titleRow.length,
  columnsTitleBuilder: (i) => Text(titleColumn[i]), // column header
  rowsTitleBuilder: (i) => Text(titleRow[i]),       // row header
  contentCellBuilder: (i, j) => Text(data[i][j]),
  legendCell: Text('Sticky Legend'),
),

How to fix top row and first column to be always visible in a datatable

1 Answers1