Getting started with React Dashboard Layout

22 Jul 202624 minutes to read

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

Dependencies

The following packages are required to use the Dashboard Layout component in your application:

|-- @syncfusion/ej2-react-layouts
    |-- @syncfusion/ej2-react-base
        |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-layouts

Prerequisites

System requirements for Syncfusion^® React UI components

Set up the Vite project

To create a new Vite project, use one of the commands that are specific to either NPM or Yarn.

npm
yarn

npm create vite@latest my-project -- --template react

yarn create vite my-project --template react

After running the command, you will be prompted with a series of interactive questions to configure your project. Select the appropriate options for each prompt:

Select a linter to use: Choose the linter for your project (for example, ESLint).
Install with npm and start now?: Type Yes to proceed with installing the dependencies and automatically start the development server, or No to install dependencies manually later.

Navigate into the project directory with:

cd my-project

Add Syncfusion^® React packages

Syncfusion^® React component packages are available at npmjs.com. To use Syncfusion^® React components in the project, install the corresponding npm package.

To install the React component package, use the following command:

npm
yarn

npm install @syncfusion/ej2-react-layouts

yarn add @syncfusion/ej2-react-layouts

Import Syncfusion^® CSS styles

Themes for Syncfusion^® React components can be applied using CSS or SASS files from the npm theme packages, CDN, CRG, or Theme Studio. For more information, see the themes documentation.

This guide uses the Tailwind 3 theme as an example, sourced from the theme package. In this package, each component includes an index.css file that automatically loads all the required dependency styles. To install the Tailwind 3 theme package, use the following command:

npm
yarn

npm install @syncfusion/ej2-tailwind3-theme

yarn add @syncfusion/ej2-tailwind3-theme

By default, Vite projects include a src/index.css file with default styles. These default styles may conflict with Syncfusion component styles. Clear all content from the src/index.css file to prevent style conflicts.

The required styles for the Dashboard Layout component are imported in the src/App.css file:

App.css
@import "@syncfusion/ej2-tailwind3-theme/styles/dashboard-layout/index.css";

You can also refer to the combined CSS file for all Syncfusion components in your application. For more information, see the documentation on referring themes through npm packages.

Add Dashboard Layout to the application

You can render the Dashboard Layout component in either of the following ways:

Define panels directly in the markup using HTML elements with the e-panel class.
Configure panels using the panels property.

Defining `panels` using HTML attributes

You can add the React Dashboard Layout component to your src/App.jsx file by importing and defining it within your application. In the following example, a basic Dashboard Layout is rendered by defining panel configurations directly in the markup using HTML attributes and elements with the e-panel class. Use the following code:

App.jsx
// import the DashboardLayout component
import { DashboardLayoutComponent } from '@syncfusion/ej2-react-layouts';
import './App.css';

function App() {
    let cellSpacing = [5, 5];
    return (<div>
      <div className="control-section">
          <DashboardLayoutComponent id='defaultLayout' cellSpacing={cellSpacing} allowResizing={true} columns={5}>
              <div id="one" className="e-panel" data-row="0" data-col="0" data-sizex="1" data-sizey="1">
                  <span 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 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 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 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 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 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 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 className="e-template-icon e-clear-icon" />
                  <div className="e-panel-container">
                      <div className="text-align">7</div>
                  </div>
              </div>
          </DashboardLayoutComponent>
      </div>
    </div>);
}

export default App;

Setting the `panels` property directly

Alternatively, you can configure panels declaratively by setting the panels property in src/App.jsx. Use the following code:

App.jsx
// import the DashboardLayout component
import { DashboardLayoutComponent } from '@syncfusion/ej2-react-layouts';
import './App.css';

function App() {
    let cellSpacing = [5, 5];
    let 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>'}
    ];
    return (<div>
      <div className="control-section">
        <DashboardLayoutComponent id='defaultLayout' cellSpacing={cellSpacing} allowResizing={true} panels={panels} columns={5}/>
      </div>
    </div>);
}

export default App;

Run the application

Run the npm run dev command in the terminal to start the development server. This command compiles your code and serves the application locally.

npm
yarn

npm run dev

yarn dev

Sample output

The following example shows a basic Dashboard Layout by adding panel definitions directly via HTML attributes.

app.jsx
app.tsx
index.css
import { DashboardLayoutComponent } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';
import './index.css'
function App() {
    const cellSpacing = [5, 5];
    return (<div>
        <div className="control-section">
            <DashboardLayoutComponent id='defaultLayout' cellSpacing={cellSpacing} allowResizing={true} columns={5}>
                <div id="one" className="e-panel" data-row="0" data-col="0" data-sizex="1" data-sizey="1">
                    <span 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 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 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 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 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 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 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 className="e-template-icon e-clear-icon" />
                    <div className="e-panel-container">
                        <div className="text-align">7</div>
                    </div>
                </div>
            </DashboardLayoutComponent>
        </div>
    </div>);
}
export default App;
import { DashboardLayoutComponent } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';

function App() {
  const cellSpacing: number[] = [5, 5];
  return (
  <div>
      <div className="control-section">
        <DashboardLayoutComponent id='defaultLayout' cellSpacing={cellSpacing} allowResizing={true} columns={5}>
            <div id="one" className="e-panel" data-row="0" data-col="0" data-sizex="1" data-sizey="1">
                <span 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 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 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 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 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 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 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 className="e-template-icon e-clear-icon" />
                <div className="e-panel-container">
                    <div className="text-align">7</div>
                </div>
            </div>
        </DashboardLayoutComponent>
      </div>
  </div>
  );
}
export default App;
#defaultLayout {
    padding: 10px;
}

#defaultLayout .e-panel .e-panel-container {
    vertical-align: middle;
    font-weight: 600;
    font-size: 20px;
    text-align: center;
}

.text-align {
    line-height: 160px;
}

The example below renders the same Dashboard Layout by setting the panels property within the component.

app.jsx
app.tsx
index.css
import { DashboardLayoutComponent } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';
function App() {
    const cellSpacing = [5, 5];
    let 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>' }
    ];
    return (<div>
      <div className="control-section">
        <DashboardLayoutComponent id='defaultLayout' cellSpacing={cellSpacing} allowResizing={true} panels={panels} columns={5}/>
      </div>
    </div>);
}
export default App;
import { DashboardLayoutComponent } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';

function App() {
  const cellSpacing: number[] = [5, 5];
  let 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>' }
  ];
  return (
    <div>
      <div className="control-section">
        <DashboardLayoutComponent id='defaultLayout' cellSpacing={cellSpacing} allowResizing={true} panels={panels} columns={5} />
      </div>
    </div>
  );
}
export default App;
#defaultLayout {
    padding: 10px;
}

#defaultLayout .e-panel .e-panel-container {
    vertical-align: middle;
    font-weight: 600;
    font-size: 20px;
    text-align: center;
}

.text-align {
    line-height: 160px;
}

Refer to the React Dashboard Layout feature tour for detailed demonstrations, and view the React Dashboard Layout example example to learn how to present and manipulate data.

Search docs

Ask Syncfusion AI Assistant

Search docs

Ask Syncfusion AI Assistant

Getting started with React Dashboard Layout

Dependencies

Prerequisites

Set up the Vite project

Add Syncfusion^® React packages

Import Syncfusion^® CSS styles

Add Dashboard Layout to the application

Defining `panels` using HTML attributes

Setting the `panels` property directly

Run the application

Sample output

Getting started with React Dashboard Layout

Dependencies

Prerequisites

Set up the Vite project

Add Syncfusion® React packages

Import Syncfusion® CSS styles

Add Dashboard Layout to the application

Defining panels using HTML attributes

Setting the panels property directly

Run the application

Sample output

Add Syncfusion^® React packages

Import Syncfusion^® CSS styles

Defining `panels` using HTML attributes

Setting the `panels` property directly