DataTable - make scrollable, set background colour and fix/freeze header row and first column

I've started developing in Flutter with webview, charts, tables, but I met some problems with tables.

I use DataTable to represent data in a table.
There is a first problem. By default, it isn't scrollable if data is out of a screen. So I embedded in some Widgets (i.e. SingleChildScrollView, ListView), but it was scrollable only in one direction (vertical or horizontal). I searched something about it and I found a plugin for both directions (bidirectional_scroll_view 0.0.6). After compilation I received an error

Because app depends on bidirectional_scroll_view >=0.0.2 which
requires SDK version <2.1.0, version solving failed.

I'm using Dart SDK version: >=2.1.0 <3.0.0 in configuration.

Next, I found PaginatedDataTable which allows scrollable in both directions, but it is paginated table.
So anybody know is it possible to somehow scroll DataTable in both directions (vertical and horizontal)?

The second question (more important): is it possible to set background colour in header (first) row and first column in a table? Or even in any cell in a table?

For DataColumn/DataCell I tried embed Text in Container and then set Container colour, but the background colour was only set for text, the rest of a cell was with default colour.

i.e.

DataColumn(label: Container(child: Text('2011'), color: Colors.grey,)),

And is it possible to fixed/freeze header (first) row and first column. I mean the table is scrolled and first row/column is always visible on a screen. I couldn't find any solution ..

Can not agree anymore, the third problem is most important for me.
you can use Table, TableRow, TableCell widget custom you table for the third problem, but their widgets look like can not define events.

is there any one who found solution for the 3rd problem, even I am facing the same. I want to freeze the first row and first column of row, so once scroll down those should be visible.
, or any other way to do so,

here what I am doing is, but here once get scrolled the first row also goes up

 Widget getTable(BuildContext context, var data) {
    Widget _widget;
    _widget = SingleChildScrollView(
      child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: DataTable(
          rows: createDataRows(context, data),
          columns: createDataColumns(context, data),
        ),
      ),
    );
    return _widget;
  }

  List<DataRow> createDataRows(BuildContext context, var jsonData) {
    List<DataRow> _dataRows = [];
    List<DataCell> _cells = [];
    String _dataCellTitle;

    Map<String, Object> headers = jsonData['headers'];
    Map<int, String> headerMapping;
    headerMapping = headers.keys
        .toList()
        .asMap()
        .map((index, value) => MapEntry(index + 1, value));

    if (jsonData["data"] == null) {
      _dataRows = [];
    } else {
      for (var j = 0; j < jsonData["data"].length; j++) {
        _cells.add(DataCell(Text('${j + 1}')));
        for (int i = 1; i <= headerMapping.length; i++) {
          _dataCellTitle = "${jsonData["data"][j][headerMapping[i]]}" ?? '-';
          _cells.add(DataCell(Text('$_dataCellTitle')));
        }
        _dataRows.add(DataRow(cells: _cells));
        _cells = [];
      }
    }
    return _dataRows;
  }

  List<DataColumn> createDataColumns(BuildContext context, var jsonData) {
    String columnTitle;
    List<DataColumn> _dataColumns = [];
    Map<String, Object> headers = jsonData['headers'];
    Map<int, String> headerMapping;
    headerMapping = headers.keys
        .toList()
        .asMap()
        .map((index, value) => MapEntry(index + 1, value));
    _dataColumns.add(DataColumn(label: Text('S. No.')));
    for (int i = 1; i <= headerMapping.length; i++) {
      columnTitle = headers[headerMapping[i]];
      _dataColumns.add(
        DataColumn(label: Text('$columnTitle')),
      );
    }
    return _dataColumns;
  }

same here, the third problem is most important for me too.
really hope someone know if there's any way to implement it.

There is an specific thread only about the third item (fix/freeze columns). #21165

Also. We are currently making an workaround on stackOverflow: StackOverflow Issue on fixing header/row

Can not agree anymore, the third problem is most important for me.
you can use Table, TableRow, TableCell widget custom you table for the third problem, but their widgets look like can not define events.

this might help https://pub.dev/packages/table_sticky_headers

You can try something like this, but the table_sticky_headers above is the best option, I think.

ListView(
        shrinkWrap: true,
        children: <Widget>[
          SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: DataTable(
              columns: widget.columns,
              rows: widget.rows,
              columnSpacing: widget.columnSpacing,
              horizontalMargin: widget.horizontalMargin,
              headingRowHeight: 50.0,
              dataRowHeight: 40.0,
            ),
          ),
        ],
      )

Good points!

This problem has been bothering me for a long time, why is it still unsolved after so long?

Use this for fixed header and first column https://github.com/AlexBacich/sticky-headers-table

…

On Wed, 6 May, 2020, 2:42 AM normidar, ***@***.***> wrote: This problem has been bothering me for a long time, why is it still unsolved after so long? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#30770 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHIWLZXGSLARMDUUUGRFLD3RQB6MTANCNFSM4HEOZSWA> .

[two_dimensional_scrollables] TableView (#4536)

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

[two_dimensional_scrollables] TableView (flutter#4536)

Navigation Menu

Repository navigation

DataTable - make scrollable, set background colour and fix/freeze header row and first column #30770

17 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

DataTable - make scrollable, set background colour and fix/freeze header row and first column #30770

Description

Activity

Richard-Choooou commented on Aug 13, 2019

harishshet222 commented on Sep 20, 2019

didavid61202 commented on Sep 23, 2019

Goostavo commented on Oct 24, 2019

nikesh03 commented on Feb 2, 2020

pulstar commented on Feb 9, 2020

Viacheslav-Romanov commented on Mar 17, 2020

normidar commented on May 5, 2020

nikesh03 commented on May 5, 2020

17 remaining items

joo commented on Jul 20, 2023

github-actions commented on Aug 31, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions