feat: migrate to tanstack table by paustint · Pull Request #1782 · jetstreamapp/jetstream

paustint · 2026-06-12T04:53:30Z

Migrate from react data grid to tansatack table to allow much more customization and control of styles and the experience

This unlocks things like multi-cell selection, context menu in header cells, better layout for nested rows, and better SLDS style match

And since react data grid is in never ending beta and has a fair amount of churn, it was a process every time an upgrade was completed since it was never documented

socket-security · 2026-06-12T04:54:34Z

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	@tanstack/react-table@8.21.3

View full report

Copilot

Pull request overview

This PR migrates Jetstream’s UI data tables from react-data-grid to a custom grid built on TanStack Table (@tanstack/react-table), enabling richer interaction (selection, context menus, grouping, nested rows) and tighter SLDS styling control while reducing dependency churn.

Changes:

Replace legacy react-data-grid wrappers (DataTable, DataTree) with a new TanStack-based DataTableV2 grid implementation (virtualized body, sticky header/summary, grouping, editing, context menu support).
Introduce a new grid type system + compatibility shims (rdg-compat) to keep downstream code source-compatible during the cutover.
Port/implement filtering, clipboard, editors, and key renderers (including subquery modal rendering) and add Vitest coverage for core behaviors.

Reviewed changes

Copilot reviewed 60 out of 61 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
pnpm-lock.yaml	Adds TanStack Table dependencies and removes `react-data-grid` lock entries.
package.json	Adds `@tanstack/react-table` and removes `react-data-grid`.
libs/ui/src/lib/data-table/SalesforceRecordDataTable.tsx	Updates Salesforce record table to new column typing + compat types.
libs/ui/src/lib/data-table/grid/renderers/SubqueryRenderer.tsx	New subquery cell renderer + modal nested table (load more/export/reorder).
libs/ui/src/lib/data-table/grid/renderers/CellRenderers.tsx	New cell renderers (generic/boolean/links/actions/selection column).
libs/ui/src/lib/data-table/grid/rdg-compat.ts	Compatibility shim for legacy RDG-imported types/constants.
libs/ui/src/lib/data-table/grid/grid-types.ts	New author-facing grid types + TanStack meta augmentation.
libs/ui/src/lib/data-table/grid/grid-row-utils.ts	Row id derivation + search index + Salesforce URL helpers.
libs/ui/src/lib/data-table/grid/grid-filters.ts	Filtering primitives ported for TanStack filter functions + header UIs.
libs/ui/src/lib/data-table/grid/grid-context.tsx	New grid contexts (filters/subquery/selection/generic/runtime).
libs/ui/src/lib/data-table/grid/grid-constants.ts	Shared constants (keys, menu items, default sizing).
libs/ui/src/lib/data-table/grid/grid-column-utils.tsx	Column definition builders + type-driven renderer/editor wiring.
libs/ui/src/lib/data-table/grid/grid-clipboard.ts	Clipboard/context-menu copy helpers for generic + Salesforce rows.
libs/ui/src/lib/data-table/grid/filters/HeaderFilters.tsx	New header filter popovers (text/number/date/time/set with virtualization).
libs/ui/src/lib/data-table/grid/filterFns.ts	Custom TanStack column/global filter fns matching legacy semantics.
libs/ui/src/lib/data-table/grid/editors/EditorHost.tsx	Floating-ui anchored editor host for inline editing behavior parity.
libs/ui/src/lib/data-table/grid/editors/CellEditors.tsx	Ported inline editors (text/boolean/date/picklist/lookup).
libs/ui/src/lib/data-table/grid/DataTableV2.tsx	New grid component that wires contexts, table state, selection, grouping, etc.
libs/ui/src/lib/data-table/grid/data-table-grid.css	New SLDS-token-based structural styles for the div/ARIA grid.
libs/ui/src/lib/data-table/grid/components/HeaderCell.tsx	Header rendering: sorting, resizing, select-all, filter trigger, context menu.
libs/ui/src/lib/data-table/grid/components/GridSummaryRow.tsx	Pinned summary row rendering beneath the sticky header.
libs/ui/src/lib/data-table/grid/components/GridRow.tsx	Data row rendering with column windowing + colSpan support.
libs/ui/src/lib/data-table/grid/components/GridHeader.tsx	Header group rendering with colSpan + summary row support.
libs/ui/src/lib/data-table/grid/components/GridGroupRow.tsx	Group row rendering (fallback full-width or per-column group cells).
libs/ui/src/lib/data-table/grid/components/GridCell.tsx	Cell rendering plumbing for renderers, selection, focus, and ARIA semantics.
libs/ui/src/lib/data-table/grid/components/GridBody.tsx	Row virtualization + focus management + selection-range plumbing.
libs/ui/src/lib/data-table/grid/components/grid-layout.ts	Sticky “frozen” column layout helpers and grid template builder.
libs/ui/src/lib/data-table/grid/buildColumnDefs.ts	Maps `ColumnWithFilter` into TanStack `ColumnDef` with meta + filtering.
libs/ui/src/lib/data-table/grid/tests/useJetstreamTable.spec.tsx	Adds Vitest coverage for sorting/filtering/global search/ref API.
libs/ui/src/lib/data-table/grid/tests/grid-filters.spec.ts	Adds Vitest coverage for filter primitives and set-value computation.
libs/ui/src/lib/data-table/grid/tests/buildColumnDefs.spec.ts	Adds Vitest coverage for column->ColumnDef mapping and meta.
libs/ui/src/lib/data-table/DataTree.tsx	Replaces RDG tree grid with grouped TanStack grid + expanded bridging.
libs/ui/src/lib/data-table/DataTableSubqueryRenderer.tsx	Re-exports new subquery renderer under legacy module name.
libs/ui/src/lib/data-table/DataTableEditors.tsx	Re-exports new editors under legacy module name.
libs/ui/src/lib/data-table/DataTable.tsx	Replaces RDG `DataTable` with wrapper mapping legacy props to `DataTableV2`.
libs/ui/src/lib/data-table/data-table-types.ts	Re-exports new grid types under legacy types module.
libs/ui/src/lib/data-table/data-table-styles.css	Removes legacy RDG theme/style overrides (no longer applicable).
libs/ui/src/lib/data-table/data-table-context.tsx	Re-exports new grid contexts under legacy context names.
libs/ui/src/lib/data-table/tests/useDataTable.spec.tsx	Removes legacy hook tests tied to RDG-based implementation.
libs/ui/src/index.ts	Exports `rdg-compat` from `@jetstream/ui` for downstream consumers.
libs/shared/ui-core/src/load/LoadRecordsResultsModal.tsx	Migrates column/rowHeight/select column usage to new DataTable contracts.
libs/shared/ui-core/src/index.ts	Adds (duplicated) export during migration; should be deduped.
libs/features/platform-event-monitor/src/PlatformEventMonitorEvents.tsx	Updates imports from RDG types to `@jetstream/ui` compat types.
libs/features/manage-permissions/src/utils/permission-manager-table-utils.tsx	Adapts render/edit handlers and grouping assumptions to new grid props.
libs/features/manage-permissions/src/ManagePermissionsEditorFieldTable.tsx	Updates RowHeightArgs import to new compat types.
libs/features/load-records/src/components/LoadRecordsDuplicateWarning.tsx	Switches `Column` import from RDG to `@jetstream/ui`.
libs/features/load-records/src/components/LoadRecordsDataPreview.tsx	Switches `Column` import from RDG to `@jetstream/ui`.
libs/features/deploy/src/utils/deploy-metadata.utils.tsx	Switches select-column constants to `@jetstream/ui` and adjusts renderers.
libs/features/deploy/src/deploy-metadata-history/DeployMetadataHistoryTableRenderers.tsx	Switches `RenderCellProps` import to `@jetstream/ui`.
libs/features/deploy/src/deploy-metadata-history/DeployMetadataHistoryTable.tsx	Updates row height callback signature for new grid.
libs/features/debug-log-viewer/src/DebugLogViewerTable.tsx	Reimplements “cell click selects row” behavior via per-cell wrappers.
libs/features/create-object-and-fields/src/LoadExistingFieldsModal.tsx	Switches select-column constants to `@jetstream/ui`.
libs/features/automation-control/src/AutomationControlEditorTable.tsx	Updates row height callback signature for new grid.
libs/features/automation-control/src/AutomationControlEditorReviewModal.tsx	Switches `Column` import from RDG to `@jetstream/ui`.
libs/features/automation-control/src/automation-control-table-renderers.tsx	Switches RDG type imports to `@jetstream/ui` compat types.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Migrate from react data grid to tansatack table to allow much more customization and control of styles and the experience This unlocks things like multi-cell selection, context menu in header cells, better layout for nested rows, and better SLDS style match And since react data grid is in never ending beta and has a fair amount of churn, it was a process every time an upgrade was completed since it was never documented

- Added border radius to the first and last cells of the bordered table header. - Improved keyboard navigation for header cells, allowing arrow keys to navigate between header and body rows. - Implemented a mechanism to prevent concurrent saves when using Cmd/Ctrl+Enter for saving modified records. - Updated focus management for actionable cells and header cells to enhance user experience. - Introduced tabIndex management for buttons and checkboxes within the data table to control focus behavior. - Enhanced popover and modal focus handling to ensure smooth navigation and accessibility. - Refactored various components to support the new keyboard navigation model and improve overall accessibility.

…ttributes

socket-security · 2026-06-17T03:48:13Z

Warning

Review the following alerts detected in dependencies.

According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.

Action	Severity	Alert (click "▶" to expand/collapse)
Warn		Obfuscated code: npm `@tanstack/table-core` is 90.0% likely obfuscated Confidence: 0.90 Location: Package overview From: `?` → `npm/@tanstack/react-table@8.21.3` → `npm/@tanstack/table-core@8.21.3` ℹ Read more on: This package \| This alert \| What is obfuscated code? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at `support@socket.dev`. Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment `@SocketSecurity ignore npm/@tanstack/table-core@8.21.3`. You can also ignore all packages with `@SocketSecurity ignore-all`. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report

Copilot

Pull request overview

Copilot reviewed 66 out of 67 changed files in this pull request and generated 2 comments.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

    const handleSaveRecords = async () => {
      try {
-        if (!rows) {
+        if (!rows || isSavingRef.current) {
          return;
        }


+import {
+  ColumnWithFilter,
+  DataTableCellProps,
+  DataTableEditorProps,
+  DataTableGroupCellProps,
+  DataTableHeaderProps,
+  DataTableSummaryCellProps,
+} from './grid-types';


Copilot AI review requested due to automatic review settings June 12, 2026 04:53

Copilot started reviewing on behalf of paustint June 12, 2026 04:53 View session

github-code-quality Bot found potential problems Jun 12, 2026

View reviewed changes

Comment thread libs/ui/src/lib/data-table/grid/__tests__/useJetstreamTable.spec.tsx Fixed

Copilot AI reviewed Jun 12, 2026

View reviewed changes

paustint added 5 commits June 16, 2026 17:50

fix: keyboard navigation when tables appear in modal

df53554

fix: update HeaderFilterButton icon color based on active state

46c7c27

fix(data-table): resolve duplicate export and improve GridCell aria a…

bf84f94

…ttributes

paustint force-pushed the new-data-table branch from dc7a362 to bf84f94 Compare June 17, 2026 03:46

paustint requested a review from Copilot June 17, 2026 03:46

Copilot started reviewing on behalf of paustint June 17, 2026 03:47 View session

Copilot AI reviewed Jun 17, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: migrate to tanstack table#1782

feat: migrate to tanstack table#1782
paustint wants to merge 5 commits into
mainfrom
new-data-table

paustint commented Jun 12, 2026

Uh oh!

socket-security Bot commented Jun 12, 2026 •

edited

Loading

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

socket-security Bot commented Jun 17, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

paustint commented Jun 12, 2026

Uh oh!

socket-security Bot commented Jun 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

socket-security Bot commented Jun 17, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

socket-security Bot commented Jun 12, 2026 •

edited

Loading