update docs

Author: radubrehar

www/content/blog/2024/06/05/master-detail-datagrid-with-charts.md

@@ -14,14 +14,24 @@ The `<DataSource />` in InfiniteTable is very powerful and does all the data pro
 In practice, this means that you can use the `<DataSource />` to process your data and then simply pass that to a charting library like `ag-charts-react`.
 
 ```tsx
+const detailGroupBy: DataSourcePropGroupBy<Developer> = [{ field: "stack" }];
+const detailAggregationReducers: DataSourcePropAggregationReducers<Developer> =
+  {
+    salary: {
+      field: "salary",
+      initialValue: 0,
+      reducer: (acc, value) => acc + value,
+      done: (value, arr) => Math.round(arr.length ? value / arr.length : 0),
+    },
+  };
 
 function RowDetail() {
   const rowInfo = useMasterRowInfo<City>()!;
-
   const [showChart, setShowChart] = React.useState(rowInfo.id % 2 == 1);
+
   return (
     <div style={{...}}>
-      <button onClick={() => setShowChart((showChart) => !showChart)} >
+      <button onClick={() => setShowChart((showChart) => !showChart)}>
         Click to see {showChart ? "grid" : "chart"}
       </button>
 
@@ -32,15 +42,8 @@ function RowDetail() {
       <DataSource<Developer>
         data={detailDataSource}
         primaryKey="id"
-        groupBy={[{ field: "stack" }]}
-        aggregationReducers={{
-          salary: {
-            field: "salary",
-            initialValue: 0,
-            reducer: (acc, value) => acc + value,
-            done: (value, arr) => Math.round(arr.length ? value / arr.length : 0),
-          },
-        }}
+        groupBy={detailGroupBy}
+        aggregationReducers={detailAggregationReducers}
       >
         {/**
          * Notice here we're not rendering an InfiniteTable component

www/content/docs/learn/master-detail/custom-row-detail-content.page.md

@@ -49,6 +49,12 @@ You'll probably want to configure the height of the row detail content. Use the
 
 </Sandpack>
 
+<Note>
+
+In the above example, please note that on every render (after the detail component is mounted), we pass the same `dataSource`, `groupBy` and `aggregationReducers` props to the `<DataSource />` component. The references for all those objects are stable. We don't want to pass new references on every render, as that would cause the `<DataSource />` to reload and reprocess the data.
+
+</Note>
+
 
 ## Multiple levels of nesting
 

www/content/docs/learn/master-detail/master-detail-chart-detail-example.page.tsx

@@ -7,6 +7,8 @@ import {
   DataSource,
   InfiniteTableRowInfo,
   InfiniteTable_HasGrouping_RowInfoGroup,
+  DataSourcePropGroupBy,
+  DataSourcePropAggregationReducers,
 } from '@infinite-table/infinite-react';
 
 import { AgChartsReact } from 'ag-charts-react';
@@ -50,6 +52,19 @@ const domProps = {
 };
 
 function renderDetail(rowInfo: InfiniteTableRowInfo<City>) {
+  const [groupBy] = React.useState<DataSourcePropGroupBy<Developer>>([
+    { field: 'stack' },
+  ]);
+  const [aggregationReducers] = React.useState<
+    DataSourcePropAggregationReducers<Developer>
+  >({
+    salary: {
+      field: 'salary',
+      initialValue: 0,
+      reducer: (acc, value) => acc + value,
+      done: (value, arr) => Math.round(arr.length ? value / arr.length : 0),
+    },
+  });
   return (
     <div
       style={{
@@ -68,16 +83,8 @@ function renderDetail(rowInfo: InfiniteTableRowInfo<City>) {
       <DataSource<Developer>
         data={detailDataSource}
         primaryKey="id"
-        groupBy={[{ field: 'stack' }]}
-        aggregationReducers={{
-          salary: {
-            field: 'salary',
-            initialValue: 0,
-            reducer: (acc, value) => acc + value,
-            done: (value, arr) =>
-              Math.round(arr.length ? value / arr.length : 0),
-          },
-        }}
+        groupBy={groupBy}
+        aggregationReducers={aggregationReducers}
       >
         {/**
          * Notice here we're not rendering an InfiniteTable component