Fill all the space of a container

[mmasdivins]

I will like to know how can I make the grid to occupy all the height of a container, I know we have the property height, but is a number and I want it to occupy 100% of the size of the container it is in.

[nick-keller]

Hello @mmasdivins ,
There is no easy way to tell the grid to take the container vertical space.
To achieve this you must use something like auto-sizer to get the height of the container and pass it to DSG.

[mmasdivins]

Thanks for the quick response, I've already tried this, the problem is that the grid has a maxHeight of 400 so it can't get more height. I did try to put the AutoSizer inside the DataSheetGrid doing the following:

<HeaderContext.Provider value={headerContext}>
            <SelectionContext.Provider value={selectionContext}>
              <AutoSizer className="just-to-check">
                {({ height, width }: Size) => {
                  console.log('AutoSizer: ', width, height)
                  return (
                    <VariableSizeList<ListItemData<T>>
                      className="dsg-container"
                      ref={listRef}
                      width={width}
                      height={height}
                      itemCount={data.length + 1}
                      itemSize={itemSize}
                      estimatedItemSize={rowHeight}
                      itemData={itemData}
                      outerRef={outerRef}
                      innerRef={innerRef}
                      innerElementType={InnerContainer}
                      children={Row}
                      useIsScrolling={columns.some(
                        ({ renderWhenScrolling }) => !renderWhenScrolling
                      )}
                    />
                  )
                }}
              </AutoSizer>
            </SelectionContext.Provider>

And it did work but the cell selection stopped working and it was rendering non stop so I don't know ho can I do it

[mmasdivins]

Okay, I got it to work!
First of all I changed on DataSheetGrid :

• Removed the default maxHeight

        height: maxHeight, //= 400,

• If the height is set use the height, if not do what was done before:

      const displayHeight =
        maxHeight ??
        Math.min(400, headerRowHeight + data.length * rowHeight + heightDiff)

And then where we want to display the grid I do the following:

<TheContainer>
    <AutoSizer>
      {({ height, width }: Size) => (
        <DynamicDataSheetGrid
          style={{ height: height, width: width }}
          value={data}
          onChange={setData}
          height={height}
        />
      )}
    </AutoSizer>
</TheContainer>

[lawrentiy]

Styled Components help you all as magic ;)

export const DynamicDataSheetGridStyled = styled(DynamicDataSheetGrid)(({ height }) => ({
    "& .dsg-container": {
        height: "calc(100vh - 250px) !important",
    }
}));