add docs on disabled rows

.cursorignore

@@ -0,0 +1,8 @@
+# Add directories or file patterns to ignore during indexing (e.g. foo/ or *.csv)
+node_modules
+/www/dataserver/data
+.next
+.env.local
+dist
+out
+.contentlayer

www/content/docs/learn/rows/custom-rendering-for-disabled-rows-example.page.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+
+import {
+  DataSource,
+  DataSourceApi,
+  DataSourceData,
+  InfiniteTable,
+  InfiniteTablePropColumns,
+} from '@infinite-table/infinite-react';
+
+type Developer = {
+  id: number;
+  firstName: string;
+  lastName: string;
+
+  currency: string;
+  preferredLanguage: string;
+  stack: string;
+  canDesign: 'yes' | 'no';
+
+  salary: number;
+};
+
+const data: DataSourceData<Developer> = () => {
+  return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers1k-sql?`)
+    .then((r) => r.json())
+    .then((data: Developer[]) => data);
+};
+
+const columns: InfiniteTablePropColumns<Developer> = {
+  id: {
+    field: 'id',
+    type: 'number',
+    defaultWidth: 100,
+  },
+  salary: {
+    defaultFilterable: true,
+    field: 'salary',
+    type: 'number',
+  },
+
+  firstName: {
+    field: 'firstName',
+    renderValue: ({ rowInfo, value }) => {
+      return `${value} ${rowInfo.rowDisabled ? '🚫' : ''}`;
+    },
+  },
+  stack: { field: 'stack' },
+  currency: { field: 'currency' },
+};
+
+export default () => {
+  const [dataSourceApi, setDataSourceApi] =
+    React.useState<DataSourceApi<Developer>>();
+  return (
+    <>
+      <button
+        onClick={() => {
+          dataSourceApi?.enableAllRows();
+        }}
+      >
+        Enable all rows
+      </button>
+      <button
+        onClick={() => {
+          dataSourceApi?.disableAllRows();
+        }}
+      >
+        Disable all rows
+      </button>
+      <DataSource<Developer>
+        onReady={setDataSourceApi}
+        data={data}
+        primaryKey="id"
+        defaultRowDisabledState={{
+          enabledRows: [1, 2, 3, 5],
+          disabledRows: true,
+        }}
+      >
+        <InfiniteTable<Developer>
+          columnDefaultWidth={120}
+          columnMinWidth={50}
+          columns={columns}
+          keyboardNavigation="row"
+        />
+      </DataSource>
+    </>
+  );
+};

www/content/docs/learn/rows/disabled-rows.page.md

@@ -0,0 +1,78 @@
+---
+title: Disabled Rows
+---
+
+Disabling rows allows you to have some rows that are not selectable, not clickable, not reacheable via keyboard navigation and other interactions.
+
+The `DataSource` manages the disabled state of rows, via the <DPropLink name="defaultRowDisabledState" /> (uncontrolled) prop and <DPropLink name="rowDisabledState" /> (controlled) prop.
+
+```tsx
+<DataSource<DATA_TYPE>
+  idProperty="id"
+  data={[]}
+  defaultRowDisabledState={{
+    enabledRows: true,
+    disabledRows: ['id1', 'id4', 'id5']
+  }}
+/>
+  <InfiniteTable<DATA_TYPE>
+    {/* ... */}
+  />
+</DataSource>
+```
+
+<Note>
+
+In addition to using the <DPropLink name="defaultRowDisabledState" />/<DPropLink name="rowDisabledState" /> props, you can also specify the <DPropLink name="isRowDisabled" /> function prop, which overrides those other props and ultimately determines whether a row is disabled or not.
+
+</Note>
+
+<Sandpack title="Specify some rows as initially disabled">
+
+```tsx file="initialRowDisabledState-example.page.tsx"
+```
+
+</Sandpack>
+
+## Using disabled rows while rendering
+
+When rendering a cell, you have access to the row disabled state - the <TypeLink name="InfiniteTableRowInfo" /> type has a `rowDisabled` property which is true if the row is disabled.
+
+<Sandpack title="Using the row disabled state while rendering">
+
+<Description>
+  This example uses custom rendering for the `firstName` column to render an emoji for disabled rows.
+</Description>
+
+```tsx file="custom-rendering-for-disabled-rows-example.page.tsx"
+```
+
+</Sandpack>
+
+## Using the API to enable/disable rows
+
+You can use the `DataSourceApi` to enable or disable rows programmatically.
+
+<DApiLink name="setRowEnabled" />
+
+```tsx
+dataSourceApi.setRowEnabled(rowId, enabled);
+
+```
+
+<DApiLink name="setRowEnabledAt" />
+
+```tsx
+dataSourceApi.setRowEnabledAt(rowIndex, enabled);
+```
+
+<Sandpack title="Using the API to enable/disable rows">
+
+<Description>
+Use the context menu on each row to toggle the disabled state of the respective row.
+</Description>
+
+```tsx file="using-api-to-disable-rows-example.page.tsx"
+```
+
+</Sandpack>

www/content/docs/learn/rows/initialRowDisabledState-example.page.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+
+import {
+  DataSource,
+  DataSourceData,
+  InfiniteTable,
+  InfiniteTablePropColumns,
+} from '@infinite-table/infinite-react';
+
+type Developer = {
+  id: number;
+  firstName: string;
+  lastName: string;
+
+  currency: string;
+  preferredLanguage: string;
+  stack: string;
+  canDesign: 'yes' | 'no';
+
+  salary: number;
+};
+
+const data: DataSourceData<Developer> = () => {
+  return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers1k-sql?`)
+    .then((r) => r.json())
+    .then((data: Developer[]) => data);
+};
+
+const columns: InfiniteTablePropColumns<Developer> = {
+  id: {
+    field: 'id',
+    type: 'number',
+    defaultWidth: 100,
+  },
+  salary: {
+    defaultFilterable: true,
+    field: 'salary',
+    type: 'number',
+  },
+
+  firstName: {
+    field: 'firstName',
+  },
+  stack: { field: 'stack' },
+  currency: { field: 'currency' },
+};
+
+export default () => {
+  return (
+    <>
+      <DataSource<Developer>
+        data={data}
+        primaryKey="id"
+        defaultRowDisabledState={{
+          enabledRows: true,
+          disabledRows: [1, 3, 4, 5],
+        }}
+      >
+        <InfiniteTable<Developer>
+          columnDefaultWidth={120}
+          columnMinWidth={50}
+          columns={columns}
+          keyboardNavigation="row"
+        />
+      </DataSource>
+    </>
+  );
+};

www/content/docs/learn/rows/using-api-to-disable-rows-example.page.tsx

@@ -0,0 +1,125 @@
+import * as React from 'react';
+
+import {
+  DataSource,
+  DataSourceApi,
+  DataSourceData,
+  InfiniteTable,
+  InfiniteTablePropColumns,
+} from '@infinite-table/infinite-react';
+
+type Developer = {
+  id: number;
+  firstName: string;
+  lastName: string;
+
+  currency: string;
+  preferredLanguage: string;
+  stack: string;
+  canDesign: 'yes' | 'no';
+
+  salary: number;
+};
+
+const data: DataSourceData<Developer> = () => {
+  return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers1k-sql?`)
+    .then((r) => r.json())
+    .then((data: Developer[]) => data);
+};
+
+const columns: InfiniteTablePropColumns<Developer> = {
+  id: {
+    field: 'id',
+    type: 'number',
+    defaultWidth: 100,
+  },
+  salary: {
+    defaultFilterable: true,
+    field: 'salary',
+    type: 'number',
+  },
+
+  firstName: {
+    field: 'firstName',
+    renderValue: ({ rowInfo, value }) => {
+      return `${value} ${rowInfo.rowDisabled ? '🚫' : ''}`;
+    },
+  },
+  stack: { field: 'stack' },
+  currency: { field: 'currency' },
+};
+
+export default () => {
+  const [dataSourceApi, setDataSourceApi] =
+    React.useState<DataSourceApi<Developer>>();
+  return (
+    <>
+      <button
+        onClick={() => {
+          dataSourceApi?.enableAllRows();
+        }}
+      >
+        Enable all rows
+      </button>
+      <button
+        onClick={() => {
+          dataSourceApi?.disableAllRows();
+        }}
+      >
+        Disable all rows
+      </button>
+      <DataSource<Developer>
+        onReady={setDataSourceApi}
+        data={data}
+        primaryKey="id"
+        defaultRowDisabledState={{
+          enabledRows: [1, 2, 3, 5],
+          disabledRows: true,
+        }}
+      >
+        <InfiniteTable<Developer>
+          getCellContextMenuItems={({ rowInfo }, { dataSourceApi }) => {
+            return {
+              columns: [{ name: 'label' }],
+              items: [
+                {
+                  label: 'Disable row',
+                  key: 'disable-row',
+                  disabled: rowInfo.rowDisabled,
+                  onAction: ({ hideMenu }) => {
+                    dataSourceApi.setRowEnabledAt(rowInfo.indexInAll, false);
+                    hideMenu();
+                  },
+                },
+                {
+                  label: 'Enable row',
+                  key: 'enable-row',
+                  disabled: !rowInfo.rowDisabled,
+                  onAction: ({ hideMenu }) => {
+                    dataSourceApi.setRowEnabled(rowInfo.id, true);
+                    hideMenu();
+                  },
+                },
+                {
+                  label: 'Toggle row disable/enable',
+                  key: 'toggle-row-disable-enable',
+                  onAction: ({ hideMenu }) => {
+                    dataSourceApi.setRowEnabled(
+                      rowInfo.id,
+                      rowInfo.rowDisabled,
+                    );
+                    hideMenu();
+                  },
+                },
+              ],
+            };
+          }}
+          columnDefaultWidth={120}
+          columnMinWidth={50}
+          columns={columns}
+          keyboardNavigation="row"
+        />
+      </DataSource>
+    </>
+  );
+};