23. DataTables library not set (React)

When using the React component for DataTables (datatables.net-react), you must specify the DataTables library to be used by the component. If that is not done, the error:

DataTables library not set

will occur when the component is loaded.

Meaning

DataTables provides a wide range of extensions in add functionality to the core package and also support for many different styling libraries. To allow the React component to work with any combination of the extensions and styling frameworks, you must import DataTables into the context you are using, and then assign the resulting library to the React component.

For example the most simple use case is:

import DataTable from 'datatables.net-react'
import DT from 'datatables.net';
 
DataTable.use(DT);

To use with an extension such as Select, use:

import DataTable from 'datatables.net-react'
import DT from 'datatables.net';
import 'datatables.net-select';
 
DataTable.use(DT);

And for the Bootstrap 5 styling framework (note the -bs5 added to the DataTables core and Select packages):

import DataTable from 'datatables.net-react'
import DT from 'datatables.net-bs5';
import 'datatables.net-select-bs5';
 
DataTable.use(DT);

Resolution

To resolve this error make sure you assign a DataTables library to the React component through the .use() method.