update docs

Author: radubrehar

.github/workflows/rebuild-website.yml

@@ -29,6 +29,7 @@ jobs:
       GITHUB_PAT: ${{ secrets.DEPLOY_GITHUB_TOKEN }}
       READ_GITHUB_ISSUES_TOKEN: ${{ secrets.READ_GITHUB_ISSUES_TOKEN }}
       NEXT_PUBLIC_INFINITE_LICENSE_KEY: ${{ secrets.NEXT_PUBLIC_INFINITE_LICENSE_KEY }}
+      NEXT_PUBLIC_INFINITE_ALLOW_CANARY_IN_DOCS: ${{ secrets.NEXT_PUBLIC_INFINITE_ALLOW_CANARY_IN_DOCS }}
       NEXT_PUBLIC_PADDLE_SUBSCRIPTION_PLAIN_ID: ${{ secrets.NEXT_PUBLIC_PADDLE_SUBSCRIPTION_PLAIN_ID }}
       NEXT_PUBLIC_PADDLE_VENDOR_ID: ${{ secrets.NEXT_PUBLIC_PADDLE_VENDOR_ID }}
       NEXT_PUBLIC_PADDLE_VOLUME_DISCOUNT_TEST_3_LINK: ${{ secrets.NEXT_PUBLIC_PADDLE_VOLUME_DISCOUNT_TEST_3_LINK }}

examples/src/pages/tests/table/props/data/use-data-source-state.page.tsx

@@ -0,0 +1,147 @@
+import * as React from 'react';
+
+import {
+  InfiniteTable,
+  DataSource,
+  InfiniteTableColumn,
+  useDataSourceState,
+  DataSourceState,
+  DataSourceProps,
+} 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',
+  },
+};
+
+function AppGrid() {
+  const dataArrayLength = useDataSourceState(
+    (state: DataSourceState<CarSale>) => state.dataArray.length,
+  );
+  return (
+    <div>
+      <p data-name="test">Showing {dataArrayLength} rows.</p>
+      <InfiniteTable<CarSale>
+        debugId="test"
+        domProps={{
+          style: {
+            margin: '5px',
+            height: 900,
+            border: '1px solid gray',
+            position: 'relative',
+          },
+        }}
+        columns={columns}
+      />
+    </div>
+  );
+}
+
+const groupRowsState: DataSourceProps<CarSale>['defaultGroupRowsState'] = {
+  expandedRows: true,
+  collapsedRows: [[2010]],
+};
+
+export default function DataTestPage() {
+  return (
+    <React.StrictMode>
+      <DataSource<CarSale>
+        data={carsales}
+        primaryKey="id"
+        defaultGroupBy={[{ field: 'year' }]}
+        defaultGroupRowsState={groupRowsState}
+      >
+        <AppGrid />
+      </DataSource>
+    </React.StrictMode>
+  );
+}

examples/src/pages/tests/table/props/data/use-data-source-state.spec.ts

@@ -0,0 +1,22 @@
+import { test, expect } from '@testing';
+
+export default test.describe.parallel('DataSource hook', () => {
+  test('should properly update component when state changes', async ({
+    page,
+    rowModel,
+  }) => {
+    await page.waitForInfinite();
+
+    const p = page.locator('p[data-name="test"]');
+
+    expect(await p.innerText()).toBe('Showing 9 rows.');
+
+    expect(await rowModel.getRenderedRowCount()).toBe(9);
+
+    await rowModel.toggleGroupRow(0);
+
+    expect(await p.innerText()).toBe('Showing 12 rows.');
+
+    expect(await rowModel.getRenderedRowCount()).toBe(12);
+  });
+});