fix(SDK-1219): make DataView column justify the single source of truth for alignment - #2648
Open
aaronlee777 wants to merge 3 commits into
Open
fix(SDK-1219): make DataView column justify the single source of truth for alignment#2648aaronlee777 wants to merge 3 commits into
aaronlee777 wants to merge 3 commits into
Conversation
Right-align currency, amount, hours, and tax-rate columns across DataView tables by declaring column.justify explicitly, instead of relying on the implicit "last column is right-aligned" CSS. This right-aligns mid-table numeric columns that previously rendered left, and their footers inherit the justify automatically. Leaves rate-as-text columns and single-row horizontal payment summaries left-aligned, where right-alignment reads worse. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…gnment
Remove the implicit ".react-aria-Cell:last-child { text-align: right }" rule
from the default Table renderer. That rule auto-right-aligned whatever landed
in the last column and was invisible to component adapters, so custom adapters
had to reverse-engineer it (and got footers wrong). Alignment now comes solely
from column.justify, which flows through cell content to every renderer.
- End-align the injected actions/row-menu column in DataTable via withJustify,
so it stays flush-right without the last-child rule.
- Delete the two per-table overrides that only existed to cancel the implicit
default (EmployeeTable's :not([data-has-menu]) rule + its data-has-menu attr,
and OffCycleTaxWithholdingTable's last-child override).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Extend the DataTable "column justify" tests: an unset column (including the last one) is not wrapped in cellEnd, and the injected actions column is end-aligned when itemMenu is provided. - Add a DataViewWithJustifiedColumns story so the alignment behavior is visually reviewable in Storybook (no existing story exercised justify). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
aaronlee777
marked this pull request as ready for review
August 27, 2026 15:13
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
column.justify(baked into cellcontentvia acellEndflex wrapper) and an implicit.react-aria-Cell:last-child { text-align: right }rule internal to the default renderer's stylesheet.{ key, content }), and forced per-table:last-child { text-align: left }overrides to cancel it. It also produced artifacts like a trailing date column rendering right-aligned in a payment summary.column.justifythe single source of truth: numeric columns declarejustify: 'end', the implicit CSS is removed, and the injected actions column is end-aligned through the same mechanism.Changes
justify: 'end'on currency/amount/hours/tax-rate columns across DataView tables (Payroll, Employee, Contractor, Company). Footers inheritcolumn.justify, so totals rows align automatically. Left rate-as-text columns and single-row horizontal payment summaries left-aligned (right-aligning them reads worse)..react-aria-Cell:last-child { text-align: right }from the default Table renderer (kept all cosmetic border-radius:last-childrules and the basetext-align: left).DataTablevia the existingwithJustifyhelper, so it stays flush-right without the last-child rule.EmployeeTable's:not([data-has-menu])rule + itsdata-has-menuattr, andOffCycleTaxWithholdingTable's last-child override).column justifytests (an unset last column is not wrapped; the actions column is end-aligned) and add aDataViewWithJustifiedColumnsstory.Demo
Reviewable in Storybook via the new
UI/Components/DataView→DataViewWithJustifiedColumnsstory (right-aligned Amount column + footer, flush-right row menu). In the SDK dev app (dev-source routes):JobsListamount,Deductions,PayrollReceipts, and StateTaxes → "Manage tax rates" now right-align numeric columns; text/status/date columns and rate-as-text stay left.Related
Testing
npm run tsc&&npm run lint:check&&npm run format:checknpx vitest run src/components/Common/DataView/DataTable/DataTable.test.tsx— includes the extendedcolumn justifycasesnpx vitest run src/components/Payroll src/components/Employee src/components/Company/StateTaxes src/components/Contractor/Payments(touched tables) — all greennpm run storybook→UI/Components/DataView→DataViewWithJustifiedColumns