[draft] Scrolling improvements exploration

docs/data/data-grid/performance/Example.js

@@ -0,0 +1,5 @@
+import { ExampleConcept } from '@mui/x-data-grid-premium';
+
+export default function Example() {
+  return <ExampleConcept />;
+}

docs/data/data-grid/performance/Example.tsx

@@ -0,0 +1,5 @@
+import { ExampleConcept } from '@mui/x-data-grid-premium'
+
+export default function Example() {
+  return <ExampleConcept />
+}

docs/data/data-grid/performance/Example.tsx.preview

@@ -0,0 +1 @@
+<ExampleConcept />

docs/data/data-grid/performance/performance.md

@@ -2,6 +2,9 @@
 
 <p class="description">Improve the performance of the DataGrid using the recommendations from this guide.</p>
 
+
+{{"demo": "Example.js", "bg": "inline", "defaultCodeOpen": false}}
+
 ## Memoize inner components with `React.memo`
 
 The `DataGrid` component is composed of a central state object where all data is stored.

docs/package.json

@@ -36,6 +36,7 @@
     "@trendmicro/react-interpolate": "^0.5.5",
     "@types/lodash": "^4.14.194",
     "@types/moment-hijri": "^2.1.0",
+    "@types/rbush": "^3.0.0",
     "@types/react-dom": "^18.2.4",
     "@types/react-router-dom": "^5.3.3",
     "ast-types": "^0.14.2",

docs/pages/_app.js

@@ -19,6 +19,8 @@ import createEmotionCache from 'docs/src/createEmotionCache';
 import findActivePage from 'docs/src/modules/utils/findActivePage';
 import { LicenseInfo } from '@mui/x-license-pro';
 
+import '@mui/x-data-grid-premium/concept/style.css'
+
 // Remove the license warning from demonstration purposes
 LicenseInfo.setLicenseKey(process.env.NEXT_PUBLIC_MUI_LICENSE);
 

docs/pages/x/concept/index.tsx

@@ -0,0 +1,3 @@
+import { ExampleConcept } from '@mui/x-data-grid-premium'
+
+export default ExampleConcept