データグリッドの列選択

業務アプリのグリッドが最初に生やす運用レイヤー、ユーザーごとの列選択です。このレシピはそれをハイパーメディアのまま保ちます — filter-popover のシェルに列ごとのチェックボックスを 1 つずつ載せ、Apply が cols= の繰り返しパラメータ付きでグリッド URL を GET し、サーバーがデータグリッド全体をその列だけで再レンダリングします。クライアント側の列隠しはありません: どの列が存在するかをサーバーが決めるので、往復 1 回、状態のずれゼロ、印刷やエクスポートは何もしなくても画面と一致します。新規 JavaScript ゼロ。バージョニングポリシーの対象です。

npx @hypermedia-components/cli add datagrid-columns
npx @hypermedia-components/cli validate page.html

recipe.html・expanded.html と機械検査されるサーバー契約が入ります。

ライブデモ

Columns を開いていくつか外し、Apply — サーバーがちょうどその列(送信された順)のグリッドと、チェック状態が一致したチューザーのアウトオブバンド再レンダリングで応答します。Apply の前に行の ⠿ ハンドルをドラッグして並べ替えると、送信された cols= の順序がそのまま列順になります (datagrid-prefs によるアップグレード)。全部外すと、パラメータなしブランチがデフォルトセットを返すのが見られます。

マークアップ

<button class="hc-button" type="button" popovertarget="cols-popover">
  Columns
</button>

<div id="cols-popover" class="hc-popover" popover
     data-side="bottom" data-align="start">
  <form id="cols-chooser" action="/items" method="get"
        data-hx-get="/items"
        data-hx-target="#items-grid"
        data-hc-close-popover-on-success>
    <fieldset class="hc-popover__body" id="cols-fields">
      <label class="hc-checkbox-label">
        <input class="hc-checkbox" type="checkbox" name="cols" value="name" checked>
        Name
      </label>
      <!-- …one checkbox per column: status, owner, updated… -->
    </fieldset>
    <footer class="hc-popover__footer">
      <button class="hc-button" type="submit" data-variant="primary">Apply</button>
    </footer>
  </form>
</div>

<div class="hc-datagrid" id="items-grid">
  <!-- server-rendered: .hc-datagrid__scroll > table with the current columns -->
</div>

チューザーは filter-popover のシェルです — data-hc-close-popover-on-success(自動インストールされる installClosePopover())が 2xx で閉じます。チェックボックスはすべて name="cols" を共有するため、Apply は繰り返しの cols= パラメータをシリアライズし、フォームはグリッドのラッパーを target にします (innerHTML デフォルト): ヘッダーと行は常に一緒に変わります。チューザーのフィールドセットが安定した id を保ち、それがチェック状態を再レンダリングするアウトオブバンドスワップのアンカーです(フォームは決してアンカーになりません — 下の契約を参照)。

サーバー応答契約

GET /items?cols=name&cols=status&…:

ケース	応答(200)
いずれかの `cols` あり	ちょうどその列を、送信された順で並べたグリッドフラグメント(datagrid-prefs によるアップグレード) + チェック状態が一致したチューザーフィールドセットの OOB `outerHTML` 再レンダリング(フォームは決して置換しません — `data-hc-close-popover-on-success` を運ぶフォームはリクエストを生き延びる必要があります)
`cols` が空/なし	サーバーのデフォルト列セット — 全部外した Apply は `cols` を一切送らないので、ここに着地します
未知の列名	無視(スキーマはサーバーです)。認識できるものが残らなければデフォルトセットへフォールバック

勝つのは要求された集合と — datagrid-prefs によるアップグレード以降は — 送信された順序です(ソータブルなチューザーは DOM 順をシリアライズします)。ユーザーごとの選択の永続化はサーバーの選択肢です。CSV エクスポートにもレシピは不要です: <a href="/items.csv?cols=…"> が同じパラメータを使い回すので、ファイルは画面と一致します。

プログレッシブエンハンスメント

チューザーは本物の GET フォームです(action + method="get"): JavaScript なしでは Apply が /items?cols=… へ遷移し、サーバーがその列でフルページをレンダリングします。グリッド自体もサーバーレンダリングされた HTML なので、列選択がクライアント JavaScript に依存することはありません。

アクセシビリティ

可視ラベル付きのネイティブチェックボックス(hc-checkbox-label)— チューザーはただのフォームで、メニューのセマンティクスを偽装しません。
どの応答でもグリッドは scope="col" ヘッダー付きの本物の <table> のままです。外した列は支援技術からも消えます — それが狙いです。
成功時にポップオーバーが閉じ、フォーカスはトリガーボタンに戻ります (ネイティブ popover の挙動)。