Skip to content

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

@lukaszbojarski

Description

@lukaszbojarski

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

  1. 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)?

  1. 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,)),

Screen Shot 2019-04-04 at 13 57 38

  1. 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 ..

Metadata

Metadata

Assignees

Labels

P2Important issues not at the top of the work lista: qualityA truly polished experiencec: new featureNothing broken; request for a new capabilityc: proposalA detailed proposal for a change to Fluttercustomer: crowdAffects or could affect many people, though not necessarily a specific customer.f: material designflutter/packages/flutter/material repository.frameworkflutter/packages/flutter repository. See also f: labels.team-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

Type

No type

Projects

Status

Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions