Designing a React Dashboard Layout with UI Components

Learn how to add UI components to Syncfusion’s React Dashboard Layout component in a React application. In this video, you will learn how to add UI components to the React dashboard layout component. You will also learn how to design a dashboard layout that represents data visualization of income, expenses, and transactions over a period of six months. You will see, how to add a React Spline area chart component that visualizes the income and expenses for six months. The pie chart visualizes the expenses made in different categories. And the React grid component shows details of transactions like transaction ID, category of expense, mode of payment, and amount of transaction.
You will see how to arrange panels using the cell spacing property, how to customize the look of the dashboard using the cssClass property, floating panels and the responsive and adaptive layouts functionality of the dashboard.
A Dashboard is a visual display of multiple panels arranged on a single screen so that several metrics can be monitored at a single glance. The panels hold UI components and allow resizing, reordering, dragging and dropping, removing, and adding. This allows you to easily place components at the desired positions within the grid layout.
Tutorial video: www.syncfusion.com/tutorial-v...
Download example from GitHub:
github.com/SyncfusionExamples...
TRIAL LICENSE KEY
-------------------
If you need a trial license key, start your React trial from www.syncfusion.com/account/ma... under your Syncfusion account. Then you can obtain your trial license key from the downloads page.
Check if you are eligible for a free license for all Syncfusion products on our Community License page. www.syncfusion.com/products/c...
BOOKMARK DETAILS
--------------------- 
[00:00] Introduction
[01:08] Designing a sample Dashboard Layout
[04:47] Installing React Charts and DataGrid packages
[05:34] Adding Spline Area chart
[06:26] Adding Pie chart
[07:13] Adding DataGrid
[08:11] Cell Spacing
[09:08] Floating
[09:46] Responsive and adaptive layout
REACT DASHBOARD LAYOUT
---------------------
Product overview: www.syncfusion.com/react-comp...
Examples: ej2.syncfusion.com/react/demo...
Documentation: ej2.syncfusion.com/react/docu...
React Chart: ej2.syncfusion.com/react/docu...
React Spline Area Chart: ej2.syncfusion.com/react/docu...
React Grid: ej2.syncfusion.com/react/docu...
Download free trial: www.syncfusion.com/downloads/...
NuGet package: www.npmjs.com/package/@syncfu...
SUBSCRIBE
-------------- 
Syncfusion on RUclips: bit.ly/syncfusionyoutube 
Sign up to receive email updates: bit.ly/syncfusionemail 
SOCIAL COMMUNITY
-----------------------------
Facebook: /  
Twitter: / syncfusion 
LinkedIn: / syncfusion
Instagram: / syncfusionofficial
#react #dashboard #layout

[@Jeff-wl1cz]

I just needed that!

[@RyanGause-lj8sn]

What if the component you assign to the 'content' property of a panel needs props passed to it?

[@SyncfusionInc]

Hi,
Based on the shared details, we understand you want to set the Dashboard layout content (syncfusion.pulse.ly/ug3id8z8tr) to render the component from the other JS file in the React application. To achieve your requirement, we rendered the Chart component in the Chart.pulse.ly/j894upiwi4 file and set it as the content of the Dashboard Layout component.
For your reference, we have attached the sample.
Sample: stackblitz.pulse.ly/2wsmq0lqsx