Refactor virtualization core algorithm and add support async context menus

devtools/chrometools/panel.html

@@ -6,6 +6,8 @@
       body {
         font-family: Arial, sans-serif;
         padding: 20px;
+        background: black;
+        color: white;
       }
     </style>
   </head>

examples/playwright.config.ts

@@ -1,6 +1,12 @@
 // playwright.config.ts
 import { PlaywrightTestConfig, devices } from '@playwright/test';
 
+declare global {
+  var __DEV__: boolean;
+}
+// Define __DEV__ globally for the test environment
+global.__DEV__ = !process.env.CI;
+
 const width = 1400;
 const height = 1200;
 

examples/src/pages/demos/new-perf-approach.page.tsx

@@ -1,10 +1,11 @@
-import { TableRenderCellFnParam } from '@src/components/HeadlessTable/ReactHeadlessTableRenderer';
+// import { TableRenderCellFnParam } from '@src/components/HeadlessTable/ReactHeadlessTableRenderer';
 // import { HeadlessTableWithPinnedContainers } from '@src/components/HeadlessTable/HeadlessTableWithPinnedContainers';
 
 import * as React from 'react';
 import { MatrixBrain } from '@infinite-table/infinite-react/components/VirtualBrain/MatrixBrain';
 import { HeadlessTable } from '@src/components/HeadlessTable';
 import { useState } from 'react';
+import { TableRenderCellFnParam } from '@infinite-table/infinite-react/src/components/HeadlessTable/rendererTypes';
 
 export default function App() {
   const renderCell = (param: TableRenderCellFnParam) => {

examples/src/pages/demos/new-perf-approach2.page.tsx

@@ -1,5 +1,5 @@
 import { HeadlessTableWithPinnedContainers } from '@infinite-table/infinite-react/src/components/HeadlessTable/HeadlessTableWithPinnedContainers';
-import { TableRenderCellFnParam } from '@infinite-table/infinite-react/src/components/HeadlessTable/ReactHeadlessTableRenderer';
+import { TableRenderCellFnParam } from '@infinite-table/infinite-react/src/components/HeadlessTable/rendererTypes';
 import { MatrixBrain } from '@infinite-table/infinite-react/src/components/VirtualBrain/MatrixBrain';
 import * as React from 'react';
 import { useState } from 'react';

examples/src/pages/tests/table/basic.page.tsx

@@ -0,0 +1,121 @@
+import * as React from 'react';
+
+import {
+  InfiniteTable,
+  DataSource,
+  InfiniteTableColumn,
+} from '@infinite-table/infinite-react';
+import { CarSale } from '@examples/datasets/CarSale';
+
+const carsales: CarSale[] = [
+  {
+    category: '1 - Category 1 Truck',
+    make: 'Acura',
+    model: 'RDX 2WD',
+    year: 2010,
+    sales: 15,
+    color: 'red',
+    id: 0,
+  },
+  {
+    category: '1 - Category 1 Truck',
+    make: 'Acura',
+    model: 'RDX 4WD',
+    year: 2007,
+    sales: 1,
+    color: 'red',
+    id: 1,
+  },
+  {
+    category: '1 - Category 1 Truck',
+    make: 'Acura',
+    model: 'RDX 4WD',
+    year: 2008,
+    sales: 2,
+    color: 'magenta',
+    id: 2,
+  },
+  {
+    category: '1 - Category 1 Truck',
+    make: 'Acura',
+    model: 'RDX 4WD',
+    year: 2009,
+    sales: 136,
+    color: 'blue',
+    id: 3,
+  },
+  {
+    category: '1 - Category 1 Truck',
+    make: 'Acura',
+    model: 'RDX 4WD',
+    year: 2010,
+    color: 'blue',
+    sales: 30,
+    id: 4,
+  },
+  {
+    category: '1 - Category 1 Truck',
+    make: 'Acura',
+    model: 'TSX',
+    year: 2009,
+    sales: 14,
+    color: 'yellow',
+    id: 5,
+  },
+  {
+    category: '1 - Category 1 Truck',
+    make: 'Acura',
+    model: 'TSX',
+    year: 2010,
+    sales: 14,
+    color: 'red',
+    id: 6,
+  },
+  {
+    category: '1 - Category 1 Truck',
+    make: 'Audi',
+    model: 'A3',
+    year: 2009,
+    sales: 2,
+    color: 'magenta',
+    id: 7,
+  },
+];
+
+(globalThis as any).carsales = carsales;
+
+const columns: Record<string, InfiniteTableColumn<CarSale>> = {
+  make: { field: 'make' },
+  model: { field: 'model' },
+
+  category: {
+    field: 'category',
+  },
+  count: {
+    field: 'sales',
+  },
+  year: {
+    field: 'year',
+    type: 'number',
+  },
+};
+
+export default function DataTestPage() {
+  return (
+    <React.StrictMode>
+      <DataSource<CarSale> data={carsales} primaryKey="id">
+        <InfiniteTable<CarSale>
+          domProps={{
+            style: {
+              margin: '5px',
+              height: 900,
+              border: '1px solid gray',
+              position: 'relative',
+            },
+          }}
+          columns={columns}
+        />
+      </DataSource>
+    </React.StrictMode>
+  );
+}

examples/src/pages/tests/table/context-menus/default.page.tsx

@@ -85,6 +85,7 @@ const columns: InfiniteTablePropColumns<Developer> = {
 
   stack: { field: 'stack', renderMenuIcon: false },
   currency: { field: 'currency' },
+  noMenu: { renderValue: () => 'no cell context menu', header: 'No Menu' },
 };
 
 export default () => {
@@ -109,6 +110,9 @@ export default () => {
     if (column.id === 'age') {
       return [];
     }
+    if (column.id === 'noMenu') {
+      return null;
+    }
     return [
       {
         label: `hi ${value}`,

examples/src/pages/tests/table/context-menus/default.spec.ts

@@ -4,12 +4,12 @@ export default test.describe.parallel('Context Menu', () => {
   test('should work for cells', async ({ page, columnModel, menuModel }) => {
     await page.waitForInfinite();
 
-    let locator = columnModel.getCellLocator({
+    let currencyRow0 = columnModel.getCellLocator({
       rowIndex: 0,
       colId: 'currency',
     });
 
-    await locator.click({
+    await currencyRow0.click({
       button: 'right',
     });
 
@@ -38,5 +38,17 @@ export default test.describe.parallel('Context Menu', () => {
       });
 
     expect(await menuModel.isMenuOpen()).toBe(false);
+
+    // clicking the noMenu column should not open a menu
+    await columnModel
+      .getCellLocator({
+        rowIndex: 0,
+        colId: 'noMenu',
+      })
+      .click({
+        button: 'right',
+      });
+
+    expect(await menuModel.isMenuOpen()).toBe(false);
   });
 });