Getting started

Infinite Table is a UI component for data virtualization - helps you display huge datasets of tabular data.

It’s built specifically for React from the ground up and with performance in mind.

Installation

Infinite Table is available on the public npm registry - install it by running the following command:

Terminal

npm i @infinite-table/infinite-react

Meet the code

import * as React from 'react';
import {
  InfiniteTable,
  DataSource,
} from '@infinite-table/infinite-react';
import type { InfiniteTableColumn } from '@infinite-table/infinite-react';

type Person = {
  Id: number;
  FirstName: string;
  Age: number;
};

export default function App() {
  const columns: Map<
    string,
    InfiniteTableColumn<Person>
  > = React.useMemo(
    () =>
      new Map([
        [
          'id',
          {
            // specifies which field from the data source
            // should be rendered in this column
            field: 'Id',
            type: 'number',
            sortable: true,
            width: 80,
          },
        ],
        [
          'firstName',
          {
            field: 'FirstName',
          },
        ],
        ['age', { field: 'Age', type: 'number' }],
      ]),
    []
  );

  const data: Person[] = React.useMemo(
    () => [
      {
        Id: 1,
        FirstName: 'Bob',
        Age: 3,
      },
      {
        Id: 2,
        FirstName: 'Alice',
        Age: 50,
      },
      {
        Id: 3,
        FirstName: 'Bill',
        Age: 5,
      },
    ],
    []
  );

  return (
    <DataSource<Person> data={data} primaryKey="Id">
      <InfiniteTable<Person>
        columnDefaultWidth={130}
        columns={columns}
      />
    </DataSource>
  );
}

Using the components

In the code snippet above, you notice we’re using 2 components:

DataSource - this needs to be a parent (or ancestor, at any level) of the InfiniteTable component - it controls which data the table is rendering
InfiniteTable - the actual virtualized table component - needs to be inside a DataSource (can be at any level of nesting).

Both components are named exports of the @infinite-table/infinite-react package.

Licensing

You can use @infinite-table/infinite-react in 2 ways:

with a license - requests for licence quotations and additional quotations must be made by email to admin@infinite-table.com. After purchasing, you will receive a licenseKey which you will provide as a prop when you instantiate Infinite Table. This will make the Powered by Infinite Table footer go away.
without a license, but it will include a Powered by Infinite Table link in the table footer. This way you can use it for free in any product, but make sure the footer is always visible when Infinite Table is visible. For demo purposes, we don’t show any license error for embeds in codesandbox.io - which are used throughout this demo site. Check the demo below to see the license footer in action.

Invalid License Demo

Fork Fork

import * as React from 'react';
import {
  InfiniteTable,
  DataSource,
  InfiniteTableColumn,
} from '@infinite-table/infinite-react';

import { data, Person } from './data';

export default function App() {
  return (
    <DataSource<Person> data={data} primaryKey="Id">
      <InfiniteTable<Person>
        licenseKey="<INVALID>"
        columnDefaultWidth={130}
        columns={columns}
      />
    </DataSource>
  );
}

const columns: Map<
  string,
  InfiniteTableColumn<Person>
> = new Map([
  [
    'id',
    {
      // specifies which field from the data source
      // should be rendered in this column
      field: 'Id',
      type: 'number',
      sortable: true,
      width: 80,
    },
  ],
  [
    'firstName',
    {
      field: 'FirstName',
    },
  ],
  ['age', { field: 'Age', type: 'number' }],
]);

About the docs

We’re grateful for the work done by the team behind reactjs.org and the new React documentation found at beta.reactjs.org - we’ve built our documentation on their excellent work 🙏 and we’re grateful for that.

The documentation is versioned, and we will publish a new version of the documentation when there are any significant changes in the corresponding @infinite-table/infinite-react version.