Altinn / Altinn/app-frontend-react
Compact tables
- Dominant language
- TypeScript
- Stars
- 21
- Forks
- 33
- Avg merge
- 6d 23h
- Merged PRs (30d)
- 3
Description
### Description
We request the introduction of a more compact table layout for use in Altinn forms, to improve readability, reduce scrolling, and present data more efficiently—both during form completion and in the generated PDF.
**Problem Statement**
Current table layouts use large vertical spacing, resulting in:
- Excessive scrolling for users when many rows are present
- Reduced ability to get an overview of entered data
- Cluttered PDF outputs with unnecessary whitespace
- Lower usability in sections with repeating groups, attachments, or expense lines
This negatively affects both end users and case handlers who rely on clear, concise overviews.
**Example of one of our tables with today's solution:**
### Additional Information
**Requested Solution**
Implement a compact table variant with:
- Reduced row height and tighter padding
- Minimized spacing between rows and columns
- Optional “dense mode” that can be toggled per table or per component
- Consistent compact rendering in both the web form and PDF export
Contributor guide
Research direction
No file, test, or entry point is named; begin by locating the table component and the PDF export path in the frontend. Done means a compact or dense table option reduces spacing consistently in both web forms and generated PDFs, with the option available per table or component.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100