use codeblocks to differentiate between packages

mui · Jul 13, 2023 · f39f4dc · f39f4dc
1 parent c24838e
commit f39f4dc
Showing 1 changed file with 56 additions and 4 deletions.
diff --git a/docs/data/data-grid/components/components.md b/docs/data/data-grid/components/components.md
@@ -184,8 +184,10 @@ For example, for `columnMenu` slot, the interface name would be `ColumnMenuProps
 
 This [file](https://github.com/mui/mui-x/blob/-/packages/grid/x-data-grid/src/models/gridSlotsComponentsProps.ts) lists all the interfaces for each slot which could be used for augmentation.
 
-```tsx
-// augment the props for `toolbar` slot
+<codeblock storageKey="data-grid-pricing-plan">
+
+```tsx Community
+// augment the props for the toolbar slot
 declare module '@mui/x-data-grid' {
   interface ToolbarPropsOverrides {
     someCustomString: string;
@@ -195,19 +197,69 @@ declare module '@mui/x-data-grid' {
 
 <DataGrid
   slots={{
-    // custom component passed to the `toolbar` slot
+    // custom component passed to the toolbar slot
+    toolbar: CustomGridToolbar,
+  }}
+  slotProps={{
+    toolbar: {
+      // props required by CustomGridToolbar
+      someCustomString: 'Hello',
+      someCustomNumber: 42,
+    },
+  }}
+>
+```
+
+```tsx Pro
+// augment the props for the toolbar slot
+declare module '@mui/x-data-grid-pro' {
+  interface ToolbarPropsOverrides {
+    someCustomString: string;
+    someCustomNumber: number;
+  }
+}
+
+<DataGridPro
+  slots={{
+    // custom component passed to the toolbar slot
     toolbar: CustomGridToolbar,
   }}
   slotProps={{
     toolbar: {
-      // props required by `CustomGridToolbar`
+      // props required by CustomGridToolbar
       someCustomString: 'Hello',
       someCustomNumber: 42,
     },
   }}
 >
 ```
 
+```tsx Premium
+// augment the props for the toolbar slot
+declare module '@mui/x-data-grid-premium' {
+  interface ToolbarPropsOverrides {
+    someCustomString: string;
+    someCustomNumber: number;
+  }
+}
+
+<DataGridPremium
+  slots={{
+    // custom component passed to the toolbar slot
+    toolbar: CustomGridToolbar,
+  }}
+  slotProps={{
+    toolbar: {
+      // props required by CustomGridToolbar
+      someCustomString: 'Hello',
+      someCustomNumber: 42,
+    },
+  }}
+>
+```
+
+</codeblock>
+
 This demo below shows how to use the `slotProps` prop and module augmentation to pass a new prop `status` to the `footer` slot.
 
 {{"demo": "CustomFooter.js", "bg": "inline"}}