How to get started easily with React Dashboard Layout?

The Essential JS 2 React_DashboardLayout is a grid-structured layout component that helps create static and dynamic dashboard layouts with panels. Dashboard panels are the basic building blocks of a dashboard, and they can be added programmatically or dynamically at run time. The panels hold UI components and allows resizing, reordering, drag-and-drop, and adding-removing of panels. This allows users to easily place components at the desired position within this layout.

This article explains how to integrate Syncfusion React UI Dashboard Layout in ReactJS application and also explains the basic features of the component.

Prerequisites

To get started with Syncfusion React UI components, configure your machine with the following setup requirements:

• Node.js (latest version)
• Visual studio code for editor
• React versions supported (Greater than 15.5.4)

Installation and application creation

You can use Create-react-app to setup the applications. To install create-react-app, run the following command.

Start a new project using create-react-app command as follows.

Run the application with the following command.

Integration of Dashboard Layout component

1. After running the application successfully, configure the Syncfusion UI React Dashboard Layout in this application. Install React Dashboard Layout package using the following command. The --save command instructs the NPM to include a layout package that contains the Dashboard Layout control inside the dependencies section of the package.json.

2. Install Syncfusion Dashboard Layout package using the following command.

   npm install @syncfusion/ej2-react-layouts --save
   

3. Adding Style sheet to the application. To render the Dashboard Layout component, need to import Dashboard Layout and its dependent component’s styles as given below in App.css.

   @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
   @import "../node_modules/@syncfusion/ej2-react-layouts/styles/material.css";
   

4. You can render the Dashboard Layout component by adding the panels property as the attribute to the HTML element.
5. Open the App.tsx file and import the DashboardLayoutComponent from ej2-react-layouts. Add the React Dashboard Layout component and add the properties required.

   <DashboardLayoutComponent id='defaultLayout' cellSpacing={this.cellSpacing} allowResizing={true} columns={5}> </DashboardLayoutComponent>
   

6. Now, Add the HTML div element with panel definition for Dashboard Layout to your App.tsx file.

//Import the DashboardLayout component
import { DashboardLayoutComponent } from "@syncfusion/ej2-react-layouts";
import * as React from "react";
export default class App extends React.Component {
constructor() {
super(...arguments);
this.cellSpacing = [5, 5];
}
render() {
return (
<div>
<div className="control-section">
<DashboardLayoutComponent id="defaultLayout" cellSpacing={this.cellSpacing} allowResizing={true} columns={5}>
<div id="one" className="e-panel" data-row="0" data-col="0" data-sizex="1" data-sizey="1" >
<span id="close" className="e-template-icon e-clear-icon" />
<div className="e-panel-container">
<div className="text-align">0</div>
</div>
</div>
<div id="two" className="e-panel" data-row="1" data-col="0" data-sizex="1" data-sizey="1">
<span id="close" className="e-template-icon e-clear-icon" />
<div className="e-panel-container">
<div className="text-align">1</div>
</div>
</div>
<div id="three" className="e-panel" data-row="0" data-col="1" data-sizex="2" data-sizey="1">
<span id="close" className="e-template-icon e-clear-icon" />
<div className="e-panel-container">
<div className="text-align">2</div>
</div>
</div>
<div id="four" className="e-panel" data-row="1" data-col="1" data-sizex="2" data-sizey="1">
<span id="close" className="e-template-icon e-clear-icon" />
<div className="e-panel-container">
<div className="text-align">3</div>
</div>
</div>
</DashboardLayoutComponent>
</div>
</div>
);
}
}

7. Now, serve the application using the following command.

   npm start
   

After all the files have been compiled successfully, it will serve the site at localhost:3000.

The following screenshot illustrates this.

Also, refer to the documentation and online samples for more details on Dashboard Layout control.

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac.