データグリッドの列プリファレンス

列プリファレンスをハイパーメディア流に永続化します — ワイヤは 2 本、すでに同梱されているもの以外の新規 JavaScript はゼロです:

列幅 — installDatagrid() は確定したリサイズを、 hc:datagridcolumnresize をディスパッチする前に input[data-hc-datagrid-width="<col>"] へミラーします。小さなフォームがデバウンスされたイベントでオートセーブします。サーバーはユーザーごとに永続化し、次回以降のロードで記憶した幅を描画し返します — インライン幅 + data-resized として。幅はサーバーが描画する事実です。
列順 — datagrid-columns のチューザーを installSortable() でアップグレード: チェックボックスのシリアライズは DOM 順に従い、サーバーは送信された cols= の順序を列順として尊重します。

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

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

ライブデモ

Name か Status のリサイズグリップをドラッグ(またはフォーカスして矢印キー)してください。確定した幅が隠し入力に入り、デバウンスされたフォームが POST し、ステータス行が本物のサーバーなら永続化する内容で応答します:

Name	Status	Owner
Ingest pipeline	Active	Ada
Billing export	Pending	Alan

マークアップ — 列幅

<!-- グリッド側: リサイズ可能なヘッダーは列名を持つ必要があります —
     data-col のない data-resizable ヘッダーを installDatagrid() はスキップします。 -->
<th class="hc-datagrid__headcell" data-resizable data-col="name"
    scope="col">Name</th>
<th class="hc-datagrid__headcell" data-resizable data-col="status"
    scope="col">Status</th>

<form action="/prefs/columns" method="post"
      data-hx-post="/prefs/columns"
      data-hx-trigger="hc:datagridcolumnresize from:body delay:500ms"
      data-hx-include="this"
      data-hx-target="#prefs-status" data-hx-swap="innerHTML">
  <input type="hidden" name="w-name" data-hc-datagrid-width="name">
  <input type="hidden" name="w-status" data-hc-datagrid-width="status">
  <div id="prefs-status" role="status" class="hc-sr-only"></div>
</form>

ミラーはイベントディスパッチの前に行われるため、イベント起動のリクエストは常に新しい値をシリアライズします。ミラー先の入力はグリッドに最も近い <form> の中、なければドキュメント全体から見つかります。

マークアップ — 列順

<fieldset class="hc-popover__body" id="cols-fields" data-hc-sortable>
  <div class="hc-item">
    <button type="button" class="hc-button" data-variant="ghost"
            data-hc-sortable-handle aria-label="Reorder Name">⠿</button>
    <label class="hc-checkbox-label">
      <input class="hc-checkbox" type="checkbox" name="cols" value="name" checked>
      Name
    </label>
  </div>
  <!-- …列ごとにソータブルな行を 1 つずつ… -->
</fieldset>

各行はソータブルなフィールドセットの直接の子で、ハンドルはラベルの隣に置き、決して中には入れません — <label> の中のインタラクティブコンテンツは不正な HTML で、ハンドルのクリックがチェックボックスをトグルしてしまいます。ドラッグ(またはキーボードでグラブ)して並べ替えると、Apply は DOM 順でチェックボックスをシリアライズし、アップグレードされた datagrid-columns 契約がその順序で列を描画します。

サーバーレスポンス契約

POST /prefs/columns(w-<col> のペア):

ケース	レスポンス (200)
いずれかの `w-<col>` あり	`role="status"` フラグメント(例: “Saved — Name 220px”)。ユーザーごとに永続化
無効な値	サーバー側でクランプまたは無視、それでも `200` — 幅はプリファレンスであり、決してエラーではありません
no-JS	ネイティブ POST → `303` PRG

描画し返すことが契約のもう半分です: 次回以降のロードで、サーバーは記憶した幅を列のヘッダーとセルに style="inline-size: <w>px; max-inline-size: <w>px" + data-resized として描画します — 印刷/エクスポートも他のセッションも画面と一致します。

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

JavaScript なしではクライアントのリサイズ自体がありません — そしてサーバーが描画した幅は引き続き適用されます。列順チューザーは本物の GET フォームのままで、ソータブルのアップグレードなしでもチェックボックスは集合を選べます。

アクセシビリティ

保存は role="status" リージョンで通知されます — 決して無言ではありません。
ソータブルのハンドルは本物のボタンで、installSortable() のキーボード文法(Space/Enter でグラブ、矢印で移動、Escape でキャンセル)を持ちます。
列リサイズ自体もキーボードでアクセス可能(グリップはフォーカス可能なセパレーター)なので、プリファレンスのループ全体がそうです。