Merge branch 'fix/fix-virtualization' into dev

Author: radubrehar

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/mapped-cells.spec.ts

@@ -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/basic.page.tsx

@@ -4,7 +4,6 @@ import {
   InfiniteTable,
   DataSource,
   DataSourcePropCellSelection_MultiCell,
-  RowSelectionState,
 } from '@infinite-table/infinite-react';
 
 import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react';
@@ -28,7 +27,7 @@ type Developer = {
 };
 
 const dataSource = () => {
-  return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/developers100')
+  return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/developers1k')
     .then((r) => r.json())
     .then((data: Developer[]) => data);
 };
@@ -71,12 +70,6 @@ export default function GroupByExample() {
 
   return (
     <>
-      <div>
-        Selected{' '}
-        {cellSelection instanceof RowSelectionState
-          ? cellSelection.getSelectedCount()
-          : false}
-      </div>
       <DataSource<Developer>
         primaryKey="id"
         data={dataSource}