Easily Handle React Datatable with react-data-table-component library. Step by Step

The react-data-table-component is a library for React. It provides pre-built components and functionality to easily create data tables in React applications. While it can interact with APIs to fetch data or perform data manipulation and the library itself is primarily focused on providing UI elements for displaying and interacting with tabular data within React applications.

In this tutorial, we will learn how to install react-data-table-component library by executing a single command and uses of it.

Step 1. Installation : First we need to install react-data-table-component library in react application.

Command 

npm install react-data-table-component

And verify in package.json file.

Successfully installed

Step 2. Uses of React Datatable : Below are the core processes to use react-data-table-component.

• Import react-data-table-component
• Load columns with the JSON data
• Finally add the columns and data in Datatable

Sample JSON 

[

  {

    "menuID": "100103",

    "menuName": "Chocolate Coffee",

    "status": 1

  }

]

Import react-data-table-component - 

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

Here DataTable is a variable name. We can put here any name. But the same name we have to use in return function of  HTML.

Load columns with JSON data - 

Here there are four columns. The first 3 columns are loaded with JSON values, and the last column consists of two buttons. That means we can use columns with real data and also we can take additional columns except for maps with data.

Add columns and data in Datatable -

Done 👍 (Contact for code, if required)