How can I help you?
Setting size of cells in Vue Dashboard Layout component
5 Mar 202624 minutes to read
The layout dimensions are determined by the height and width of the parent element. A responsive or static layout can be created by assigning percentage or fixed dimensions to the parent element. The layout adapts to mobile resolutions by transforming the entire layout into a stacked orientation, so that, the panels will be displayed in a vertical column.
The Dashboard Layout is a grid-structured component divided into equal subsections called cells. The total number of cells per row is defined by the columns property. Each cell’s width is calculated automatically based on the number of cells in a row; by default a cell’s height equals its width. However, the height of these cells can also be configured to any desired size using the cellAspectRatio property (cell width/cell height ratio) which defines the cell width to height ratio.
Rows are not limited and increase based on panel count and positions. Panels act as data containers and are placed over these cells.
Modifying cell size
In a dashboard, the data to be held by the panel in a cell may be of different size, hence different cell dimensions may be required in different scenarios. In this case, the size of these grid cells can be modified to the required size using the columns and cellAspectRatio properties.
The following sample demonstrates adjusting cell size using columns and cellAspectRatio properties. In the sample, the parent width is divided into five equal cells based on the columns property value resulting the width of each cell as 100 px. The height of these cells will be 50 px based on the cellAspectRatio value 100/50 (i.e. for every 100 px of width, 50 px will be the height of the cell).
<template>
<div class="control-section">
<ejs-dashboardlayout id='dashboard_layout' :columns="7" :cellSpacing='cellSpacing'
:cellAspectRatio='cellAspectRatio'>
<e-panels>
<e-panel :sizeX="1" :sizeY="1" :row="0" :col="0" content="<div class='content'>0</div>"></e-panel>
<e-panel :sizeX="3" :sizeY="2" :row="0" :col="1" content="<div class='content'>1</div>"></e-panel>
<e-panel :sizeX="1" :sizeY="3" :row="0" :col="4" content="<div class='content'>2</div>"></e-panel>
<e-panel :sizeX="1" :sizeY="1" :row="1" :col="0" content="<div class='content'>3</div>"></e-panel>
<e-panel :sizeX="2" :sizeY="1" :row="2" :col="0" content="<div class='content'>4</div>"></e-panel>
<e-panel :sizeX="1" :sizeY="1" :row="2" :col="2" content="<div class='content'>5</div>"></e-panel>
<e-panel :sizeX="1" :sizeY="1" :row="2" :col="3" content="<div class='content'>6</div>"></e-panel>
</e-panels>
</ejs-dashboardlayout>
</div>
</template>
<script setup>
// Import syncfusion Dashboard Layout component from layouts package
import { DashboardLayoutComponent as EjsDashboardlayout, PanelDirective as EPanel, PanelsDirective as EPanels } from "@syncfusion/ej2-vue-layouts";
const cellSpacing = [10, 10];
const cellAspectRatio = 100 / 50;
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.css";
/* Dashboard Layout component styles */
#dashboard_layout .e-panel .e-panel-content {
vertical-align: middle;
font-weight: 600;
font-size: 20px;
text-align: center;
line-height: 60px;
}
#dashboard_layout .e-panel {
transition: none !important;
}
</style><template>
<div class="control-section">
<!-- Dashboard Layout component declaration -->
<ejs-dashboardlayout id='dashboard_layout' :columns="7" :cellSpacing='cellSpacing'
:cellAspectRatio='cellAspectRatio'>
<e-panels>
<e-panel :sizeX="1" :sizeY="1" :row="0" :col="0" content="<div class='content'>0</div>"></e-panel>
<e-panel :sizeX="3" :sizeY="2" :row="0" :col="1" content="<div class='content'>1</div>"></e-panel>
<e-panel :sizeX="1" :sizeY="3" :row="0" :col="4" content="<div class='content'>2</div>"></e-panel>
<e-panel :sizeX="1" :sizeY="1" :row="1" :col="0" content="<div class='content'>3</div>"></e-panel>
<e-panel :sizeX="2" :sizeY="1" :row="2" :col="0" content="<div class='content'>4</div>"></e-panel>
<e-panel :sizeX="1" :sizeY="1" :row="2" :col="2" content="<div class='content'>5</div>"></e-panel>
<e-panel :sizeX="1" :sizeY="1" :row="2" :col="3" content="<div class='content'>6</div>"></e-panel>
</e-panels>
</ejs-dashboardlayout>
<!-- end of Dashboard Layout component -->
</div>
</template>
<script>
// Import syncfusion Dashboard Layout component from layouts package
import { DashboardLayoutComponent, PanelDirective, PanelsDirective } from "@syncfusion/ej2-vue-layouts";
export default {
name: "App",
components: {
"ejs-dashboardlayout": DashboardLayoutComponent,
"e-panels": PanelsDirective,
"e-panel": PanelDirective
},
data: function () {
return {
cellSpacing: [10, 10],
cellAspectRatio: 100 / 50
};
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.css";
/* Dashboard Layout component styles */
#dashboard_layout .e-panel .e-panel-content {
vertical-align: middle;
font-weight: 600;
font-size: 20px;
text-align: center;
line-height: 60px;
}
#dashboard_layout .e-panel {
transition: none !important;
}
</style>Setting cell spacing
Define the spacing between panels using the cellSpacing property. Spacing improves layout clarity and separation between panels.
The following sample demonstrates using the cellSpacing property which helps in a neat and clear representation of a data.
<template>
<div class="control-section">
<ejs-dashboardlayout id='dashboard_layout' :columns="7" :cellSpacing='cellSpacing'>
<e-panels>
<e-panel :sizeX="1" :sizeY="1" :row="0" :col="0" content="<div class='content'>0</div>"></e-panel>
<e-panel :sizeX="3" :sizeY="2" :row="0" :col="1" content="<div class='content'>1</div>"></e-panel>
<e-panel :sizeX="1" :sizeY="3" :row="0" :col="4" content="<div class='content'>2</div>"></e-panel>
<e-panel :sizeX="1" :sizeY="1" :row="1" :col="0" content="<div class='content'>3</div>"></e-panel>
<e-panel :sizeX="2" :sizeY="1" :row="2" :col="0" content="<div class='content'>4</div>"></e-panel>
<e-panel :sizeX="1" :sizeY="1" :row="2" :col="2" content="<div class='content'>5</div>"></e-panel>
<e-panel :sizeX="1" :sizeY="1" :row="2" :col="3" content="<div class='content'>6</div>"></e-panel>
</e-panels>
</ejs-dashboardlayout>
</div>
</template>
<script setup>
// Import syncfusion Dashboard Layout component from layouts package
import { DashboardLayoutComponent as EjsDashboardlayout, PanelDirective as EPanel, PanelsDirective as EPanels } from "@syncfusion/ej2-vue-layouts";
const cellSpacing = [20, 20];
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.css";
/.control-section {
height: 395px;
}
#dashboard_layout .e-panel .e-panel-content {
vertical-align: middle;
font-weight: 600;
font-size: 20px;
text-align: center;
line-height: 100px;
}
#dashboard_layout .e-panel {
transition: none !important;
}
</style><template>
<div class="control-section">
<ejs-dashboardlayout id='dashboard_layout' :columns="7" :cellSpacing='cellSpacing'>
<e-panels>
<e-panel :sizeX="1" :sizeY="1" :row="0" :col="0" content="<div class='content'>0</div>"></e-panel>
<e-panel :sizeX="3" :sizeY="2" :row="0" :col="1" content="<div class='content'>1</div>"></e-panel>
<e-panel :sizeX="1" :sizeY="3" :row="0" :col="4" content="<div class='content'>2</div>"></e-panel>
<e-panel :sizeX="1" :sizeY="1" :row="1" :col="0" content="<div class='content'>3</div>"></e-panel>
<e-panel :sizeX="2" :sizeY="1" :row="2" :col="0" content="<div class='content'>4</div>"></e-panel>
<e-panel :sizeX="1" :sizeY="1" :row="2" :col="2" content="<div class='content'>5</div>"></e-panel>
<e-panel :sizeX="1" :sizeY="1" :row="2" :col="3" content="<div class='content'>6</div>"></e-panel>
</e-panels>
</ejs-dashboardlayout>
</div>
</template>
<script>
// Import syncfusion Dashboard Layout component from layouts package
import { DashboardLayoutComponent, PanelDirective, PanelsDirective } from "@syncfusion/ej2-vue-layouts";
export default {
name: "App",
components: {
"ejs-dashboardlayout": DashboardLayoutComponent,
"e-panels": PanelsDirective,
"e-panel": PanelDirective
},
data: function () {
return {
cellSpacing: [20, 20]
};
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.css";
.control-section {
height: 395px;
}
#dashboard_layout .e-panel .e-panel-content {
vertical-align: middle;
font-weight: 600;
font-size: 20px;
text-align: center;
line-height: 100px;
}
#dashboard_layout .e-panel {
transition: none !important;
}
</style>Graphical representation of layout
The grid-structured layout is hidden by default. Enable the showGridLines property, which clearly pictures the cells split-up within the layout. These gridlines will be helpful in panels sizing and placement within the layout during initial designing of a dashboard.
In the following sample, the grid lines indicate the cells split-up of the layout and the data containers placed over these cells are known as panels.
<template>
<div class="control-section">
<ejs-dashboardlayout id='dashboard_layout' :cellSpacing='cellSpacing' :showGridLines='showGridLines' :columns="7">
<e-panels>
<e-panel :sizeX="3" :sizeY="2" :row="0" :col="1" content="<div class='content'>1</div>"></e-panel>
<e-panel :sizeX="1" :sizeY="3" :row="0" :col="4" content="<div class='content'>2</div>"></e-panel>
<e-panel :sizeX="1" :sizeY="1" :row="2" :col="2" content="<div class='content'>3</div>"></e-panel>
<e-panel :sizeX="1" :sizeY="1" :row="2" :col="3" content="<div class='content'>4</div>"></e-panel>
</e-panels>
</ejs-dashboardlayout>
</div>
</template>
<script setup>
// Import syncfusion Dashboard Layout component from layouts package
import { DashboardLayoutComponent as EjsDashboardlayout, PanelDirective as EPanel, PanelsDirective as EPanels } from "@syncfusion/ej2-vue-layouts";
const cellSpacing = [10, 10];
const showGridLines = true;
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.css";
.control-section {
height: 395px;
}
#dashboard_layout .e-panel .e-panel-container .content {
vertical-align: middle;
font-weight: 600;
font-size: 20px;
text-align: center;
line-height: 100px;
}
#dashboard_layout .e-panel {
transition: none !important;
}
</style><template>
<div class="control-section">
<ejs-dashboardlayout id='dashboard_layout' :cellSpacing='cellSpacing' :showGridLines='showGridLines' :columns="7">
<e-panels>
<e-panel :sizeX="3" :sizeY="2" :row="0" :col="1" content="<div class='content'>1</div>"></e-panel>
<e-panel :sizeX="1" :sizeY="3" :row="0" :col="4" content="<div class='content'>2</div>"></e-panel>
<e-panel :sizeX="1" :sizeY="1" :row="2" :col="2" content="<div class='content'>3</div>"></e-panel>
<e-panel :sizeX="1" :sizeY="1" :row="2" :col="3" content="<div class='content'>4</div>"></e-panel>
</e-panels>
</ejs-dashboardlayout>
</div>
</template>
<script>
// Import syncfusion Dashboard Layout component from layouts package
import { DashboardLayoutComponent, PanelDirective, PanelsDirective } from "@syncfusion/ej2-vue-layouts";
export default {
name: "App",
components: {
"ejs-dashboardlayout": DashboardLayoutComponent,
"e-panels": PanelsDirective,
"e-panel": PanelDirective,
},
data: function () {
return {
cellSpacing: [10, 10],
showGridLines: true,
};
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.css";
.control-section {
height: 395px;
}
#dashboard_layout .e-panel .e-panel-container .content {
vertical-align: middle;
font-weight: 600;
font-size: 20px;
text-align: center;
line-height: 100px;
}
#dashboard_layout .e-panel {
transition: none !important;
}
</style>Rendering component in right-to-left direction
Render the Dashboard Layout in right-to-left direction by setting the enableRtl API to true.
The following sample demonstrates Dashboard Layout in right-to-left direction.
<template>
<div class="col-lg-8 control-section">
<ejs-dashboardlayout id="defaultLayout" :cellSpacing="spacing" :columns="7" :enableRtl="enableRtl">
<e-panels>
<e-panel id="panel0" :row="0" :col="0" :sizeX="1" :sizeY="1" header="<div>Panel 0</div>"
content='<div class="content">Panel Content<div>'></e-panel>
<e-panel id="panel1" :row="0" :col="1" :sizeX="3" :sizeY="2" header="<div>Panel 1</div>"
content='<div class="content">Panel Content<div>'></e-panel>
<e-panel id="panel2" :row="0" :col="4" :sizeX="1" :sizeY="3" header="<div>Panel 2</div>"
content='<div class="content">Panel Content<div>'></e-panel>
<e-panel id="panel3" :row="1" :col="0" :sizeX="1" :sizeY="1" header="<div>Panel 3</div>"
content='<div class="content">Panel Content<div>'></e-panel>
<e-panel id="panel4" :row="2" :col="0" :sizeX="2" :sizeY="1" header="<div>Panel 4</div>"
content='<div class="content">Panel Content<div>'></e-panel>
<e-panel id="panel5" :row="2" :col="2" :sizeX="1" :sizeY="1" header="<div>Panel 5</div>"
content='<div class="content">Panel Content<div>'></e-panel>
<e-panel id="panel6" :row="2" :col="3" :sizeX="1" :sizeY="1" header="<div>Panel 6</div>"
content='<div class="content">Panel Content<div>'></e-panel>
</e-panels>
</ejs-dashboardlayout>
</div>
</template>
<script setup>
// Import syncfusion Dashboard Layout component from layouts package
import { DashboardLayoutComponent as EjsDashboardlayout, PanelDirective as EPanel, PanelsDirective as EPanels } from "@syncfusion/ej2-vue-layouts";
const spacing = [10, 10];
const enableRtl = true;
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.css";
.control-section {
height: 395px;
}
#defaultLayout .e-panel .e-panel-container .e-panel-header {
vertical-align: middle;
font-weight: 600;
font-size: 20px;
padding: 10px
}
.e-panel-content {
padding: 20px;
}
#defaultLayout .e-panel {
transition: none !important;
}
</style><template>
<div class="col-lg-8 control-section">
<ejs-dashboardlayout id="defaultLayout" :cellSpacing="spacing" :columns="7" :enableRtl="enableRtl">
<e-panels>
<e-panel id="panel0" :row="0" :col="0" :sizeX="1" :sizeY="1" header="<div>Panel 0</div>"
content='<div class="content">Panel Content<div>'></e-panel>
<e-panel id="panel1" :row="0" :col="1" :sizeX="3" :sizeY="2" header="<div>Panel 1</div>"
content='<div class="content">Panel Content<div>'></e-panel>
<e-panel id="panel2" :row="0" :col="4" :sizeX="1" :sizeY="3" header="<div>Panel 2</div>"
content='<div class="content">Panel Content<div>'></e-panel>
<e-panel id="panel3" :row="1" :col="0" :sizeX="1" :sizeY="1" header="<div>Panel 3</div>"
content='<div class="content">Panel Content<div>'></e-panel>
<e-panel id="panel4" :row="2" :col="0" :sizeX="2" :sizeY="1" header="<div>Panel 4</div>"
content='<div class="content">Panel Content<div>'></e-panel>
<e-panel id="panel5" :row="2" :col="2" :sizeX="1" :sizeY="1" header="<div>Panel 5</div>"
content='<div class="content">Panel Content<div>'></e-panel>
<e-panel id="panel6" :row="2" :col="3" :sizeX="1" :sizeY="1" header="<div>Panel 6</div>"
content='<div class="content">Panel Content<div>'></e-panel>
</e-panels>
</ejs-dashboardlayout>
</div>
</template>
<script>
// Import syncfusion Dashboard Layout component from layouts package
import { DashboardLayoutComponent, PanelDirective, PanelsDirective } from "@syncfusion/ej2-vue-layouts";
export default {
name: "App",
components: {
"ejs-dashboardlayout": DashboardLayoutComponent,
"e-panels": PanelsDirective,
"e-panel": PanelDirective
},
data: function () {
return {
spacing: [10, 10],
enableRtl: true
};
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.css";
/* Dashboard Layout component styles */
#defaultLayout .e-panel .e-panel-container .e-panel-header {
vertical-align: middle;
font-weight: 600;
font-size: 20px;
padding: 10px
}
.e-panel-content {
padding: 20px;
}
#defaultLayout .e-panel {
transition: none !important;
}
</style>Refer to the Vue Dashboard Layout feature tour page for its groundbreaking feature representations. Also explore the Vue Dashboard Layout example to knows how to present and manipulate data.