Creating an Excel-like data grid in React JS

In this article, we will see how to create an Excel-like data grid in React JS frontend. We will use a third-party package for this, which is called react-data-grid. This is a useful package if you are working with data and want to make a dashboard application.

First create a react project −

npx create-react-app tutorialpurpose

Go to the project directory −

cd tutorialpurpose

Example

Download and install the react-data-grid package −

npm i --save react-data-grid

We can use this package to add default styled grid tables or you can say data grids which are premade.

Add the following lines of code in App.js −

import DataGrid from "react-data-grid";

const columns = [
   { key: "id", name: "ID" },
   { key: "title", name: "Title" },
];

const rows = [
   { id: 0, title: "Example" },
   { id: 1, title: "Demo" },
   { id: 2, title: "React JS" },
   { id: 3, title: "Tutorialspoint" },
   { id: 4, title: "Ath Tripathi" },
   { id: 5, title: "Kiran Kumar Panigrahi" },
];

export default function App() {
   return <DataGrid columns={columns} rows={rows} />;
}

Explanation

The concept is simple. We first make a column variable to indicate how the columns should be arranged. It will be a list of JSON objects and one column should have two keys: “key” which will be used for reference when creating a row and “name” which will be used for showing the column name.

The row variable will be same as the column variable. Keys of row’s JSON will be the “key” of column variable, and the value will be the data to show under that column.

Output

On execution, it will produce the following output −

Ath Tripathi

Published on 29-Sep-2021 07:34:58

• Related Questions & Answers
• Creating an Airbnb Rheostat Slider in React JS
• Creating a Particle Animation in React JS
• Creating a Customizable Modal in React JS
• Creating animated loading skeletons in React JS
• Creating a Rich Text Editor in React JS
• Creating a QR Code of a link in React JS
• Creating a 3D donut-like structure in React using react-three-fiber
• Creating a Map in React JS without using third-party API
• Creating a PDF in React JS using plain CSS and HTML
• SVG morphing in React JS
• Adding Lottie animation in React JS
• SVG drawing in React JS frontend
• Drawing arrows between DOM elements in React JS using react-archer
• Creating a Plane in React using React-Three-Fiber
• Device Detection and Responsive Design in React JS