Add `DataColumn.headingRowAlignment` for `DataTable` #144006

TahaTesser · 2024-02-23T09:59:10Z

fixes [DataTable] Unable to center the label of a DataColumn without side effects

Code sample

expand to view the code sample

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MaterialApp(
        home: Material(
          child: DataTable(
            columns: <DataColumn>[
              DataColumn(
                headingRowAlignment: MainAxisAlignment.center,
                onSort: (int columnIndex, bool ascending) {},
                label: const Text('Header'),
              ),
            ],
            sortColumnIndex: 0,
            rows: const <DataRow>[
              DataRow(
                cells: <DataCell>[
                  DataCell(Center(child: Text('Data'))),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Center `DataColumn.headingRowAlignment` without sort arrow

Center `DataColumn.headingRowAlignment` with sort arrow

Pre-launch Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I read the Tree Hygiene wiki page, which explains my responsibilities.
I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
I signed the CLA.
I listed at least one issue that this PR fixes in the description above.
I updated/added relevant documentation (doc comments with ///).
I added new tests to check the change I am making, or this PR is test-exempt.
I followed the breaking change policy and added Data Driven Fixes where supported.
All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

packages/flutter/lib/src/material/data_table.dart

TahaTesser · 2024-03-25T15:14:01Z

@Piinks
Added DataColumn.mainAxisAlignment with new docs and tests, please take a look.

Piinks · 2024-03-27T22:07:08Z

packages/flutter/lib/src/material/data_table.dart

Oh gosh I feel silly for not noticing this earlier. This should probably be crossAxisAlignment, technically. We are talking about the horizontal alignment of DataColumn, for which the main axis would technically be vertical.

Or we could call it headerMainAxisAlignment, since it only applies to the header rather than the whole column. WDYT?

Oh gosh I feel silly for not noticing this earlier. This should probably be crossAxisAlignment, technically. We are talking about the horizontal alignment of DataColumn, for which the main axis would technically be vertical.

Great observation! I was focused on Row widget inside the DataColumn. I didn't consider what it means for the DataColumn with column in the name.

Or we could call it headerMainAxisAlignment, since it only applies to the header rather than the whole column. WDYT?

Sounds good to me. This could be consistent with other header properties if we do headingRowAlignment

flutter/packages/flutter/lib/src/material/data_table_theme.dart

Lines 51 to 53 in 859a5ab

this.headingRowColor,

this.headingRowHeight,

this.headingTextStyle,

I also added this to DataTableTheme.

Piinks

…r/flutter#144006)

Manual roll requested by [email protected] flutter/flutter@9d32f07...7fa932b 2024-04-01 [email protected] Roll Flutter Engine from e6f19409b613 to ea93c5d91b12 (3 revisions) (flutter/flutter#146100) 2024-04-01 [email protected] Refactor realm_checker (flutter/flutter#145905) 2024-04-01 [email protected] Add info strings to code blocks. (flutter/flutter#146085) 2024-04-01 [email protected] Add test for animated_container.0.dart API example. (flutter/flutter#145995) 2024-04-01 [email protected] Roll Flutter Engine from 8dff6b833fe2 to e6f19409b613 (2 revisions) (flutter/flutter#146093) 2024-04-01 [email protected] Roll Flutter Engine from d33666d90916 to 8dff6b833fe2 (3 revisions) (flutter/flutter#146087) 2024-04-01 [email protected] Fix SliverMainAxisGroup layout in reverse (flutter/flutter#145572) 2024-04-01 [email protected] Roll Flutter Engine from dd4f5cd5c9d5 to d33666d90916 (3 revisions) (flutter/flutter#146083) 2024-04-01 [email protected] Roll Packages from 51faaa1 to d5aff19 (3 revisions) (flutter/flutter#146081) 2024-04-01 [email protected] Fixes some gesture recognizers are not disposed. (flutter/flutter#146072) 2024-04-01 [email protected] Flutter Gradle Plugin: add versionName and versionCode to FlutterExtension (flutter/flutter#146044) 2024-04-01 [email protected] Roll Flutter Engine from bf348cd73d49 to dd4f5cd5c9d5 (1 revision) (flutter/flutter#146071) 2024-04-01 [email protected] Roll Flutter Engine from 984a78b04671 to bf348cd73d49 (1 revision) (flutter/flutter#146065) 2024-04-01 [email protected] Deprecate `ButtonBar`, `ButtonBarThemeData`, and `ThemeData.buttonBarTheme` (flutter/flutter#145523) 2024-04-01 [email protected] Add `DataColumn.headingRowAlignment ` for `DataTable` (flutter/flutter#144006) 2024-04-01 [email protected] Roll Flutter Engine from e9d35f8bfbe2 to 984a78b04671 (2 revisions) (flutter/flutter#146062) 2024-04-01 [email protected] Roll Flutter Engine from 4f6b832c8e33 to e9d35f8bfbe2 (1 revision) (flutter/flutter#146060) 2024-03-31 [email protected] Roll Flutter Engine from 9689390986b7 to 4f6b832c8e33 (1 revision) (flutter/flutter#146055) 2024-03-31 [email protected] Roll Flutter Engine from 34081fea4d59 to 9689390986b7 (1 revision) (flutter/flutter#146053) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages Please CC [email protected],[email protected],[email protected],[email protected] on the revert to ensure that a human is aware of the problem. To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://issues.skia.org/issues/new?component=1389291&template=1850622 Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

) Manual roll requested by [email protected] flutter/flutter@9d32f07...7fa932b 2024-04-01 [email protected] Roll Flutter Engine from e6f19409b613 to ea93c5d91b12 (3 revisions) (flutter/flutter#146100) 2024-04-01 [email protected] Refactor realm_checker (flutter/flutter#145905) 2024-04-01 [email protected] Add info strings to code blocks. (flutter/flutter#146085) 2024-04-01 [email protected] Add test for animated_container.0.dart API example. (flutter/flutter#145995) 2024-04-01 [email protected] Roll Flutter Engine from 8dff6b833fe2 to e6f19409b613 (2 revisions) (flutter/flutter#146093) 2024-04-01 [email protected] Roll Flutter Engine from d33666d90916 to 8dff6b833fe2 (3 revisions) (flutter/flutter#146087) 2024-04-01 [email protected] Fix SliverMainAxisGroup layout in reverse (flutter/flutter#145572) 2024-04-01 [email protected] Roll Flutter Engine from dd4f5cd5c9d5 to d33666d90916 (3 revisions) (flutter/flutter#146083) 2024-04-01 [email protected] Roll Packages from 51faaa1 to d5aff19 (3 revisions) (flutter/flutter#146081) 2024-04-01 [email protected] Fixes some gesture recognizers are not disposed. (flutter/flutter#146072) 2024-04-01 [email protected] Flutter Gradle Plugin: add versionName and versionCode to FlutterExtension (flutter/flutter#146044) 2024-04-01 [email protected] Roll Flutter Engine from bf348cd73d49 to dd4f5cd5c9d5 (1 revision) (flutter/flutter#146071) 2024-04-01 [email protected] Roll Flutter Engine from 984a78b04671 to bf348cd73d49 (1 revision) (flutter/flutter#146065) 2024-04-01 [email protected] Deprecate `ButtonBar`, `ButtonBarThemeData`, and `ThemeData.buttonBarTheme` (flutter/flutter#145523) 2024-04-01 [email protected] Add `DataColumn.headingRowAlignment ` for `DataTable` (flutter/flutter#144006) 2024-04-01 [email protected] Roll Flutter Engine from e9d35f8bfbe2 to 984a78b04671 (2 revisions) (flutter/flutter#146062) 2024-04-01 [email protected] Roll Flutter Engine from 4f6b832c8e33 to e9d35f8bfbe2 (1 revision) (flutter/flutter#146060) 2024-03-31 [email protected] Roll Flutter Engine from 9689390986b7 to 4f6b832c8e33 (1 revision) (flutter/flutter#146055) 2024-03-31 [email protected] Roll Flutter Engine from 34081fea4d59 to 9689390986b7 (1 revision) (flutter/flutter#146053) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages Please CC [email protected],[email protected],[email protected],[email protected] on the revert to ensure that a human is aware of the problem. To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://issues.skia.org/issues/new?component=1389291&template=1850622 Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Feb 23, 2024

TahaTesser force-pushed the data_column_mainAxisAlignment branch from f902e22 to 5a2f070 Compare February 23, 2024 11:29

TahaTesser marked this pull request as ready for review February 23, 2024 11:32

wer-mathurin reviewed Feb 23, 2024

View reviewed changes

packages/flutter/lib/src/material/data_table.dart Outdated Show resolved Hide resolved

TahaTesser force-pushed the data_column_mainAxisAlignment branch from 5a2f070 to 02eed25 Compare February 28, 2024 10:34

TahaTesser changed the title ~~Add DataColumn.mainAxisAlignment for DataTable~~ Add DataColumn. centerLabel for DataTable Feb 28, 2024

TahaTesser changed the title ~~Add DataColumn. centerLabel for DataTable~~ Add DataColumn.centerLabel for DataTable Feb 28, 2024

TahaTesser requested a review from Piinks February 28, 2024 12:14

Piinks reviewed Mar 8, 2024

View reviewed changes

packages/flutter/lib/src/material/data_table.dart Outdated Show resolved Hide resolved

This comment was marked as off-topic.

Sign in to view

TahaTesser requested a review from Piinks March 18, 2024 12:44

TahaTesser force-pushed the data_column_mainAxisAlignment branch 2 times, most recently from c0c8363 to ee57da0 Compare March 25, 2024 15:11

TahaTesser changed the title ~~Add DataColumn.centerLabel for DataTable~~ Add DataColumn.mainAxisAlignment for DataTable Mar 25, 2024

Piinks reviewed Mar 27, 2024

View reviewed changes

TahaTesser force-pushed the data_column_mainAxisAlignment branch from ee57da0 to 3476431 Compare March 28, 2024 09:11

TahaTesser requested a review from Piinks March 28, 2024 13:27

Piinks approved these changes Mar 28, 2024

View reviewed changes

wer-mathurin mentioned this pull request Mar 29, 2024

Add the ability to align the header cells maxim-saplin/data_table_2#256

Closed

TahaTesser changed the title ~~Add DataColumn.mainAxisAlignment for DataTable~~ Add DataColumn.headingRowAlignment for DataTable Apr 1, 2024

TahaTesser added 2 commits April 1, 2024 10:14

Add DataColumn.mainAxisAlignment for DataTable

7d362ca

Address feedback

62bf6b2

TahaTesser force-pushed the data_column_mainAxisAlignment branch from 3476431 to 62bf6b2 Compare April 1, 2024 07:39

TahaTesser added the autosubmit Merge PR when tree becomes green via auto submit App label Apr 1, 2024

auto-submit bot merged commit 40dda2b into flutter:master Apr 1, 2024

TahaTesser deleted the data_column_mainAxisAlignment branch April 1, 2024 09:46

engine-flutter-autoroll mentioned this pull request Apr 1, 2024

Manual roll Flutter from 9d32f07e34c3 to 7fa932be5c12 (19 revisions) flutter/packages#6448

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Apr 1, 2024

40dda2b Add DataColumn.headingRowAlignment for DataTable (flutte…

69c39dd

…r/flutter#144006)

HansMuller mentioned this pull request Apr 5, 2024

Flutter Framework Team: Notable Commits #121415

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add `DataColumn.headingRowAlignment` for `DataTable` #144006

Add `DataColumn.headingRowAlignment` for `DataTable` #144006

Uh oh!

TahaTesser commented Feb 23, 2024 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

This comment was marked as off-topic.

TahaTesser commented Mar 25, 2024

Uh oh!

Piinks Mar 27, 2024

Uh oh!

TahaTesser Mar 28, 2024

Uh oh!

Piinks Mar 28, 2024

Uh oh!

Piinks left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	this.headingRowColor,
	this.headingRowHeight,
	this.headingTextStyle,

Add DataColumn.headingRowAlignment for DataTable #144006

Add DataColumn.headingRowAlignment for DataTable #144006

Uh oh!

Conversation

TahaTesser commented Feb 23, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code sample

Center DataColumn.headingRowAlignment without sort arrow

Center DataColumn.headingRowAlignment with sort arrow

Pre-launch Checklist

Uh oh!

Uh oh!

Uh oh!

This comment was marked as off-topic.

TahaTesser commented Mar 25, 2024

Uh oh!

Piinks Mar 27, 2024

Choose a reason for hiding this comment

Uh oh!

TahaTesser Mar 28, 2024

Choose a reason for hiding this comment

Uh oh!

Piinks Mar 28, 2024

Choose a reason for hiding this comment

Uh oh!

Piinks left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Add `DataColumn.headingRowAlignment` for `DataTable` #144006

Add `DataColumn.headingRowAlignment` for `DataTable` #144006

TahaTesser commented Feb 23, 2024 •

edited

Loading

Center `DataColumn.headingRowAlignment` without sort arrow

Center `DataColumn.headingRowAlignment` with sort arrow