prioritise row selected color

[James-Baloyi]

Summary by CodeRabbit

• New Features

  • Data tables now support configurable row heights.

• Bug Fixes

  • Improved visual distinction of selected rows in data tables.
  • Enhanced styling consistency for form elements within selected rows.

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

[coderabbitai]

Walkthrough

Updates CSS styling to ensure selected rows display with proper color precedence over striped rows, adds rowDimensions property initialization with migration support to the data table component, and removes a documentation comment.

Changes

Cohort / File(s)	Summary
Selected Row Styling Priority shesha-reactjs/src/components/reactTable/styles/styles.ts, shesha-reactjs/src/designer-components/dataTable/table/styles.ts	Adds CSS rules to prioritize selected row styling over striped rows (tr-odd.sha-tr-selected). Ensures .sha-stored-files-renderer and .ant-upload-list inherit white text color within selected rows.
Row Dimensions & Migration shesha-reactjs/src/designer-components/dataTable/table/tableComponent.tsx	Initializes new rowDimensions property with default height/minHeight/maxHeight values. Introduces migration step 21 to apply rowDimensions defaults on existing models.
Minor Cleanup shesha-reactjs/src/designer-components/dataTable/table/utils.ts	Removes documentation comment from convertRowStylingBoxToPadding function.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

• CSS selector precedence logic: Verify that tr-odd.sha-tr-selected selectors correctly override striped styling across both conditional branches in styles.ts files
• Migration step ordering: Confirm migration step 21 executes after step 20 and properly defaults rowDimensions without breaking existing configurations
• Color inheritance cascade: Ensure .sha-stored-files-renderer and .ant-upload-list color rules don't inadvertently affect non-selected rows

Possibly related PRs

• James/b/datatable #4323: Both PRs add/modify rowDimensions initialization and migration logic in tableComponent
• fix on row variable exposure for 44 #4313: Both PRs work with rowSelectedBackgroundColor and row styling properties
• Derik/en/2603 #4094: Both PRs modify CSS selectors for selected-row and striped-row precedence in data table styles

Suggested reviewers

• AlexStepantsov

Poem

🐰 A rabbit's ode to the table divine:

Selected rows now shine so bright,
With striped stripes giving way to white,
Dimensions tucked with migration care,
A tidier codebase, perfectly fair! 🎨✨

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 directly reflects the main objective across all modified files - ensuring selected row styling takes precedence over striped row styling.
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

---

📜 Recent review details

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ae9ecfc and 9726590.

📒 Files selected for processing (4)

• shesha-reactjs/src/components/reactTable/styles/styles.ts (1 hunks)
• shesha-reactjs/src/designer-components/dataTable/table/styles.ts (3 hunks)
• shesha-reactjs/src/designer-components/dataTable/table/tableComponent.tsx (2 hunks)
• shesha-reactjs/src/designer-components/dataTable/table/utils.ts (0 hunks)

💤 Files with no reviewable changes (1)

• shesha-reactjs/src/designer-components/dataTable/table/utils.ts

🧰 Additional context used

📓 Path-based instructions (2)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (CodeRabbitReview-Project-Specific-Guidelines.md)

**/*.{ts,tsx}: Eliminate the any type; use unknown type instead for values with unknown types, forcing explicit type checking
Prefer type guards over type casting for type checking
Avoid monolithic types; use discriminated unions with a discriminator property instead
Leverage TypeScript to its full potential as a type system, not merely as a linter

Files:

• shesha-reactjs/src/designer-components/dataTable/table/styles.ts
• shesha-reactjs/src/designer-components/dataTable/table/tableComponent.tsx
• shesha-reactjs/src/components/reactTable/styles/styles.ts

**/*{Component,Editor}.{ts,tsx}

📄 CodeRabbit inference engine (CodeRabbitReview-Project-Specific-Guidelines.md)

**/*{Component,Editor}.{ts,tsx}: Default values must be part of model initialization logic, not in the editor component; controlled editors should follow the standard value and onChange contract
Remove the defaultValue pattern entirely from controlled editor components
Do not use useEffect for resetting values to defaults in controlled editor components; this causes unnecessary re-renders

Files:

• shesha-reactjs/src/designer-components/dataTable/table/tableComponent.tsx

🧠 Learnings (10)

📓 Common learnings

Learnt from: teboho
Repo: shesha-io/shesha-framework PR: 3926
File: shesha-reactjs/src/designer-components/dataTable/tableContext/styles.ts:138-166
Timestamp: 2025-10-02T11:25:33.370Z
Learning: In the shesha-framework repository, the hint popover components (sha-quick-search-hint-popover, sha-table-view-selector-hint-popover, sha-table-pager-hint-popover) in shesha-reactjs/src/designer-components/dataTable/tableContext/styles.ts intentionally use hard-coded color `rgb(214, 214, 214)` with `!important` to impose a specific consistent color across themes, overriding theme tokens by design.

Learnt from: teboho
Repo: shesha-io/shesha-framework PR: 4280
File: shesha-reactjs/src/designer-components/dataTable/tableContext/styles.ts:205-227
Timestamp: 2025-12-02T14:32:10.827Z
Learning: In shesha-reactjs/src/designer-components/dataTable/tableContext/styles.ts, the mockup components (filterButtonMockup and viewSelectorMockup) intentionally use hardcoded colors (#d9d9d9, #fafafa, #8c8c8c) to maintain consistent appearance across themes, overriding theme tokens by design.

📚 Learning: 2025-10-02T11:25:33.370Z

Learnt from: teboho
Repo: shesha-io/shesha-framework PR: 3926
File: shesha-reactjs/src/designer-components/dataTable/tableContext/styles.ts:138-166
Timestamp: 2025-10-02T11:25:33.370Z
Learning: In the shesha-framework repository, the hint popover components (sha-quick-search-hint-popover, sha-table-view-selector-hint-popover, sha-table-pager-hint-popover) in shesha-reactjs/src/designer-components/dataTable/tableContext/styles.ts intentionally use hard-coded color `rgb(214, 214, 214)` with `!important` to impose a specific consistent color across themes, overriding theme tokens by design.

Applied to files:

• shesha-reactjs/src/designer-components/dataTable/table/styles.ts
• shesha-reactjs/src/designer-components/dataTable/table/tableComponent.tsx
• shesha-reactjs/src/components/reactTable/styles/styles.ts

📚 Learning: 2025-12-02T14:32:10.827Z

Learnt from: teboho
Repo: shesha-io/shesha-framework PR: 4280
File: shesha-reactjs/src/designer-components/dataTable/tableContext/styles.ts:205-227
Timestamp: 2025-12-02T14:32:10.827Z
Learning: In shesha-reactjs/src/designer-components/dataTable/tableContext/styles.ts, the mockup components (filterButtonMockup and viewSelectorMockup) intentionally use hardcoded colors (#d9d9d9, #fafafa, #8c8c8c) to maintain consistent appearance across themes, overriding theme tokens by design.

Applied to files:

• shesha-reactjs/src/designer-components/dataTable/table/styles.ts
• shesha-reactjs/src/designer-components/dataTable/table/tableComponent.tsx
• shesha-reactjs/src/components/reactTable/styles/styles.ts

📚 Learning: 2025-10-28T14:21:55.782Z

Learnt from: teboho
Repo: shesha-io/shesha-framework PR: 4084
File: shesha-reactjs/src/components/quickView/styles/styles.ts:41-94
Timestamp: 2025-10-28T14:21:55.782Z
Learning: In shesha-reactjs/src/components/quickView/styles/styles.ts, the quickViewContent styles intentionally use multiple `!important` flags and broad selectors (including spans, form items, inputs, links, and labels) to ensure proper targeting and prevent layout breakage in the quick view component.

Applied to files:

• shesha-reactjs/src/designer-components/dataTable/table/styles.ts
• shesha-reactjs/src/components/reactTable/styles/styles.ts

📚 Learning: 2025-06-12T16:55:57.638Z

Learnt from: teboho
Repo: shesha-io/shesha-framework PR: 3397
File: shesha-reactjs/src/designer-components/charts/bar.tsx:49-52
Timestamp: 2025-06-12T16:55:57.638Z
Learning: For the chart components’ migrators (e.g., BarChartComponent in shesha-reactjs/src/designer-components/charts/bar.tsx), the version 5 step intentionally spreads `{ ...prev, ...defaultConfigFiller }` so that values from `defaultConfigFiller` override any existing properties in `prev`. This reset to new defaults is by design and should not be flagged as an issue.

Applied to files:

• shesha-reactjs/src/designer-components/dataTable/table/styles.ts
• shesha-reactjs/src/designer-components/dataTable/table/tableComponent.tsx
• shesha-reactjs/src/components/reactTable/styles/styles.ts

📚 Learning: 2025-06-26T19:59:22.872Z

Learnt from: teboho
Repo: shesha-io/shesha-framework PR: 3461
File: shesha-reactjs/src/designer-components/charts/settingsFormIndividual.ts:1280-1280
Timestamp: 2025-06-26T19:59:22.872Z
Learning: In shesha-reactjs chart settings forms, the styling panels (border, shadow, background) should not include buttonType-based hidden conditions since charts are not button components. The border configuration should follow the standard component pattern without button-specific restrictions.

Applied to files:

• shesha-reactjs/src/designer-components/dataTable/table/styles.ts
• shesha-reactjs/src/components/reactTable/styles/styles.ts

📚 Learning: 2025-05-28T07:55:21.036Z

Learnt from: teboho
Repo: shesha-io/shesha-framework PR: 3312
File: shesha-reactjs/src/hooks/formComponentHooks.ts:183-192
Timestamp: 2025-05-28T07:55:21.036Z
Learning: In shesha-reactjs formComponentHooks.ts, the background style initialization deliberately sets valid values from properties panel immediately to provide better UX, rather than waiting for the useDeepCompareEffect to run. This intentional pattern prevents a flash of no background and shows the background image immediately when the component renders.

Applied to files:

• shesha-reactjs/src/designer-components/dataTable/table/styles.ts
• shesha-reactjs/src/components/reactTable/styles/styles.ts

📚 Learning: 2025-12-03T09:43:09.622Z

Learnt from: HackGenesis
Repo: shesha-io/shesha-framework PR: 4283
File: shesha-reactjs/src/components/dataTable/index.tsx:881-882
Timestamp: 2025-12-03T09:43:09.622Z
Learning: In the shesha-framework DataTable/ReactTable components as of PR #4283, checkbox visibility is controlled by selectionMode: checkboxes are only shown when selectionMode is 'multiple'. For selectionMode 'single', rows can be selected via clicking without displaying checkbox columns. The useMultiSelect prop calculation reflects this: it evaluates to true only for 'multiple' mode (or when selectionMode is undefined and the legacy useMultiSelect prop is true).

Applied to files:

• shesha-reactjs/src/designer-components/dataTable/table/styles.ts

📚 Learning: 2025-12-02T14:27:56.659Z

Learnt from: teboho
Repo: shesha-io/shesha-framework PR: 4280
File: shesha-reactjs/src/components/tablePager/index.tsx:49-55
Timestamp: 2025-12-02T14:27:56.659Z
Learning: In shesha-reactjs hint Popover components (tablePagerHintPopover, quickSearchHintPopover, tableViewSelectorHintPopover), both `rootClassName` and `classNames.body` must be set to the same style class for the styles to be applied correctly to the different DOM nodes of the Ant Design Popover component.

Applied to files:

• shesha-reactjs/src/designer-components/dataTable/table/styles.ts

📚 Learning: 2025-12-11T11:57:48.398Z

Learnt from: czwe-01
Repo: shesha-io/shesha-framework PR: 4349
File: shesha-reactjs/src/designer-components/columns/styles.ts:3-14
Timestamp: 2025-12-11T11:57:48.398Z
Learning: In the shesha-framework's shesha-reactjs project, when using createStyles to define style hooks (e.g., export const useStyles = createStyles(...)), return an object from the callback with named keys (e.g., { columns }) and access them in components as const { styles } = useStyles(); then read properties via styles.columns. The wrapping behavior is provided by createStyles and should be followed consistently. This pattern applies to style modules under shesha-reactjs/src/designer-components (and similar styling files).

Applied to files:

• shesha-reactjs/src/designer-components/dataTable/table/styles.ts

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: build-attempt

🔇 Additional comments (5)

shesha-reactjs/src/designer-components/dataTable/table/tableComponent.tsx (2)

58-62: LGTM! Proper default initialization for rowDimensions.

The rowDimensions property is correctly initialized with comprehensive defaults (height, minHeight, maxHeight) in the initModel, following the coding guideline that default values must be part of model initialization logic.

---

151-155: LGTM! Migration pattern follows established conventions.

The migration steps correctly provide backward compatibility:

• Step 20 ensures hoverHighlight defaults to true for existing components
• Step 21 ensures rowDimensions exists with minimal default { height: '40px' }

The pattern of providing minimal defaults in migrations while initModel contains full defaults is intentional and consistent with the framework's migration strategy.

Based on learnings, this migration pattern (where migrations set minimal defaults and initModel provides comprehensive defaults) is by design and should not be flagged.

shesha-reactjs/src/designer-components/dataTable/table/styles.ts (1)

62-72: LGTM! Proper CSS precedence for selected rows.

The changes correctly ensure that selected row styling (.sha-tr-selected) always takes priority over striped row styling (.tr-odd) by adding explicit rules for the combined selector .tr-odd.sha-tr-selected. This prevents visual conflicts where striped background colors would override the selected state.

The use of !important is intentional for specificity and aligns with the project's styling patterns.

shesha-reactjs/src/components/reactTable/styles/styles.ts (2)

403-408: LGTM! Proper color inheritance for nested elements in selected rows.

The additional styling for .sha-stored-files-renderer and .ant-upload-list ensures these file upload components maintain white text color when their parent row is selected, providing consistent visual feedback across all cell types.

---

411-415: LGTM! Consistent precedence handling for selected rows.

This rule mirrors the changes in the designer styles file, ensuring that selected odd rows (.trOdd.trSelected) always display with the proper selected state styling, overriding the striped row background. This provides consistent behavior across the table component variants.

---

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.}