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:
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: Record< string, InfiniteTableColumn<Person> > = React.useMemo(() => { return { 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 theInfiniteTable
component - it controls whichdata
the table is renderingInfiniteTable
- the actual virtualized table component - needs to be inside aDataSource
(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.
import * as React from 'react'; import { InfiniteTable, DataSource, } from '@infinite-table/infinite-react'; import type { InfiniteTableColumn } from '@infinite-table/infinite-react'; import { data, Person } from './data'; const columns: Record< string, InfiniteTableColumn<Person> > = { id: { // specifies which field from the data source // should be rendered in this column field: 'Id', type: 'number', sortable: true, defaultWidth: 80, }, firstName: { field: 'FirstName', }, age: { field: 'Age', type: 'number' }, }; export default function App() { return ( <DataSource<Person> data={data} primaryKey="Id"> <InfiniteTable<Person> licenseKey="<INVALID>" columnDefaultWidth={130} columns={columns} /> </DataSource> ); }
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.