[DataGridPro] Implement Row pinning (#4863)

mui · Jul 27, 2022 · e273835 · e273835
1 parent 4dabd10
commit e273835
Show file tree

Hide file tree

Showing 99 changed files with 2,798 additions and 554 deletions.
diff --git a/docs/data/data-grid/aggregation/AggregationColDefAggregable.js b/docs/data/data-grid/aggregation/AggregationColDefAggregable.js
@@ -42,22 +42,22 @@ export default function AggregationColDefAggregable() {
   const data = useMovieData();
 
   return (
-    <DataGridPremium
-      // The 2 following props are here to avoid scroll in the demo while we don't have pinned rows
-      rows={data.rows.slice(0, 3)}
-      autoHeight
-      columns={COLUMNS}
-      initialState={{
-        private_aggregation: {
-          model: {
-            gross: 'sum',
-            year: 'sum',
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPremium
+        rows={data.rows}
+        columns={COLUMNS}
+        initialState={{
+          private_aggregation: {
+            model: {
+              gross: 'sum',
+              year: 'sum',
+            },
           },
-        },
-      }}
-      experimentalFeatures={{
-        private_aggregation: true,
-      }}
-    />
+        }}
+        experimentalFeatures={{
+          private_aggregation: true,
+        }}
+      />
+    </div>
   );
 }
diff --git a/docs/data/data-grid/aggregation/AggregationColDefAggregable.tsx b/docs/data/data-grid/aggregation/AggregationColDefAggregable.tsx
@@ -42,22 +42,22 @@ export default function AggregationColDefAggregable() {
   const data = useMovieData();
 
   return (
-    <DataGridPremium
-      // The 2 following props are here to avoid scroll in the demo while we don't have pinned rows
-      rows={data.rows.slice(0, 3)}
-      autoHeight
-      columns={COLUMNS}
-      initialState={{
-        private_aggregation: {
-          model: {
-            gross: 'sum',
-            year: 'sum',
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPremium
+        rows={data.rows}
+        columns={COLUMNS}
+        initialState={{
+          private_aggregation: {
+            model: {
+              gross: 'sum',
+              year: 'sum',
+            },
           },
-        },
-      }}
-      experimentalFeatures={{
-        private_aggregation: true,
-      }}
-    />
+        }}
+        experimentalFeatures={{
+          private_aggregation: true,
+        }}
+      />
+    </div>
   );
 }
diff --git a/docs/data/data-grid/aggregation/AggregationColDefAggregable.tsx.preview b/docs/data/data-grid/aggregation/AggregationColDefAggregable.tsx.preview
@@ -0,0 +1,15 @@
+<DataGridPremium
+  rows={data.rows}
+  columns={COLUMNS}
+  initialState={{
+    private_aggregation: {
+      model: {
+        gross: 'sum',
+        year: 'sum',
+      },
+    },
+  }}
+  experimentalFeatures={{
+    private_aggregation: true,
+  }}
+/>
diff --git a/docs/data/data-grid/aggregation/AggregationControlled.js b/docs/data/data-grid/aggregation/AggregationControlled.js
@@ -34,16 +34,18 @@ export default function AggregationControlled() {
   });
 
   return (
-    <DataGridPremium
-      // The 2 following props are here to avoid scroll in the demo while we don't have pinned rows
-      rows={data.rows.slice(0, 3)}
-      autoHeight
-      columns={COLUMNS}
-      private_aggregationModel={aggregationModel}
-      private_onAggregationModelChange={(newModel) => setAggregationModel(newModel)}
-      experimentalFeatures={{
-        private_aggregation: true,
-      }}
-    />
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPremium
+        rows={data.rows}
+        columns={COLUMNS}
+        private_aggregationModel={aggregationModel}
+        private_onAggregationModelChange={(newModel) =>
+          setAggregationModel(newModel)
+        }
+        experimentalFeatures={{
+          private_aggregation: true,
+        }}
+      />
+    </div>
   );
 }
diff --git a/docs/data/data-grid/aggregation/AggregationControlled.tsx b/docs/data/data-grid/aggregation/AggregationControlled.tsx
@@ -39,16 +39,18 @@ export default function AggregationControlled() {
     });
 
   return (
-    <DataGridPremium
-      // The 2 following props are here to avoid scroll in the demo while we don't have pinned rows
-      rows={data.rows.slice(0, 3)}
-      autoHeight
-      columns={COLUMNS}
-      private_aggregationModel={aggregationModel}
-      private_onAggregationModelChange={(newModel) => setAggregationModel(newModel)}
-      experimentalFeatures={{
-        private_aggregation: true,
-      }}
-    />
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPremium
+        rows={data.rows}
+        columns={COLUMNS}
+        private_aggregationModel={aggregationModel}
+        private_onAggregationModelChange={(newModel) =>
+          setAggregationModel(newModel)
+        }
+        experimentalFeatures={{
+          private_aggregation: true,
+        }}
+      />
+    </div>
   );
 }
diff --git a/docs/data/data-grid/aggregation/AggregationControlled.tsx.preview b/docs/data/data-grid/aggregation/AggregationControlled.tsx.preview
@@ -1,10 +1,10 @@
 <DataGridPremium
-  // The 2 following props are here to avoid scroll in the demo while we don't have pinned rows
-  rows={data.rows.slice(0, 3)}
-  autoHeight
+  rows={data.rows}
   columns={COLUMNS}
   private_aggregationModel={aggregationModel}
-  private_onAggregationModelChange={(newModel) => setAggregationModel(newModel)}
+  private_onAggregationModelChange={(newModel) =>
+    setAggregationModel(newModel)
+  }
   experimentalFeatures={{
     private_aggregation: true,
   }}

diff --git a/docs/data/data-grid/aggregation/AggregationCustomFunction.js b/docs/data/data-grid/aggregation/AggregationCustomFunction.js
@@ -72,26 +72,26 @@ export default function AggregationCustomFunction() {
   const data = useMovieData();
 
   return (
-    <DataGridPremium
-      // The 2 following props are here to avoid scroll in the demo while we don't have pinned rows
-      rows={data.rows.slice(0, 3)}
-      autoHeight
-      columns={COLUMNS}
-      private_aggregationFunctions={{
-        ...PRIVATE_GRID_AGGREGATION_FUNCTIONS,
-        firstAlphabetical: firstAlphabeticalAggregation,
-        lastAlphabetical: lastAlphabeticalAggregation,
-      }}
-      initialState={{
-        private_aggregation: {
-          model: {
-            director: 'firstAlphabetical',
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPremium
+        rows={data.rows}
+        columns={COLUMNS}
+        private_aggregationFunctions={{
+          ...PRIVATE_GRID_AGGREGATION_FUNCTIONS,
+          firstAlphabetical: firstAlphabeticalAggregation,
+          lastAlphabetical: lastAlphabeticalAggregation,
+        }}
+        initialState={{
+          private_aggregation: {
+            model: {
+              director: 'firstAlphabetical',
+            },
           },
-        },
-      }}
-      experimentalFeatures={{
-        private_aggregation: true,
-      }}
-    />
+        }}
+        experimentalFeatures={{
+          private_aggregation: true,
+        }}
+      />
+    </div>
   );
 }
diff --git a/docs/data/data-grid/aggregation/AggregationCustomFunction.tsx b/docs/data/data-grid/aggregation/AggregationCustomFunction.tsx
@@ -75,26 +75,26 @@ export default function AggregationCustomFunction() {
   const data = useMovieData();
 
   return (
-    <DataGridPremium
-      // The 2 following props are here to avoid scroll in the demo while we don't have pinned rows
-      rows={data.rows.slice(0, 3)}
-      autoHeight
-      columns={COLUMNS}
-      private_aggregationFunctions={{
-        ...PRIVATE_GRID_AGGREGATION_FUNCTIONS,
-        firstAlphabetical: firstAlphabeticalAggregation,
-        lastAlphabetical: lastAlphabeticalAggregation,
-      }}
-      initialState={{
-        private_aggregation: {
-          model: {
-            director: 'firstAlphabetical',
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPremium
+        rows={data.rows}
+        columns={COLUMNS}
+        private_aggregationFunctions={{
+          ...PRIVATE_GRID_AGGREGATION_FUNCTIONS,
+          firstAlphabetical: firstAlphabeticalAggregation,
+          lastAlphabetical: lastAlphabeticalAggregation,
+        }}
+        initialState={{
+          private_aggregation: {
+            model: {
+              director: 'firstAlphabetical',
+            },
           },
-        },
-      }}
-      experimentalFeatures={{
-        private_aggregation: true,
-      }}
-    />
+        }}
+        experimentalFeatures={{
+          private_aggregation: true,
+        }}
+      />
+    </div>
   );
 }
diff --git a/docs/data/data-grid/aggregation/AggregationFiltering.js b/docs/data/data-grid/aggregation/AggregationFiltering.js
@@ -30,29 +30,29 @@ export default function AggregationFiltering() {
   const data = useMovieData();
 
   return (
-    <DataGridPremium
-      // The 2 following props are here to avoid scroll in the demo while we don't have pinned rows
-      rows={data.rows.slice(0, 3)}
-      autoHeight
-      columns={COLUMNS}
-      initialState={{
-        private_aggregation: {
-          model: {
-            gross: 'max',
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPremium
+        rows={data.rows}
+        columns={COLUMNS}
+        initialState={{
+          private_aggregation: {
+            model: {
+              gross: 'max',
+            },
           },
-        },
-        filter: {
-          filterModel: {
-            items: [
-              { columnField: 'title', operatorValue: 'equals', value: 'Titanic' },
-            ],
+          filter: {
+            filterModel: {
+              items: [
+                { columnField: 'title', operatorValue: 'equals', value: 'Titanic' },
+              ],
+            },
           },
-        },
-      }}
-      private_aggregationRowsScope="all"
-      experimentalFeatures={{
-        private_aggregation: true,
-      }}
-    />
+        }}
+        private_aggregationRowsScope="all"
+        experimentalFeatures={{
+          private_aggregation: true,
+        }}
+      />
+    </div>
   );
 }
diff --git a/docs/data/data-grid/aggregation/AggregationFiltering.tsx b/docs/data/data-grid/aggregation/AggregationFiltering.tsx
@@ -30,29 +30,29 @@ export default function AggregationFiltering() {
   const data = useMovieData();
 
   return (
-    <DataGridPremium
-      // The 2 following props are here to avoid scroll in the demo while we don't have pinned rows
-      rows={data.rows.slice(0, 3)}
-      autoHeight
-      columns={COLUMNS}
-      initialState={{
-        private_aggregation: {
-          model: {
-            gross: 'max',
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPremium
+        rows={data.rows}
+        columns={COLUMNS}
+        initialState={{
+          private_aggregation: {
+            model: {
+              gross: 'max',
+            },
           },
-        },
-        filter: {
-          filterModel: {
-            items: [
-              { columnField: 'title', operatorValue: 'equals', value: 'Titanic' },
-            ],
+          filter: {
+            filterModel: {
+              items: [
+                { columnField: 'title', operatorValue: 'equals', value: 'Titanic' },
+              ],
+            },
           },
-        },
-      }}
-      private_aggregationRowsScope="all"
-      experimentalFeatures={{
-        private_aggregation: true,
-      }}
-    />
+        }}
+        private_aggregationRowsScope="all"
+        experimentalFeatures={{
+          private_aggregation: true,
+        }}
+      />
+    </div>
   );
 }