[DataTable] Optimize IntersectionObserver, fix index keys, and improve sticky columns

[ravisuhag]

Summary

DataTable wraps TanStack React Table with virtual scrolling and sticky columns. Several type safety and performance improvements can be made.

Improvements

2. Optimize IntersectionObserver recreation

The IntersectionObserver is recreated whenever rows.length changes. It should only be recreated when the root element or threshold changes, not on data changes.

4. Replace array index keys in dynamic lists

Array indices used as keys in sortable/filterable rows can cause rendering issues when rows are reordered.

5. Improve sticky column CSS

Sticky column positioning uses inline styles with hardcoded calculations. Consider a more maintainable approach.

Moved to Cross-Cutting Issues

The following items have been moved to cross-cutting issues that address them across all components:

• TypeScript strictness (TypeScript strictness: eliminate any, @ts-ignore, and export prop types #675)

Files

• packages/raystack/raystack/components/data-table/

[paanSinghCoder]

Scope:

• Remove unsafe type casting - Dev
• Optimize IntersectionObserver recreation - Dev
• Memoize column definitions - Dev
• Replace array index keys in dynamic lists - Dev
• Improve sticky column CSS - [Design - We do not currently support sticky columns]

[paanSinghCoder]

1. Navbar, Filters and table alignment is not proper. PR-688
   padding: var(--rs-space-3) var(--rs-space-7) var(--rs-space-3) var(--rs-space-5); change this to padding: var(--rs-space-3) 0;

2. Grouping PR-686

• Anchor on grouping scroll.
• Added a stickyGroupHeader  prop

3. Table grouping section alignment is not there. PR-688

• Unified the padding in Table and DatatTable both - padding: var(--rs-space-3);

4. Remove unsafe type casting PR-687

5. Optimize IntersectionObserver recreation PR-685

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

6. Memoize column definitions PR-688

• Not memoizing columns inside DataTable because it won’t help when the parent passes a new array each render. consumers should pass a stable columns reference (e.g. via useMemo) instead, which is the usual pattern.
  Added this as suggestion in the docs.

7. Replace array index keys in dynamic lists PR-690

• Added getRowKey prop.

8. Improve sticky column CSS

• Design - We do not currently support sticky columns

9. Filters design does not match design spec

• It was fixed earlier