Skip to content

DataView: support different alignment for text and numbers #66623

Closed

Description

@rogermattic

Currently, the DataView component only supports left alignment for all content, whether it's numbers or text. As we explore using tables for analytics and financial reports, where there will be more numbers, we need to improve accessibility by supporting different alignments.

The basic alignment requirements:

  • Numbers → right-aligned
    
  • Text → left-aligned
    

This change will make the data easier for users to read and interpret.

Activity

  1. jameskoster commented on Oct 31, 2024

    @jameskoster
    Contributor

    Are there any other styles we might consider, for instance font-variant-numeric: tabular-nums;?

  2. oandregal commented on Oct 31, 2024

    @oandregal
    Member

    For the record, I've grouped together issues related to "theming" in the dataviews component issue, so they are visible #55083

    Consumers can already provide styles for fields, so this sounds like it's already possible? (these styles are provided by dataviews at the container level)

    DataViews may want to provide default styles tied to field types. For example, a field type "number" could provide the styling defaults for them. However, there's two important details to consider:

    • The types we support may be too coarse for consumers: a number may actually be a currency (which one?), percentage, scientific, postal code, etc. and all of them are different.
    • Are the styles provided by DataViews opt-in or opt-opt? How do we make sure styles for a type do not conflict with styles provided by the consumer for a given field?
  3. jameskoster commented on Oct 31, 2024

    @jameskoster
    Contributor

    There are certain conventions that should probably be respected by default, not opt out. Aligning number fields right in table layout feels like one of those standards to me.

    The types we support may be too coarse for consumers: a number may actually be a currency (which one?), percentage, scientific, postal code, etc. and all of them are different.

    Could/should the API be expanded to include these details? Probably something to work out later, but aligning all number fields right seems like a reasonable place to start.

  4. rogermattic commented on Oct 31, 2024

    @rogermattic
    Author

    The types we support may be too coarse for consumers: a number may actually be a currency (which one?), percentage, scientific, postal code, etc. and all of them are different.

    Fair. I believe postal codes shouldn't be considered as numbers and wonder if there's any we could exclude them?

    Could/should the API be expanded to include these details? Probably something to work out later, but aligning all number fields right seems like a reasonable place to start.

    Yes I agree this is the way to start.

    Are the styles provided by DataViews opt-in or opt-opt? How do we make sure styles for a type do not conflict with styles provided by the consumer for a given field?

    Interesting question. Would you mind expanding on that? I guess I don't really understand what styles the users can provide? Is this bold, italic etc?

    There are certain conventions that should probably be respected by default, not opt out. Aligning number fields right in table layout feels like one of those standards to me.

    I agree with @jameskoster.

  5. rogermattic commented on Oct 31, 2024

    @rogermattic
    Author

    Are there any other styles we might consider, for instance font-variant-numeric: tabular-nums;?

    Yeah, exactly (I wondered if that should be a separate issue request, but...) for anything that is numbers only we should display it in tabular/monospace style.

  6. youknowriad commented on Jul 23, 2025

    @youknowriad
    Contributor

    This has been implemented.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions

      Sponsor
      SponsoredKunjungi sekarang
      Promo