Add option to hide the "indent" when grouping a grid

[GeoMarkou]

I'm submitting a...

• Suggestion for improvement

Current behavior

When you add a grouping to a grid it indents all the rows by 32 pixels.

Expected behavior

Set an option in GridGroupableSettings, similar to footer:visible maybe indent:none and be able to hide the indent cell.

Minimal reproduction of the problem with instructions

This is a very simple example of the problem - in a container of exactly 300 pixels, as you can see the grid is 332 pixels due to the indent, and it breaks the layout. If you remove the grouping the layout is fixed again.

https://stackblitz.com/edit/react-a337ft

What is the motivation or use case for changing the behavior?

We have a Grid in a part of the site where space is very restricted. This is to be displayed on an iPad where every pixel of screen space counts. Recently we added grouping to the grid to make it easier to read, but it broke the layout. We can't use grouping in parts of the site due to this issue.

Browser:

• Chrome (desktop) version 83.0.4103.61 (Official Build) (64-bit)

System:

• Platform: Windows

[GeoMarkou]

Any update on this one? I've been using this as a workaround in various areas but it's quite verbose to add everywhere we use grouping.

// TODO remove this once you can disable the grouping indent
React.useEffect(() => {
    if (!FormRef.current) {
        return;
    }

    // Hide the first column
    const colGroupEle = FormRef.current.querySelector('colgroup');
    if (!colGroupEle) {
        return;
    }

    const colEle = colGroupEle.children[0] as HTMLTableColElement;
    if (!colEle) {
        return;
    }
    
    colEle.width = '0px';
});

[wiznotwiz]

I'd also be interested in this feature!