@proef/common-ui 2.3.0 → 2.6.0

package/dist/esm/legacy/components/molecules/DataTable/DataTable.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import { useState, useEffect, useMemo, useRef, useLayoutEffect, Fragment } from "react";
 import { FilterChips } from "../../../../v1/primitives/display/FilterChips/FilterChips.js";
 import { Pagination } from "../../../../v1/components/data/Pagination/Pagination.js";
@@ -48,6 +48,20 @@ const Layers = ({ size = 11, className }) => /* @__PURE__ */ jsxs("svg", { xmlns
 ] });
 const Caret = ({ size = 11, className }) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", className, children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }) });
 const Spinner = ({ size = 16, className }) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", className: `animate-spin ${className ?? ""}`, "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
+const MOBILE_QUERY = "(max-width: 639px)";
+function useEcraEstreito() {
+  const ler = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(MOBILE_QUERY).matches;
+  const [estreito, setEstreito] = useState(ler);
+  useEffect(() => {
+    if (typeof window.matchMedia !== "function") return;
+    const mq = window.matchMedia(MOBILE_QUERY);
+    const mudar = () => setEstreito(mq.matches);
+    mudar();
+    mq.addEventListener?.("change", mudar);
+    return () => mq.removeEventListener?.("change", mudar);
+  }, []);
+  return estreito;
+}
 const EMPTY = "—";
 const MAX_OPCOES_FILTRO = 50;
 const DEFAULT_STICKY_WIDTH = 160;
@@ -210,6 +224,7 @@ function DataTable({
   resizableColumns = true,
   sortFromFilter = true,
   filterMode = "excel",
+  filterStartsEmpty = false,
   defaultSortKey,
   defaultSortDir,
   viewRef,
@@ -225,9 +240,11 @@ function DataTable({
   onGroupByChange,
   onSortChange,
   onColumnFiltersChange,
-  scrollAffordance = false
+  scrollAffordance = false,
+  mobileCards = true
 }) {
   const L = { ...DEFAULT_LABELS, ...labels };
+  const estreito = useEcraEstreito();
   const [larguras, setLarguras] = useState(() => {
     if (!storageKey) return {};
     try {
@@ -334,19 +351,27 @@ function DataTable({
     } catch {
     }
   }, [columnFilters, rangeFilters, sort, groupByKeys, grupoControlado, storageKey]);
+  const posicionarPopup = () => {
+    if (!funilAberto) return;
+    const el = filterRefs.current.get(funilAberto);
+    if (!el) return;
+    const r = el.getBoundingClientRect();
+    const largura = Math.min(288, window.innerWidth * 0.8);
+    const left = Math.max(8, Math.min(r.left, window.innerWidth - largura - 8));
+    let top = r.bottom + 6;
+    const altura = popupRef.current?.offsetHeight ?? 0;
+    if (altura && top + altura > window.innerHeight - 8) {
+      const acima = r.top - 6 - altura;
+      top = acima >= 8 ? acima : Math.max(8, window.innerHeight - altura - 8);
+    }
+    setPopupPos((p) => p && p.top === top && p.left === left ? p : { top, left });
+  };
   useLayoutEffect(() => {
     if (!funilAberto) {
       setPopupPos(null);
       return;
     }
-    const recalcular = () => {
-      const el = filterRefs.current.get(funilAberto);
-      if (!el) return;
-      const r = el.getBoundingClientRect();
-      const largura = Math.min(288, window.innerWidth * 0.8);
-      const left = Math.max(8, Math.min(r.left, window.innerWidth - largura - 8));
-      setPopupPos({ top: r.bottom + 6, left });
-    };
+    const recalcular = posicionarPopup;
     recalcular();
     window.addEventListener("scroll", recalcular, true);
     window.addEventListener("resize", recalcular);
@@ -510,6 +535,9 @@ function DataTable({
     }
     return { opts, total: correspondentes.length, correspondentes };
   }, [openFilterOptions, openFilterOptionsLower, filterSearch, modoExcel]);
+  useLayoutEffect(() => {
+    if (popupPos) posicionarPopup();
+  });
   const filtrar = (rows) => {
     if (activeFilters.length === 0 && activeRanges.length === 0) return rows;
     const predicados = activeFilters.flatMap(([key, sel]) => passaFiltro(key, sel) ?? []);
@@ -676,7 +704,7 @@ function DataTable({
     if (!allData) onDataNeeded?.();
     setSort((s) => s?.key === key ? s.dir === 1 ? { key, dir: -1 } : null : { key, dir: 1 });
   };
-  const selecaoDaColuna = (key) => new Set(rascunho?.key === key ? rascunho.sel : columnFilters[key] ?? (modoExcel ? openFilterOptions : []));
+  const selecaoDaColuna = (key) => new Set(rascunho?.key === key ? rascunho.sel : columnFilters[key] ?? (modoExcel && !filterStartsEmpty ? openFilterOptions : []));
   const aplicarSelecao = (key, sel) => setRascunho({ key, sel });
   const confirmarSelecao = (key) => {
     if (rascunho?.key === key) {
@@ -688,7 +716,7 @@ function DataTable({
   };
   const gravarSelecao = (key, sel) => mudarFiltrosCol((prev) => {
     const proximo = { ...prev };
-    if (modoExcel && sel.size === openFilterOptions.length) delete proximo[key];
+    if (modoExcel && (sel.size === openFilterOptions.length || filterStartsEmpty && sel.size === 0)) delete proximo[key];
     else proximo[key] = sel;
     return proximo;
   });
@@ -931,7 +959,7 @@ function DataTable({
               ),
               /* @__PURE__ */ jsxs("div", { className: "max-h-64 overflow-y-auto overflow-x-hidden space-y-0.5", children: [
                 modoExcel && opts.length > 0 && (() => {
-                  const marcados = opcoesVisiveis.correspondentes.filter((v) => sel ? sel.has(v) : true).length;
+                  const marcados = opcoesVisiveis.correspondentes.filter((v) => sel ? sel.has(v) : !filterStartsEmpty).length;
                   const todos = marcados === opcoesVisiveis.correspondentes.length;
                   const alguns = marcados > 0 && !todos;
                   return /* @__PURE__ */ jsxs(
@@ -956,7 +984,7 @@ function DataTable({
                   );
                 })(),
                 opts.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-[11px] text-slate-400 text-center py-3", children: L.noOptions }) : opts.map((v) => {
-                  const checked = sel ? sel.has(v) : modoExcel;
+                  const checked = sel ? sel.has(v) : modoExcel && !filterStartsEmpty;
                   return /* @__PURE__ */ jsxs(
                     "button",
                     {
@@ -1131,10 +1159,71 @@ function DataTable({
       !recolhido && (no.filhos.length > 0 ? renderGrupos(no.filhos, nivel + 1) : no.items.map((row) => renderLinha(row, indicePorLinha.get(row) ?? 0)))
     ] }, no.path);
   });
+  const renderCartoes = () => {
+    const vazio = /* @__PURE__ */ jsx("span", { className: "text-slate-400", children: EMPTY });
+    const conteudo = (row, c) => c.render ? c.render(row) : rawValue(row, c) ?? vazio;
+    const [principal, ...resto] = columns;
+    const campos = resto.filter((c) => c.label);
+    const semValor = (row, c) => {
+      if (!c.value && !(c.key in row)) return false;
+      const v = rawValue(row, c);
+      return v === null || v === "";
+    };
+    const acoes = resto.filter((c) => !c.label);
+    const aviso = (texto) => /* @__PURE__ */ jsx("div", { className: "py-12 text-center text-sm text-slate-400", children: texto });
+    return /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 text-[13px] dark:text-slate-200", children: isLoading || aEsperarDataset ? aviso(
+      /* @__PURE__ */ jsxs("span", { role: "status", "aria-live": "polite", className: "inline-flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Spinner, { size: 16, className: "text-proef-blue dark:text-proef-turquoise" }),
+        L.loading
+      ] })
+    ) : sorted.length === 0 ? aviso(
+      /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        emptyIcon && /* @__PURE__ */ jsx("div", { className: "flex justify-center mb-2", children: emptyIcon }),
+        /* @__PURE__ */ jsx("p", { className: "m-0", children: L.empty }),
+        emptySubLabel && /* @__PURE__ */ jsx("p", { className: "m-0 text-xs mt-1", children: emptySubLabel })
+      ] })
+    ) : /* @__PURE__ */ jsx("ul", { className: "m-0 list-none p-0 divide-y divide-slate-100 dark:divide-slate-800", children: pageData.map((row, i) => {
+      const k = chaveDe(row, i);
+      const marcada = selectable && selectedKeys.has(k);
+      const selecionavel = !!selectable && podeSelecionar(row);
+      return /* @__PURE__ */ jsxs(
+        "li",
+        {
+          onClick: () => onRowClick?.(row),
+          className: `px-3 py-3 space-y-1.5 ${onRowClick ? "cursor-pointer active:bg-slate-100 dark:active:bg-slate-800" : ""} ${marcada ? "bg-proef-turquoise/5" : ""} ${rowClassName?.(row) ?? ""}`,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+              selectable && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  role: "checkbox",
+                  "aria-checked": !!marcada,
+                  "aria-disabled": !selecionavel || void 0,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    if (selecionavel) alternarLinha(k);
+                  },
+                  className: `mt-0.5 w-4 h-4 shrink-0 flex items-center justify-center border rounded ${marcada ? "bg-proef-navy dark:bg-proef-turquoise border-proef-navy dark:border-proef-turquoise text-white dark:text-proef-navy" : "border-slate-300 dark:border-slate-600"} ${selecionavel ? "" : "opacity-40"}`,
+                  children: marcada && /* @__PURE__ */ jsx("span", { className: "text-[9px] leading-none", children: "✓" })
+                }
+              ),
+              principal && /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 font-semibold break-words", children: conteudo(row, principal) }),
+              acoes.length > 0 && /* @__PURE__ */ jsx("div", { className: "-my-1 flex shrink-0 items-center gap-1", onClick: (e) => e.stopPropagation(), children: acoes.map((c) => /* @__PURE__ */ jsx(Fragment, { children: conteudo(row, c) }, c.key)) })
+            ] }),
+            campos.filter((c) => !semValor(row, c)).map((c) => /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+              /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[11px] uppercase tracking-wide text-slate-500 dark:text-slate-400 pt-px", children: c.label }),
+              /* @__PURE__ */ jsx("div", { className: "min-w-0 text-right break-words", children: conteudo(row, c) })
+            ] }, c.key))
+          ]
+        },
+        k
+      );
+    }) }) });
+  };
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 mb-2.5", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-xs text-slate-500 dark:text-slate-400", children: isLoading ? "" : L.results.replace("{count}", String(totalResultados)) }),
-      /* @__PURE__ */ jsxs("div", { className: "ml-auto flex flex-wrap items-center justify-end gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 mb-2.5 max-sm:[&>div>:has(input[type=search])]:order-first max-sm:[&>div>:has(input[type=search])]:w-full", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-slate-500 dark:text-slate-400 max-sm:mr-auto", children: isLoading ? "" : L.results.replace("{count}", String(totalResultados)) }),
+      /* @__PURE__ */ jsxs("div", { className: "ml-auto flex flex-wrap items-center justify-end gap-2 max-sm:contents", children: [
         extraToolbar,
         exportFileName && sorted.length > 0 && // Mesmo aspeto do botão Colunas ao lado (o navy cheio competia com as ações da página).
         /* @__PURE__ */ jsxs(
@@ -1149,7 +1238,7 @@ function DataTable({
                 /* @__PURE__ */ jsx("polyline", { points: "7 10 12 15 17 10" }),
                 /* @__PURE__ */ jsx("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
               ] }),
-              L.export
+              /* @__PURE__ */ jsx("span", { className: "max-sm:sr-only", children: L.export })
             ]
           }
         )
@@ -1203,95 +1292,98 @@ function DataTable({
         clearAllLabel: L.clearAll
       }
     ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: `overflow-auto rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 ${scrollAffordance ? "outline-none focus-visible:ring-2 focus-visible:ring-proef-blue dark:focus-visible:ring-proef-turquoise" : ""}`,
-        style: { maxHeight },
-        ...scrollAffordance ? { tabIndex: 0, role: "region", "aria-label": L.scrollRegion ?? DEFAULT_LABELS.scrollRegion, onKeyDown: rolarComTeclado } : {},
-        children: /* @__PURE__ */ jsxs("table", { className: "w-full text-[13px] border-collapse dark:text-slate-200", children: [
-          /* @__PURE__ */ jsx("thead", { className: "sticky top-0 z-[2]", children: /* @__PURE__ */ jsxs("tr", { children: [
-            selectable && /* @__PURE__ */ jsx("th", { className: "bg-slate-50 dark:bg-slate-800 px-3 py-2.5 border-b border-slate-200 dark:border-slate-700 w-10 sticky left-0 z-[3]", children: /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: alternarTodas,
-                className: `appearance-none cursor-pointer w-4 h-4 flex items-center justify-center border transition-colors rounded ${todasVisiveisMarcadas ? "bg-proef-navy dark:bg-proef-turquoise border-proef-navy dark:border-proef-turquoise text-white dark:text-proef-navy" : algumaVisivelMarcada ? "bg-slate-300 dark:bg-slate-600 border-slate-300 dark:border-slate-600 text-white" : "bg-white dark:bg-slate-900 border-slate-300 dark:border-slate-600 hover:border-slate-400 dark:hover:border-slate-500"}`,
-                children: (todasVisiveisMarcadas || algumaVisivelMarcada) && /* @__PURE__ */ jsx("span", { className: "text-[9px] leading-none", children: "✓" })
-              }
-            ) }),
-            columns.map((c) => {
-              const podeOrdenar = c.sortable !== false;
-              const podeAgrupar = agrupavel(c);
-              const agrupada = groupByKeys.includes(c.key);
-              return /* @__PURE__ */ jsxs(
-                "th",
+    mobileCards && estreito && !isGrouped ? renderCartoes() : (
+      /* rounded-xl: os mesmos cantos dos cartões da biblioteca (Ui.tsx) e das tabelas dos portais. */
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `overflow-auto rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 ${scrollAffordance ? "outline-none focus-visible:ring-2 focus-visible:ring-proef-blue dark:focus-visible:ring-proef-turquoise" : ""}`,
+          style: { maxHeight },
+          ...scrollAffordance ? { tabIndex: 0, role: "region", "aria-label": L.scrollRegion ?? DEFAULT_LABELS.scrollRegion, onKeyDown: rolarComTeclado } : {},
+          children: /* @__PURE__ */ jsxs("table", { className: "w-full text-[13px] border-collapse dark:text-slate-200", children: [
+            /* @__PURE__ */ jsx("thead", { className: "sticky top-0 z-[2]", children: /* @__PURE__ */ jsxs("tr", { children: [
+              selectable && /* @__PURE__ */ jsx("th", { className: "bg-slate-50 dark:bg-slate-800 px-3 py-2.5 border-b border-slate-200 dark:border-slate-700 w-10 sticky left-0 z-[3]", children: /* @__PURE__ */ jsx(
+                "button",
                 {
-                  style: {
-                    ...c.width ? { minWidth: c.width } : {},
-                    ...larguras[c.key] ? { width: larguras[c.key], minWidth: larguras[c.key], maxWidth: larguras[c.key] } : {},
-                    ...estiloPreso(c) ?? {}
-                  },
-                  className: `group/th relative bg-slate-50 dark:bg-slate-800 text-[11.5px] uppercase tracking-wide text-slate-500 dark:text-slate-400 font-semibold px-3 py-2.5 border-b border-slate-200 dark:border-slate-700 whitespace-nowrap select-none ${alignClass(
-                    c.align
-                  )} ${c.sticky ? `sticky z-[3] bg-slate-50 dark:bg-slate-800 ${c.sticky === "right" ? "border-l border-slate-200 dark:border-slate-700" : ""}` : ""} ${c.headerClassName ?? ""}`,
-                  children: [
-                    resizableColumns && // Pega no limite direito: arrastar redimensiona; duplo clique repõe a largura automática
-                    /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        role: "separator",
-                        "aria-orientation": "vertical",
-                        title: L.resizeColumn,
-                        onMouseDown: (e) => iniciarResize(e, c.key),
-                        onDoubleClick: () => reporLargura(c.key),
-                        onClick: (e) => e.stopPropagation(),
-                        className: "absolute right-0 top-0 z-[4] h-full w-1.5 cursor-col-resize bg-transparent hover:bg-proef-blue/40 group-hover/th:bg-slate-300/60 dark:group-hover/th:bg-slate-600/60"
-                      }
-                    ),
-                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-                      podeOrdenar ? /* @__PURE__ */ jsxs(
-                        "button",
-                        {
-                          onClick: () => toggleSort(c.key),
-                          className: "appearance-none bg-transparent border-0 cursor-pointer p-0 uppercase tracking-wide text-slate-500 dark:text-slate-400 hover:text-proef-blue dark:hover:text-proef-turquoise font-semibold",
-                          children: [
-                            c.label,
-                            sort?.key === c.key && /* @__PURE__ */ jsx("span", { className: "ml-1", children: sort.dir === 1 ? "▲" : "▼" })
-                          ]
-                        }
-                      ) : /* @__PURE__ */ jsx("span", { children: c.label }),
-                      podeAgrupar && /* @__PURE__ */ jsx(
-                        "button",
+                  onClick: alternarTodas,
+                  className: `appearance-none cursor-pointer w-4 h-4 flex items-center justify-center border transition-colors rounded ${todasVisiveisMarcadas ? "bg-proef-navy dark:bg-proef-turquoise border-proef-navy dark:border-proef-turquoise text-white dark:text-proef-navy" : algumaVisivelMarcada ? "bg-slate-300 dark:bg-slate-600 border-slate-300 dark:border-slate-600 text-white" : "bg-white dark:bg-slate-900 border-slate-300 dark:border-slate-600 hover:border-slate-400 dark:hover:border-slate-500"}`,
+                  children: (todasVisiveisMarcadas || algumaVisivelMarcada) && /* @__PURE__ */ jsx("span", { className: "text-[9px] leading-none", children: "✓" })
+                }
+              ) }),
+              columns.map((c) => {
+                const podeOrdenar = c.sortable !== false;
+                const podeAgrupar = agrupavel(c);
+                const agrupada = groupByKeys.includes(c.key);
+                return /* @__PURE__ */ jsxs(
+                  "th",
+                  {
+                    style: {
+                      ...c.width ? { minWidth: c.width } : {},
+                      ...larguras[c.key] ? { width: larguras[c.key], minWidth: larguras[c.key], maxWidth: larguras[c.key] } : {},
+                      ...estiloPreso(c) ?? {}
+                    },
+                    className: `group/th relative bg-slate-50 dark:bg-slate-800 text-[11.5px] uppercase tracking-wide text-slate-500 dark:text-slate-400 font-semibold px-3 py-2.5 border-b border-slate-200 dark:border-slate-700 whitespace-nowrap select-none ${alignClass(
+                      c.align
+                    )} ${c.sticky ? `sticky z-[3] bg-slate-50 dark:bg-slate-800 ${c.sticky === "right" ? "border-l border-slate-200 dark:border-slate-700" : ""}` : ""} ${c.headerClassName ?? ""}`,
+                    children: [
+                      resizableColumns && // Pega no limite direito: arrastar redimensiona; duplo clique repõe a largura automática
+                      /* @__PURE__ */ jsx(
+                        "span",
                         {
-                          onClick: () => alternarGrupo(c.key),
-                          title: (agrupada ? L.ungroup : L.groupBy).replace("{label}", c.label),
-                          className: `appearance-none bg-transparent border-0 cursor-pointer p-0.5 transition-colors ${agrupada ? "text-violet-600 dark:text-violet-300" : "text-slate-300 dark:text-slate-600 hover:text-slate-500 dark:hover:text-slate-300"}`,
-                          children: /* @__PURE__ */ jsx(Layers, { size: 10 })
+                          role: "separator",
+                          "aria-orientation": "vertical",
+                          title: L.resizeColumn,
+                          onMouseDown: (e) => iniciarResize(e, c.key),
+                          onDoubleClick: () => reporLargura(c.key),
+                          onClick: (e) => e.stopPropagation(),
+                          className: "absolute right-0 top-0 z-[4] h-full w-1.5 cursor-col-resize bg-transparent hover:bg-proef-blue/40 group-hover/th:bg-slate-300/60 dark:group-hover/th:bg-slate-600/60"
                         }
                       ),
-                      botaoFunil(c)
-                    ] }),
-                    c.headerExtra && /* @__PURE__ */ jsx("div", { className: "mt-0.5 normal-case font-normal tracking-normal", children: c.headerExtra(filtered) })
-                  ]
-                },
-                c.key
-              );
-            })
-          ] }) }),
-          /* @__PURE__ */ jsx("tbody", { children: isLoading ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: nColunas, className: "py-16 text-center text-sm font-bold uppercase tracking-widest text-slate-400", children: /* @__PURE__ */ jsxs("div", { role: "status", "aria-live": "polite", className: "inline-flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(Spinner, { size: 16, className: "text-proef-blue dark:text-proef-turquoise" }),
-            /* @__PURE__ */ jsx("span", { children: L.loading })
-          ] }) }) }) : aEsperarDataset ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: nColunas, className: "py-16 text-center text-sm font-bold uppercase tracking-widest text-slate-400", children: L.loading }) }) : isGrouped ? grupos.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: nColunas, className: "py-16 text-center text-sm text-slate-400", children: L.empty }) }) : renderGrupos(grupos, 0) : sorted.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs("td", { colSpan: nColunas, className: "py-16 text-center", children: [
-            emptyIcon && /* @__PURE__ */ jsx("div", { className: "flex justify-center mb-2", children: emptyIcon }),
-            /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-400", children: L.empty }),
-            emptySubLabel && /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-400 mt-1", children: emptySubLabel })
-          ] }) }) : pageData.map((row, i) => renderLinha(row, i)) }),
-          totalRow && !isLoading && !aEsperarDataset && sorted.length > 0 && /* @__PURE__ */ jsx("tfoot", { className: "sticky bottom-0 z-[2]", children: /* @__PURE__ */ jsxs("tr", { className: "bg-slate-100 dark:bg-slate-800 font-black text-slate-800 dark:text-slate-100", children: [
-            /* @__PURE__ */ jsx("td", { colSpan: colunasRotuloGrupo, className: "px-3 py-2 border-t-2 border-slate-200 dark:border-slate-700 text-[10px] uppercase tracking-widest", children: L.total }),
-            colunasComValor.map((c) => /* @__PURE__ */ jsx("td", { className: `px-3 py-2 border-t-2 border-slate-200 dark:border-slate-700 whitespace-nowrap text-xs ${alignClass(c.align)}`, children: c.groupAggregate?.(sorted) }, c.key))
-          ] }) })
-        ] })
-      }
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+                        podeOrdenar ? /* @__PURE__ */ jsxs(
+                          "button",
+                          {
+                            onClick: () => toggleSort(c.key),
+                            className: "appearance-none bg-transparent border-0 cursor-pointer p-0 uppercase tracking-wide text-slate-500 dark:text-slate-400 hover:text-proef-blue dark:hover:text-proef-turquoise font-semibold",
+                            children: [
+                              c.label,
+                              sort?.key === c.key && /* @__PURE__ */ jsx("span", { className: "ml-1", children: sort.dir === 1 ? "▲" : "▼" })
+                            ]
+                          }
+                        ) : /* @__PURE__ */ jsx("span", { children: c.label }),
+                        podeAgrupar && /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            onClick: () => alternarGrupo(c.key),
+                            title: (agrupada ? L.ungroup : L.groupBy).replace("{label}", c.label),
+                            className: `appearance-none bg-transparent border-0 cursor-pointer p-0.5 transition-colors ${agrupada ? "text-violet-600 dark:text-violet-300" : "text-slate-300 dark:text-slate-600 hover:text-slate-500 dark:hover:text-slate-300"}`,
+                            children: /* @__PURE__ */ jsx(Layers, { size: 10 })
+                          }
+                        ),
+                        botaoFunil(c)
+                      ] }),
+                      c.headerExtra && /* @__PURE__ */ jsx("div", { className: "mt-0.5 normal-case font-normal tracking-normal", children: c.headerExtra(filtered) })
+                    ]
+                  },
+                  c.key
+                );
+              })
+            ] }) }),
+            /* @__PURE__ */ jsx("tbody", { children: isLoading ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: nColunas, className: "py-16 text-center text-sm font-bold uppercase tracking-widest text-slate-400", children: /* @__PURE__ */ jsxs("div", { role: "status", "aria-live": "polite", className: "inline-flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(Spinner, { size: 16, className: "text-proef-blue dark:text-proef-turquoise" }),
+              /* @__PURE__ */ jsx("span", { children: L.loading })
+            ] }) }) }) : aEsperarDataset ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: nColunas, className: "py-16 text-center text-sm font-bold uppercase tracking-widest text-slate-400", children: L.loading }) }) : isGrouped ? grupos.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: nColunas, className: "py-16 text-center text-sm text-slate-400", children: L.empty }) }) : renderGrupos(grupos, 0) : sorted.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs("td", { colSpan: nColunas, className: "py-16 text-center", children: [
+              emptyIcon && /* @__PURE__ */ jsx("div", { className: "flex justify-center mb-2", children: emptyIcon }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-400", children: L.empty }),
+              emptySubLabel && /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-400 mt-1", children: emptySubLabel })
+            ] }) }) : pageData.map((row, i) => renderLinha(row, i)) }),
+            totalRow && !isLoading && !aEsperarDataset && sorted.length > 0 && /* @__PURE__ */ jsx("tfoot", { className: "sticky bottom-0 z-[2]", children: /* @__PURE__ */ jsxs("tr", { className: "bg-slate-100 dark:bg-slate-800 font-black text-slate-800 dark:text-slate-100", children: [
+              /* @__PURE__ */ jsx("td", { colSpan: colunasRotuloGrupo, className: "px-3 py-2 border-t-2 border-slate-200 dark:border-slate-700 text-[10px] uppercase tracking-widest", children: L.total }),
+              colunasComValor.map((c) => /* @__PURE__ */ jsx("td", { className: `px-3 py-2 border-t-2 border-slate-200 dark:border-slate-700 whitespace-nowrap text-xs ${alignClass(c.align)}`, children: c.groupAggregate?.(sorted) }, c.key))
+            ] }) })
+          ] })
+        }
+      )
     ),
     !isLoading && paginando && (totalPages > 1 || (pageSizeOptions?.length ?? 0) > 0) && /* @__PURE__ */ jsx(
       Pagination,