ResizableTable.razor

@page "/"

<table class="table" ref="tableRef">
    <thead>
        <tr>
            <th style="position:relative;" @onmousedown="@MouseDownHandler" @onmousemove="@MouseMoveHandler" @onmouseup="@MouseUpHandler">列1</th>
            <th style="position:relative;" @onmousedown="@MouseDownHandler" @onmousemove="@MouseMoveHandler" @onmouseup="@MouseUpHandler">列2</th>
            <th style="position:relative;" @onmousedown="@MouseDownHandler" @onmousemove="@MouseMoveHandler" @onmouseup="@MouseUpHandler">列3</th>
            <th style="position:relative;" @onmousedown="@MouseDownHandler" @onmousemove="@MouseMoveHandler" @onmouseup="@MouseUpHandler">列4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>セル1</td>
            <td>セル2</td>
            <td>セル3</td>
            <td>セル4</td>
        </tr>
        <tr>
            <td>セル5</td>
            <td>セル6</td>
            <td>セル7</td>
            <td>セル8</td>
        </tr>
    </tbody>
</table>

@code {
    private ElementReference tableRef;
    private ElementReference colRef;
    private bool isResizing = false;
    private double lastDownX = 0;
    private double colWidth = 0;

    private void MouseDownHandler(MouseEventArgs e, ElementReference col)
    {
        colRef = col;
        colWidth = colRef.clientWidth;
        lastDownX = e.ClientX;
        isResizing = true;
    }

    private void MouseMoveHandler(MouseEventArgs e)
    {
        if (isResizing)
        {
            double delta = e.ClientX - lastDownX;
            double newWidth = colWidth + delta;
            colRef.Style.Width = newWidth.ToString() + "px";
        }
    }

    private void MouseUpHandler()
    {
        isResizing = false;
    }
}