feat: Row Detail with inner grids (#467)

Author: ghiscoding

docs/grid-functionalities/row-detail.md

@@ -440,3 +440,203 @@ addNewColumn() {
   }
 }
 ```
+
+## Row Detail with Inner Grid
+
+You can also add an inner grid inside a Row Detail, however there are a few things to know off and remember. Any time a Row Detail is falling outside the main grid viewport, it will be unmounted and until it comes back into the viewport which is then remounted. The process of unmounting and remounting means that Row Detail previous states aren't preserved, however you could use Grid State & Presets to overcome this problem.
+
+##### Component
+
+Main Grid Component
+
+```tsx
+import React from 'react';
+import { type Column, ExtensionName, type GridOption, SlickgridReact, type SlickgridReactInstance, SlickRowDetailView, } from 'slickgrid-react';
+
+import { Preload } from './preload';
+import { type Distributor, InnerGridComponent, type OrderData } from './inner-grid';
+
+interface State extends BaseSlickGridState { }
+
+export default class Example45 extends React.Component<Props, State> {
+  reactGrid!: SlickgridReactInstance;
+  constructor(public readonly props: Props) {
+    super(props);
+
+    this.state = {
+      gridOptions: undefined,
+      columnDefinitions: [],
+      dataset: this.getData(),
+    };
+  }
+
+  get rowDetailInstance() {
+    return this.reactGrid?.extensionService.getExtensionInstanceByName(ExtensionName.rowDetailView);
+  }
+
+  componentDidMount() {
+    this.defineGrid();
+  }
+
+  reactGridReady(reactGrid: SlickgridReactInstance) {
+    this.reactGrid = reactGrid;
+  }
+
+  getColumnDefinitions(): Column[] {
+    return [/* ... */];
+  }
+
+  defineGrid() {
+    const columnDefinitions = this.getColumnDefinitions();
+    const gridOptions = this.getGridOptions();
+
+    this.setState((props: Props, state: any) => {
+      return { ...state, columnDefinitions, gridOptions };
+    });
+  }
+
+  getGridOptions(): GridOption {
+    return {
+      enableRowDetailView: true,
+      rowSelectionOptions: {
+        selectActiveRow: true
+      },
+      preRegisterExternalExtensions: (pubSubService) => {
+        // Row Detail View is a special case because of its requirement to create extra column definition dynamically
+        // so it must be pre-registered before SlickGrid is instantiated, we can do so via this option
+        const rowDetail = new SlickRowDetailView(pubSubService as EventPubSubService);
+        return [{ name: ExtensionName.rowDetailView, instance: rowDetail }];
+      },
+      rowDetailView: {
+        process: (item: any) => simulateServerAsyncCall(item),
+        loadOnce: false, // IMPORTANT, you can't use loadOnce with inner grid because only HTML template are re-rendered, not JS events
+        panelRows: 10,
+        preloadComponent: PreloadComponent,
+        viewComponent:  InnerGridComponent,
+      },
+    };
+  }
+
+  render() {
+    return !this.state.gridOptions ? '' : (
+      <div id="demo-container" className="container-fluid">
+        <SlickgridReact gridId="grid45"
+          columnDefinitions={this.state.columnDefinitions}
+          gridOptions={this.state.gridOptions}
+          dataset={this.state.dataset}
+          onReactGridCreated={$event => this.reactGridReady($event.detail)}
+        />
+      </div >
+    );
+  }
+}
+```
+
+Now, let's define our Inner Grid Component
+
+```tsx
+import React from 'react';
+import { type Column, type GridOption, type GridState, type RowDetailViewProps, SlickgridReact, type SlickgridReactInstance } from 'slickgrid-react';
+
+import type MainGrid from './MainGrid';
+
+export interface Distributor { /* ... */ }
+export interface OrderData { /* ... */ }
+
+interface State {
+  innerGridOptions?: GridOption;
+  innerColDefs: Column[];
+  innerDataset: any[];
+}
+interface Props { }
+
+export class MainGridDetailView extends React.Component<RowDetailViewProps<Distributor, typeof MainGrid>, State> {
+  reactGrid!: SlickgridReactInstance;
+  innerGridClass = '';
+
+  constructor(public readonly props: RowDetailViewProps<Distributor, typeof MainGrid>) {
+    super(props);
+    this.state = {
+      innerGridOptions: undefined,
+      innerColDefs: [],
+      innerDataset: [...props.model.orderData],
+    };
+    this.innerGridClass = `row-detail-${this.props.model.id}`;
+  }
+
+  componentDidMount() {
+    this.defineGrid();
+  }
+
+  getColumnDefinitions(): Column[] {
+    return [
+      { id: 'orderId', field: 'orderId', name: 'Order ID', filterable: true, sortable: true },
+      { id: 'shipCity', field: 'shipCity', name: 'Ship City', filterable: true, sortable: true },
+      { id: 'freight', field: 'freight', name: 'Freight', filterable: true, sortable: true, type: 'number' },
+      { id: 'shipName', field: 'shipName', name: 'Ship Name', filterable: true, sortable: true },
+    ];
+  }
+
+  defineGrid() {
+    const innerColDefs = this.getColumnDefinitions();
+    const innerGridOptions = this.getGridOptions();
+
+    this.setState((props: Props, state: any) => {
+      return {
+        ...state,
+        innerColDefs,
+        innerGridOptions,
+      };
+    });
+  }
+
+  getGridOptions(): GridOption {
+    // OPTIONALLY reapply Grid State as Presets before unmounting the compoment
+    const gridStateStr = sessionStorage.getItem(`gridstate_${innerGridClass.value}`);
+    let gridState: GridState | undefined;
+    if (gridStateStr) {
+      gridState = JSON.parse(gridStateStr);
+    }
+
+    return {
+      autoResize: {
+        container: `.${this.innerGridClass}`,
+      },
+      enableFiltering: true,
+      enableSorting: true,
+      enableCellNavigation: true,
+      datasetIdPropertyName: 'orderId', // reapply grid state presets
+      presets: gridState,
+    };
+  }
+
+  // OPTIONALLY save Grid State before unmounting the compoment
+  handleBeforeGridDestroy() {
+    if (this.props.model.isUsingInnerGridStatePresets) {
+      const gridState = this.reactGrid.gridStateService.getCurrentGridState();
+      sessionStorage.setItem(`gridstate_${this.innerGridClass}`, JSON.stringify(gridState));
+    }
+  }
+
+  reactGridReady(reactGrid: SlickgridReactInstance) {
+    this.reactGrid = reactGrid;
+  }
+
+  render() {
+    return (
+      <div className={`${this.innerGridClass}`}>
+        <h4>Order Details (id: {this.props.model.id})</h4>
+        <div className="container-fluid">
+          {!this.state.showGrid ? '' : <SlickgridReact gridId={`innergrid-${this.props.model.id}`}
+            columnDefinitions={this.state.innerColDefs}
+            gridOptions={this.state.innerGridOptions}
+            dataset={this.state.innerDataset}
+            onReactGridCreated={$event => this.reactGridReady($event.detail)}
+            onBeforeGridDestroy={() => this.handleBeforeGridDestroy()}
+          />}
+        </div>
+      </div>
+    );
+  }
+}
+```

package.json

@@ -81,12 +81,12 @@
     "/src/slickgrid-react"
   ],
   "dependencies": {
-    "@slickgrid-universal/common": "~5.12.2",
-    "@slickgrid-universal/custom-footer-component": "~5.12.2",
-    "@slickgrid-universal/empty-warning-component": "~5.12.2",
-    "@slickgrid-universal/event-pub-sub": "~5.12.2",
-    "@slickgrid-universal/pagination-component": "~5.12.2",
-    "@slickgrid-universal/row-detail-view-plugin": "~5.12.2",
+    "@slickgrid-universal/common": "~5.13.0",
+    "@slickgrid-universal/custom-footer-component": "~5.13.0",
+    "@slickgrid-universal/empty-warning-component": "~5.13.0",
+    "@slickgrid-universal/event-pub-sub": "~5.13.0",
+    "@slickgrid-universal/pagination-component": "~5.13.0",
+    "@slickgrid-universal/row-detail-view-plugin": "~5.13.0",
     "dequal": "^2.0.3",
     "i18next": "^23.16.8",
     "sortablejs": "^1.15.6"
@@ -101,13 +101,13 @@
     "@formkit/tempo": "^0.1.2",
     "@popperjs/core": "^2.11.8",
     "@release-it/conventional-changelog": "^10.0.0",
-    "@slickgrid-universal/composite-editor-component": "~5.12.2",
-    "@slickgrid-universal/custom-tooltip-plugin": "~5.12.2",
-    "@slickgrid-universal/excel-export": "~5.12.2",
-    "@slickgrid-universal/graphql": "~5.12.2",
-    "@slickgrid-universal/odata": "~5.12.2",
-    "@slickgrid-universal/rxjs-observable": "~5.12.2",
-    "@slickgrid-universal/text-export": "~5.12.2",
+    "@slickgrid-universal/composite-editor-component": "~5.13.0",
+    "@slickgrid-universal/custom-tooltip-plugin": "~5.13.0",
+    "@slickgrid-universal/excel-export": "~5.13.0",
+    "@slickgrid-universal/graphql": "~5.13.0",
+    "@slickgrid-universal/odata": "~5.13.0",
+    "@slickgrid-universal/rxjs-observable": "~5.13.0",
+    "@slickgrid-universal/text-export": "~5.13.0",
     "@types/fnando__sparkline": "^0.3.7",
     "@types/i18next-xhr-backend": "^1.4.2",
     "@types/node": "^22.13.1",

src/examples/slickgrid/App.tsx

@@ -45,6 +45,7 @@ import Example41 from './Example41';
 import Example42 from './Example42';
 import Example43 from './Example43';
 import Example44 from './Example44';
+import Example45 from './Example45';
 
 const routes: Array<{ path: string; route: string; component: any; title: string; }> = [
   { path: 'example1', route: '/example1', component: <Example1 />, title: '1- Basic Grid / 2 Grids' },
@@ -90,6 +91,7 @@ const routes: Array<{ path: string; route: string; component: any; title: string
   { path: 'example42', route: '/example42', component: <Example42 />, title: '42- Custom Pagination' },
   { path: 'example43', route: '/example43', component: <Example43 />, title: '43- Colspan/Rowspan (timesheets)' },
   { path: 'example44', route: '/example44', component: <Example44 />, title: '44- Colspan/Rowspan (large data)' },
+  { path: 'example45', route: '/example45', component: <Example45 />, title: '45- Row Detail with inner Grid' },
 ];
 
 export default function Routes() {

src/examples/slickgrid/Example45-detail-view.tsx

@@ -0,0 +1,137 @@
+import React from 'react';
+import { type Column, type GridOption, type GridState, type RowDetailViewProps, SlickgridReact, type SlickgridReactInstance } from '../../slickgrid-react';
+
+import type Example45 from './Example45';
+import './example45-detail-view.scss';
+
+export interface Distributor {
+  id: number;
+  companyId: number;
+  companyName: string;
+  city: string;
+  streetAddress: string;
+  zipCode: string;
+  country: string;
+  orderData: OrderData[];
+  isUsingInnerGridStatePresets: boolean;
+}
+
+export interface OrderData {
+  orderId: string;
+  shipCity: string;
+  freight: number;
+  shipName: string;
+}
+
+interface State {
+  showGrid: boolean;
+  innerGridOptions?: GridOption;
+  innerColDefs: Column[];
+  innerDataset: any[];
+}
+interface Props { }
+
+export class Example45DetailView extends React.Component<RowDetailViewProps<Distributor, typeof Example45>, State> {
+  _isMounted = false;
+  reactGrid!: SlickgridReactInstance;
+  innerGridClass = '';
+
+  constructor(public readonly props: RowDetailViewProps<Distributor, typeof Example45>) {
+    super(props);
+    this.state = {
+      innerGridOptions: undefined,
+      innerColDefs: [],
+      innerDataset: [...props.model.orderData],
+      showGrid: false,
+    };
+    this.innerGridClass = `row-detail-${this.props.model.id}`;
+  }
+
+  componentDidMount() {
+    this._isMounted = true;
+    this.defineGrid();
+  }
+
+  componentWillUnmount(): void {
+    this._isMounted = false;
+    console.log('inner grid unmounting');
+  }
+
+  getColumnDefinitions(): Column[] {
+    return [
+      { id: 'orderId', field: 'orderId', name: 'Order ID', filterable: true, sortable: true },
+      { id: 'shipCity', field: 'shipCity', name: 'Ship City', filterable: true, sortable: true },
+      { id: 'freight', field: 'freight', name: 'Freight', filterable: true, sortable: true, type: 'number' },
+      { id: 'shipName', field: 'shipName', name: 'Ship Name', filterable: true, sortable: true },
+    ];
+  }
+
+  defineGrid() {
+    const innerColDefs = this.getColumnDefinitions();
+    const innerGridOptions = this.getGridOptions();
+
+    if (this._isMounted) {
+      this.setState((props: Props, state: any) => {
+        return {
+          ...state,
+          innerColDefs,
+          innerGridOptions,
+          showGrid: true,
+        };
+      });
+    }
+  }
+
+  getGridOptions(): GridOption {
+    // when Grid State found in Session Storage, reapply inner Grid State then reapply it as preset
+    let gridState: GridState | undefined;
+    if (this.props.model.isUsingInnerGridStatePresets) {
+      const gridStateStr = sessionStorage.getItem(`gridstate_${this.innerGridClass}`);
+      if (gridStateStr) {
+        gridState = JSON.parse(gridStateStr);
+      }
+    }
+
+    return {
+      autoResize: {
+        container: `.${this.innerGridClass}`,
+        rightPadding: 30,
+        minHeight: 200,
+      },
+      enableFiltering: true,
+      enableSorting: true,
+      rowHeight: 33,
+      enableCellNavigation: true,
+      datasetIdPropertyName: 'orderId',
+      presets: gridState,
+    };
+  }
+
+  handleBeforeGridDestroy() {
+    if (this.props.model.isUsingInnerGridStatePresets) {
+      const gridState = this.reactGrid.gridStateService.getCurrentGridState();
+      sessionStorage.setItem(`gridstate_${this.innerGridClass}`, JSON.stringify(gridState));
+    }
+  }
+
+  reactGridReady(reactGrid: SlickgridReactInstance) {
+    this.reactGrid = reactGrid;
+  }
+
+  render() {
+    return (
+      <div className={`${this.innerGridClass}`}>
+        <h4>{this.props.model.companyName} - Order Details (id: {this.props.model.id})</h4>
+        <div className="container-fluid">
+          {!this.state.showGrid ? '' : <SlickgridReact gridId={`innergrid-${this.props.model.id}`}
+            columnDefinitions={this.state.innerColDefs}
+            gridOptions={this.state.innerGridOptions}
+            dataset={this.state.innerDataset}
+            onReactGridCreated={$event => this.reactGridReady($event.detail)}
+            onBeforeGridDestroy={() => this.handleBeforeGridDestroy()}
+          />}
+        </div>
+      </div>
+    );
+  }
+}