Fix anchored columns on data table

[Lihlu]

#4314

Summary by CodeRabbit

• Bug Fixes
  • Fixed sticky header behavior in tables with anchored and fixed columns. The table now correctly applies sticky positioning without style conflicts, ensuring fixed columns remain properly positioned during scrolling while maintaining border-radius styling.

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

[coderabbitai]

Walkthrough

The changes restore sticky header functionality in the ReactTable component by conditionally applying sticky positioning and directional offsets only for fixed anchored columns, and by scoping overflow rules to exclude tables with fixed columns, preserving sticky behavior.

Changes

Cohort / File(s)	Summary
Sticky header positioning and overflow fixes shesha-reactjs/src/components/reactTable/index.tsx, shesha-reactjs/src/components/reactTable/styles/styles.ts	Restores conditional sticky header behavior by applying position: sticky with directional offsets only when anchored?.isFixed is true, and scopes overflow: hidden rules to exclude fixed-column tables, preventing position conflicts.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Both changes address the same feature (sticky headers) with straightforward conditional logic
• Limited scope affecting only 2 closely related files within the same component
• Clear intent and focused fixes to restore prior functionality

Possibly related PRs

• Derik/en/2603 #4094: Directly addresses overflow/positioning behavior in ReactTable styling, reversing breaking changes introduced previously
• James/b/datatable #4323: Modifies the same ReactTable files (index.tsx and styles.ts), affecting prop propagation and table styling rules

Suggested reviewers

• James-Baloyi

Poem

🐰 Sticky headers now stay put with care,
Fixed columns anchored right in their square,
Overflow hidden when no fixed friend near,
Positioning preserved, crystal clear!
Hopping forward with styles so tight,
The table layout gets it just right! ✨

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 'Fix anchored columns on data table' directly and clearly summarizes the main changes—restoring sticky header behavior for anchored fixed columns in the ReactTable component.
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: CodeRabbit UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a45b337 and 077d89f.

📒 Files selected for processing (2)

• shesha-reactjs/src/components/reactTable/index.tsx (1 hunks)
• shesha-reactjs/src/components/reactTable/styles/styles.ts (1 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{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/components/reactTable/styles/styles.ts
• shesha-reactjs/src/components/reactTable/index.tsx

🧠 Learnings (7)

📓 Common learnings

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

📚 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/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/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/components/reactTable/styles/styles.ts
• shesha-reactjs/src/components/reactTable/index.tsx

📚 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/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/components/reactTable/styles/styles.ts

📚 Learning: 2025-11-05T07:46:22.081Z

Learnt from: Lihlu
Repo: shesha-io/shesha-framework PR: 4132
File: shesha-reactjs/src/components/layerEditor/modal.tsx:55-57
Timestamp: 2025-11-05T07:46:22.081Z
Learning: In shesha-reactjs layer editor modal (src/components/layerEditor/modal.tsx), the useDeepCompareEffect that syncs items to the parent via onChange should only depend on [items], not [items, onChange]. Adding onChange to the dependency array causes the effect to fire on every parent render and breaks functionality. The guard for optional onChange is needed but the function reference should not be in the dependency array.

Applied to files:

• shesha-reactjs/src/components/reactTable/styles/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 (1)

shesha-reactjs/src/components/reactTable/index.tsx (1)

739-742: LGTM!

The conditional application of sticky positioning for fixed anchored columns correctly aligns with the styles.ts changes to preserve sticky behavior when fixed columns are present.

---

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