va-table: Adds ability to arbitrarily right-align columns

[Andrew565]

Chromatic

https://2846-right-alignment-for-tables--65a6e2ed2314f7b8f98609d8.chromatic.com

---

Description

Closes #2846

QA Checklist

• Component maintains 1:1 parity with design mocks
• Text is consistent with what's been provided in the mocks
• Component behaves as expected across breakpoints
• Accessibility expert has signed off on code changes (if applicable. If not applicable provide reason why)
• Designer has signed off on changes (if applicable. If not applicable provide reason why)
• Tab order and focus state work as expected
• Changes have been tested against screen readers (if applicable. If not applicable provide reason why)
• New components are covered by e2e tests; updates to existing components are covered by existing test suite
• Changes have been tested in vets-website using Verdaccio (if applicable. If not applicable provide reason why)

Screenshots

Acceptance criteria

• QA checklist has been completed
• Screenshots have been attached that cover desktop and mobile screens

Definition of done

• Documentation has been updated, if applicable
• A link has been provided to the originating GitHub issue (or connected to it via ZenHub)

[jamigibbs]

Is it possible to do this without having a "complex" data string to parse the column values. Like could they just add a prop (boolean) to va-table-row for each column they want to be right aligned?

<va-table-row right-aligned>

[Andrew565]

It was my belief, shared by Micah, that having a single prop at the va-table component level was going to be preferable to asking developers to add a prop to every row or every desired span. If we did it at the row level, it would still need to be a complex prop to define which spans within the row needed to be right-aligned. If we did it at the span level, devs would either need to manually or programmatically add the .vads-u-text-align--right class to just the spans they wanted right-aligned, increasing the chances of error and just generally making for an unpleasant developer experience.

[jamigibbs]

I guess I feel like I would want more flexibility to be able to add a styling class where I needed it.

Is it always the case that all cells in a column must be right aligned? Is there a situation that some cells would not be right aligned (mixed alignment)?

Sorry for all the questions if there was already conversation about this. Less code is less bugs for us. 😄

[jamigibbs]

Just to clarify, I'm ultimately asking if this can just be accomplished with guidelines especially if it's going to get complicated with mixed cell alignments.

[Andrew565]

I don't know about mixed cell alignments, though I would suspect that'd make for a very unattractive-looking table. The ticket just called for alignment options for columns.

[Andrew565]

If anyone wanted to manually align individual cells, they'd still have the option to add whatever classes they wanted to the individual spans. This just gives a convenient way to right-align entire columns.

[Andrew565]

@danbrady Fixed!