Combine setColumnsSizesAuto and setColumnSizesToFit Behaviors

[richardexplo]

• what edition are you using - enterprise
• version for @inovua/reactdatagrid-enterprise - 5.9.4

Relevant code or config https://reactdatagrid.io/docs/autosize-columns

useEffect(() => {
    if (!containerRef.current) return;

     function autosize() {
       gridRef.current?.setColumnSizesToFit();
       gridRef.current?.setColumnSizesAuto();
    }

    const resizeObserver = new ResizeObserver(debounce(autosize, 300));
    resizeObserver.observe(containerRef.current);

    return () => resizeObserver.disconnect();
  }, [
    containerRef,
    columns,
  ]);

What you did:

I have a Data Grid that takes 100% the width of the screen. Columns are dynamically set so we can have any number of columns with varying widths. The intended behavior is:

1. The columns should always fill at least the width of the Data Grid so there is no whitespace
2. Each column should be at least the width of the column header so the full header is visible
3. Horizontal scrolling is fine

What happened:

1. When using setColumnsSizesAuto, if the columns takes up less space than the width of the Data Grid, there is whitespace on the right
2. When using setColumnSizesToFit, if the width of the Data Grid is smaller than the width of the column headers, then the headers will be truncated with an ellipsis

Reproduction repository: https://reactdatagrid.io/docs/autosize-columns

Problem description:

1. From a visual perspective, neither setColumnsSizesAuto or setColumnSizesToFit create a consistent looking grid on all screen sizes.
2. Additionally, there should be a configuration to automatically resize the columns without having to manually call setColumnsSizesAuto and setColumnSizesToFit

Suggested solution:

Either consolidate the functions or create a new one that does the following:

1. The columns should always fill at least the width of the Data Grid so there is no whitespace
2. Each column should be at least the width of the column header so the full header is visible
3. Horizontal scrolling is fine