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.

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>
}

COPY

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.

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

View Mode

Fork Fork

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('https://infinite-table.com/.netlify/functions/json-server' + `/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>
          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 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.

const columns = {
  salary: {
    field: 'salary'
  },
  salaryK: {
    valueGetter: ({data}) => data.salary / 1000
  }
}

COPY

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

View Mode

Fork Fork

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('https://infinite-table.com/.netlify/functions/json-server' + `/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>
    </>

Excel-like Editing

Simulating formulas with column.valueGetter

Simulating formulas with `column.valueGetter`