improvement (dataTable): Optimize IntersectionObserver recreation

[paanSinghCoder]

Description

• improvement: Optimize IntersectionObserver recreation

  • The observer was recreated on every load because the callback depended on loadMoreData and isLoading. The callback now reads those from refs and has no deps, so the observer is only recreated when mode or rows.length changes.

  No changes:

• Improve sticky column CSS

  • We do not support sticky columns yet. Needs discussion.

Type of Change

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update
• Refactor (no functional changes, no bug fixes just code improvements)
• Chore (changes to the build process or auxiliary tools and libraries such as documentation generation)
• Style (changes that do not affect the meaning of the code (white-space, formatting, etc))
• Test (adding missing tests or correcting existing tests)
• Improvement (Improvements to existing code)
• Other (please specify)

How Has This Been Tested?

[Describe the tests that you ran to verify your changes]

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation (.mdx files)
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works

Screenshots (if appropriate):

[Add screenshots here]

Related Issues

[Link any related issues here using #issue-number]

Summary by CodeRabbit

• Bug Fixes

  • Improved data table stability and performance with enhanced IntersectionObserver lifecycle management to prevent unnecessary recreations and ensure consistent behavior during load-more operations.

• Refactor

  • Strengthened type safety for table column definitions across data table components for better type consistency.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
apsara	Ready	Preview, Comment	Mar 10, 2026 0:05am

[coderabbitai]

📝 Walkthrough

Walkthrough

Updates DataTableColumnDef type parameters to tighten generic typing across table components. Refactors IntersectionObserver lifecycle in content.tsx using ref-backed callbacks to stabilize observer management and prevent unnecessary recreations. Applies CSS formatting normalizations to the data-table module styles.

Changes

Cohort / File(s)	Summary
Type Definition Tightening packages/raystack/components/data-table/components/content.tsx, packages/raystack/components/data-table/components/virtualized-content.tsx	Updated DataTableColumnDef generic type casting from <unknown, unknown> to <TData, unknown>, aligning row data types with column definitions.
Observer Lifecycle Refactoring packages/raystack/components/data-table/components/content.tsx	Replaced inline observer callbacks with stable ref-backed mechanism (loadMoreDataRef, isLoadingRef). Enhanced IntersectionObserver lifecycle with disconnect/clear logic before recreation and added lastRow validation checks.
CSS Formatting packages/raystack/components/data-table/data-table.module.css	Normalized CSS padding shorthand formatting, adjusted spacing, and simplified selector syntax. Note: Potential syntax issue with extra closing brace at end of file requires verification.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~30 minutes

Possibly related issues

• [DataTable] Optimize IntersectionObserver, fix index keys, and improve sticky columns #612: Addresses the same IntersectionObserver lifecycle optimization concerns and DataTableColumnDef typing improvements across data-table components.

Suggested reviewers

• rohanchkrabrty

Poem

🐰 Refs now hold the callbacks tight,
Observers dance with cleaner flight,
No more loops that needlessly recreate,
Type safety sealed—your table's great!
CSS styled with spacing care,
A rabbit's code, beyond compare! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main optimization change: stabilizing IntersectionObserver recreation by eliminating unnecessary re-creations when callbacks change.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

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

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch improvement/datat-table

---

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