Installation

To make use of DataTables in a React app, you need to install both the React component, and DataTables itself:

• datatables.net-react - DataTables component for React
• datatables.net-dt - DataTables core, with default styling.

Do this with the following npm command:

npm install --save \
    datatables.net-react \
    datatables.net-dt

Once installed, you then import both packages and assign DataTables core as the library to use in the component like this, and include the import of the styling:

// Javascript
import DataTable, { Column } from 'datatables.net-react';
import DtCore from 'datatables.net-dt';

// Styling
import 'datatables.net-dt/css';

// Assign DataTables core
DataTable.use(DtCore);

This will give you a <DataTable> React component you can use in your own component, and a <Column> component that can be used to defined columns. Please refer to their documentation for details on the use of each.

Styling options

You might have wondered what the -dt part at the end of the datatables.net-dt package is, and why the React component doesn't just include it automatically. The reason for this is that DataTables supports a number of different styling frameworks (Bootstrap, Bulma, Foundation, etc), each of which is published as a different package. The styling framework used is denoted by the final section of the package name, in this case -dt is the default DataTables styling.

If you wanted to make use of DataTables' Bootstrap 5 integration you could install the datatables.net-bs5 package and use that (note the use of -bs5 in the DataTables core package name):

// Javascript with Bootstrap 5 customisations
import DataTable, { Column } from 'datatables.net-react';
import DtCore from 'datatables.net-bs5';

// Styling
import 'datatables.net-bs5/css';

// Assign DataTables core
DataTable.use(DtCore);

DataTables has a wide range of packages available and it is strongly recommended that you use the download builder to make sure you get the packages you need. Click the "React" option in the components list and the download builder will show you the install and include commands you should use.

Extensions

DataTables has a wide range of extensions that expand the capabilities of DataTables core. These extensions can all also be used in a React app through the DataTables component.

For example, you might wish to make use of the CardView and Select extensions - for this you would use

npm install --save \
    datatables.net-react \
    datatables.net-dt \
    datatables.net-cardview-dt \
    datatables.net-select-dt

For each extension, you need to import it for it to be registered with DataTables. For example, to use both Select and Responsive:

import DataTable, { Column } from 'datatables.net-react';
import DtCore from 'datatables.net-dt';
import 'datatables.net-cardview-dt';
import 'datatables.net-select-dt';

// Styling
import 'datatables.net-dt/css';
import 'datatables.net-cardview-dt/css';
import 'datatables.net-select-dt/css';

// Assign DataTables core
DataTable.use(DtCore);

Note that you will also need to provide initialisation options for the extensions to enable them in the DataTable (e.g. cardView and select in this case). For this, see the configuration options selection of the <DataTable> component documentation.

The same installation applies to all of the other DataTables extensions. Use the download builder to get a list of the npm packages for the extensions you want.