feat(ui): add TableV2 as Untitled UI migration wrapper for Table component

openmetadata-ui/src/main/resources/ui/package.json

@@ -152,6 +152,7 @@
     "react-papaparse": "^4.1.0",
     "react-quill-new": "^3.4.0",
     "react-reflex": "^4.1.0",
+    "react-resizable": "^3.1.3",
     "react-router-dom": "^6.30.2",
     "reactflow": "^11.10.2",
     "reactjs-localstorage": "^1.0.1",
@@ -208,6 +209,7 @@
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
     "@types/react-grid-layout": "^1.3.5",
+    "@types/react-resizable": "^3.0.8",
     "@types/react-test-renderer": "^17.0.0",
     "@types/reactjs-localstorage": "^1.0.0",
     "@types/recharts": "^1.8.23",

openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/BulkEditEntity.spec.ts

@@ -591,7 +591,7 @@ test.describe('Bulk Edit Entity', () => {
 
       // Verify Details updated
       await expect(
-        page.getByRole('cell', { name: 'Playwright Table column' })
+        page.getByRole('gridcell', { name: 'Playwright Table column' })
       ).toBeVisible();
 
       // Verify Tags

openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/Glossary/GlossaryBulkOperations.spec.ts

@@ -107,9 +107,7 @@ test.describe('Glossary Bulk Operations', () => {
         await termCheckboxes.first().check();
 
         // Look for bulk action toolbar
-        const bulkActionBar = page.locator(
-          '[data-testid="bulk-actions"], .ant-table-selection'
-        );
+        const bulkActionBar = page.locator('[data-testid="bulk-actions"]');
 
         if (await bulkActionBar.isVisible()) {
           await expect(bulkActionBar).toBeVisible();
@@ -156,7 +154,7 @@ test.describe('Glossary Bulk Operations', () => {
       await expect(parentRow).toBeVisible();
 
       // Click on the expand icon within the parent row to show children
-      const expandIcon = parentRow.locator('.ant-table-row-expand-icon');
+      const expandIcon = parentRow.locator('[data-testid="expand-icon"]');
 
       if (await expandIcon.isVisible()) {
         await expandIcon.click();

openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/Glossary/GlossaryP3Tests.spec.ts

@@ -215,7 +215,7 @@ test.describe('Glossary P3 Tests', () => {
       // Search should not crash - either shows results, table, or empty state
       const table = page.getByTestId('glossary-term-table');
       const emptyState = page.getByText(/no.*term.*found|no.*result/i);
-      const tableRows = page.locator('tbody .ant-table-row');
+      const tableRows = page.locator('tbody tr[role="row"]');
 
       // eslint-disable-next-line playwright/no-wait-for-timeout -- search results need time to render after special character input
       await page.waitForTimeout(1000);
@@ -687,7 +687,9 @@ test.describe('Glossary P3 Tests', () => {
       // If there are terms, try to expand some levels
       if (await table.isVisible({ timeout: 2000 }).catch(() => false)) {
         for (let i = 0; i < Math.min(termIds.length, 2); i++) {
-          const expandIcon = page.locator('.ant-table-row-expand-icon').first();
+          const expandIcon = page
+            .locator('[data-testid="expand-icon"]')
+            .first();
 
           if (
             await expandIcon.isVisible({ timeout: 2000 }).catch(() => false)

openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/Glossary/GlossaryPagination.spec.ts

@@ -84,7 +84,7 @@ test.describe('Glossary tests', () => {
 
     await searchResponse;
     const table = page.getByTestId('glossary-terms-table');
-    const filteredTerms = await table.locator('tbody .ant-table-row').count();
+    const filteredTerms = await table.locator('tbody tr[role="row"]').count();
 
     expect(filteredTerms).toBe(1);
     await expect(
@@ -107,7 +107,7 @@ test.describe('Glossary tests', () => {
     await partialSearchResponse;
 
     const partialFilteredTerms = await table
-      .locator('tbody .ant-table-row')
+      .locator('tbody tr[role="row"]')
       .count();
 
     expect(partialFilteredTerms).toBeGreaterThan(0);
@@ -146,7 +146,7 @@ test.describe('Glossary tests', () => {
 
     const nestedTable = page.getByTestId('glossary-terms-table');
     const filteredTerms = await nestedTable
-      .locator('tbody .ant-table-row')
+      .locator('tbody tr[role="row"]')
       .count();
 
     expect(filteredTerms).toBe(5);

openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/Glossary/GlossaryStatusFilterLargeDataset.spec.ts

@@ -119,9 +119,7 @@ test.describe('Glossary Status Filter - Large Dataset', () => {
     allowedStatuses: string[],
     maxRows?: number
   ) => {
-    const rows = page.locator(
-      'tbody.ant-table-tbody > tr:not([aria-hidden="true"])'
-    );
+    const rows = page.locator('tbody.react-aria-TableBody > tr[role="row"]');
     const rowCount = await rows.count();
     const checkCount = maxRows ? Math.min(rowCount, maxRows) : rowCount;
 
@@ -176,9 +174,7 @@ test.describe('Glossary Status Filter - Large Dataset', () => {
 
   // Reusable helper to get row count
   const getRowCount = async (page: Page) => {
-    const rows = page.locator(
-      'tbody.ant-table-tbody > tr:not([aria-hidden="true"])'
-    );
+    const rows = page.locator('tbody.react-aria-TableBody > tr[role="row"]');
 
     return rows.count();
   };
@@ -341,9 +337,7 @@ test.describe('Glossary Status Filter - Large Dataset', () => {
     test('should return matching terms for search query', async ({ page }) => {
       await performSearch(page, 'Term_');
 
-      const rows = page.locator(
-        'tbody.ant-table-tbody > tr:not([aria-hidden="true"])'
-      );
+      const rows = page.locator('tbody.react-aria-TableBody > tr[role="row"]');
       const rowCount = await rows.count();
 
       expect(rowCount).toBeGreaterThan(0);

openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/Glossary/GlossaryStatusFilterNestedTerms.spec.ts

@@ -155,19 +155,6 @@ test.describe('Glossary Status Filter - Nested Terms', () => {
     await page.locator('.ant-table-row').first().waitFor({ state: 'visible' });
   };
 
-  // Helper to collapse a specific term in the table
-  const collapseTerm = async (page: Page, termName: string) => {
-    const termRow = page.locator(`[data-row-key*="${termName}"]`).first();
-    const collapseIcon = termRow.locator(
-      '.ant-table-row-expand-icon.ant-table-row-expand-icon-expanded'
-    );
-
-    if (await collapseIcon.isVisible()) {
-      await collapseIcon.click();
-      await collapseIcon.waitFor({ state: 'detached' }).catch(() => {});
-    }
-  };
-
   // Helper to verify term is visible in table
   const verifyTermVisible = async (page: Page, displayName: string) => {
     const term = page.getByTestId(displayName);
@@ -214,9 +201,7 @@ test.describe('Glossary Status Filter - Nested Terms', () => {
 
   // Helper to get row count
   const getRowCount = async (page: Page) => {
-    const rows = page.locator(
-      'tbody.ant-table-tbody > tr:not([aria-hidden="true"])'
-    );
+    const rows = page.locator('tbody tr[role="row"]:not([aria-hidden="true"])');
 
     return rows.count();
   };

openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/Glossary/LargeGlossaryPerformance.spec.ts

@@ -89,7 +89,7 @@ test.describe('Large Glossary Performance Tests', () => {
       .locator('.glossary-terms-scroll-container [data-testid="loader"]')
       .waitFor({ state: 'detached' });
 
-    const initialTerms = await page.locator('tbody .ant-table-row').count();
+    const initialTerms = await page.locator('tbody tr[role="row"]').count();
 
     expect(initialTerms).toBe(50);
 
@@ -115,7 +115,7 @@ test.describe('Large Glossary Performance Tests', () => {
 
     // Verify more terms are loaded
 
-    const afterScrollTerms = await page.locator('tbody .ant-table-row').count();
+    const afterScrollTerms = await page.locator('tbody tr[role="row"]').count();
 
     expect(afterScrollTerms).toBe(100);
   });
@@ -129,7 +129,7 @@ test.describe('Large Glossary Performance Tests', () => {
     await waitForAllLoadersToDisappear(page);
     // Verify filtered results
 
-    const filteredTerms = await page.locator('tbody .ant-table-row').count();
+    const filteredTerms = await page.locator('tbody tr[role="row"]').count();
 
     expect(filteredTerms).toBeGreaterThan(0);
     expect(filteredTerms).toBeLessThan(20); // Should show Term_5, Term_50-59, etc.
@@ -143,7 +143,7 @@ test.describe('Large Glossary Performance Tests', () => {
 
     // Verify all terms are shown again
 
-    const allTerms = await page.locator('tbody .ant-table-row').count();
+    const allTerms = await page.locator('tbody tr[role="row"]').count();
 
     // 51 because there is one additional row which is not rendered
     expect(allTerms).toBeGreaterThanOrEqual(50);
@@ -326,25 +326,15 @@ test.describe('Large Glossary Performance Tests', () => {
 
     await confirmationDragAndDropGlossary(page, 'Term_10', 'Term_1');
 
-    await expect(
-      page.getByRole('cell', {
-        name: 'Term_10',
-        exact: true,
-      })
-    ).not.toBeVisible();
+    await expect(page.getByTestId('Term_10')).not.toBeVisible();
 
     const termRes = page.waitForResponse('/api/v1/glossaryTerms?*');
 
     // verify the term is moved under the parent term
     await page.getByTestId('expand-collapse-all-button').click();
     await termRes;
 
-    await expect(
-      page.getByRole('cell', {
-        name: 'Term_10',
-        exact: true,
-      })
-    ).toBeVisible();
+    await expect(page.getByTestId('Term_10')).toBeVisible();
   });
 });
 
@@ -421,9 +411,7 @@ test.describe('Large Glossary Child Term Performace', () => {
       page.getByText('Term_1_Child_3', { exact: true })
     ).toBeVisible();
 
-    const initialTerms = await page
-      .locator('tbody .ant-table-row-level-1')
-      .count();
+    const initialTerms = await page.locator('tbody tr[data-level="1"]').count();
 
     // 51 because last row contain button to view next 50 terms
     expect(initialTerms).toBe(51);
@@ -441,9 +429,7 @@ test.describe('Large Glossary Child Term Performace', () => {
       page.getByText('Term_1_Child_54', { exact: true })
     ).toBeVisible();
 
-    const finalTerms = await page
-      .locator('tbody .ant-table-row-level-1')
-      .count();
+    const finalTerms = await page.locator('tbody tr[data-level="1"]').count();
 
     expect(finalTerms).toBe(100);
 

openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/Table.spec.ts

@@ -67,7 +67,11 @@ test.describe(
 
       await waitForAllLoadersToDisappear(page);
 
-      expect(await page.locator('.ant-table-row').count()).toBe(15);
+      expect(
+        await page
+          .locator('tbody.ant-table-tbody > tr:not([aria-hidden="true"])')
+          .count()
+      ).toBe(15);
     });
 
     test('Table search with sorting should work', async ({

openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/TeamsDragAndDrop.spec.ts

@@ -171,9 +171,7 @@ test.describe(
 
         // Verify the team is moved under the business team
         await openDragDropDropdown(page, droppableTeamName);
-        const movedTeam = page.locator(
-          `.ant-table-row-level-1[data-row-key="${teamNameGroup}"]`
-        );
+        const movedTeam = page.locator(`tr[data-row-key="${teamNameGroup}"]`);
 
         await expect(movedTeam).toBeVisible();
       });
@@ -183,17 +181,12 @@ test.describe(
       // Open department team dropdown as it is moved under it from last test
       await openDragDropDropdown(page, teamNameDepartment);
 
-      await dragAndDropElement(
-        page,
-        teamNameGroup,
-        '.ant-table-thead > tr',
-        true
-      );
+      await dragAndDropElement(page, teamNameGroup, 'thead tr', true);
       await confirmationDragAndDropTeam(page, teamNameGroup, 'Organization');
 
       // Verify the team is moved under the table level
       const movedTeam = page.locator(
-        `.ant-table-row-level-0[data-row-key="${teamNameGroup}"]`
+        `tr[data-level="0"][data-row-key="${teamNameGroup}"]`
       );
       await movedTeam.scrollIntoViewIfNeeded();