Set row height and column width feature proposal

[ProjectsKoryHasWorkedOn]

Currently, I’ve been able to increase the font size in the sheet, but the cell height and width remain fixed. This works fine up to about 1rem, but as the font size grows larger, the text no longer fits well inside the cells.

It would be very useful if the cell height and width could either:

Automatically scale in proportion to the font size, or

Be configurable (via API or CSS variables) so they can be adjusted programmatically.

This would make it easier to create sheets that remain visually consistent when using larger fonts.

[anmcgrath]

Hi @ProjectsKoryHasWorkedOn I haven't tested specifically but you should be able to get the sheet's rows and columns to adjust from the font size by:

Ensure the AutoFit property on the Datasheet is set to true eg

<Datasheet AutoFit="true" @ref=_datasheet"/>

And then when you adjust font size:

        _datasheet.AutoFitRegion(new AllRegion(), Axis.Row, AutofitMethod.ExpandOnly);
        _datasheet.AutoFitRegion(new AllRegion(), Axis.Col, AutofitMethod.ExpandOnly);

for example

[ProjectsKoryHasWorkedOn]

Thanks for the suggestion, I gave it a shot but it continued to not expand the cells

Full code I used in case that's helpful

Test razor page

@page "/test"
@rendermode InteractiveServer

@using BlazorDatasheet
@using BlazorDatasheet.Core
@using BlazorDatasheet.Core.Data
@using BlazorDatasheet.DataStructures.Geometry
@using BlazorDatasheet.Render

<!-- https://github.com/anmcgrath/BlazorDatasheet/issues/264 -->

<h3>Settings</h3>


<label>
    Sheet Font Size (rem):
    <input type="number" step="0.1" @bind="_fontSize" />
</label>

<button @onclick="ApplyFontSize">Apply</button>

<hr />

<h4>Test Sheet</h4>
<div style="width:100%; height:300px; overflow:auto;">
    <BlazorDatasheet.Datasheet Sheet="_sheet" @ref="_datasheet"
                               ShowRowHeadings="true" ShowColHeadings="true" AutoFit="true" />
</div>

<hr />

<h4>Sheet Sizes</h4>
<div>
    <p>Row Heights:</p>
    <ul>
        @for (int r = 0; r < _sheet.NumRows; r++)
        {
            <li>Row @r: @(_sheet.Rows.GetPhysicalHeight(r).ToString("F1")) px</li>
        }
    </ul>

    <p>Column Widths:</p>
    <ul>
        @for (int c = 0; c < _sheet.NumCols; c++)
        {
            <li>Col @c: @(_sheet.Columns.GetPhysicalWidth(c).ToString("F1")) px</li>
        }
    </ul>

</div>

@code {
    private double _fontSize = 0.75;
    private Datasheet _datasheet;
    private Sheet _sheet;

    [Inject] private IJSRuntime JS { get; set; }

    protected override void OnInitialized()
    {
        // Create dummy sheet 5x5
        _sheet = new Sheet(5, 5);

        for (int r = 0; r < 5; r++)
        {
            for (int c = 0; c < 5; c++)
            {
                _sheet.Cells.SetValue(r, c, $"R{r + 1}C{c + 1}");
            }
        }

        StateHasChanged();
    }
    
    private async Task ApplyFontSize()
    {
        // Apply new font size
        await JS.InvokeVoidAsync("setGlobalSheetFontSize", $"{_fontSize}rem");

        // Persist in localStorage
        await JS.InvokeVoidAsync("localStorage.setItem", "sheetFontSize", _fontSize.ToString());

        _datasheet.AutoFitRegion(new AllRegion(), Axis.Row, AutofitMethod.ExpandOnly);
        _datasheet.AutoFitRegion(new AllRegion(), Axis.Col, AutofitMethod.ExpandOnly);

        StateHasChanged();
    }

}

wwwroot/js/site.js

window.setGlobalSheetFontSize = (size) => {
    // Set the CSS variable on :root
    document.documentElement.style.setProperty('--sheet-font-size2', size);

    // For Blazor Datasheet: trigger a reflow so virtualized cells pick up the new value
    document.querySelectorAll('.sheet').forEach(sheet => {
        sheet.style.display = 'none';
        sheet.offsetHeight; // force reflow
        sheet.style.display = '';
    });
};

wwwroot/app.css

:root {
    --sheet-font-size2: 0.75rem;
    --sheet-font-family2: "Aptos Narrow", "Aptos", "Calibri", "Segoe UI", Arial, sans-serif;
}

.sheet,
.sheet-cell,
.sheet-cell-input,
.sheet-button,
.sheet-col-head,
.sheet-row-head {
    font-size: var(--sheet-font-size2) !important;
    font-family: var(--sheet-font-family2) !important;
}

MainLayout.razor

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // Load persisted font size
            var savedFontSize = await JS.InvokeAsync<string>("localStorage.getItem", "sheetFontSize");
            if (!string.IsNullOrEmpty(savedFontSize))
            {
                await JS.InvokeVoidAsync("setGlobalSheetFontSize", $"{savedFontSize}rem");
            }

        }
    }