{"id":19962806,"url":"https://github.com/mui/workshop-joy-datagrid","last_synced_at":"2025-05-03T22:31:22.642Z","repository":{"id":168229387,"uuid":"641482193","full_name":"mui/workshop-joy-datagrid","owner":"mui","description":null,"archived":false,"fork":false,"pushed_at":"2023-07-20T13:03:46.000Z","size":249,"stargazers_count":10,"open_issues_count":3,"forks_count":4,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-04-19T06:49:25.128Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mui.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null},"funding":{"github":null,"patreon":null,"open_collective":"mui","ko_fi":null,"tidelift":null,"custom":null}},"created_at":"2023-05-16T14:59:46.000Z","updated_at":"2024-12-19T01:39:30.000Z","dependencies_parsed_at":"2023-06-08T08:00:21.786Z","dependency_job_id":"6a191a5a-cd41-4f63-a956-a715e708f17b","html_url":"https://github.com/mui/workshop-joy-datagrid","commit_stats":{"total_commits":8,"total_committers":1,"mean_commits":8.0,"dds":0.0,"last_synced_commit":"267b73fec8e3ec5b98ec923c202fb0c3b5581f36"},"previous_names":["mui/workshop-joy-datagrid"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mui%2Fworkshop-joy-datagrid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mui%2Fworkshop-joy-datagrid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mui%2Fworkshop-joy-datagrid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mui%2Fworkshop-joy-datagrid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mui","download_url":"https://codeload.github.com/mui/workshop-joy-datagrid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251045414,"owners_count":21527742,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T02:13:01.918Z","updated_at":"2025-05-03T22:31:22.618Z","avatar_url":"https://github.com/mui.png","language":"JavaScript","funding_links":["https://opencollective.com/mui"],"categories":[],"sub_categories":[],"readme":"# Workshop - Joy UI x Data Grid\n\nThis 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/).\n\n## Prerequisite\n\nYou should have basic knowledge of these technology:\n\n- React: went through the [official tutorial](https://react.dev/learn/tutorial-tic-tac-toe)\n- 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)\n- 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)\n\n## Get started\n\n1. Pull the [repo](https://github.com/mui/workshop-joy-datagrid)\n2. Install the dependencies with your preferred choices\n\n   ```sh\n   // 1. using yarn\n   yarn install\n\n   // 2. using npm\n   npm install\n\n   // 3. using pnpm\n   pnpm install\n   ```\n\n3. Start the development server, for example, if you use yarn:\n\n   ```sh\n   yarn dev\n   ```\n\n4. Visit `http://localhost:5173/` in your browser.\n\n## Solution\n\nSee [step-by-step](https://github.com/mui/workshop-joy-datagrid/commits/step-by-step) branch to learn what's changed in each commit.\n\n## Troubleshoot\n\nThis 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).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmui%2Fworkshop-joy-datagrid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmui%2Fworkshop-joy-datagrid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmui%2Fworkshop-joy-datagrid/lists"}