Workshop - Joy UI x Data Grid

This workshop will show you how to build a robust data table using MUI X Data Grid and Joy UI.

Prerequisite

You should have basic knowledge of these technology:

• React: went through the official tutorial
• JavaScript: Array.map and async/await
• CSS: class selector and custom properties

Get started

1. Pull the repo

2. Install the dependencies with your preferred choices

   // 1. using yarn
   yarn install
   
   // 2. using npm
   npm install
   
   // 3. using pnpm
   pnpm install

3. Start the development server, for example, if you use yarn:

   yarn dev

4. Visit http://localhost:5173/ in your browser.

Solution

See step-by-step branch to learn what's changed in each commit.

Troubleshoot

This project uses vite for running development server but if you encounter any problem, you can create a new project with create react app and install the dependencies.