This section explains how to create a simple Dashboard Layout component and its basic usage.
The following list of dependencies is required to use the Dashboard Layout component in your application.
|-- @syncfusion/ej2-react-layouts
|-- @syncfusion/ej2-react-base
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-layouts
You can use create-react-app
to setup the applications.
To install create-react-app
run the following command.
npm install -g create-react-app
React
sample use following commands.create-react-app quickstart --scripts-version=react-scripts-ts
cd quickstart
create-react-app quickstart
cd quickstart
npm install @syncfusion/ej2-react-layouts --save
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";
Note: If you want to refer the combined component styles, please make use of our CRG
(Custom Resource Generator) in your application.
You can render the Dashboard Layout component in the following two ways.
panels
property directly.panels
property using HTML attributesYou can render the Dashboard Layout component by adding the panels property as the attribute to the HTML element. Add the HTML div element with panel definition for Dashboard Layout into your App.tsx
file.
[src/App.tsx]
// import the DashboardLayout component
import { DashboardLayoutComponent } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';
export default class App extends React.Component<{}, {}> {
private cellSpacing: number[] = [5, 5];
public 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="2">
<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="2">
<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="2" data-col="1" 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">3</div>
</div>
</div>
<div id="five" className="e-panel" data-row="2" data-col="2" 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">4</div>
</div>
</div>
<div id="six" className="e-panel" data-row="0" data-col="3" 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">5</div>
</div>
</div>
<div id="seven" className="e-panel" data-row="1" data-col="3" 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">6</div>
</div>
</div>
<div id="eight" className="e-panel" data-row="0" data-col="4" data-sizex="1" data-sizey="3">
<span id="close" className="e-template-icon e-clear-icon" />
<div className="e-panel-container">
<div className="text-align">7</div>
</div>
</div>
</DashboardLayoutComponent>
</div>
</div>
);
}
}
// 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="2">
<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="2">
<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="2" data-col="1" 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">3</div>
</div>
</div>
<div id="five" className="e-panel" data-row="2" data-col="2" 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">4</div>
</div>
</div>
<div id="six" className="e-panel" data-row="0" data-col="3" 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">5</div>
</div>
</div>
<div id="seven" className="e-panel" data-row="1" data-col="3" 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">6</div>
</div>
</div>
<div id="eight" className="e-panel" data-row="0" data-col="4" data-sizex="1" data-sizey="3">
<span id="close" className="e-template-icon e-clear-icon"/>
<div className="e-panel-container">
<div className="text-align">7</div>
</div>
</div>
</DashboardLayoutComponent>
</div>
</div>);
}
}
Now, use the npm start
command to run the application in the browser.
npm start
The following example shows a basic Dashboard Layout by adding the panels property directly into the HTML element.
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="2">
<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="2">
<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="2" data-col="1" 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">3</div>
</div>
</div>
<div id="five" className="e-panel" data-row="2" data-col="2" 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">4</div>
</div>
</div>
<div id="six" className="e-panel" data-row="0" data-col="3" 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">5</div>
</div>
</div>
<div id="seven" className="e-panel" data-row="1" data-col="3" 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">6</div>
</div>
</div>
<div id="eight" className="e-panel" data-row="0" data-col="4" data-sizex="1" data-sizey="3">
<span id="close" className="e-template-icon e-clear-icon"/>
<div className="e-panel-container">
<div className="text-align">7</div>
</div>
</div>
</DashboardLayoutComponent>
</div>
</div>);
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion EJ2 React Dashboard Layout Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-react-layouts/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<link rel="stylesheet" href="App.css">
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-layouts/styles/material.css";
#defaultLayout {
padding: 10px;
}
.e-panel-container {
vertical-align: middle;
font-weight: 600;
font-size: 20px;
text-align: center;
}
.text-align {
line-height: 90px;
}
import { DashboardLayoutComponent } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';
export default class App extends React.Component<{}, {}> {
private cellSpacing: number[] = [5, 5];
public 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="2">
<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="2">
<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="2" data-col="1" 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">3</div>
</div>
</div>
<div id="five" className="e-panel" data-row="2" data-col="2" 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">4</div>
</div>
</div>
<div id="six" className="e-panel" data-row="0" data-col="3" 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">5</div>
</div>
</div>
<div id="seven" className="e-panel" data-row="1" data-col="3" 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">6</div>
</div>
</div>
<div id="eight" className="e-panel" data-row="0" data-col="4" data-sizex="1" data-sizey="3">
<span id="close" className="e-template-icon e-clear-icon" />
<div className="e-panel-container">
<div className="text-align">7</div>
</div>
</div>
</DashboardLayoutComponent>
</div>
</div>
);
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
panels
property directlyYou can render the Dashboard Layout component by using the panels property directly.
[src/App.tsx]
// import the DashboardLayout component
import { DashboardLayoutComponent } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';
export default class App extends React.Component<{}, {}> {
private cellSpacing: number[] = [5, 5];
private panels: object[] = [
{ "sizeX": 1, "sizeY": 1, "row": 0, "col": 0, content: '<div class="content">0</div>' },
{ "sizeX": 3, "sizeY": 2, "row": 0, "col": 1, content: '<div class="content">1</div>' },
{ "sizeX": 1, "sizeY": 3, "row": 0, "col": 4, content: '<div class="content">2</div>' },
{ "sizeX": 1, "sizeY": 1, "row": 1, "col": 0, content: '<div class="content">3</div>' },
{ "sizeX": 2, "sizeY": 1, "row": 2, "col": 0, content: '<div class="content">4</div>' },
{ "sizeX": 1, "sizeY": 1, "row": 2, "col": 2, content: '<div class="content">5</div>' },
{ "sizeX": 1, "sizeY": 1, "row": 2, "col": 3, content: '<div class="content">6</div>' }
];
public render() {
return (
<div>
<div className="control-section">
<DashboardLayoutComponent id='defaultLayout' cellSpacing={this.cellSpacing} allowResizing={true} panels={this.panels} columns={5} />
</div>
</div>
);
}
}
// 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];
this.panels = [
{ "sizeX": 1, "sizeY": 1, "row": 0, "col": 0, content: '<div class="content">0</div>' },
{ "sizeX": 3, "sizeY": 2, "row": 0, "col": 1, content: '<div class="content">1</div>' },
{ "sizeX": 1, "sizeY": 3, "row": 0, "col": 4, content: '<div class="content">2</div>' },
{ "sizeX": 1, "sizeY": 1, "row": 1, "col": 0, content: '<div class="content">3</div>' },
{ "sizeX": 2, "sizeY": 1, "row": 2, "col": 0, content: '<div class="content">4</div>' },
{ "sizeX": 1, "sizeY": 1, "row": 2, "col": 2, content: '<div class="content">5</div>' },
{ "sizeX": 1, "sizeY": 1, "row": 2, "col": 3, content: '<div class="content">6</div>' }
];
}
render() {
return (<div>
<div className="control-section">
<DashboardLayoutComponent id='defaultLayout' cellSpacing={this.cellSpacing} allowResizing={true} panels={this.panels} columns={5}/>
</div>
</div>);
}
}
The following example shows a basic Dashboard Layout by using the panels
property.
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];
this.panels = [
{ "sizeX": 1, "sizeY": 1, "row": 0, "col": 0, content: '<div class="content">0</div>' },
{ "sizeX": 3, "sizeY": 2, "row": 0, "col": 1, content: '<div class="content">1</div>' },
{ "sizeX": 1, "sizeY": 3, "row": 0, "col": 4, content: '<div class="content">2</div>' },
{ "sizeX": 1, "sizeY": 1, "row": 1, "col": 0, content: '<div class="content">3</div>' },
{ "sizeX": 2, "sizeY": 1, "row": 2, "col": 0, content: '<div class="content">4</div>' },
{ "sizeX": 1, "sizeY": 1, "row": 2, "col": 2, content: '<div class="content">5</div>' },
{ "sizeX": 1, "sizeY": 1, "row": 2, "col": 3, content: '<div class="content">6</div>' }
];
}
render() {
return (<div>
<div className="control-section">
<DashboardLayoutComponent id='defaultLayout' cellSpacing={this.cellSpacing} allowResizing={true} panels={this.panels} columns={5}/>
</div>
</div>);
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion EJ2 React Dashboard Layout Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-react-layouts/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<link rel="stylesheet" href="App.css">
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-layouts/styles/material.css";
#defaultLayout {
padding: 10px;
}
.e-panel-container {
vertical-align: middle;
font-weight: 600;
font-size: 20px;
text-align: center;
}
.content {
line-height: 90px;
}
import { DashboardLayoutComponent } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';
export default class App extends React.Component<{}, {}> {
private cellSpacing: number[] = [5, 5];
private panels: object[] = [
{ "sizeX": 1, "sizeY": 1, "row": 0, "col": 0, content: '<div class="content">0</div>' },
{ "sizeX": 3, "sizeY": 2, "row": 0, "col": 1, content: '<div class="content">1</div>' },
{ "sizeX": 1, "sizeY": 3, "row": 0, "col": 4, content: '<div class="content">2</div>' },
{ "sizeX": 1, "sizeY": 1, "row": 1, "col": 0, content: '<div class="content">3</div>' },
{ "sizeX": 2, "sizeY": 1, "row": 2, "col": 0, content: '<div class="content">4</div>' },
{ "sizeX": 1, "sizeY": 1, "row": 2, "col": 2, content: '<div class="content">5</div>' },
{ "sizeX": 1, "sizeY": 1, "row": 2, "col": 3, content: '<div class="content">6</div>' }
];
public render() {
return (
<div>
<div className="control-section">
<DashboardLayoutComponent id='defaultLayout' cellSpacing={this.cellSpacing} allowResizing={true} panels={this.panels} columns={5} />
</div>
</div>
);
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
You can refer to our React Dashboard Layout feature tour page for its groundbreaking feature representations. You can also explore our React Dashboard Layout example to knows how to present and manipulate data.