feat(ui): add TableV2 component as Untitled UI / React Aria migration wrapper#26716
feat(ui): add TableV2 component as Untitled UI / React Aria migration wrapper#26716harsh-vador wants to merge 2 commits intomainfrom
Conversation
harsh-vador
added
UI
![gitar-bot[bot]](https://avatars.githubusercontent.com/in/827041?s=60&v=4){kind=small}
| export function getColumnStickyStyle( | ||
| fixed: ColumnType<unknown>['fixed'], | ||
| zIndex: number | ||
| ): React.CSSProperties { | ||
| if (fixed === 'left') { | ||
| return { background: 'white', left: 0, position: 'sticky', zIndex }; | ||
| } | ||
| if (fixed === 'right') { | ||
| return { background: 'white', position: 'sticky', right: 0, zIndex }; | ||
| } | ||
|
|
||
| return {}; | ||
| } |
There was a problem hiding this comment.
⚠️ Bug: getColumnStickyStyle assumes at most one fixed column per side
The getColumnStickyStyle utility always uses left: 0 for fixed='left' and right: 0 for fixed='right' (lines 130-134). The JSDoc comment acknowledges this limitation, but if a consumer passes multiple columns with fixed='left', they will all stack at left: 0 and overlap each other. Since this is a migration wrapper aiming for AntD API compatibility, and AntD correctly computes cumulative offsets for multiple fixed columns, this silent visual breakage could be surprising.
Suggested fix:
Consider computing cumulative offsets based on the widths of preceding fixed columns. For example, pass the column index and column definitions to compute the left/right offset dynamically:
export function getColumnStickyStyle(
columns: ColumnType<unknown>[],
colIndex: number,
zIndex: number
): React.CSSProperties {
const col = columns[colIndex];
if (col.fixed === 'left') {
const offset = columns.slice(0, colIndex)
.filter(c => c.fixed === 'left')
.reduce((sum, c) => sum + (Number(c.width) || 0), 0);
return { background: 'white', left: offset, position: 'sticky', zIndex };
}
// similar for 'right' in reverse
}
Was this helpful? React with 👍 / 👎 | Reply gitar fix to apply this suggestion
Jest test CoverageUI tests summary
|
🟡 Playwright Results — all passed (22 flaky)✅ 3108 passed · ❌ 0 failed · 🟡 22 flaky · ⏭️ 207 skipped
🟡 22 flaky test(s) (passed on retry)
How to debug locally# Download playwright-test-results-<shard> artifact and unzip
npx playwright show-trace path/to/trace.zip # view trace |
Code Review
|
| Auto-apply | Compact |
|
|
Was this helpful? React with 👍 / 👎 | Gitar
|
1 participant
Describe your changes:
Fixes 3271
Summary
Introduces
TableV2as a standalone migration wrapper that renders tables via@openmetadata/ui-core-components(React Aria + Untitled UI) instead of Ant Design — with zero consumer changes in this PR.TableV2.tsx,TableV2.interface.ts, andTableV2Utils.tsas new files alongside the existingTable.tsxTableComponentProps<T>interface so consumers can swap imports with no API changesTable.interface.tswithcellClassName,dragAndDropHooks, anddata-testidprops needed by the new renderer@untitledui/iconsdependency and updatestable.lesswith TableV2-specific drop-target stylesNo existing component is migrated to use
TableV2in this PR — consumer migrations will follow in separate PRs.What's supported
Known limitations (v1)
expandable.expandedRowRendernot supported (only tree-based children expansion)components(AntD custom cell/header renderer overrides) accepted but ignoredshowHeader={false}not implementedrowSelection.getCheckboxPropsignoredonChangeonly fires for sort actions (not for pagination/filter side effects)Files changed
TableV2.tsxTableV2.interface.tsFlatRow<T>,AriaSelection,AriaSortDescriptortypesTableV2Utils.tsflattenTreeRows,resolveCellValue,resolveColumnTitle,getColumnStickyStyleTable.interface.tscellClassName,dragAndDropHooks,data-testidtable.lesspackage.json/yarn.lock@untitledui/iconsdependencyScreen.Recording.2026-03-10.at.5.26.33.PM.mov
Screen.Recording.2026-03-04.at.1.07.58.PM.mov
Type of change:
Checklist:
Fixes <issue-number>: <short explanation>