DataTables React component

This is long overdue - it turns out React isn't just some passing fad (who knew! </sarcasm>), so it is with a degree of relief mixed with the usual pleasure of announcing new software that with this post I am introducing a React component for DataTables.

React has had a profound effect on front-end development since it was first released over a decade ago, with many of the concepts it utilises now widely used by other frameworks. In the 2023 State of JS survey it was the most widely used UI library. In the unlikely event that you haven't used React, their tic-tac-toe tutorial is a great way to get started. I'll assume for the rest of this article that you are happy with the basic concepts of React - components, properties, state, JSX, etc.

The new DataTables component for React is basically a wrapper around the existing DataTables library, exposing it in a way that will be immediately familiar to those who are used to working with React, while still making all of DataTables features available.

Let's jump straight into some examples of the new DataTables React component - these are all hosted on the excellent StackBltiz which is a browser-based IDE and development environment, letting you build and run projects. In this case, I've used Vite and Typescript to create simple React applications demonstrating different parts of the DataTables component:

• Basic initialisation.
• Ajax data example demonstrating how to use objects as the data source to populate the table via the columns.data option.
• Listening for events.
• Responsive and Select extensions.
• Buttons extension for file export which requires the use of two additional functions to assign JSZip and pdfmake.
• API access and usage.
• Reactive data
• Displaying a React component in a column

Installation

The DataTables manual includes full details on how to install and use the DataTables React component, but let's cover the basics here.

First, install the datatables.net-react and datatables.net-dt packages using your package manager:

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

# yarn
yarn add datatables.net-react datatables.net-dt

To then use DataTables component in your own components, you need to import both it and DataTables core, then assign DataTables core as the library to use in the component like this:

import DataTable from 'datatables.net-react';
import DT from 'datatables.net-dt';

DataTable.use(DT);

This will give you a <DataTable> React component you can use in your own components.

Note the use of the -dt postfix for the core DataTables library. This represents the DataTables default styling. Other styling packages for Bootstrap, Bulma, Semantic UI and others are also available. Use the DataTables download builder to get a list of the packages to use.

Use

Once installed and registered in your component you will have a <DataTable> component available for use in your JSX (you can change the name by changing the import statement used above if you prefer something else). It accepts child elements which can be used to describe the table's headers and footers:

<DataTable>
    <thead>
        <tr>
            <th>Name</th>
            <th>Location</th>
        </tr>
    </thead>
</DataTable>

The component accepts a number of properties that can be used to configure the DataTable, including ajax, columns and options. Please refer to the documentation for full details.

Initialisation

The most basic example use of DataTables in a React application is shown below:

import { useState } from 'react';
import DataTable from 'datatables.net-react';
import DT from 'datatables.net-dt';

import './App.css';

DataTable.use(DT);

function App() {
  const [tableData, setTableData] = useState([
    [ 'Tiger Nixon', 'System Architect' ],
    [ 'Garrett Winters', 'Accountant' ],
    // ...
  ]);

  return (
        <DataTable data={tableData} className="display">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                </tr>
            </thead>
        </DataTable>
    );
}

export default App;

Documentation

That's how to get up and running with the DataTables React component! There is of course more to it than that, including the ability to place React components into table cells, using events, and the DataTables API. Please refer to the DataTables React documentation for full details on these points and more.

Source and Feedback

The source code for this component is available on Github and suggestions for improvements and enhancements are always welcome. Please use the forum if you have some ideas for improvements. Equally, if you run into any problems, please post in the forum with a link to a Stackbltiz project or minimal git repo that demonstrates the issue so it can be debugged.