# TypeScript Types

> Infinite Table types for TypeScript are published as part of the package, as named exports from the root of the package.

Canonical page: https://infinite-table.com/docs/learn/getting-started/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`

```tsx title="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.

```tsx
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:

```ts
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 for [DataSource.groupBy](https://infinite-table.com/docs/reference/datasource-props/index.md#groupBy)

```tsx
import type { DataSourcePropGroupBy } from '@infinite-table/infinite-react';
```

- `DataSourcePropAggregationReducers<DATA_TYPE>` - the type for [DataSource.aggregationReducers](https://infinite-table.com/docs/reference/datasource-props/index.md#aggregationReducers)

```tsx
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

- `DataSourceProps<DATA_TYPE>['groupBy']` - the type for [DataSource.groupBy](https://infinite-table.com/docs/reference/datasource-props/index.md#groupBy)
- `DataSourceProps<DATA_TYPE>['data']` - the type for [DataSource.data](https://infinite-table.com/docs/reference/datasource-props/index.md#data)
- etc

## `InfiniteTable` Types

Below you can find a few examples for types for the `InfiniteTable` component:

- `InfiniteTablePropColumns<DATA_TYPE>` - the type for [InfiniteTable.columns](https://infinite-table.com/docs/reference/infinite-table-props.md#columns)

```tsx
import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react';
```

- `InfiniteTablePropRowStyle<DATA_TYPE>` - the type for [InfiniteTable.rowStyle](https://infinite-table.com/docs/reference/infinite-table-props.md#rowStyle)

```tsx
import type { InfiniteTablePropRowStyle } from '@infinite-table/infinite-react';
```

- `InfiniteTablePropColumnGroups<DATA_TYPE>` - the type for [InfiniteTable.columnGroups](https://infinite-table.com/docs/reference/infinite-table-props.md#columnGroups)

```tsx
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:

- `InfiniteTableProps<DATA_TYPE>['columns']` - the type for [InfiniteTable.columns](https://infinite-table.com/docs/reference/infinite-table-props.md#columns)
- `InfiniteTableProps<DATA_TYPE>['columnSizing']` - the type for [InfiniteTable.columnSizing](https://infinite-table.com/docs/reference/infinite-table-props.md#columnSizing)
- etc

Worth mentioning is the `InfiniteTableColumn<DATA_TYPE>` prop, which defines the type for the table [`columns`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns).