How can I help you?
Dragging and Moving Dashboard Layout Panels in React
5 Mar 202624 minutes to read
The Dashboard Layout component provides dragging functionality to reorder panels within the layout. While dragging a panel, a highlighted holder appears beneath it, providing a visual preview of where the panel will be placed upon release. This visual feedback helps determine whether to drop the panel in the new position or return it to its original location without disrupting the layout.
When panels collide during dragging, the Dashboard Layout automatically pushes the colliding panels in available directions—left, right, top, or bottom. These position adjustments update dynamically during the drag operation, providing real-time feedback about the final layout configuration before dropping the panel.
While dragging a panel in Dashboard layout, the following dragging events will be triggered:
- dragStart - Triggered when panel dragging begins
- drag - Triggered continuously while panel is being dragged
- dragStop - Triggered when panel dragging ends
The following sample demonstrates dragging and pushing of panels. For example, while dragging the panel 0 over panel 1, these panels get collided and push the panel 1 towards the feasible direction, so that, the panel 0 gets placed in the panel 1 position.
import { DashboardLayoutComponent } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';
function App() {
const cellSpacing = [10, 10];
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>' }
];
function onDragStart() {
console.log("Drag start");
}
//Dashboard Layout's drag event function
function onDrag(args) {
console.log("Dragging");
}
//Dashboard Layout's dragstop event function
function onDragStop(args) {
console.log("Drag stop");
}
return (<div>
<div className="container">
<DashboardLayoutComponent id='defaultLayout' cellSpacing={cellSpacing} panels={panels} columns={5} dragStart={onDragStart.bind(this)} drag={onDrag.bind(this)} dragStop={onDragStop.bind(this)}/>
</div>
</div>);
}
export default App;import { DashboardLayoutComponent } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';
function App() {
const cellSpacing: number[] = [10, 10];
let panels: any = [
{'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>'}
];
function onDragStart(){
console.log("Drag start");
}
//Dashboard Layout's drag event function
function onDrag(args: any) {
console.log("Dragging");
}
//Dashboard Layout's dragstop event function
function onDragStop(args: any) {
console.log("Drag stop");
}
return (
<div>
<div className="container">
<DashboardLayoutComponent id='defaultLayout' cellSpacing={cellSpacing} panels={panels} columns={5}
dragStart={onDragStart} drag={onDrag} dragStop={onDragStop} />
</div>
</div>
);
}
export default App;import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-react-layouts/styles/tailwind3.css";
.container {
margin: 0 auto;
width: 500px;
}
.e-panel-container .content {
vertical-align: middle;
font-weight: 600;
font-size: 20px;
text-align: center;
line-height: 90px;
}<!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="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-react-layouts/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-grids/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-charts/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-calendars/styles/tailwind3.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">
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Customizing the Drag Handle
By default, the entire panel serves as the drag handle, allowing dragging from any point within the panel. Customize this behavior using the draggableHandle property to restrict the dragging action within a particular element in the panel.
The following sample demonstrates customizing the dragging handler of the panels, where the dragging action occurs only when interacting with the panel’s header.
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, AccumulationTooltip, Category, ChartComponent, ColumnSeries, DataLabel, Inject, Legend, LineSeries, SeriesCollectionDirective, SeriesDirective, Tooltip } from "@syncfusion/ej2-react-charts";
import { DashboardLayoutComponent, PanelDirective, PanelsDirective } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';
function App() {
const cellSpacing = [10, 10];
// Template for line Chart
function lineTemplate() {
const lineData = [
{ x: 2013, y: 28 }, { x: 2014, y: 25 }, { x: 2015, y: 26 }, { x: 2016, y: 27 },
{ x: 2017, y: 32 }, { x: 2018, y: 35 },
];
return (<div className="template">
<ChartComponent style={{ "height": "162px" }}>
<Inject services={[LineSeries]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={lineData} xName='x' yName='y' type='Line'/>
</SeriesCollectionDirective>
</ChartComponent>
</div>);
}
// Template for Pie Chart
function pieTemplate() {
const pieData = [
{ x: 'TypeScript', y: 13, text: 'TS 13%' },
{ x: 'React', y: 12.5, text: 'Reat 12.5%' },
{ x: 'MVC', y: 12, text: 'MVC 12%' },
{ x: 'Core', y: 12.5, text: 'Core 12.5%' },
{ x: 'Vue', y: 10, text: 'Vue 10%' },
{ x: 'Angular', y: 40, text: 'Angular 40%' }
];
return (<div className="template">
<AccumulationChartComponent style={{ "height": "162px" }} tooltip={{ enable: true }}>
<Inject services={[AccumulationTooltip]}/>
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={pieData} xName='x' yName='y' innerRadius="40%"/>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
</div>);
}
// Template for Pie Chart 1
function pieTemplate1() {
const pieData = [
{ 'x': 'Chrome', y: 37, text: '37%' },
{ 'x': 'UC Browser', y: 17, text: '17%' },
{ 'x': 'iPhone', y: 19, text: '19%' },
{ 'x': 'Others', y: 4, text: '4%' },
{ 'x': 'Opera', y: 11, text: '11%' },
{ 'x': 'Android', y: 12, text: '12%' }
];
const dataLabel = { visible: true, position: 'Inside', name: 'text', font: { fontWeight: '600' } };
const enableAnimation = false;
return (<div className="template">
<AccumulationChartComponent style={{ "height": "162px" }} enableAnimation={enableAnimation} legendSettings={{ visible: false }} tooltip={{ enable: true, format: '${point.x} : <b>${point.y}%</b>' }}>
<Inject services={[AccumulationTooltip]}/>
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={pieData} dataLabel={dataLabel} xName='x' yName='y' radius="70%" name='Browser'/>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
</div>);
}
function columnTemplate() {
const chartData = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
return (<div className="template">
<ChartComponent style={{ "height": "162px" }} primaryXAxis={{ valueType: 'Category' }}>
<Inject services={[ColumnSeries, Legend, Tooltip, Category, DataLabel]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={chartData} xName='month' yName='sales' type='Column'/>
</SeriesCollectionDirective>
</ChartComponent>
</div>);
}
return (<div id='container'>
<DashboardLayoutComponent id="dashboard_default" draggableHandle='.e-panel-header' columns={6} cellSpacing={cellSpacing} allowResizing={true}>
<PanelsDirective>
<PanelDirective sizeX={3} sizeY={2} row={0} col={0} content={pieTemplate} header="<div class='header'>Product usage ratio</div><span class='handler e-icons burg-icon'></span>"/>
<PanelDirective sizeX={3} sizeY={2} row={0} col={3} content={columnTemplate} header="<div class='header'>Last year Sales Comparison</div><span class='handler e-icons burg-icon'></span>"/>
<PanelDirective sizeX={3} sizeY={2} row={0} col={3} content={pieTemplate1} header="<div class='header'>Mobile browsers usage</div><span class='handler e-icons burg-icon'></span>"/>
<PanelDirective sizeX={3} sizeY={2} row={1} col={0} content={lineTemplate} header="<div class='header'>Sales increase percentage</div><span class='handler e-icons burg-icon'></span>"/>
</PanelsDirective>
</DashboardLayoutComponent>
</div>);
}
export default App;import {
AccumulationChartComponent, AccumulationSeriesCollectionDirective,
AccumulationSeriesDirective, AccumulationTooltip, Category, ChartComponent, ColumnSeries, DataLabel, Inject, Legend, LineSeries,
SeriesCollectionDirective, SeriesDirective, Tooltip
} from "@syncfusion/ej2-react-charts";
import { DashboardLayoutComponent, PanelDirective , PanelsDirective } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';
function App() {
const cellSpacing: number[] = [10, 10];
// Template for line Chart
function lineTemplate(): JSX.Element {
const lineData: object[] = [
{ x: 2013, y: 28 }, { x: 2014, y: 25 },{ x: 2015, y: 26 }, { x: 2016, y: 27 },
{ x: 2017, y: 32 }, { x: 2018, y: 35 },
];
return(
<div className="template" >
<ChartComponent style={{ "height":"162px" }}>
<Inject services={[LineSeries]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={lineData} xName='x' yName='y' type='Line'/>
</SeriesCollectionDirective>
</ChartComponent>
</div>
);
}
// Template for Pie Chart
function pieTemplate(): JSX.Element {
const pieData: object[] = [
{ x: 'TypeScript', y: 13, text: 'TS 13%' },
{ x: 'React', y: 12.5, text: 'Reat 12.5%' },
{ x: 'MVC', y: 12, text: 'MVC 12%' },
{ x: 'Core', y: 12.5, text: 'Core 12.5%' },
{ x: 'Vue', y: 10, text: 'Vue 10%' },
{ x: 'Angular', y: 40, text: 'Angular 40%' }
];
return(
<div className="template" >
<AccumulationChartComponent style={{"height":"162px"}} tooltip={{enable: true}}>
<Inject services={[ AccumulationTooltip]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={pieData} xName='x' yName='y' innerRadius="40%" />
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
</div>
);
}
// Template for Pie Chart 1
function pieTemplate1(): JSX.Element {
const pieData: object[] = [
{ 'x': 'Chrome', y: 37, text: '37%' },
{ 'x': 'UC Browser', y: 17, text: '17%' },
{ 'x': 'iPhone', y: 19, text: '19%' },
{ 'x': 'Others', y: 4, text: '4%' },
{ 'x': 'Opera', y: 11, text: '11%' },
{ 'x': 'Android', y: 12, text: '12%' }
];
const dataLabel: object = { visible: true, position: 'Inside', name: 'text', font: { fontWeight: '600' }};
const enableAnimation: boolean = false;
return(
<div className="template" >
<AccumulationChartComponent style={{"height":"162px"}} enableAnimation={ enableAnimation } legendSettings= {{ visible: false }}
tooltip={{enable: true, format: '${point.x} : <b>${point.y}%</b>'}}>
<Inject services={[ AccumulationTooltip]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={pieData} dataLabel={dataLabel} xName='x' yName='y' radius="70%" name = 'Browser'/>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
</div>
);
}
function columnTemplate(): JSX.Element {
const chartData: any[] = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
return(
<div className="template" >
<ChartComponent style={{"height":"162px"}} primaryXAxis={{ valueType: 'Category' }}>
<Inject services={[ColumnSeries, Legend, Tooltip, Category, DataLabel]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={chartData} xName='month' yName='sales' type='Column' />
</SeriesCollectionDirective>
</ChartComponent>
</div>
);
}
return (
<div id='container'>
<DashboardLayoutComponent id="dashboard_default" draggableHandle='.e-panel-header' columns={6} cellSpacing={cellSpacing} allowResizing={true}>
<PanelsDirective>
<PanelDirective sizeX={3} sizeY={2} row={0} col={0} content={pieTemplate as any} header="<div class='header'>Product usage ratio</div><span class='handler e-icons burg-icon'></span>" />
<PanelDirective sizeX={3} sizeY={2} row={0} col={3} content={columnTemplate as any} header="<div class='header'>Last year Sales Comparison</div><span class='handler e-icons burg-icon'></span>" />
<PanelDirective sizeX={3} sizeY={2} row={0} col={3} content={pieTemplate1 as any} header="<div class='header'>Mobile browsers usage</div><span class='handler e-icons burg-icon'></span>"/>
<PanelDirective sizeX={3} sizeY={2} row={1} col={0} content={lineTemplate as any} header="<div class='header'>Sales increase percentage</div><span class='handler e-icons burg-icon'></span>"/>
</PanelsDirective>
</DashboardLayoutComponent>
</div>
);
}
export default App;import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-react-layouts/styles/tailwind3.css";
#container {
margin: 0 auto;
width: 600px;
}
.e-dashboard-layout.e-control .e-panel .e-panel-container .e-panel-header {
color: rgba(0, 0, 0, 0.61);
}
.e-panel .e-header-text {
padding: 12px 0 12px 0;
}
#dashboard .e-panel-container .e-panel-header {
border-bottom: 1px solid #888383;
}
.e-dashboard-layout.e-control .e-panel:hover {
border: 0px;
}
.e-dashboard-layout.e-control .e-panel .e-panel-header {
font-size: 15px;
font-weight: 500;
height: 37px;
padding: 10px;
vertical-align: middle;
/* text-align: left; */
border-bottom: 0.5px solid rgba(0, 0, 0, .125);
}
.e-panel-header {
padding: 10px;
margin-bottom: 0;
background-color: rgba(0, 0, 0, .03);
}
.e-dashboard-layout.e-control .e-panel .e-panel-header{
height:30px
}
.e-dashboard-layout.e-control .e-panel .e-panel-header div{
text-align: center;
}
.header{
padding: 5px;
display: inline-block;
}
.e-panel-content{
height: 162px;
}
.handler.burg-icon:before {
content: '\e99a';
font-size: 16px;
}
.handler.burg-icon{
float: right;
padding-top: 2%;
}<!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="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-react-layouts/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-grids/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-charts/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-calendars/styles/tailwind3.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">
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Disabling Panel Dragging
Panel dragging is enabled by default in the Dashboard Layout. Disable this functionality using the allowDragging API. Setting allowDragging to false disables the dragging functionality in Dashboard Layout.
The following sample demonstrates Dashboard Layout with dragging support disabled.
import { DashboardLayoutComponent } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';
function App() {
const cellSpacing = [10, 10];
let allowDragging = false;
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="container">
<DashboardLayoutComponent id='defaultLayout' cellSpacing={cellSpacing} panels={panels} columns={5} allowDragging={allowDragging}/>
</div>
</div>);
}
export default App;import { DashboardLayoutComponent } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';
function App() {
const cellSpacing: number[] = [10, 10];
let allowDragging: boolean = false;
let panels: any = [
{'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="container">
<DashboardLayoutComponent id='defaultLayout' cellSpacing={cellSpacing} panels={panels} columns={5}
allowDragging={allowDragging} />
</div>
</div>
);
}
export default App;import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-react-layouts/styles/tailwind3.css";
.container {
margin: 0 auto;
width: 500px;
}
.e-panel-container .content {
vertical-align: middle;
font-weight: 600;
font-size: 20px;
text-align: center;
line-height: 90px;
}<!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="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-react-layouts/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-grids/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-charts/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-calendars/styles/tailwind3.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">
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Refer to the React Dashboard Layout feature tour page for its comprehensive feature representations. Also explore the React Dashboard Layout example to see practical implementations of panel manipulation.