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

• Pull the repo
• Install the dependencies with your preferred choices

// 1. using yarn
   yarn install

   // 2. using npm
   npm install

   // 3. using pnpm
   pnpm install

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

yarn dev

• 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.