From eb5e147e4da3c15769a6e3df50c23b3af7710053 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Mon, 27 May 2024 04:02:46 +0500 Subject: [PATCH 1/2] [docs] Improve the Data Grid FAQ section --- docs/data/data-grid/faq/faq.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/docs/data/data-grid/faq/faq.md b/docs/data/data-grid/faq/faq.md index 823b9a6d1f7d..e038123ef65f 100644 --- a/docs/data/data-grid/faq/faq.md +++ b/docs/data/data-grid/faq/faq.md @@ -120,3 +120,23 @@ A few common use-cases are: - Formatting a boolean value to `Yes` or `No` It only impacts the rendering part and does not impact the internal calculations like filtering or sorting. You can know more about it in the [value formatter](/x/react-data-grid/column-definition/#value-formatter) section. + +## What is purpose of useDemoData hook used in the documentation examples? + +The `useDemoData` hook is a utility hook coming from package `@mui/x-data-grid-generator` that generates random data for the Data Grid. It is used frequently in the documentation examples to provide realistic data in the documentation examples without polluting the code with data generation logic. + +Here's an example of how to use it: + +```tsx +import * as React from 'react'; +import { DataGrid } from '@mui/x-data-grid'; +import { useDemoData } from '@mui/x-data-grid-generator'; + +export default function Demo() { + const { data } = useDemoData({ dataSet: 'Commodity', rowLength: 100 }); + + return ; +} +``` + +It comes with two datasets `Commodity` and `Employee`. You can customize the data generation by passing the custom options of type [`UseDemoDataOptions`](https://github.com/mui/mui-x/blob/6aad22644ee710690b90dc2ac6bbafceb91fecf0/packages/x-data-grid-generator/src/hooks/useDemoData.ts#L29-L36). From 56448d91984deafdd6fea8c071769d7d09612a6a Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Tue, 28 May 2024 16:12:21 +0500 Subject: [PATCH 2/2] Apply suggestions from code review Co-authored-by: Andrew Cherniavskii Signed-off-by: Bilal Shafi --- docs/data/data-grid/faq/faq.md | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/docs/data/data-grid/faq/faq.md b/docs/data/data-grid/faq/faq.md index e038123ef65f..7c3d17e7c94b 100644 --- a/docs/data/data-grid/faq/faq.md +++ b/docs/data/data-grid/faq/faq.md @@ -121,11 +121,12 @@ A few common use-cases are: It only impacts the rendering part and does not impact the internal calculations like filtering or sorting. You can know more about it in the [value formatter](/x/react-data-grid/column-definition/#value-formatter) section. -## What is purpose of useDemoData hook used in the documentation examples? +## What is the purpose of useDemoData hook used in the documentation examples? -The `useDemoData` hook is a utility hook coming from package `@mui/x-data-grid-generator` that generates random data for the Data Grid. It is used frequently in the documentation examples to provide realistic data in the documentation examples without polluting the code with data generation logic. +The `useDemoData` hook is a utility hook from the `@mui/x-data-grid-generator` package. +It generates random data for the Data Grid. It is often used in documentation examples to provide realistic data without polluting the code with data generation logic. -Here's an example of how to use it: +Here's how it's used: ```tsx import * as React from 'react'; @@ -139,4 +140,10 @@ export default function Demo() { } ``` -It comes with two datasets `Commodity` and `Employee`. You can customize the data generation by passing the custom options of type [`UseDemoDataOptions`](https://github.com/mui/mui-x/blob/6aad22644ee710690b90dc2ac6bbafceb91fecf0/packages/x-data-grid-generator/src/hooks/useDemoData.ts#L29-L36). +It comes with two datasets: `Commodity` and `Employee`. You can customize the data generation by passing the custom options of type [`UseDemoDataOptions`](https://github.com/mui/mui-x/blob/6aad22644ee710690b90dc2ac6bbafceb91fecf0/packages/x-data-grid-generator/src/hooks/useDemoData.ts#L29-L36). + +:::error +`@mui/x-data-grid-generator` is a development-only package and should not be used in production. +You can use it to create a reproduction of a bug or generate demo data in your development environment. +You should not rely on its API – we don't follow semver for this package. +:::