implement data updating

examples/src/pages/tests/horizontal-layout/example.page.tsx

@@ -381,7 +381,7 @@ export default () => {
               }
               // return true;
               const res = rowInfo.groupNesting === 2;
-              console.log('repeatWrappedGroupRows', res);
+
               return res;
             }}
             columnDefaultWidth={200}

examples/src/pages/tests/multisort/nestedMultisort.spec.ts

@@ -0,0 +1,82 @@
+import { test, expect } from '@playwright/test';
+import { multisortNested } from '@src/utils/multisort';
+
+const options = {
+  nodesKey: 'children',
+  isLeafNode: (item: any) => !item.children,
+  getNodeChildren: (item: any) => item.children,
+  toKey: (item: any) => item.id,
+};
+export default test.describe.parallel('Nested multisort', () => {
+  test('should sort empty array', () => {
+    expect(multisortNested([], [], options)).toEqual([]);
+  });
+
+  test('should not sort when no sort info provided', () => {
+    expect(multisortNested([], [3, 1, 2], options)).toEqual([3, 1, 2]);
+  });
+
+  test('should sort well', () => {
+    const data = [
+      {
+        id: 1,
+        size: 130,
+        name: 'Documents',
+        children: [
+          {
+            id: 2,
+            size: 110,
+            name: 'Work',
+          },
+          {
+            id: 3,
+            size: 20,
+            name: 'Vacation',
+          },
+        ],
+      },
+      {
+        id: 4,
+        size: 100,
+        name: 'Downloads',
+      },
+    ];
+
+    expect(
+      multisortNested(
+        [
+          {
+            dir: 1,
+            type: 'number',
+            field: 'size',
+          },
+        ],
+        data,
+        options,
+      ),
+    ).toEqual([
+      {
+        id: 4,
+        size: 100,
+        name: 'Downloads',
+      },
+      {
+        id: 1,
+        size: 130,
+        name: 'Documents',
+        children: [
+          {
+            id: 3,
+            size: 20,
+            name: 'Vacation',
+          },
+          {
+            id: 2,
+            size: 110,
+            name: 'Work',
+          },
+        ],
+      },
+    ]);
+  });
+});

examples/src/pages/tests/table/props/data/basic-add-data.page.tsx

@@ -0,0 +1,164 @@
+import * as React from 'react';
+
+import {
+  InfiniteTable,
+  DataSource,
+  InfiniteTableColumn,
+  DataSourceApi,
+} from '@infinite-table/infinite-react';
+import { CarSale } from '@examples/datasets/CarSale';
+import { useState } from 'react';
+
+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>> = {
+  id: { field: 'id', defaultWidth: 80 },
+  make: { field: 'make' },
+  model: { field: 'model' },
+
+  category: {
+    field: 'category',
+  },
+  count: {
+    field: 'sales',
+  },
+  year: {
+    field: 'year',
+    type: 'number',
+  },
+};
+
+export default function DataTestPage() {
+  const [dataSourceApi, setDataSourceApi] =
+    useState<DataSourceApi<CarSale> | null>(null);
+  return (
+    <React.StrictMode>
+      <>
+        <button
+          onClick={() => {
+            dataSourceApi?.insertDataArray(
+              [
+                {
+                  id: 9,
+                  make: 'test',
+                  model: 'test',
+                  category: 'test',
+                  year: 2024,
+                  sales: 1,
+                  color: 'test',
+                },
+                {
+                  id: 10,
+                  make: 'test',
+                  model: 'test',
+                  category: 'test',
+                  year: 2024,
+                  sales: 1,
+                  color: 'test',
+                },
+              ],
+              {
+                position: 'after',
+                primaryKey: 0,
+              },
+            );
+          }}
+        >
+          Insert row after ID=1
+        </button>
+        <DataSource<CarSale>
+          data={carsales}
+          primaryKey="id"
+          onReady={setDataSourceApi}
+        >
+          <InfiniteTable<CarSale>
+            domProps={{
+              style: {
+                margin: '5px',
+                height: 900,
+                border: '1px solid gray',
+                position: 'relative',
+              },
+            }}
+            columns={columns}
+          />
+        </DataSource>
+      </>
+    </React.StrictMode>
+  );
+}

examples/src/pages/tests/table/props/data/basic-add-data.spec.ts

@@ -0,0 +1,46 @@
+import { test, expect } from '@testing';
+
+export default test.describe.parallel('Api', () => {
+  test('insert data', async ({ page, rowModel, tableModel, apiModel }) => {
+    await page.waitForInfinite();
+
+    expect(await rowModel.getRenderedRowCount()).toEqual(8);
+
+    await apiModel.evaluateDataSource((ds) => {
+      ds.insertDataArray(
+        [
+          {
+            id: 9,
+            make: 'test',
+            model: 'test',
+            category: 'test',
+            year: 2024,
+            sales: 1,
+            color: 'test',
+          },
+          {
+            id: 10,
+            make: 'test',
+            model: 'test',
+            category: 'test',
+            year: 2024,
+            sales: 1,
+            color: 'test',
+          },
+        ],
+        {
+          position: 'after',
+          primaryKey: 0,
+        },
+      );
+    });
+
+    expect(await rowModel.getRenderedRowCount()).toEqual(10);
+
+    const idCol = tableModel.withColumn('id');
+
+    expect(await idCol.getValues()).toEqual(
+      [0, 9, 10, 1, 2, 3, 4, 5, 6, 7].map(String),
+    );
+  });
+});

examples/src/pages/tests/table/treegrid/expand-collapse.spec.ts

@@ -36,4 +36,30 @@ export default test.describe('Controlled collapse and expand', () => {
 
     expect(await rowModel.getRenderedRowCount()).toBe(6);
   });
+
+  test('should be able to collapse a hidden node', async ({
+    page,
+    apiModel,
+    rowModel,
+  }) => {
+    await page.waitForInfinite();
+
+    expect(await rowModel.getRenderedRowCount()).toBe(7);
+
+    await apiModel.evaluateDataSource((api) => {
+      api.treeApi.collapseNode(['1']);
+    });
+
+    expect(await rowModel.getRenderedRowCount()).toBe(1);
+
+    await apiModel.evaluateDataSource((api) => {
+      api.treeApi.collapseNode(['1', '3']);
+    });
+
+    await apiModel.evaluateDataSource((api) => {
+      api.treeApi.expandNode(['1']);
+    });
+
+    expect(await rowModel.getRenderedRowCount()).toBe(6);
+  });
 });

examples/src/pages/tests/table/treegrid/toTreeDataArray.spec.ts

@@ -0,0 +1,45 @@
+import { toTreeDataArray } from '@src/utils/groupAndPivot/treeUtils';
+import { test, expect } from '@testing';
+
+export default test.describe('toTreeDataArray', () => {
+  test('works as expected', async ({}) => {
+    const data = toTreeDataArray(
+      [
+        {
+          id: '1',
+          path: ['1'],
+        },
+        {
+          id: '3',
+          path: ['1', '2', '3'],
+        },
+      ],
+      {
+        nodesKey: 'children',
+        pathKey: 'path',
+        emptyGroup: (path, children) => ({
+          id: path.join(','),
+          children,
+        }),
+      },
+    );
+
+    expect(data).toEqual([
+      {
+        id: '1',
+        children: [
+          {
+            id: '1,2',
+            children: [
+              {
+                id: '3',
+                path: ['1', '2', '3'],
+              },
+            ],
+          },
+        ],
+        path: ['1'],
+      },
+    ]);
+  });
+});