Build a COMPLETE React Admin Dashboard App

If you are looking to build an admin dashboard app using React, Material UI, Data Grid, and support for both light and dark mode, you’re in the right place. In this tutorial, we will walk you through the process of creating a fully functional admin dashboard app with all these features.

Prerequisites

Before we begin, make sure you have a basic understanding of React and JavaScript. Familiarity with Material UI and its components will also be beneficial.

Setting Up Your Project

Start by creating a new React project. You can use Create React App or any other tool of your choice.

Open your project in your preferred code editor and install the required dependencies:

npm install @material-ui/core @material-ui/icons @mui/x-data-grid

Creating the Dashboard Layout

Now, let’s start by creating the dashboard layout. We will define the basic structure of our app using HTML and CSS. Feel free to style the app as per your preferences.

Here, we will use Material UI components to build the layout. Material UI provides pre-defined components that follow the Material Design guidelines, making it easy to create a visually appealing dashboard.

    
        <div className="dashboard">
        <AppBar position="static">
        <Toolbar>
        <Typography variant="h6">Admin Dashboard</Typography>
        </Toolbar>
        </AppBar>
        
        <div className="content">
        <Sidebar />
        <main>
        <DashboardCards />
        <DataGrid />
        </main>
        </div>
        </div>
    

Adding Data Grid

The Data Grid component allows you to display and manipulate large amounts of data in a tabular format. Install the required dependencies for Data Grid:

npm install @mui/x-data-grid

Create a new component called DataGrid.js and import the necessary dependencies:

    
        import { DataGrid } from '@mui/x-data-grid';
        
        const columns = [
        { field: 'id', headerName: 'ID', width: 90 },
        { field: 'firstName', headerName: 'First name', width: 150 },
        { field: 'lastName', headerName: 'Last name', width: 150 },
        { field: 'age', headerName: 'Age', type: 'number', width: 90 },
        ];
        
        const rows = [
        { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
        { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
        { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
        { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
        { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
        { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
        { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
        { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
        { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
        ];
        
        function DataGrid() {
        return (
        <div style={{ height: 400, width: '100%' }}>
        <DataGrid rows={rows} columns={columns} pageSize={5} checkboxSelection />
        </div>
        );
        }
        
        export default DataGrid;
    

Adding Light & Dark Mode

To support both light and dark mode, we will use Material UI’s ThemeProvider component. This component allows us to define our custom themes and switch between them based on our users’ preferences.

Import the necessary dependencies:

    
        import { createTheme, ThemeProvider } from '@material-ui/core/styles';
        
        const lightTheme = createTheme({
        palette: {
        type: 'light',
        },
        });
        
        const darkTheme = createTheme({
        palette: {
        type: 'dark',
        },
        });
        
        function App() {
        const [isDarkMode, setIsDarkMode] = useState(false);
        
        const theme = isDarkMode ? darkTheme : lightTheme;
        
        const toggleTheme = () => {
        setIsDarkMode(!isDarkMode);
        };
        
        return (
        <ThemeProvider theme={theme}>
        <div className="App">
        <button onClick={toggleTheme}>Toggle Theme</button>
        
        <Dashboard />
        </div>
        </ThemeProvider>
        );
        }
        
        export default App;
    

Conclusion

Congratulations! You have successfully built a complete React admin dashboard app with support for Material UI, Data Grid, and both light and dark mode. You can now customize this app further to meet your specific requirements and add additional features as needed.

Remember to regularly update your dependencies and stay up-to-date with new releases of React, Material UI, and other libraries you are using in your project.