nested grids with React

[jianghai]

How to implement nested grids with React, because the content in the example is all strings, and it is not very understanding how React needs to be done.

import { useEffect, useRef } from 'react';

function Demo() {
  const gridContainerRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (gridContainerRef.current) {
      GridStack.init(
        {
          float: false,
          acceptWidgets: true,
          column: 12,
          minRow: 1,
        },
        gridContainerRef.current
      );
    }
  }, []);

  const items =[{ id: 'item-1-1', x: 0, y: 0, w: 2, h: 2 }, { id: 'item-1-2', x: 2, y: 0, w: 2, h: 2 }]

  return (
    <div className="grid-stack" ref={gridContainerRef}>
      {items.map((item, i) => {
        return (
          <div key={item.id} className="grid-stack-item" gs-id={item.id} gs-w={item.w} gs-h={item.h} gs-x={item.x} gs-y={item.y}>
            <div className="grid-stack-item-content">
              {item.id}
            </div>
          </div>
        )
      })}
    </div>
  )
}

[jianghai]

I'm not sure if this is the best practice

function Grid({ items }: any) {
  const gridContainerRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (gridContainerRef.current) {
      GridStack.init(
        {
          float: false,
          acceptWidgets: true,
          column: 12,
          minRow: 1,
        },
        gridContainerRef.current
      );
    }
  }, []);
  return (
    <div className="grid-stack" ref={gridContainerRef}>
      {items.map((item, i) => {
        return (
          <div key={item.id} className="grid-stack-item" gs-id={item.id} gs-w={item.w} gs-h={item.h} gs-x={item.x} gs-y={item.y}>
            <div className="grid-stack-item-content">
              {item.id}
              {item.children && <Grid items={item.children}></Grid>}
            </div>
          </div>
        )
      })}
    </div>
  )
}

function Demo() {
  const items =[{
    id: 'item-1', x: 0, y: 0, w: 2, h: 2,
  }, {
    id: 'item-2', x: 2, y: 0, w: 2, h: 2,
    children: [{
      id: 'item-2-1', x: 0, y: 0, w: 6, h: 6,
    }]
  }]
  return <Grid items={items} />
}

[wangtangsheng]

when items has minW、minH, how to setAttribute to 'grid-stack-item' element?
like:

const items =[{
id: 'item-1', x:0, y: 0, w: 2, h: 2, minW: 3
}]

@jianghai

[kuzurec]

I have the same problem too

[Aysnine]

In gridstack, nesting is realized by subGrid + children in the option, and react cannot be used as a container for the subGrid, i.e. the nested container is managed by gridstack and cannot be a react component.

[adumesny]

@Aysnine mostly true, but in my Angular app I do have nested grid that are custom component (with a header and summary text, and a grid child to contain the rest). Of course the gridItem that is a subgrid is done by gs using the subgrid options, but I still have my component in there.
Will have to update the examples to show the next level of complexity... #2938

[liyuewen]

@Aysnine mostly true, but in my Angular app I do have nested grid that are custom component (with a header and summary text, and a grid child to contain the rest). Of course the gridItem that is a subgrid is done by gs using the subgrid options, but I still have my component in there. Will have to update the examples to show the next level of complexity... #2938

I read the information in your link, but I still don't understand how to use nested components in React. How to load nested components in plain HTML? For example, the non-nested one below.
<div className="grid-stack-item " gs-w={width} gs-h={height}> <div className="grid-stack-item-content"> <Card className="stackItemCard">{children}</Card> </div> </div>

[adumesny]

@liyuewen you cannot do nested grid from html today. I only worked on it from JSON (what real app that need to serialize dashboards use anyway). In angular wrapper, GS calls me back for each custom comp to be created, that's the big difference I see with React vs Angular wrapper I see...

[AdrianLsk]

Hey folks, I made the subgrid react component work like this

import React, { useRef, useLayoutEffect } from 'react';
import { createPortal } from 'react-dom';

export type NestedGridItemProps = {
  widgetContainer: HTMLElement;
  config: any;
};

export function NestedGridItem({
  widgetContainer,
  config,
}: NestedGridItemProps) {
  const ref = useRef<HTMLDivElement>(null);
  const contentRef = useRef<HTMLDivElement>(null);

  useLayoutEffect(() => {
    ref.current?.appendChild(
      widgetContainer.firstElementChild.firstElementChild
    );
  }, []);

  return createPortal(
    <SubGridComponent config={config}>
      <div ref={contentRef} />
    </SubGridComponent>,
    widgetContainer.firstElementChild
  );
}

function SubGridComponent({
  config,
  children,
}: React.PropsWithChildren<{ config }>) {
  // apply config ...
  return <div className="h-full w-full bg-white">{children}</div>;
}`

[adumesny]

closing as code demo under /react has nested grid