Al/dataview UI refactor

[aaronlee777]

This pull request introduces significant improvements to the DataView components, focusing on enhanced support for secondary text in columns, customizable row actions (buttons and menus), and improved alignment and styling for both tables and card views. These changes provide a more flexible and consistent UI for displaying tabular and card-based data, and are well-covered by new and updated tests.

Key improvements include:

Secondary Text & Content Rendering

• Added support for secondaryText in column definitions for both DataCards and DataTable, allowing columns to display supplementary information beneath the primary value. This is reflected in both the UI and the test data. [1] [2] [3]
• Updated rendering logic and styles to display primary and secondary text in distinct styles for columns, cells, and footers, ensuring visual clarity and consistency. [1] [2] [3] [4]

Alignment & Styling Enhancements

• Added alignment options for columns and actions, with new SCSS styles to support left, center, and right alignment for headers, cells, and footers. [1] [2] [3] [4]
• Ensured consistent spacing, coloring, and layout for primary/secondary text and action controls in both cards and tables. [1] [2]

Testing Improvements

• Expanded test coverage for both DataCards and DataTable to verify rendering of secondary text, row actions, and alignment features. [1] [2] [3]

Storybook/Data Updates

• Updated storybook sample data to include department and employee ID fields, demonstrating the new secondary text and row actions features.

These changes make the DataView components more robust, flexible, and visually consistent, supporting new use cases and improving the overall developer and user experience.

Screenshots

Before

After

[Copilot]

Pull request overview

This PR refactors the DataView components to enhance their flexibility and visual consistency by adding support for secondary text in columns, customizable row actions (buttons and menus), and improved alignment options for both table and card views.

Key Changes:

• Added secondaryText and secondaryRender properties to column definitions, enabling display of supplementary information beneath primary values
• Introduced rowActions prop with support for action buttons and dropdown menus per row, replacing the previous itemMenu pattern
• Enhanced alignment capabilities with left/center/right options for columns and actions
• Refactored rendering logic to use new helper functions (getColumnContent, getFooterContent) for consistent content normalization
• Updated multiple payroll presentation components to leverage these new features

Reviewed changes

Copilot reviewed 19 out of 19 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
PayrollOverviewPresentation.tsx	Refactored to use new DataView features: memoized employee map, simplified render functions returning primitives instead of JSX, added alignment props, and updated footer to use structured format
PayrollListPresentation.tsx	Converted from itemMenu to rowActions pattern with buttons and menu items, added secondary text for pay schedule display, memoized pay schedule names lookup
PayrollConfigurationPresentation.tsx	Updated to use secondaryRender for employee details, simplified column definitions by returning primitives, memoized employee map
Tabs.module.scss	Adjusted tab styling (removed border-bottom, updated font-weight from semibold to medium)
Table.module.scss	Changed default text alignment from left to inherit and removed last-child right alignment rule
useDataView.ts	Extended type definitions to support secondary text, row actions, and structured footer cells
getFooterContent.ts	New helper function to normalize footer cell content into structured format
getColumnContent.ts	New helper function to extract primary and secondary content from columns
DataView.tsx	Added rowActions prop and passed through to child components
DataView.stories.tsx	Added story demonstrating secondary text, updated existing stories to use new rowActions pattern
DataTable.tsx	Implemented rendering for secondary text, row actions, alignment, and footer with structured content
DataTable.test.tsx	Added tests for secondary text rendering, row actions with buttons, and alignment
DataTable.module.scss	New styles for cell/header/footer wrappers with alignment support and secondary text styling
DataCards.tsx	Implemented secondary text rendering, integrated row actions into card layout and menu
DataCards.test.tsx	Added test for secondary text rendering
DataCards.module.scss	Added styles for primary/secondary content, footer secondary text, and menu wrapper
DataViewActions.tsx	New component to render action buttons and menus in row or column orientation
DataViewActions.module.scss	Styles for row and column action layouts

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[serikjensen]

Dropped a comment in slack, we may want to figure out how to navigate the primary and secondary content items. we're going to pair and discuss early next week