update docs

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