https://github.com/mui/workshop-joy-datagrid
https://github.com/mui/workshop-joy-datagrid
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/mui/workshop-joy-datagrid
- Owner: mui
- Created: 2023-05-16T14:59:46.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2023-07-20T13:03:46.000Z (almost 3 years ago)
- Last Synced: 2025-04-19T06:49:25.128Z (about 1 year ago)
- Language: JavaScript
- Size: 243 KB
- Stars: 10
- Watchers: 15
- Forks: 4
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Workshop - Joy UI x Data Grid
This workshop will show you how to build a robust data table using MUI [X Data Grid](https://mui.com/x/react-data-grid/) and [Joy UI](https://mui.com/joy-ui/getting-started/overview/).
## Prerequisite
You should have basic knowledge of these technology:
- React: went through the [official tutorial](https://react.dev/learn/tutorial-tic-tac-toe)
- JavaScript: [`Array.map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) and [async/await](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)
- CSS: [class selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors) and [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
## Get started
1. Pull the [repo](https://github.com/mui/workshop-joy-datagrid)
2. Install the dependencies with your preferred choices
```sh
// 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:
```sh
yarn dev
```
4. Visit `http://localhost:5173/` in your browser.
## Solution
See [step-by-step](https://github.com/mui/workshop-joy-datagrid/commits/step-by-step) branch to learn what's changed in each commit.
## Troubleshoot
This project uses [vite](https://vitejs.dev/guide/) for running development server but if you encounter any problem, you can create a new project with [create react app](https://create-react-app.dev/) and install the [dependencies](https://github.com/mui/workshop-joy-datagrid/commit/61f86ad3e952a31506baf8d24fce0fce5a3f6032).