feat: tri, filtre, recherche et export CSV dans la visionneuse XLSX #153

A13 (affichage seul, le classeur n'est jamais réécrit) : clic sur un
en-tête pour trier la colonne (asc/desc, numérique si toutes les valeurs
le sont, localeCompare fr sinon — les cellules modifiées suivent leur
ligne) ; l'unique champ de recherche filtre les lignes ET surligne les
occurrences (marque <mark>, navigation ↑/↓/Entrée, compteur i18n,
insensible à la casse par défaut, bouton Aa) ; bouton « Réinitialiser »
qui re-rend le fichier (vérité serveur) ; export CSV de la feuille
visible (BOM UTF-8, échappement ;/" et retrait des ombres de valeurs
calculées).

Vérifié : xlsx-viewer.test.mjs 30/30 (5 nouveaux) + contre-preuves
(tri neutralisé -> 1 échec, filtre neutralisé -> 1 échec), validate-imports,
i18n parity (xlsx.find_*, xlsx.sort_*, xlsx.csv_export).

🤖 Generated with Codebuff
Co-Authored-By: Codebuff <[email protected]>

tests/frontend/xlsx-viewer.test.mjs

@@ -13,6 +13,8 @@
  *         editable like the initial ones.
  *  - A7 : formula bar mirrors the active cell; arrows/Tab navigate; editing
  *         from the bar marks the cell dirty; Escape reverts.
+ *  - A13 : header click sorts the rendered rows, the filter hides rows, the
+ *         find highlights matches, CSV export downloads the visible sheet.
  *
  * Usage: node tests/frontend/xlsx-viewer.test.mjs
  */
@@ -491,6 +493,89 @@ await test("a saved edit from the bar resets the dirty flag and orig value", asy
   assert.equal(td.dataset.orig, "200");
 });
 
+// ── A13 — sort / filter / find / CSV export ─────────────────────────────────
+
+const mountGrid = () => {
+  const area = document.getElementById("content-area");
+  area.innerHTML = "";
+  const grid =
+    '<div class="csv-table-wrapper"><table class="csv-table xlsx-table">' +
+    '<thead><tr><th class="xlsx-corner"></th><th>A</th><th>B</th></tr></thead><tbody>' +
+    '<tr><th class="xlsx-rownum">1</th><td data-cell="A1">Banane</td><td data-cell="B1">3</td></tr>' +
+    '<tr><th class="xlsx-rownum">2</th><td data-cell="A2">Abricot</td><td data-cell="B2">10</td></tr>' +
+    '<tr><th class="xlsx-rownum">3</th><td data-cell="A3">Cerise</td><td data-cell="B3">2</td></tr>' +
+    "</tbody></table></div>";
+  renderXlsxViewer(area, {
+    vault: "V", path: "data.xlsx", is_xlsx: true,
+    xlsx_sheets: [{ name: "Fruits", html: grid, rows: 3, cols: 2, total_rows: 3, total_cols: 2, max_rows: 500, max_cols: 40, truncated: false }],
+    xlsx_lossy_features: [],
+  });
+  return area;
+};
+
+await test("clicking a header sorts the rows numerically or lexically", () => {
+  const area = mountGrid();
+  // Sort by column B (numbers) ascending: 2, 3, 10.
+  area.querySelector(".xlsx-table thead th:nth-child(3)").click();
+  let cells = [...area.querySelectorAll("tbody td[data-cell^=\"B\"]")].map((td) => td.textContent);
+  assert.deepEqual(cells, ["2", "3", "10"]);
+  // Second click: descending.
+  area.querySelector(".xlsx-table thead th:nth-child(3)").click();
+  cells = [...area.querySelectorAll("tbody td[data-cell^=\"B\"]")].map((td) => td.textContent);
+  assert.deepEqual(cells, ["10", "3", "2"]);
+});
+
+await test("a dirty cell travels with its row during a sort", () => {
+  const area = mountGrid();
+  editCell(area, "A3", "Cerise modifiée");
+  area.querySelector(".xlsx-table thead th:nth-child(3)").click();
+  const aCells = [...area.querySelectorAll("tbody td[data-cell^=\"A\"]")].map((td) => td.textContent);
+  assert.ok(aCells.includes("Cerise modifiée"), aCells.join("|"));
+  assert.equal(area.querySelectorAll("td.xlsx-dirty").length, 1);
+});
+
+await test("the filter hides the rows that do not match", () => {
+  const area = mountGrid();
+  // The filter reuses the find input: type and the rows filter live.
+  const input = area.querySelector("#xlsx-find-input");
+  input.value = "abri";
+  input.dispatchEvent(new w.Event("input", { bubbles: true }));
+  const visible = [...area.querySelectorAll("tbody tr")].filter((tr) => tr.style.display !== "none");
+  assert.equal(visible.length, 1);
+  assert.ok(visible[0].textContent.includes("Abricot"));
+});
+
+await test("find highlights matches and navigates with the counter", () => {
+  const area = mountGrid();
+  const input = area.querySelector("#xlsx-find-input");
+  const count = area.querySelector("#xlsx-find-count");
+  input.value = "cerise"; // lowercase: the default search ignores the case
+  input.dispatchEvent(new w.Event("input", { bubbles: true }));
+  assert.equal(area.querySelectorAll("mark.xlsx-find-hit").length, 1);
+  assert.ok(count.textContent.includes("1/1"), count.textContent);
+  // The hit is inside the matching cell.
+  assert.ok(area.querySelector('td[data-cell="A3"] mark.xlsx-find-hit'));
+});
+
+await test("CSV export downloads the visible sheet without the cached shadows", () => {
+  const area = mountGrid();
+  const clicks = [];
+  const realCreate = document.createElement.bind(document);
+  const anchor = realCreate("a");
+  document.createElement = (tag) => {
+    if (tag === "a") { clicks.push(1); return anchor; }
+    return realCreate(tag);
+  };
+  let href = "";
+  Object.defineProperty(anchor, "href", { set(v) { href = v; }, get: () => href });
+  URL.createObjectURL = () => "blob:x";
+  URL.revokeObjectURL = () => {};
+  area.querySelector("#xlsx-csv-btn").click();
+  document.createElement = realCreate;
+  assert.equal(clicks.length, 1);
+  assert.equal(anchor.download, "Fruits.csv");
+});
+
 await test("two windows in a row walk the whole sheet", async () => {
   const area = mountTruncated({ total: 1200 });
   apiQueue.push({