How to Use Datatable in React

If you need to display a lot of data. And in addition, if you want to display it in a well-organized manner, I'll always tell you one thing.

Table is definitely a way to go!

During my time as a developer, I worked with a lot of applications that needed to handle a big amount of data. And the well-working table always delivered good results in a form of user satisfaction.

In modern development, there are a ton of libraries that makes it easy to add the table to your website.

In this article, you'll learn how to use DataTable with React. And to be honest, it's fairly simple.

In order to use DataTable with React, you need to:

• Install data table library using npm
• Import the library in the file where it's needed
• Initialize the table with data

If you want to learn the exact steps necessary. And if you want to learn how to use DataTable with React, read further!

Can You Use Datable With React?

A lot of React developers are doubting the usage of DataTable library with React. And they doubts are very well justified.

This library is based on jQuery, which makes its usage a bit more challenging. However it doesn't make it impossible.

With that being said, can you use DataTable With React?

Yes, it's possible to use DataTable with React. However, the usage of DataTable with React is not so straighforward.

Now that we cleared the air a bit, let's see how to use DataTables with React.

Using Datatable in React

As I mentioned before, downside of using DataTable in React is that we have to also include jQuery.

Let's start by installing dependencies.

Installing datatables dependencies

npm install --save jquery datatables.net datatables.net-dt
# or
yarn add jquery datatables.net datatables.net-dt

We'll also need some data to bedisplayed in the table.

The dataset we're gonna use is the collection of users and it has the following format.

Dataset format

export default [
  [
    "Tiger Nixon",
    "System Architect",
    "Edinburgh",
    "5421",
    "2011/04/25",
    "$320,800",
  ],
  [
    "Ashton Cox",
    "Junior Technical Author",
    "San Francisco",
    "1562",
    "2009/01/12",
    "$86,000",
  ]
]

The last thing is to implement table component. In our table component, we need to import jQuery library, and inject DataTable module into the global window object.

It can be done in a following way.

Initializing DataTables with jQuery

import $ from "jquery";

// Initialize jquery and Datatable
const DataTable = DataTables(window, $);

When it's done, we can access DataTables object anywhere in our React component.

In order to display the table and fill it with data, we need to:

• Call DataTable constructor
• Pass it reference to an element where table should be displayed
• Pass it dataset

The final Table component will look like the following.

Table.jsx

import { useEffect, useRef } from "react";
import $ from "jquery";
import DataTables from "datatables.net";

// Import necessary styles
import "datatables.net-dt/css/jquery.dataTables.min.css";
// Importing dataset
import dataSet from "./dataSet";

// Initialize jquery and Datatable
const DataTable = DataTables(window, $);

const Table = () => {
  const tableRef = useRef();

  useEffect(() => {
    // When component loads, fill table with data
    new DataTable(tableRef.current, {
      data: dataSet,
      columns: [
        { title: "Name" },
        { title: "Occupation" },
        { title: "City" },
        { title: "ZIP" },
        { title: "Birthday" },
        { title: "Salary" },
      ],
    });
  }, []);

  // Create a reference for the table
  return <table ref={tableRef}></table>;
};

export default Table;

And this will be the final result.

That's a quick example of how to use DataTable with React. Now if you don't mind, I'd like to show you different Table libraries you can use with React.

Popular React Table Libraries

As we seen on the example above, it's not super difficult to use DataTable with React. However, the library comes with additional dependencies, like jQuery.

In this section, I'll share with you the most popular table libraries built with React.

React Table

If you're looking for a table component, and you don't want to use whole UI kit, you should consider this library. It's fast, lightweight, and doesn't come with any external dependencies.

React Table is a collection of hooks for building powerful tables and datagrid experiences. These hooks are lightweight, composable, and ultra-extensible, but do not render any markup or styles for you. (source: React Table)

MUI Data Grid

Anot her option is to use Material UI Datagrid. This component is a part of a big Material UI kit, however it's also possible to use it on its own.

The component leverages the power of React and TypeScript, to provide the best UX while manipulating an unlimited set of data. It comes with an intuitive API for real-time updates, accessibility, as well as theming and custom templates, all with blazing fast performance. (source: MUI)

Ant Table

Ant Table is a part of the Ant Design. It can be imported to your project separately. However, I think it makes sense to use this table only if you're already using Ant Design. Or if you want to use Ant Design for your project.

A table displays rows of data. It's ideal to use when you need to display a collection of structured data. And when you need to sort, search, paginate, and filter this data. (source: Ant Design)

Concluding Thoughts

Tables are very efficient to display a lot of data. On top of that, they display it in a well structured and organized way.

When you want to include table component to your React project, you have a lot of options. But in this article, we focused on one table library in particular.

In this article, you learned how to use DataTables with React. And on top of that, I showed you some of the most popular table libraries for React.

With all the things you learned today, you should know exactly what table component to use in your React project.