Search results

Responsive and Adaptive Layout in React Dashboard Layout component

The control is provided with built-in responsive support, where panels within the layout get adjusted based on their parent element’s dimensions to accommodate any resolution which relieves the burden of building responsive dashboards.

The dashboard layout is designed to automatically adapt with lower resolutions by transforming the entire layout into a stacked one, so that, the panels will be displayed in a vertical column. By default, whenever the screen resolution meets 600 px or lower resolutions this layout transformation occurs. This transformation can be modified for any user defined resolution by defining the for the mediaQuery property of the component.

The following sample demonstrates the usage of the mediaQuery property to turn out the layout into a stacked one in user defined resolution. Here, whenever, the window size reaches 700 px or lesser, the layout becomes a stacked layout.

Source
Preview
App.tsx
index.tsx
index.html
App.css
App.jsx
index.jsx
import {  DashboardLayoutComponent } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';

export default class App extends React.Component<{}, {}> {
  public cellSpacing: number[] = [20, 20];
  public mediaQuery: string = 'max-width: 700px';
  public 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>' }
  ];

  public render() {
    return (
      <div>
      <div id='container'>
        <DashboardLayoutComponent id='defaultLayout' columns={5} cellSpacing={this.cellSpacing}  panels={this.panels}  mediaQuery={this.mediaQuery} />
      </div>
    </div>
    );
  }
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App  from './App';

ReactDOM.render(<App />, document.getElementById('root'));
<!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/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-layouts/styles/material.css";

#container {
    margin: 0 auto;
    width: 500px;
  }
  
#defaultLayout .e-panel .e-panel-container .content {
    vertical-align: middle;
    font-weight: 600;
    font-size: 20px;
    text-align: center;
    line-height: 90px;
}
import { DashboardLayoutComponent } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.cellSpacing = [20, 20];
        this.mediaQuery = 'max-width: 700px';
        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 id='container'>
        <DashboardLayoutComponent id='defaultLayout' columns={5} cellSpacing={this.cellSpacing} panels={this.panels} mediaQuery={this.mediaQuery}/>
      </div>
    </div>);
    }
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));