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
import { InfiniteTable, DataSource } from '@infinite-table/infinite-react';
Note
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.
Note
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:
DataSourcePropGroupBy<DATA_TYPE>
- the type forDataSource.groupBy
import type { DataSourcePropGroupBy } from '@infinite-table/infinite-react';
DataSourcePropAggregationReducers<DATA_TYPE>
- the type forDataSource.aggregationReducers
import type { DataSourcePropAggregationReducers } from '@infinite-table/infinite-react';
Note
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
DataSourceProps<DATA_TYPE>['groupBy']
- the type forDataSource.groupBy
DataSourceProps<DATA_TYPE>['data']
- the type forDataSource.data
- etc
InfiniteTable
Types
Below you can find a few examples for types for the InfiniteTable
component:
InfiniteTablePropColumns<DATA_TYPE>
- the type forInfiniteTable.columns
import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react';
InfiniteTablePropRowStyle<DATA_TYPE>
- the type forInfiniteTable.rowStyle
import type { InfiniteTablePropRowStyle } from '@infinite-table/infinite-react';
InfiniteTablePropColumnGroups<DATA_TYPE>
- the type forInfiniteTable.columnGroups
import type { InfiniteTablePropColumnGroups } from '@infinite-table/infinite-react';
Note
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:
InfiniteTableProps<DATA_TYPE>['columns']
- the type forInfiniteTable.columns
InfiniteTableProps<DATA_TYPE>['columnSizing']
- the type forInfiniteTable.columnSizing
- etc
Note
Worth mentioning is the InfiniteTableColumn<DATA_TYPE>
prop, which defines the type for the table columns
.