github-starred/actual
2
0
Fork 0
mirror of https://github.com/actualbudget/actual.git synced 2026-11-12 03:42:19 -06:00
Code Issues 3.0k Packages Projects Releases 58 Wiki Activity

[PR #6355] [MERGED] Right-align report table numeric columns #36656

New Issue
Closed
opened 2026-04-20 23:30:32 -05:00 by GiteaMirror · 0 comments
GiteaMirror commented 2026-04-20 23:30:32 -05:00
Owner
Copy Link
Copy Source

📋 Pull Request Information

Original PR: https://github.com/actualbudget/actual/pull/6355
Author: @StephenBrown2
Created: 12/10/2025
Status: ✅ Merged
Merged: 12/13/2025
Merged by: @youngcw

Base: master ← Head: right-align-report-table-numbers

📝 Commits (3)

  • 2052fe0 Right-align report table numeric columns
  • 7d8f612 Set textAlign=right on unexposedContent
  • 84ea78d Update VRT screenshots

📊 Changes

6 files changed (+52 additions, -4 deletions)

View changed files

📝 packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Data-Table-and-checks-the-visuals-1-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Data-Table-and-checks-the-visuals-2-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Data-Table-and-checks-the-visuals-3-chromium-linux.png (+0 -0)
📝 packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableHeader.tsx (+5 -0)
📝 packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx (+41 -4)
➕ upcoming-release-notes/6355.md (+6 -0)

📄 Description

Right-align numeric columns in report data tables

Addresses https://discord.com/channels/937901803608096828/1401824094051110922/1401824094051110922

Description

This PR fixes the alignment of numeric values in the Custom Report data table view. Left-aligned numbers in tabular data make it difficult to quickly scan and compare values, so this change right-aligns all numeric columns for better readability.

Problem

Numeric columns in the report data table were left-aligned, making it difficult to visually compare values across rows. Numbers should be right-aligned so that digits line up properly (ones with ones, tens with tens, etc.).

Solution

  1. Added textAlign="right" to all numeric Cell components in both the header and data rows
  2. For cells using custom unexposedContent renders, added textAlign: 'right' and flexGrow: 1 to the inner Text components to ensure the alignment is properly applied

The second part was necessary because the Cell component's textAlign prop is applied to the outer container, but when using unexposedContent, the custom render needs to handle alignment explicitly since the inner content doesn't automatically inherit the text alignment in flexbox layouts.

Changes

ReportTableHeader.tsx

  • Added textAlign="right" to interval date headers
  • Added textAlign="right" to Deposits header
  • Added textAlign="right" to Payments header
  • Added textAlign="right" to Totals header
  • Added textAlign="right" to Average header

ReportTableRow.tsx

  • Added textAlign="right" to interval data cells
  • Added textAlign="right" to totalAssets cells
  • Added textAlign="right" to totalDebts cells
  • Added textAlign="right" to totals cells
  • Added textAlign="right" to average cells
  • Updated unexposedContent Text components with textAlign: 'right' and flexGrow: 1 to ensure alignment works with the hover underline styling

Testing

  • Verified numeric columns are now right-aligned in the data table view
  • Confirmed hover underline effect still works on clickable cells
  • No visual regressions in other report views

AI Disclaimer

Changes found and applied by AI, there may be missing elements, but all my tests look correct.

Note

Right-aligns numeric columns in report tables by setting textAlign="right" on header and data cells and aligning custom cell content.

  • Reports UI:
    • packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableHeader.tsx
      • Right-align interval/date and summary headers by adding textAlign="right" to numeric Cells.
    • packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx
      • Right-align numeric data cells (intervalData, totalAssets, totalDebts, totals, average) via textAlign="right" on Cells.
      • Ensure aligned custom content by applying textAlign: 'right' and flexGrow: 1 to unexposedContent Text.
  • Docs:
    • Add release note upcoming-release-notes/6355.md for right-aligned numeric columns.

Written by Cursor Bugbot for commit 458d822ac0b4489ae22336ac6445740f4d1e16e0. This will update automatically on new commits. Configure here.

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/actualbudget/actual/pull/6355 **Author:** [@StephenBrown2](https://github.com/StephenBrown2) **Created:** 12/10/2025 **Status:** ✅ Merged **Merged:** 12/13/2025 **Merged by:** [@youngcw](https://github.com/youngcw) **Base:** `master` ← **Head:** `right-align-report-table-numbers` --- ### 📝 Commits (3) - [`2052fe0`](https://github.com/actualbudget/actual/commit/2052fe0a3c1630fecf8b8e2f02f5fbcfbfb0e9d1) Right-align report table numeric columns - [`7d8f612`](https://github.com/actualbudget/actual/commit/7d8f6122cf87d3b4b3ebfadc5ff8df8af3cbd02a) Set textAlign=right on unexposedContent - [`84ea78d`](https://github.com/actualbudget/actual/commit/84ea78dd8e7af05d5f33d83df8d9b7e14ecd1240) Update VRT screenshots ### 📊 Changes **6 files changed** (+52 additions, -4 deletions) <details> <summary>View changed files</summary> 📝 `packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Data-Table-and-checks-the-visuals-1-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Data-Table-and-checks-the-visuals-2-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Data-Table-and-checks-the-visuals-3-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableHeader.tsx` (+5 -0) 📝 `packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx` (+41 -4) ➕ `upcoming-release-notes/6355.md` (+6 -0) </details> ### 📄 Description ## Right-align numeric columns in report data tables Addresses https://discord.com/channels/937901803608096828/1401824094051110922/1401824094051110922 ### Description This PR fixes the alignment of numeric values in the Custom Report data table view. Left-aligned numbers in tabular data make it difficult to quickly scan and compare values, so this change right-aligns all numeric columns for better readability. ### Problem Numeric columns in the report data table were left-aligned, making it difficult to visually compare values across rows. Numbers should be right-aligned so that digits line up properly (ones with ones, tens with tens, etc.). ### Solution 1. Added `textAlign="right"` to all numeric `Cell` components in both the header and data rows 2. For cells using custom `unexposedContent` renders, added `textAlign: 'right'` and `flexGrow: 1` to the inner `Text` components to ensure the alignment is properly applied The second part was necessary because the `Cell` component's `textAlign` prop is applied to the outer container, but when using `unexposedContent`, the custom render needs to handle alignment explicitly since the inner content doesn't automatically inherit the text alignment in flexbox layouts. ### Changes **`ReportTableHeader.tsx`** - Added `textAlign="right"` to interval date headers - Added `textAlign="right"` to Deposits header - Added `textAlign="right"` to Payments header - Added `textAlign="right"` to Totals header - Added `textAlign="right"` to Average header **`ReportTableRow.tsx`** - Added `textAlign="right"` to interval data cells - Added `textAlign="right"` to totalAssets cells - Added `textAlign="right"` to totalDebts cells - Added `textAlign="right"` to totals cells - Added `textAlign="right"` to average cells - Updated `unexposedContent` Text components with `textAlign: 'right'` and `flexGrow: 1` to ensure alignment works with the hover underline styling ### Testing - Verified numeric columns are now right-aligned in the data table view - Confirmed hover underline effect still works on clickable cells - No visual regressions in other report views ### AI Disclaimer Changes found and applied by AI, there may be missing elements, but all my tests look correct. <!-- CURSOR_SUMMARY --> --- > [!NOTE] > Right-aligns numeric columns in report tables by setting `textAlign="right"` on header and data cells and aligning custom cell content. > > - **Reports UI**: > - `packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableHeader.tsx` > - Right-align interval/date and summary headers by adding `textAlign="right"` to numeric `Cell`s. > - `packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx` > - Right-align numeric data cells (`intervalData`, `totalAssets`, `totalDebts`, totals, average) via `textAlign="right"` on `Cell`s. > - Ensure aligned custom content by applying `textAlign: 'right'` and `flexGrow: 1` to `unexposedContent` `Text`. > - **Docs**: > - Add release note `upcoming-release-notes/6355.md` for right-aligned numeric columns. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 458d822ac0b4489ae22336ac6445740f4d1e16e0. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY --> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-04-20 23:30:32 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
AI generated
API
bank sync
budgeting
bug
can’t replicate
dependencies
docker
documentation
electron
experimental feature
feature
feedback
goal templates
good first issue
help wanted
importers
maintenance
needs info
needs testing
needs triage
needs votes
openid
payees
pull-request
Mirrored from GitHub Pull Request
 regression
reports
responsive
rules
schedules
server
✨ merged
split transactions
tech debt
tech-support
theme
transaction import
transaction reconciliation
transactions
translations
upstream
user interface
✅ approved
wontfix
No labels pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
GiteaMirror ninjasurge (Kaehlen Rog)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/actual#36656