React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Getting started with React Dashboard Layout component

24 May 2022 / 4 minutes to read

This section explains how to create a simple Dashboard Layout component and its basic usage.

Dependencies

The following list of dependencies is required to use the Dashboard Layout component in your application.

Copied to clipboard
|-- @syncfusion/ej2-react-layouts
    |-- @syncfusion/ej2-react-base
        |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-layouts

Installation and configuration

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

Copied to clipboard
npm install -g create-react-app
  • To setup basic React sample use following commands.
Copied to clipboard
create-react-app quickstart --scripts-version=react-scripts-ts

cd quickstart
Copied to clipboard
create-react-app quickstart

cd quickstart
  • Install Syncfusion Dashboard Layout package using below command.
Copied to clipboard
npm install @syncfusion/ej2-react-layouts --save

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.

Copied to clipboard
@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.

Add Dashboard Layout to the application

You can render the Dashboard Layout component in the following two ways.

  • Defined the panels property as the attribute in the HTML element directly.
  • Using the panels property directly.

Setting the panels property using HTML attributes

You 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]

Copied to clipboard
// 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>
);
  }
}
Copied to clipboard
// 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>);
    }
}

Run the application

Now, use the npm start command to run the application in the browser.

Copied to clipboard
npm start

The following example shows a basic Dashboard Layout by adding the panels property directly into the HTML element.

Source
Preview
App.jsx
index.jsx
index.html
App.css
App.tsx
index.tsx
Copied to clipboard
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>);
    }
}
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
Copied to clipboard
<!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>
Copied to clipboard
@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;
}
Copied to clipboard
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>
    );
  }
}
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App  from './App';

ReactDOM.render(<App />, document.getElementById('root'));

Setting the panels property directly

You can render the Dashboard Layout component by using the panels property directly.

[src/App.tsx]

Copied to clipboard
// 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>
);
  }
}
Copied to clipboard
// 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.

Source
Preview
App.jsx
index.jsx
index.html
App.css
App.tsx
index.tsx
Copied to clipboard
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>);
    }
}
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
Copied to clipboard
<!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>
Copied to clipboard
@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;
}
Copied to clipboard
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>
    );
  }
}
Copied to clipboard
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.

Previous
Next