TypeScript Types

Our TypeScript types are published as part of the package, as named exports from the root of the package.
The 2 main components that you can need to use and import are:
  • InfiniteTable
  • DataSource
Importing InfiniteTable and DataSource components
import { InfiniteTable, DataSource } from '@infinite-table/infinite-react';
In our TypeScript typings, those components are exported as generic components, so they need to be bound to the type of the data they are rendering.
type Developer = {
  id: number;

  firstName: string;
  lastName: string;

  currency: string;
  salary: number;
}

const App = () => {
  return <DataSource<Developer> data={data} primaryKey="id">
    <InfiniteTable<Developer>
      columns={{...}}
    />
  </DataSource>
}
Throughout the documentation, we will use the DATA_TYPE placeholder to refer to the type of the data that the InfiniteTable and DataSource components are bound to.
You can still use InfiniteTable in plain JavaScript, but you won't get all the type-checking benefits.
Both InfiniteTable and DataSource components have types provided for most of the props they support. Generally the naming pattern is <COMPONENT_NAME>Prop<PROP_NAME>, so here are a few examples to clarify the rule:
import type {
  InfiniteTablePropColumns,
  // corresponding to the `columns` prop
  DataSourcePropGroupBy,
  // corresponding to the `groupBy` prop
} from '@infinite-table/infinite-react';

DataSource Types

Here are a few examples for types for the DataSource component:
import type { DataSourcePropGroupBy } from '@infinite-table/infinite-react';
import type { DataSourcePropAggregationReducers } from '@infinite-table/infinite-react';
Not all the DataSource props have types exported that follow this convention, so you can always use DataSourceProps<DATA_TYPE> to get the type that define all the props.
In this way you can access specific prop types by name

InfiniteTable Types

Below you can find a few examples for types for the InfiniteTable component:
import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react';
import type { InfiniteTablePropRowStyle } from '@infinite-table/infinite-react';
import type { InfiniteTablePropColumnGroups } from '@infinite-table/infinite-react';
Not all the InfiniteTable props have types exported that follow this convention, so you can always use InfiniteTableProps<DATA_TYPE> to get the type that define all the props the InfiniteTable component supports.
In this way you can access specific prop types by name:
Worth mentioning is the InfiniteTableColumn<DATA_TYPE> prop, which defines the type for the table columns.