IgbGrid – 列ヘッダーのクリックで並び替えを実行する

IgbGrid のデフォルト動作では、列ヘッダー上に表示されるソートアイコンをクリックしたときに並び替えが実行されます。
JavaScript を使用して列ヘッダー全体のクリックイベントを検出し、プログラムからソートアイコンの click() をトリガーすることで、列ヘッダーのどこをクリックしても並び替えが実行されるようになります。

以下の attachSortOnHeaderClick 関数は、IgbGrid の親要素に click イベントリスナーを登録します。クリックされた要素が列ヘッダーである場合、対応するソートアイコンの click() をプログラムから実行します。

//JavaScript.js
export const attachSortOnHeaderClick = (containerId) => {
    const container = document.querySelector("#" + containerId);
    if (!container) return;

    container.addEventListener("click", (event) => {
        // Shadow DOM を含むパスから IGX-GRID-HEADER を探す
        const header = event.composedPath()
            .find((el) => el.tagName === "IGX-GRID-HEADER");
        if (!header) return;

        // ヘッダーキャプションを取得
        const headerCaption = header
            .querySelector(".igx-grid-th__title")
            ?.childNodes[0]?.textContent?.trim();
        if (!headerCaption) return;

        const grid = container.querySelector("igc-grid");

        // 対応する列を探す（header → field の順でフォールバック）
        const col = grid.columns.find(
            (col) => col.header === headerCaption || col.field === headerCaption
        );

        if (!col?.sortable) return;

        header.querySelector(".sort-icon")?.click();
    }, true);
};

IgbGrid を div でラップして、コンテナーの ID を指定します。

<div id="gridContainer">
    <IgbGrid>
        ...
    </IgbGrid>
</div>

OnAfterRenderAsync で JavaScript モジュールをインポートし、attachSortOnHeaderClick を呼び出してイベントをアタッチします。

private IJSObjectReference? _module;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
	if (firstRender)
	{
		// JavaScript.js モジュールをインポートする
		_module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./JavaScript.js");
		// gridContainer にヘッダークリック時のソートイベントをアタッチする
		await _module.InvokeVoidAsync("attachSortOnHeaderClick", "gridContainer");
	}
}

デフォルトでは未ソート状態の列にもソートアイコンが表示されます。並び替えが有効な列のみアイコンを表示するため、以下の CSS を適用します。

igx-grid-header:not(.igx-grid-th--sorted) .sort-icon {
    visibility: hidden;
    color: transparent;
}
igx-grid-header .sort-icon {
    pointer-events: none;
}