# Excel-like Editing

> Configuring the DataGrid to use Excel-like editing via keyboard shortcuts

Canonical page: https://infinite-table.com/docs/learn/editing/excel-like-editing

InfiniteTable offers support for Excel-like editing. This means users can simply start typing in an editable cell and the editor is displayed and updated immediately (no `Enter` key is required to start typing).

This behavior is achieved by using the [Instant Edit keyboard shorcut](https://infinite-table.com/docs/learn/keyboard-navigation/keyboard-shortcuts.md#instant-edit).

```ts {4,12}
import {
  DataSource,
  InfiniteTable,
  keyboardShortcuts
} from '@infinite-table/infinite-react';

 function App() {
  return <DataSource<Developer> primaryKey="id" data={dataSource}>
    <InfiniteTable<Developer>
      columns={columns}
      keyboardShortcuts={[
        keyboardShortcuts.instantEdit
      ]}
    />
  </DataSource>
}
```

The `instantEdit` keyboard shorcut is configured (by default) to respond to any key (via the special `*` identifier which matches anything) and will start editing the cell as soon as a key is pressed. This behavior is the same as in Excel, Google Sheets, Numbers or other spreadsheet software.

**Example**

Click on a cell and then start typing to edit the cell.

```ts
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' },
  country: { field: 'country', header: 'Country' },
  salary: {
    field: 'salary',
    type: 'number',
  },
  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>
          debugId="keyboard-shortcuts-instant-edit-example"
          columns={columns}
          columnDefaultEditable
          keyboardShortcuts={[keyboardShortcuts.instantEdit]}
        />
      </DataSource>
    </>
  );
}
```

To confirm the editing, press the `Enter` key.

## Simulating formulas with `column.valueGetter`

You can use the [`columns.valueGetter`](https://infinite-table.com/docs/reference/infinite-table-props.md#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
  }
}
```

**Example**

Edit the `salary` column and see the `Salary (thousands)` col update.

```ts
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>
          debugId="keyboard-shortcuts-instant-edit-with-valuegetter-example"
          columns={columns}
          columnDefaultEditable
          keyboardShortcuts={[keyboardShortcuts.instantEdit]}
        />
      </DataSource>
    </>
  );
}
```