Setting header of panels in React Dashboard Layout component

28 Feb 202524 minutes to read

The Dashboard Layout component is primarily used to represent data for monitoring or managing processes. This data or any HTML template can be placed as the content of a panel using the content property. Additionally, a word or phrase that summarizes the panel’s content can be added as a header at the top of each panel using the header property.

The following sample demonstrates how to add content and headers for each panel using the content and header properties of the panels.

import { DashboardLayoutComponent } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';
function App() {
    const cellSpacing = [10, 10];
    let panels = [
        { 'id': 'Panel0', 'sizeX': 1, 'sizeY': 1, 'row': 0, 'col': 0, header: '<div>Panel 0</div>', content: '<div class="content">Panel Content<div>' },
        { 'id': 'Panel1', 'sizeX': 3, 'sizeY': 2, 'row': 0, 'col': 1, header: '<div>Panel 1</div>', content: '<div class="content">Panel Content<div>' },
        { 'id': 'Panel2', 'sizeX': 1, 'sizeY': 3, 'row': 0, 'col': 4, header: '<div>Panel 2</div>', content: '<div class="content">Panel Content<div>' },
        { 'id': 'Panel3', 'sizeX': 1, 'sizeY': 1, 'row': 1, 'col': 0, header: '<div>Panel 3</div>', content: '<div class="content">Panel Content<div>' },
        { 'id': 'Panel4', 'sizeX': 2, 'sizeY': 1, 'row': 2, 'col': 0, header: '<div>Panel 4</div>', content: '<div class="content">Panel Content<div>' },
        { 'id': 'Panel5', 'sizeX': 1, 'sizeY': 1, 'row': 2, 'col': 2, header: '<div>Panel 5</div>', content: '<div class="content">Panel Content<div>' },
        { 'id': 'Panel6', 'sizeX': 1, 'sizeY': 1, 'row': 2, 'col': 3, header: '<div>Panel 6</div>', content: '<div class="content">Panel Content<div>' }
    ];
    return (<div>
          <div className="control-section">
              <DashboardLayoutComponent id='defaultLayout' cellSpacing={cellSpacing} 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[] = [10, 10];
  let panels: object[] =    [
    {'id':'Panel0', 'sizeX': 1, 'sizeY': 1,'row': 0, 'col': 0, header:'<div>Panel 0</div>', content:'<div class="content">Panel Content<div>'},
    {'id':'Panel1', 'sizeX': 3, 'sizeY': 2,'row': 0, 'col': 1, header:'<div>Panel 1</div>', content:'<div class="content">Panel Content<div>'},
    {'id':'Panel2', 'sizeX': 1, 'sizeY': 3,'row': 0, 'col': 4, header:'<div>Panel 2</div>', content:'<div class="content">Panel Content<div>'},
    {'id':'Panel3', 'sizeX': 1, 'sizeY': 1,'row': 1, 'col': 0, header:'<div>Panel 3</div>', content:'<div class="content">Panel Content<div>'},
    {'id':'Panel4', 'sizeX': 2, 'sizeY': 1,'row': 2, 'col': 0, header:'<div>Panel 4</div>', content:'<div class="content">Panel Content<div>'},
    {'id':'Panel5', 'sizeX': 1, 'sizeY': 1,'row': 2, 'col': 2, header:'<div>Panel 5</div>', content:'<div class="content">Panel Content<div>'},
    {'id':'Panel6', 'sizeX': 1, 'sizeY': 1,'row': 2, 'col': 3, header:'<div>Panel 6</div>', content:'<div class="content">Panel Content<div>'}
  ];

  return (
      <div>
          <div className="control-section">
              <DashboardLayoutComponent id='defaultLayout' cellSpacing={cellSpacing}  panels={panels} columns={5} />
          </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/material.css";
@import "../node_modules/@syncfusion/ej2-react-layouts/styles/material.css";

.control-section {
    margin: 0 auto;
    width: 500px;
  }

  #loader {
    color: #008cff;
    font-family: 'Helvetica Neue','calibiri';
    font-size: 14px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
  }
  
  .e-panel-container .content {
    font-weight: 600;
    text-align: center;
    margin-top: 10px;
    line-height: 100%;
  }
  
  .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;
  }
  
  .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;
    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);
  }
<!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/29.2.4/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/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">
<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>

Placing components as content of panels

In a dashboard, components such as charts, grids, maps, gauges, and more can be used to present complex data. These components can be placed as panel content by assigning the corresponding component element to the content property of the panel.

The following sample demonstrates how to add EJ2 Chart components as the content for each panel in the Dashboard Layout component.

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: 'React 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' } };
        return (<div className="template">
            <AccumulationChartComponent style={{ "height": "162px" }} tooltip={{ enable: true }}>
                <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>
        <div className="container">
            <div>
                <DashboardLayoutComponent id="dashboard_default" columns={6} cellSpacing={cellSpacing} allowResizing={true}>
                    <PanelsDirective>
                        <PanelDirective sizeX={3} sizeY={2} row={0} col={0} content={pieTemplate} header="<div>Product usage ratio</div>"/>
                        <PanelDirective sizeX={3} sizeY={2} row={0} col={3} content={columnTemplate} header="<div>Last year Sales Comparison</div>"/>
                        <PanelDirective sizeX={3} sizeY={2} row={0} col={3} content={pieTemplate1} header="<div>Mobile browsers usage</div>"/>
                        <PanelDirective sizeX={3} sizeY={2} row={1} col={0} content={lineTemplate} header="<div>Sales increase percentage</div>"/>
                    </PanelsDirective>
                </DashboardLayoutComponent>
            </div>
        </div>
    </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: 'React 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' }};
        return(
        <div className="template" >
            <AccumulationChartComponent style={{"height":"162px"}} tooltip={{enable: true}}>
                <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>
        <div className="container">
            <div>
                <DashboardLayoutComponent id="dashboard_default" columns={6} cellSpacing={cellSpacing} allowResizing={true}>
                    <PanelsDirective>
                        <PanelDirective sizeX={3} sizeY={2} row={0} col={0} content={pieTemplate as any} header="<div>Product usage ratio</div>" />
                        <PanelDirective sizeX={3} sizeY={2} row={0} col={3} content={columnTemplate as any} header="<div>Last year Sales Comparison</div>" />
                        <PanelDirective sizeX={3} sizeY={2} row={0} col={3} content={pieTemplate1 as any} header="<div>Mobile browsers usage</div>"/>
                        <PanelDirective sizeX={3} sizeY={2} row={1} col={0} content={lineTemplate as any} header="<div>Sales increase percentage</div>"/>
                    </PanelsDirective>
                </DashboardLayoutComponent>
            </div>
        </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/material.css";
@import "../node_modules/@syncfusion/ej2-react-layouts/styles/material.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;
}

.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;
  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;
}

.e-panel-content{
  height: 162px;
}
<!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/29.2.4/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-react-layouts/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-grids/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-charts/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-calendars/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">
<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>

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 learn how to present and manipulate data.