TypeScript

React Data Table is built with TypeScript so typings are buit in. First, we'll need to define our data type (or interface):

import DataTable, { TableColumn } from 'react-data-table-component';

interface DataRow {
	title: string;
	director: string;
	year: string;
}
Copy

Alternatively, if you want to define DataRow as a type:

import DataTable, { TableColumn } from 'react-data-table-component';

type DataRow = {
	title: string;
	director: string;
	year: string;
};
Copy

Next, we'll create our columns definitions. TableColumn is an interface representing a column definition. TableColumn takes a generic parameter <T>. By passing TableColumn<DataRow>[] (columns is an array) we now have access to our dataRow props on any property in our table columns that accesses our data:

const columns: TableColumn<DataRow>[] = [
	{
		name: 'Title',
		selector: row => row.title,
	},
	{
		name: 'Director',
		selector: row => row.director,
	},
	{
		name: 'Year',
		selector: row => row.year,
	},
];
Copy

Finally, we'll implement our TypeScript component that uses DataTable:

function MyComponent(): JSX.Element {
	return <DataTable columns={columns} data={data} />;
}
Copy

Or, if you prefer using React.FC:

const MyComponent: React.FC = () => {
	return <DataTable columns={columns} data={data} />;
};
Copy

Putting it all together:

import DataTable, { TableColumn } from 'react-data-table-component';

interface DataRow {
	title: string;
	director: string;
	year: string;
}

const columns: TableColumn<DataRow>[] = [
	{
		name: 'Title',
		selector: row => row.title,
	},
	{
		name: 'Director',
		selector: row => row.director,
	},
	{
		name: 'Year',
		selector: row => row.year,
	},
];

function MyComponent(): JSX.Element {
	return <DataTable columns={columns} data={data} />;
}

export default MyComponent;
Copy

Types

In addition to TableColumn we can also access various other React Data Table types.

The following are going to be the most commonly used and accept a generic T parameter, which will always be your data's type or interface:

• TableColumn<T>
• TableProps<T>
• ConditionalStyles<T>
• ExpanderComponentProps<T>
• PaginationComponentProps

The following types are available for advanced or niche use cases:

• TableRow
• TableStyles
• Theme
• Themes
• PaginationOptions
• PaginationServerOptions
• ContextMessage
• SortOrder