No Preview

Basic

Creating a React Data Table should be easy. Simply define your columns and data arrays:

import DataTable from 'react-data-table-component';

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

const data = [
  	{
		id: 1,
		title: 'Beetlejuice',
		year: '1988',
	},
	{
		id: 2,
		title: 'Ghostbusters',
		year: '1984',
	},
]

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

Basic Sorting

Adding sorting a table has never been easier:

import DataTable from 'react-data-table-component';

const columns = [
	{
		name: 'Title',
		selector: row => row.title,
		sortable: true,
	},
	{
		name: 'Year',
		selector: row => row.year,
		sortable: true,
	},
];

const data = [
  	{
		id: 1,
		title: 'Beetlejuice',
		year: '1988',
	},
	{
		id: 2,
		title: 'Ghostbusters',
		year: '1984',
	},
]

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

Selectable Rows

Adding selectable rows is usually quite a bit of code. Let's simplify:

import DataTable from 'react-data-table-component';

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

const data = [
  	{
		id: 1,
		title: 'Beetlejuice',
		year: '1988',
	},
	{
		id: 2,
		title: 'Ghostbusters',
		year: '1984',
	},
]

function MyComponent() {
	return (
		<DataTable
			columns={columns}
			data={data}
			selectableRows
		/>
	);
};
Copy

Expandable Rows

Adding expandable rows is no easy feat. Let's simplify:

import DataTable from 'react-data-table-component';

// A super simple expandable component.
const ExpandedComponent = ({ data }) => <pre>{JSON.stringify(data, null, 2)}</pre>;

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

const data = [
  	{
		id: 1,
		title: 'Beetlejuice',
		year: '1988',
	},
	{
		id: 2,
		title: 'Ghostbusters',
		year: '1984',
	},
]

function MyComponent() {
	return (
		<DataTable
			columns={columns}
			data={data}
			expandableRows
			expandableRowsComponent={ExpandedComponent}
		/>
	);
};
Copy