update docs

www/content/docs/learn/editing/excel-like-editing.page.md

@@ -47,4 +47,35 @@ Click on a cell and then start typing to edit the cell.
 
 To confirm the editing, press the `Enter` key.
 
-</Note>
+</Note>
+
+## Simulating formulas with `column.valueGetter`
+
+You can use the <PropLink name="columns.valueGetter" /> property to simulate formulas in your cells.
+
+For example, you might want to have a column that multiplies or divides a value by a constant.
+
+```ts {6}
+const columns = {
+ salary: {
+ field: 'salary'
+ },
+ salaryK: {
+ valueGetter: ({data}) => data.salary / 1000
+ }
+}
+```
+
+
+<Sandpack>
+
+<Description>
+
+Edit the `salary` column and see the `Salary (thousands)` col update.
+
+</Description>
+
+```ts file="$DOCS/reference/keyboard-shortcuts-instant-edit-with-valuegetter-example.page.tsx"
+```
+
+</Sandpack>

www/content/docs/reference/keyboard-shortcuts-instant-edit-with-valuegetter-example.page.tsx

@@ -0,0 +1,70 @@
+import {
+ InfiniteTable,
+ DataSource,
+ DataSourceData,
+ keyboardShortcuts,
+} from '@infinite-table/infinite-react';
+import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react';
+import * as React from 'react';
+
+type Developer = {
+ id: number;
+ firstName: string;
+ lastName: string;
+ country: string;
+ city: string;
+ currency: string;
+ preferredLanguage: string;
+ stack: string;
+ canDesign: 'yes' | 'no';
+ hobby: string;
+ salary: number;
+ age: number;
+};
+
+const dataSource: DataSourceData<Developer> = () => {
+ return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers1k-sql?`)
+ .then((r) => r.json())
+ .then((data: Developer[]) => data);
+};
+
+const columns: InfiniteTablePropColumns<Developer> = {
+ preferredLanguage: { field: 'preferredLanguage', header: 'Language' },
+
+ salary: {
+ field: 'salary',
+ type: 'number',
+ },
+ salaryK: {
+ valueGetter: ({ data }) => data.salary / 1000,
+ header: 'Salary (thousands)',
+ type: 'number',
+ defaultEditable: false,
+ },
+ country: {
+ field: 'country',
+ header: 'Country',
+ },
+ age: { field: 'age' },
+ canDesign: { field: 'canDesign' },
+ firstName: { field: 'firstName' },
+ stack: { field: 'stack' },
+ id: { field: 'id', defaultEditable: false },
+ hobby: { field: 'hobby' },
+ city: { field: 'city' },
+ currency: { field: 'currency' },
+};
+
+export default function KeyboardShortcuts() {
+ return (
+ <>
+ <DataSource<Developer> primaryKey="id" data={dataSource}>
+ <InfiniteTable<Developer>
+ columns={columns}
+ columnDefaultEditable
+ keyboardShortcuts={[keyboardShortcuts.instantEdit]}
+ />
+ </DataSource>
+ </>
+ );
+}