Node package manager (npm), is a package manager widely used in the JavaScript ecosystem to install, manage, and share code packages.
One valid npm package for React developers is react-data-grid, which can display and manipulate data in a tabular format. React Data Grid provides a powerful solution whether you need to showcase large datasets or create interactive data grids with sorting, filtering, and editing capabilities.
In this answer, we'll learn how to install React Data Grid using npm and demonstrate a basic example of using the package to render a data grid. By the end, we will know how React Data Grid can enhance our React applications with its tabular data display capabilities.
react-data-gridWe will install React Data Grid using the following command in the terminal:
npm install react-data-grid
Once the command runs successfully, we will check the version of react-data-grid using the following command:
npm list react-data-grid
If the command outputs a version number, then react-data-grid has been successfully installed.
After successfully installing the React Data Grid, we're ready to harness its power for creating dynamic and interactive data grids in our React applications. Let's dive into a coding example to see it in action.
Click the “Run” button in the below widget to run the code.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app.js';
require('./style.css');
ReactDOM.render(
<App />,
document.getElementById('root')
);
Line 2: We import DataGrid from react-data-grid package.
Line 5–10: We initialize datagrid_columns with data to be shown in the column headers.
Line 12–17: We initialize datagrid_rows with data to be shown in each row of the data grid.
Line 22–25: We create the DataGrid component with props named as columns and rows.
Once the app runs, we see that the DataGrid component imports from react-data-grid. It will create rows and columns in accordance with the props passed to the DataGrid component. The App class returns the component and data is rendered on the screen.
Free Resources