WEB-528 Improve the data visualization in Data Tables

[JaySoni1]

Changes Made:

-Redesigned datatable displays with modern card-based layout featuring responsive CSS Grid system, improved spacing, and enhanced visual hierarchy including hover effects, rounded corners, and better color contrast for optimal user experience.
-Fixed datetime formatting issue for system timestamp fields (created_at, updated_at) and improved label formatting logic to handle both snake_case conversion and preserve already-formatted field names in multiple languages.

WEB-528

Before :-

After :-

Summary by CodeRabbit

• New Features

  • Data tables redesigned with Material card layouts for improved visual organization

• Bug Fixes

  • Fixed date/time formatting to align with standard conventions

• Style

  • Added interactive hover effects, enhanced shadows, and responsive design for mobile devices
  • Improved visual indicators for deleted and system-defined data

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Note

.coderabbit.yaml has unrecognized properties

CodeRabbit is using all valid settings from your configuration. Unrecognized properties (listed below) have been ignored and may indicate typos or deprecated fields that can be removed.

⚠️ Parsing warnings (1)

Validation error: Unrecognized key(s) in object: 'pre_merge_checks'

⚙️ Configuration instructions

• Please see the configuration documentation for more information.
• You can also validate your configuration using the online YAML validator.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Walkthrough

Changes include modifying display label transformation logic to only apply when column names contain underscores, updating datetime format tokens to align with Moment.js conventions, and redesigning both multi-row and single-row datatable layouts to use Material card components with enhanced styling and responsive behavior.

Changes

Cohort / File(s)	Summary
Display & Format Logic src/app/core/utils/datatables.ts, src/app/pipes/datetime-format.pipe.ts	toDisplayLabel now only performs snake_case to Title Case transformation for column names containing underscores; datetime format token changed from 'yyyy-MM-ddTHH:mm:ssZ' to 'YYYY-MM-DDTHH:mm:ssZ' for Moment.js alignment
Multi-row Datatable Components src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.*	Replaced plain div-wrapped table with Material card layout; added mat-card and mat-card-content wrappers; introduced checkbox-column and data-row CSS classes; added extensive SCSS styling for table appearance, row hover effects, and column width constraints
Single-row Datatable Components src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.*	Converted column-wise div layout to card-based data display with label-value pairs; added special formatting for created_at, updated_at (as DATETIME), and URL values; introduced MatCard components with responsive grid layout; added new SCSS for card styling, hover effects, and mobile breakpoint (≤768px) with single-column layout; enhanced getColumnType to map timestamp-based columns to DATETIME type

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• WEB-527 Date time format is not being rendered properly in the manage scheduler and cob jobs and data tablep ages #2937: Modifies the same datetime format token change in src/app/pipes/datetime-format.pipe.ts from 'yyyy-MM-ddTHH:mm:ssZ' to 'YYYY-MM-DDTHH:mm:ssZ'.
• WEB-441-fix: display CodeLookup values instead of IDs in datatable view #2896: Directly related modification to src/app/core/utils/datatables.ts toDisplayLabel logic for CODELOOKUP display handling.

Suggested reviewers

• IOhacker
• alberto-art3ch

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'WEB-528 Improve the data visualization in Data Tables' accurately reflects the main changes: redesigned datatable displays with modern card-based layouts, improved spacing, visual hierarchy, and fixed datetime formatting.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (2)

src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.scss (1)

69-73: Consider alternatives to ::ng-deep for future maintainability.

The ::ng-deep selector is deprecated and will be removed in future Angular versions. While it's currently a common workaround for styling Material components, consider using Angular Material's theming API or CSS variables when refactoring in the future.

src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.html (1)

27-27: Consider tracking by a unique column property.

The @for loop currently uses track columnHeader, which tracks the entire object. For better Angular change detection performance, consider tracking by a unique property like columnHeader.columnName:

-@for (columnHeader of dataObject.columnHeaders; track columnHeader; let i = $index) {
+@for (columnHeader of dataObject.columnHeaders; track columnHeader.columnName; let i = $index) {

This prevents unnecessary re-renders if the column header objects are recreated with the same data.

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7b2fe03 and 65fb994.

📒 Files selected for processing (8)

• src/app/core/utils/datatables.ts
• src/app/pipes/datetime-format.pipe.ts
• src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.html
• src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.scss
• src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.ts
• src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.html
• src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.scss
• src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.ts

🧰 Additional context used

📓 Path-based instructions (1)

src/app/**

⚙️ CodeRabbit configuration file

src/app/**: For Angular code: verify component separation, trackBy on *ngFor,
strict type safety, and clean observable patterns.

Files:

• src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.html
• src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.scss
• src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.ts
• src/app/pipes/datetime-format.pipe.ts
• src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.html
• src/app/core/utils/datatables.ts
• src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.scss
• src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.ts

🔇 Additional comments (7)

src/app/core/utils/datatables.ts (1)

202-211: LGTM! Smart refinement to preserve simple column names.

The updated logic now only applies snake_case transformation when an underscore is present, preserving simple names like "id" unchanged. The fallback || columnName ensures robustness if all words are filtered out.

src/app/pipes/datetime-format.pipe.ts (1)

29-29: Good fix! Corrects Moment.js format token.

Changed from 'yyyy-MM-ddTHH:mm:ssZ' to 'YYYY-MM-DDTHH:mm:ssZ' to align with Moment.js conventions (YYYY for 4-digit year). The previous lowercase format was Angular DatePipe syntax, not valid for Moment.js.

src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.ts (1)

19-19: LGTM! Material Card integration.

Added MatCard and MatCardContent imports to support the new card-based layout. Clean integration with no side effects.

Also applies to: 40-41

src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.ts (1)

15-15: LGTM! Material Card integration.

Added MatCard and MatCardContent imports to support the new card-based layout, consistent with the multi-row component changes.

Also applies to: 32-33

src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.html (1)

35-65: LGTM! Clean card-based restructuring.

The table is now wrapped in a Material card with proper structure. The data rendering logic remains unchanged, and the track expression (track datatableColumn) is appropriate since column names are unique strings.

src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.scss (1)

12-67: LGTM! Comprehensive card-based styling.

The new styling enhances visual hierarchy with card container, improved table typography, interactive hover effects, and proper column constraints. The styles are well-organized and support the card-based layout effectively.

src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.html (1)

24-104: LGTM! Modern card-based grid layout.

The redesigned template effectively uses Material card with a responsive grid layout. The data rendering logic for different column types is well-organized with clear @switch cases, and the special handling for created_at/updated_at fields (lines 76-79) correctly checks columnHeader.columnName.

[IOhacker]

LGTM

[JaySoni1]

@IOhacker Thank You For the review