DEV Community

Justin Clark
Justin Clark

Posted on

Building Interactive Dashboards with React Dashboard

#powerplatform #webdev #beginners #tutorial

React Dashboard is a comprehensive dashboard framework for React that provides pre-built components and layouts for creating professional admin dashboards. It offers a complete solution with navigation, widgets, charts, and responsive design out of the box. This guide walks through setting up and creating dashboards using React Dashboard with React, from installation to a working implementation.

Prerequisites

Before you begin, make sure you have:

  • Node.js version 14.0 or higher installed
  • npm, yarn, or pnpm package manager
  • A React project (version 16.8 or higher) or create-react-app setup
  • Basic knowledge of React hooks (useState, useEffect)
  • Familiarity with JavaScript/TypeScript
  • Understanding of dashboard concepts

Installation

Install React Dashboard using your preferred package manager:

npm install react-dashboard
Enter fullscreen mode Exit fullscreen mode

Or with yarn:

yarn add react-dashboard
Enter fullscreen mode Exit fullscreen mode

Or with pnpm:

pnpm add react-dashboard
Enter fullscreen mode Exit fullscreen mode

After installation, your package.json should include:

{
  "dependencies": {
    "react-dashboard": "^1.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}
Enter fullscreen mode Exit fullscreen mode

Project Setup

React Dashboard requires minimal setup. Import the components and you're ready to use them.

First Example / Basic Usage

Let's create a simple dashboard. Create a new file src/DashboardExample.jsx:

// src/DashboardExample.jsx
import React from 'react';
import { Dashboard, Widget, Grid } from 'react-dashboard';

function DashboardExample() {
  const widgets = [
    {
      id: '1',
      title: 'Sales',
      value: '1,234',
      icon: '💰',
      color: '#4CAF50'
    },
    {
      id: '2',
      title: 'Revenue',
      value: '$12,345',
      icon: '💵',
      color: '#2196F3'
    },
    {
      id: '3',
      title: 'Users',
      value: '567',
      icon: '👥',
      color: '#FF9800'
    },
    {
      id: '4',
      title: 'Orders',
      value: '89',
      icon: '📦',
      color: '#9C27B0'
    }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <h2>Basic Dashboard Example</h2>
      <Dashboard>
        <Grid columns={4} gap={20}>
          {widgets.map(widget => (
            <Widget key={widget.id}>
              <div style={{
                padding: '20px',
                backgroundColor: '#fff',
                borderRadius: '8px',
                boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
                textAlign: 'center'
              }}>
                <div style={{ fontSize: '32px', marginBottom: '10px' }}>
                  {widget.icon}
                </div>
                <div style={{
                  fontSize: '24px',
                  fontWeight: 'bold',
                  marginBottom: '5px',
                  color: widget.color
                }}>
                  {widget.value}
                </div>
                <div style={{ color: '#666', fontSize: '14px' }}>
                  {widget.title}
                </div>
              </div>
            </Widget>
          ))}
        </Grid>
      </Dashboard>
    </div>
  );
}

export default DashboardExample;
Enter fullscreen mode Exit fullscreen mode

Update your App.jsx:

// src/App.jsx
import React from 'react';
import DashboardExample from './DashboardExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <DashboardExample />
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

This creates a basic dashboard with four metric widgets.

Understanding the Basics

React Dashboard provides dashboard components:

  • Dashboard: Main dashboard container
  • Widget: Individual dashboard widgets
  • Grid: Grid layout system
  • Navigation: Sidebar navigation
  • Responsive: Automatic responsive behavior

Key concepts:

  • Dashboard structure: Dashboard contains Grid and Widgets
  • Grid system: Use Grid with columns prop for layout
  • Widget components: Individual dashboard elements
  • Responsive design: Automatic responsive behavior
  • Customization: Extensive styling options

Here's an example with a more complex layout:

// src/AdvancedDashboardExample.jsx
import React from 'react';
import { Dashboard, Widget, Grid } from 'react-dashboard';

function AdvancedDashboardExample() {
  const metrics = [
    { id: '1', title: 'Total Sales', value: '$50,000', trend: '+12%' },
    { id: '2', title: 'Active Users', value: '1,234', trend: '+5%' },
    { id: '3', title: 'Orders', value: '567', trend: '+8%' },
    { id: '4', title: 'Revenue', value: '$25,000', trend: '+15%' }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '1400px', margin: '0 auto' }}>
      <h2>Advanced Dashboard Example</h2>
      <Dashboard>
        <Grid columns={4} gap={20}>
          {metrics.map(metric => (
            <Widget key={metric.id}>
              <div style={{
                padding: '20px',
                backgroundColor: '#fff',
                borderRadius: '8px',
                boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
              }}>
                <div style={{ fontSize: '14px', color: '#666', marginBottom: '10px' }}>
                  {metric.title}
                </div>
                <div style={{
                  fontSize: '28px',
                  fontWeight: 'bold',
                  marginBottom: '5px'
                }}>
                  {metric.value}
                </div>
                <div style={{ fontSize: '12px', color: '#4CAF50' }}>
                  {metric.trend}
                </div>
              </div>
            </Widget>
          ))}
        </Grid>
        <Grid columns={2} gap={20} style={{ marginTop: '20px' }}>
          <Widget>
            <div style={{
              padding: '20px',
              backgroundColor: '#fff',
              borderRadius: '8px',
              boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
              height: '300px'
            }}>
              <h3>Chart Placeholder</h3>
              <p>Chart would go here</p>
            </div>
          </Widget>
          <Widget>
            <div style={{
              padding: '20px',
              backgroundColor: '#fff',
              borderRadius: '8px',
              boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
              height: '300px'
            }}>
              <h3>Table Placeholder</h3>
              <p>Table would go here</p>
            </div>
          </Widget>
        </Grid>
      </Dashboard>
    </div>
  );
}

export default AdvancedDashboardExample;
Enter fullscreen mode Exit fullscreen mode

Practical Example / Building Something Real

Let's build a comprehensive analytics dashboard:

// src/AnalyticsDashboard.jsx
import React, { useState } from 'react';
import { Dashboard, Widget, Grid } from 'react-dashboard';

function AnalyticsDashboard() {
  const [selectedPeriod, setSelectedPeriod] = useState('monthly');

  const metrics = [
    { id: '1', title: 'Total Sales', value: '$50,000', trend: '+12%', color: '#4CAF50' },
    { id: '2', title: 'Active Users', value: '1,234', trend: '+5%', color: '#2196F3' },
    { id: '3', title: 'Orders', value: '567', trend: '+8%', color: '#FF9800' },
    { id: '4', title: 'Revenue', value: '$25,000', trend: '+15%', color: '#9C27B0' }
  ];

  const chartData = selectedPeriod === 'monthly' 
    ? 'Monthly chart data would be displayed here'
    : 'Quarterly chart data would be displayed here';

  return (
    <div style={{ padding: '20px', maxWidth: '1400px', margin: '0 auto' }}>
      <h1>Analytics Dashboard</h1>
      <div style={{ marginBottom: '20px', textAlign: 'center' }}>
        <button
          onClick={() => setSelectedPeriod('monthly')}
          style={{
            padding: '8px 16px',
            margin: '0 5px',
            backgroundColor: selectedPeriod === 'monthly' ? '#007bff' : '#6c757d',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Monthly
        </button>
        <button
          onClick={() => setSelectedPeriod('quarterly')}
          style={{
            padding: '8px 16px',
            margin: '0 5px',
            backgroundColor: selectedPeriod === 'quarterly' ? '#007bff' : '#6c757d',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Quarterly
        </button>
      </div>
      <Dashboard>
        <Grid columns={4} gap={20}>
          {metrics.map(metric => (
            <Widget key={metric.id}>
              <div style={{
                padding: '20px',
                backgroundColor: '#fff',
                borderRadius: '8px',
                boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
                borderLeft: `4px solid ${metric.color}`
              }}>
                <div style={{ fontSize: '14px', color: '#666', marginBottom: '10px' }}>
                  {metric.title}
                </div>
                <div style={{
                  fontSize: '28px',
                  fontWeight: 'bold',
                  marginBottom: '5px',
                  color: metric.color
                }}>
                  {metric.value}
                </div>
                <div style={{ fontSize: '12px', color: '#4CAF50' }}>
                  {metric.trend}
                </div>
              </div>
            </Widget>
          ))}
        </Grid>
        <Grid columns={2} gap={20} style={{ marginTop: '20px' }}>
          <Widget>
            <div style={{
              padding: '20px',
              backgroundColor: '#fff',
              borderRadius: '8px',
              boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
              height: '400px'
            }}>
              <h3>Sales Chart</h3>
              <p>{chartData}</p>
            </div>
          </Widget>
          <Widget>
            <div style={{
              padding: '20px',
              backgroundColor: '#fff',
              borderRadius: '8px',
              boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
              height: '400px'
            }}>
              <h3>Revenue Chart</h3>
              <p>Revenue visualization would go here</p>
            </div>
          </Widget>
        </Grid>
        <Grid columns={1} gap={20} style={{ marginTop: '20px' }}>
          <Widget>
            <div style={{
              padding: '20px',
              backgroundColor: '#fff',
              borderRadius: '8px',
              boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
              height: '300px'
            }}>
              <h3>Recent Activity</h3>
              <ul style={{ listStyle: 'none', padding: 0 }}>
                <li style={{ padding: '10px', borderBottom: '1px solid #eee' }}>Order #1234 completed</li>
                <li style={{ padding: '10px', borderBottom: '1px solid #eee' }}>New user registered</li>
                <li style={{ padding: '10px', borderBottom: '1px solid #eee' }}>Payment received</li>
                <li style={{ padding: '10px' }}>Report generated</li>
              </ul>
            </div>
          </Widget>
        </Grid>
      </Dashboard>
    </div>
  );
}

export default AnalyticsDashboard;
Enter fullscreen mode Exit fullscreen mode

Now create a customizable dashboard with navigation:

// src/CustomizableDashboard.jsx
import React, { useState } from 'react';
import { Dashboard, Widget, Grid, Sidebar, NavItem } from 'react-dashboard';

function CustomizableDashboard() {
  const [activeView, setActiveView] = useState('overview');

  const views = {
    overview: {
      title: 'Overview',
      content: (
        <Grid columns={3} gap={20}>
          <Widget>
            <div style={{ padding: '20px', backgroundColor: '#fff', borderRadius: '8px' }}>
              <h3>Widget 1</h3>
              <p>Overview content</p>
            </div>
          </Widget>
          <Widget>
            <div style={{ padding: '20px', backgroundColor: '#fff', borderRadius: '8px' }}>
              <h3>Widget 2</h3>
              <p>Overview content</p>
            </div>
          </Widget>
          <Widget>
            <div style={{ padding: '20px', backgroundColor: '#fff', borderRadius: '8px' }}>
              <h3>Widget 3</h3>
              <p>Overview content</p>
            </div>
          </Widget>
        </Grid>
      )
    },
    analytics: {
      title: 'Analytics',
      content: (
        <div style={{ padding: '20px', backgroundColor: '#fff', borderRadius: '8px' }}>
          <h3>Analytics View</h3>
          <p>Analytics content would go here</p>
        </div>
      )
    },
    reports: {
      title: 'Reports',
      content: (
        <div style={{ padding: '20px', backgroundColor: '#fff', borderRadius: '8px' }}>
          <h3>Reports View</h3>
          <p>Reports content would go here</p>
        </div>
      )
    }
  };

  return (
    <div style={{ display: 'flex', minHeight: '100vh' }}>
      <Sidebar style={{ width: '200px', backgroundColor: '#f8f9fa', padding: '20px' }}>
        <h3>Dashboard</h3>
        <nav style={{ marginTop: '20px' }}>
          {Object.keys(views).map(view => (
            <NavItem
              key={view}
              onClick={() => setActiveView(view)}
              style={{
                padding: '10px',
                marginBottom: '5px',
                cursor: 'pointer',
                backgroundColor: activeView === view ? '#007bff' : 'transparent',
                color: activeView === view ? 'white' : '#333',
                borderRadius: '4px'
              }}
            >
              {views[view].title}
            </NavItem>
          ))}
        </nav>
      </Sidebar>
      <div style={{ flex: 1, padding: '20px' }}>
        <h1>{views[activeView].title}</h1>
        <Dashboard>
          {views[activeView].content}
        </Dashboard>
      </div>
    </div>
  );
}

export default CustomizableDashboard;
Enter fullscreen mode Exit fullscreen mode

Update your App.jsx:

// src/App.jsx
import React from 'react';
import AnalyticsDashboard from './AnalyticsDashboard';
import CustomizableDashboard from './CustomizableDashboard';
import './App.css';

function App() {
  return (
    <div className="App">
      <AnalyticsDashboard />
      <CustomizableDashboard />
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

This example demonstrates:

  • Analytics dashboard
  • Multiple widgets
  • Grid layouts
  • Navigation
  • Dynamic views
  • Custom styling
  • Responsive design

Common Issues / Troubleshooting

  1. Dashboard not displaying: Make sure you're importing components correctly from 'react-dashboard'. Check that Grid and Widget components are properly nested.

  2. Layout issues: Use Grid component with columns prop to control layout. Adjust gap prop for spacing between widgets.

  3. Widgets not showing: Ensure Widget components are inside Grid. Check that Grid columns match the number of widgets per row.

  4. Styling issues: Customize widget styles through inline styles or CSS. Use boxShadow and borderRadius for card-like appearance.

  5. Responsive not working: Grid component handles responsiveness automatically. Adjust columns prop for different screen sizes.

  6. Navigation not working: Use Sidebar and NavItem components for navigation. Handle view changes with state management.

Next Steps

Now that you have an understanding of React Dashboard:

  • Explore all available components
  • Learn about advanced layouts
  • Add custom widgets
  • Implement data integration
  • Create responsive dashboards
  • Learn about other dashboard libraries
  • Check the official repository: https://github.com/flatlogic/react-dashboard

Summary

You've successfully set up React Dashboard in your React application and created analytics dashboards, metric widgets, and customizable layouts. React Dashboard provides a comprehensive solution for building professional admin dashboards with minimal configuration.

SEO Keywords

react-dashboard
React Dashboard
react-dashboard tutorial
React admin dashboard
react-dashboard installation
React dashboard framework
react-dashboard example
React dashboard widgets
react-dashboard setup
React analytics dashboard
react-dashboard customization
React dashboard component
react-dashboard grid
React dashboard layout
react-dashboard getting started

Top comments (0)