James/b/table fixes

[James-Baloyi]

Summary by CodeRabbit

• Bug Fixes

  • Fixed unintended row click triggers when interacting with portal elements (dropdowns, modals, tooltips) and during inline editing.
  • Corrected styling for CRUD operation columns.

• UI Improvements

  • Enhanced table styling with consistent font and padding propagation across body cells.
  • Improved background color rendering and transparency handling for better visual consistency.

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

[coderabbitai]

Walkthrough

This PR updates ReactTable's row double-click handler to pass rowIndex as a parameter, refines styling logic for CRUD-operation columns, extensively refactors table body styling to propagate font customization and padding properties, enhances row-click prevention for portal elements and editing states, and improves background style computation through memoization.

Changes

Cohort / File(s)	Summary
Row Double-Click Handler shesha-reactjs/src/components/reactTable/index.tsx	Updated row double-click handler signature from (data, selectedRow?) to (rowData, rowIndex, selectedRow?), changing how row data and index are passed to evaluation contexts and action invocations.
Row Click Prevention Logic shesha-reactjs/src/components/reactTable/tableRow.tsx	Added portal element detection to short-circuit row clicks when interacting with dropdowns, modals, popovers, drawers, or tooltips; expanded editable element detection and added guard to prevent row clicks during inline edit mode.
Cell Styling Conditions shesha-reactjs/src/components/reactTable/newRowCell.tsx	Changed shaCrudCell style application to be conditional on columnConfig?.columnType === 'crud-operations' rather than always applied.
Table Body Styling & Theming shesha-reactjs/src/components/reactTable/styles/styles.ts	Refactored table body styling to conditionally apply background colors, propagate font customization props (bodyFontFamily, bodyFontSize, bodyFontWeight, bodyFontColor, bodyTextAlign) across body cells and nested selectors, introduce row padding derived from rowPadding, add Ant Design component overrides, and adjust row background transparency defaults.
Background Style Computation shesha-reactjs/src/designer-components/dataTable/table/tableWrapper.tsx	Introduced memoized effectiveBackground computation via getBackgroundStyle to consolidate background image and color precedence, replacing direct usage of props?.background?.color.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

• fix on row variable exposure for 44 #4313: Modifies ReactTable row double-click handler signature and context, directly overlapping with the rowData/rowIndex parameter changes in this PR.
• prioritise row selected color #4373: Modifies reactTable styles for row background and selection rendering, related to the extensive styling refactor in styles.ts.
• Derik/bug/84416 #4256: Modifies row click and double-click handling logic in ReactTable components, related to row interaction enhancements.

Suggested reviewers

• AlexStepantsov
• czwe-01

Poem

🐰 A rabbit hops through rows with glee,
With indices now passed so free,
Portals dodge and styling flows,
Background shines wherever it goes,
Tables refined from tail to nose! 🌱

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title 'James/b/table fixes' is vague and generic, using non-descriptive terms that do not convey meaningful information about the specific changes in the changeset.	Replace with a more descriptive title that summarizes the main changes, such as 'Fix table row double-click handling and styling' or 'Improve table cell styling and row interaction handling'.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

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

🤖 Fix all issues with AI agents

In `@shesha-reactjs/src/components/reactTable/styles/styles.ts`:
- Around line 325-334: The inner IIFE that handles row borders shadows the
outer-scope variable named borderStyles; update the inner variable name (used to
store the result of getBorderStyle(rowBorderStyle, {})) to a non-conflicting
identifier such as computedBorderStyles or localBorderStyles and adjust its
usage in the subsequent Object.entries(...).map(...) chain so references to the
inner result no longer reuse the outer borderStyles name; this change should be
made within the block that references rowBorderStyle, rowBorder and
getBorderStyle to preserve behavior while eliminating the shadowing.
- Around line 339-418: Repeated body font style template across useMainStyles
makes maintenance hard; add a helper function (e.g., getBodyFontStyles(important
= false)) inside useMainStyles after destructuring tableClassNames that returns
the concatenated font CSS for
bodyFontFamily/bodyFontSize/bodyFontWeight/bodyFontColor/bodyTextAlign with
optional " !important", then replace each repeated inline template block
(selectors like .${td}, .sha-data-cell, .sha-form-cell, .sha-form-cell
.ant-form-item-control-input-content, .ant-select-selection-item / .ant-input /
.sha-data-cell input etc., and .sha-input inner input) with a single call to
${getBodyFontStyles(true)} or ${getBodyFontStyles()} as appropriate to preserve
existing specificity.

[coderabbitai]

🧹 Nitpick | 🔵 Trivial

Variable shadowing: borderStyles shadows the outer-scope variable.

The variable borderStyles on line 328 shadows the borderStyles defined on line 140. While this works due to IIFE scoping, it reduces readability and could cause confusion during maintenance.

♻️ Suggested rename

             ${(() => {
               // Prefer rowBorderStyle over rowBorder for full border control
               if (rowBorderStyle) {
-                const borderStyles = getBorderStyle(rowBorderStyle, {});
-                return Object.entries(borderStyles)
+                const rowBorderStyles = getBorderStyle(rowBorderStyle, {});
+                return Object.entries(rowBorderStyles)
                   .map(([key, value]) => `${key.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${value};`)
                   .join(' ');
               }
               return rowBorder ? `border: ${rowBorder};` : '';
             })()}

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	${(() => {
	// Prefer rowBorderStyle over rowBorder for full border control
	if (rowBorderStyle) {
	const borderStyles = getBorderStyle(rowBorderStyle, {});
	return Object.entries(borderStyles)
	.map(([key, value]) => `${key.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${value};`)
	.join(' ');
	}
	return rowBorder ? `border: ${rowBorder};` : '';
	})()}
	${(() => {
	// Prefer rowBorderStyle over rowBorder for full border control
	if (rowBorderStyle) {
	const rowBorderStyles = getBorderStyle(rowBorderStyle, {});
	return Object.entries(rowBorderStyles)
	.map(([key, value]) => `${key.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${value};`)
	.join(' ');
	}
	return rowBorder ? `border: ${rowBorder};` : '';
	})()}

🤖 Prompt for AI Agents

In `@shesha-reactjs/src/components/reactTable/styles/styles.ts` around lines 325 -
334, The inner IIFE that handles row borders shadows the outer-scope variable
named borderStyles; update the inner variable name (used to store the result of
getBorderStyle(rowBorderStyle, {})) to a non-conflicting identifier such as
computedBorderStyles or localBorderStyles and adjust its usage in the subsequent
Object.entries(...).map(...) chain so references to the inner result no longer
reuse the outer borderStyles name; this change should be made within the block
that references rowBorderStyle, rowBorder and getBorderStyle to preserve
behavior while eliminating the shadowing.

[coderabbitai]

🧹 Nitpick | 🔵 Trivial

Consider extracting repeated font style logic into a helper.

The same font styling properties (bodyFontFamily, bodyFontSize, bodyFontWeight, bodyFontColor, bodyTextAlign) are repeated across 10+ selectors (lines 340-346, 349-357, 360-366, 369-381, 384-391, 394-401, 404-417). This creates maintenance overhead when font properties need to change.

♻️ Suggested refactor: Extract a helper function

// Add this helper near the top of useMainStyles, after destructuring tableClassNames
const getBodyFontStyles = (important = false) => {
  const imp = important ? ' !important' : '';
  return `
    ${bodyFontFamily ? `font-family: ${bodyFontFamily}${imp};` : ''}
    ${bodyFontSize ? `font-size: ${bodyFontSize}${imp};` : ''}
    ${bodyFontWeight ? `font-weight: ${bodyFontWeight}${imp};` : ''}
    ${bodyFontColor ? `color: ${bodyFontColor}${imp};` : ''}
    ${bodyTextAlign ? `text-align: ${bodyTextAlign}${imp};` : ''}
  `;
};

// Then replace repeated blocks with:
.sha-data-cell,
.sha-form-cell {
  ${getBodyFontStyles(true)}
}

🤖 Prompt for AI Agents

In `@shesha-reactjs/src/components/reactTable/styles/styles.ts` around lines 339 -
418, Repeated body font style template across useMainStyles makes maintenance
hard; add a helper function (e.g., getBodyFontStyles(important = false)) inside
useMainStyles after destructuring tableClassNames that returns the concatenated
font CSS for
bodyFontFamily/bodyFontSize/bodyFontWeight/bodyFontColor/bodyTextAlign with
optional " !important", then replace each repeated inline template block
(selectors like .${td}, .sha-data-cell, .sha-form-cell, .sha-form-cell
.ant-form-item-control-input-content, .ant-select-selection-item / .ant-input /
.sha-data-cell input etc., and .sha-input inner input) with a single call to
${getBodyFontStyles(true)} or ${getBodyFontStyles()} as appropriate to preserve
existing specificity.