@nextelco/common-ui 2.1.105 → 2.1.107

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

@@ -1,9 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useRef, useLayoutEffect, useMemo, Fragment } from "react";
-import Escolha from "../../ui/Escolha.js";
+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";
 import { createPortal } from "react-dom";
 const DEFAULT_LABELS = {
   total: "Total",
+  scrollRegion: "Tabela (deslizar na horizontal)",
   results: "{count} results",
   resizeColumn: "Drag to resize · double-click to reset",
   export: "Export",
@@ -19,11 +21,17 @@ const DEFAULT_LABELS = {
   loadingOptions: "Loading options from all pages…",
   min: "From",
   max: "To",
+  from: "From",
+  to: "To",
   page: "Page {page}/{pages}",
   prev: "Prev",
   next: "Next",
   sortAsc: "Sort ascending",
   sortDesc: "Sort descending",
+  sortOldest: "Oldest first",
+  sortNewest: "Newest first",
+  sortSmallest: "Smallest first",
+  sortLargest: "Largest first",
   groupBy: "Group by {label}",
   ungroup: "Remove grouping by {label}",
   clearGroups: "Clear grouping",
@@ -37,6 +45,7 @@ const Layers = ({ size = 11, className }) => /* @__PURE__ */ jsxs("svg", { xmlns
   /* @__PURE__ */ jsx("path", { d: "m3 17 9 5 9-5M3 12l9 5 9-5" })
 ] });
 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 EMPTY = "—";
 const MAX_OPCOES_FILTRO = 50;
 const DEFAULT_STICKY_WIDTH = 160;
@@ -51,19 +60,70 @@ function rawValue(row, col) {
   if (typeof v === "number" || typeof v === "string") return v;
   return String(v);
 }
+const normalizarRotulo = (v) => v == null || v === "" ? EMPTY : String(v);
 function filterKey(row, col) {
-  const v = rawValue(row, col);
-  return v == null || v === "" ? EMPTY : String(v);
+  return normalizarRotulo(rawValue(row, col));
+}
+function temValor(row, col) {
+  if (col.filterValues) return col.filterValues(row).some((v) => v != null && v !== "");
+  return rawValue(row, col) !== null;
+}
+function lerFiltrosGuardados(columns, f) {
+  return Object.fromEntries(
+    Object.entries(f).map(([k, v]) => {
+      const data = columns.find((c) => c.key === k)?.sortType === "date";
+      return [k, new Set(data ? v.map(rotuloDeData) : v)];
+    })
+  );
+}
+function chaveDosFiltros(f) {
+  return JSON.stringify(
+    Object.entries(f).map(([k, v]) => [k, [...v].sort()]).sort()
+  );
 }
 function timestampDeData(v) {
   if (v == null || v === "") return NaN;
   if (v instanceof Date) return v.getTime();
+  if (typeof v === "number") return Number.isFinite(v) ? v : NaN;
   const s = String(v).trim();
   const m = /^(\d{1,2})[/-](\d{1,2})[/-](\d{4})/.exec(s);
   if (m) return Date.UTC(Number(m[3]), Number(m[2]) - 1, Number(m[1]));
   const t = new Date(s).getTime();
   return Number.isNaN(t) ? NaN : t;
 }
+const doisDigitos = (n) => String(n).padStart(2, "0");
+const RX_CHAVE_DIA = /^(\d{4})-(\d{2})-(\d{2})$/;
+function chaveDia(v) {
+  if (v == null || v === "") return null;
+  if (typeof v === "string") {
+    const s = v.trim();
+    const pt = /^(\d{1,2})[/-](\d{1,2})[/-](\d{4})/.exec(s);
+    if (pt) return `${pt[3]}-${doisDigitos(pt[2])}-${doisDigitos(pt[1])}`;
+    if (RX_CHAVE_DIA.test(s)) return s;
+  }
+  const t = timestampDeData(v);
+  if (!Number.isFinite(t)) return null;
+  const d = new Date(t);
+  return `${d.getFullYear()}-${doisDigitos(d.getMonth() + 1)}-${doisDigitos(d.getDate())}`;
+}
+function rotuloDeData(v) {
+  if (v == null || v === "") return EMPTY;
+  return chaveDia(v) ?? String(v);
+}
+function diaVisivel(v) {
+  const m = RX_CHAVE_DIA.exec(v);
+  return m ? `${m[3]}/${m[2]}/${m[1]}` : v;
+}
+function ordenarDias(a, b) {
+  if (a === EMPTY) return 1;
+  if (b === EMPTY) return -1;
+  const da = RX_CHAVE_DIA.test(a);
+  const db = RX_CHAVE_DIA.test(b);
+  if (da && db) return a < b ? 1 : a > b ? -1 : 0;
+  if (da) return -1;
+  if (db) return 1;
+  return COLLATOR.compare(a, b);
+}
 function compare(a, b, type) {
   if (a == null && b == null) return 0;
   if (a == null) return 1;
@@ -122,6 +182,7 @@ function DataTable({
   onDataNeeded,
   isAllDataLoading,
   alwaysClient,
+  totalCount,
   onClientModeChange,
   rowKey,
   onRowClick,
@@ -135,6 +196,8 @@ function DataTable({
   pageSizeOptions,
   selectable,
   onSelectionChange,
+  isRowSelectable,
+  initialSelectedKeys,
   clearSelectionTrigger,
   storageKey,
   defaultMaxColumnWidth = 360,
@@ -151,7 +214,12 @@ function DataTable({
   emptyIcon,
   labels,
   totalRow = false,
-  defaultGroupBy
+  defaultGroupBy,
+  groupBy,
+  onGroupByChange,
+  onSortChange,
+  onColumnFiltersChange,
+  scrollAffordance = false
 }) {
   const L = { ...DEFAULT_LABELS, ...labels };
   const [larguras, setLarguras] = useState(() => {
@@ -210,8 +278,7 @@ function DataTable({
     try {
       const raw = sessionStorage.getItem(`dt_filters_${storageKey}`);
       if (!raw) return {};
-      const parsed = JSON.parse(raw);
-      return Object.fromEntries(Object.entries(parsed).map(([k, v]) => [k, new Set(v)]));
+      return lerFiltrosGuardados(columns, JSON.parse(raw));
     } catch {
       return {};
     }
@@ -225,17 +292,27 @@ function DataTable({
       return {};
     }
   });
-  const [groupByKeys, setGroupByKeys] = useState(
+  const [groupByInterno, setGroupByInterno] = useState(
     () => (lerSessao("group") ?? defaultGroupBy ?? []).filter((k) => columns.some((c) => c.key === k))
   );
+  const grupoControlado = groupBy !== void 0;
+  const chaveGrupoExterno = groupBy?.join("\0");
+  const chaveColunas = columns.map((c) => c.key).join("\0");
+  const groupByKeys = useMemo(
+    () => grupoControlado ? groupBy.filter((k) => columns.some((c) => c.key === k)) : groupByInterno,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [grupoControlado, chaveGrupoExterno, groupByInterno, chaveColunas]
+  );
   const [collapsedGroups, setCollapsedGroups] = useState(/* @__PURE__ */ new Set());
-  const [selectedKeys, setSelectedKeys] = useState(/* @__PURE__ */ new Set());
+  const selecaoInicial = initialSelectedKeys ? Array.from(initialSelectedKeys, String) : null;
+  const [selectedKeys, setSelectedKeys] = useState(() => new Set(selecaoInicial ?? []));
   const [openFilter, setOpenFilter] = useState(null);
   const [filterSearch, setFilterSearch] = useState("");
   const filterRefs = useRef(/* @__PURE__ */ new Map());
   const popupRef = useRef(null);
   const [popupPos, setPopupPos] = useState(null);
   const isGrouped = groupByKeys.length > 0;
+  const funilAberto = openFilter ? columns.find((c) => c.key === openFilter || c.extraFilters?.some((f) => f.key === openFilter))?.key ?? openFilter : null;
   useEffect(() => {
     if (!storageKey) return;
     const serializavel = Object.fromEntries(Object.entries(columnFilters).map(([k, v]) => [k, Array.from(v)]));
@@ -243,17 +320,17 @@ function DataTable({
       sessionStorage.setItem(`dt_filters_${storageKey}`, JSON.stringify(serializavel));
       sessionStorage.setItem(`dt_ranges_${storageKey}`, JSON.stringify(rangeFilters));
       sessionStorage.setItem(`dt_sort_${storageKey}`, JSON.stringify(sort));
-      sessionStorage.setItem(`dt_group_${storageKey}`, JSON.stringify(groupByKeys));
+      if (!grupoControlado) sessionStorage.setItem(`dt_group_${storageKey}`, JSON.stringify(groupByKeys));
     } catch {
     }
-  }, [columnFilters, rangeFilters, sort, groupByKeys, storageKey]);
+  }, [columnFilters, rangeFilters, sort, groupByKeys, grupoControlado, storageKey]);
   useLayoutEffect(() => {
-    if (!openFilter) {
+    if (!funilAberto) {
       setPopupPos(null);
       return;
     }
     const recalcular = () => {
-      const el = filterRefs.current.get(openFilter);
+      const el = filterRefs.current.get(funilAberto);
       if (!el) return;
       const r = el.getBoundingClientRect();
       const largura = Math.min(288, window.innerWidth * 0.8);
@@ -267,19 +344,19 @@ function DataTable({
       window.removeEventListener("scroll", recalcular, true);
       window.removeEventListener("resize", recalcular);
     };
-  }, [openFilter]);
+  }, [funilAberto]);
   useEffect(() => {
     const onDown = (e) => {
-      if (!openFilter) return;
+      if (!funilAberto) return;
       const alvo = e.target;
-      const botao = filterRefs.current.get(openFilter);
+      const botao = filterRefs.current.get(funilAberto);
       if (botao?.contains(alvo) || popupRef.current?.contains(alvo)) return;
       setOpenFilter(null);
       setFilterSearch("");
     };
     document.addEventListener("mousedown", onDown);
     return () => document.removeEventListener("mousedown", onDown);
-  }, [openFilter]);
+  }, [funilAberto]);
   const resolverValor = (key) => {
     const col = columns.find((c) => c.key === key);
     if (col) return (row) => rawValue(row, col);
@@ -289,9 +366,34 @@ function DataTable({
     }
     return void 0;
   };
-  const rotuloDe = (fn, row) => {
-    const v = fn(row);
-    return v == null || v === "" ? EMPTY : String(v);
+  const rotuloDe = (fn, row) => normalizarRotulo(fn(row));
+  const eColunaData = (key) => columns.find((c) => c.key === key)?.sortType === "date";
+  const resolverRotulos = (key) => {
+    const col = columns.find((c) => c.key === key);
+    const normalizar = col?.sortType === "date" ? rotuloDeData : (v) => normalizarRotulo(v);
+    if (col?.filterValues) {
+      const fv = col.filterValues;
+      return (row) => {
+        const vs = Array.from(new Set(fv(row).map(normalizar)));
+        return vs.length > 0 ? vs : [EMPTY];
+      };
+    }
+    if (col?.sortType === "date") {
+      const ler = col.value ?? ((row) => row[col.key]);
+      return (row) => [rotuloDeData(ler(row))];
+    }
+    const fn = resolverValor(key);
+    return fn ? (row) => [rotuloDe(fn, row)] : void 0;
+  };
+  const rotuloVisivel = (key, v) => eColunaData(key) ? diaVisivel(v) : v;
+  const passaFiltro = (key, sel) => {
+    const col = columns.find((c) => c.key === key);
+    if (col?.filterValues || col?.sortType === "date") {
+      const rotulos = resolverRotulos(key);
+      return (row) => rotulos(row).some((v) => sel.has(v));
+    }
+    const fn = resolverValor(key);
+    return fn ? (row) => sel.has(rotuloDe(fn, row)) : void 0;
   };
   const modoExcel = filterMode === "excel";
   const activeFilters = useMemo(
@@ -315,25 +417,51 @@ function DataTable({
     if (clearSelectionTrigger === void 0) return;
     setSelectedKeys(/* @__PURE__ */ new Set());
   }, [clearSelectionTrigger]);
-  const chaveFiltrosCol = JSON.stringify(
-    Object.entries(columnFilters).map(([k, v]) => [k, [...v].sort()]).sort()
-  );
+  const chaveSelecaoInicial = selecaoInicial ? JSON.stringify([...selecaoInicial].sort()) : null;
+  const selecaoInicialAnterior = useRef(chaveSelecaoInicial);
   useEffect(() => {
+    if (chaveSelecaoInicial === selecaoInicialAnterior.current) return;
+    selecaoInicialAnterior.current = chaveSelecaoInicial;
+    if (chaveSelecaoInicial !== null) setSelectedKeys(new Set(JSON.parse(chaveSelecaoInicial)));
+  }, [chaveSelecaoInicial]);
+  const mudarFiltrosCol = (proximo) => {
+    const next = proximo(columnFilters);
+    if (chaveDosFiltros(next) === chaveDosFiltros(columnFilters)) return;
+    setColumnFilters(next);
     if (!selectable) return;
     setSelectedKeys(/* @__PURE__ */ new Set());
     onSelectionChange?.(/* @__PURE__ */ new Set());
-  }, [chaveFiltrosCol]);
+  };
+  const avisarOrdenacao = useRef(onSortChange);
+  avisarOrdenacao.current = onSortChange;
+  const ordenacaoAvisada = useRef("null");
+  useEffect(() => {
+    const s = sort ? { key: sort.key, dir: sort.dir === 1 ? "asc" : "desc" } : null;
+    const chave = JSON.stringify(s);
+    if (chave === ordenacaoAvisada.current) return;
+    ordenacaoAvisada.current = chave;
+    avisarOrdenacao.current?.(s);
+  }, [sort]);
+  const avisarFiltros = useRef(onColumnFiltersChange);
+  avisarFiltros.current = onColumnFiltersChange;
+  const filtrosAvisados = useRef(chaveDosFiltros({}));
+  const chaveFiltrosAtivos = chaveDosFiltros(Object.fromEntries(activeFilters));
+  useEffect(() => {
+    if (chaveFiltrosAtivos === filtrosAvisados.current) return;
+    filtrosAvisados.current = chaveFiltrosAtivos;
+    avisarFiltros.current?.(Object.fromEntries(JSON.parse(chaveFiltrosAtivos)));
+  }, [chaveFiltrosAtivos]);
   const cruzFiltros = modoExcel ? SEM_CRUZAMENTO : activeFilters;
   const cruzRanges = modoExcel ? SEM_CRUZAMENTO : activeRanges;
   const distinctValues = (key) => {
-    const valueFn = resolverValor(key);
-    if (!valueFn) return [];
+    const rotulosFn = resolverRotulos(key);
+    if (!rotulosFn) return [];
     let fonte = allData ?? data;
     for (const [outraKey, escolhidos] of cruzFiltros) {
       if (outraKey === key) continue;
-      const outraFn = resolverValor(outraKey);
-      if (!outraFn) continue;
-      fonte = fonte.filter((row) => escolhidos.has(rotuloDe(outraFn, row)));
+      const passa = passaFiltro(outraKey, escolhidos);
+      if (!passa) continue;
+      fonte = fonte.filter(passa);
     }
     for (const [outraKey, r] of cruzRanges) {
       if (outraKey === key) continue;
@@ -348,14 +476,18 @@ function DataTable({
       });
     }
     const set = /* @__PURE__ */ new Set();
-    fonte.forEach((row) => set.add(rotuloDe(valueFn, row)));
-    return Array.from(set).sort(ordenarRotulos);
+    fonte.forEach((row) => rotulosFn(row).forEach((v) => set.add(v)));
+    return Array.from(set).sort(eColunaData(key) ? ordenarDias : ordenarRotulos);
   };
   const openFilterOptions = useMemo(() => {
     if (!openFilter) return [];
     return distinctValues(openFilter);
   }, [openFilter, data, allData, columns, cruzFiltros, cruzRanges]);
-  const openFilterOptionsLower = useMemo(() => openFilterOptions.map((v) => v.toLowerCase()), [openFilterOptions]);
+  const openFilterOptionsLower = useMemo(
+    () => openFilterOptions.map((v) => (openFilter ? rotuloVisivel(openFilter, v) : v).toLowerCase()),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [openFilterOptions]
+  );
   const opcoesVisiveis = useMemo(() => {
     const q = filterSearch.toLowerCase();
     const corresponde = q ? modoExcel ? pesquisaCuringa(q) : (v) => v.includes(q) : null;
@@ -370,11 +502,9 @@ function DataTable({
   }, [openFilterOptions, openFilterOptionsLower, filterSearch, modoExcel]);
   const filtrar = (rows) => {
     if (activeFilters.length === 0 && activeRanges.length === 0) return rows;
+    const predicados = activeFilters.flatMap(([key, sel]) => passaFiltro(key, sel) ?? []);
     return rows.filter(
-      (row) => activeFilters.every(([key, sel]) => {
-        const fn = resolverValor(key);
-        return fn ? sel.has(rotuloDe(fn, row)) : true;
-      }) && activeRanges.every(([key, r]) => {
+      (row) => predicados.every((passa) => passa(row)) && activeRanges.every(([key, r]) => {
         const col = columns.find((c) => c.key === key);
         if (!col) return true;
         const n = valorParaIntervalo(row, col);
@@ -406,19 +536,17 @@ function DataTable({
   useEffect(() => {
     avisarVisiveis.current?.(sorted);
   }, [sorted]);
-  const alternarGrupo = (key) => {
-    if (!allData) onDataNeeded?.();
-    setGroupByKeys((prev) => prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key]);
-    setCollapsedGroups(/* @__PURE__ */ new Set());
-  };
-  const removerGrupo = (key) => {
-    setGroupByKeys((prev) => prev.filter((k) => k !== key));
+  const mudarGrupos = (proximo) => {
+    if (!grupoControlado) setGroupByInterno(proximo);
+    onGroupByChange?.(proximo);
     setCollapsedGroups(/* @__PURE__ */ new Set());
   };
-  const limparGrupos = () => {
-    setGroupByKeys([]);
-    setCollapsedGroups(/* @__PURE__ */ new Set());
+  const alternarGrupo = (key) => {
+    if (!allData) onDataNeeded?.();
+    mudarGrupos(groupByKeys.includes(key) ? groupByKeys.filter((k) => k !== key) : [...groupByKeys, key]);
   };
+  const removerGrupo = (key) => mudarGrupos(groupByKeys.filter((k) => k !== key));
+  const limparGrupos = () => mudarGrupos([]);
   const alternarColapso = (path) => setCollapsedGroups((prev) => {
     const n = new Set(prev);
     if (n.has(path)) n.delete(path);
@@ -450,12 +578,34 @@ function DataTable({
     [sorted, groupByKeys, isGrouped, columns]
   );
   const [page, setPage] = useState(1);
-  const [pageSizeAtual, setPageSizeAtual] = useState(pageSize);
-  useEffect(() => setPageSizeAtual(pageSize), [pageSize]);
+  const chavePageSize = storageKey ? `dt_pagesize_${storageKey}` : null;
+  const [pageSizeAtual, setPageSizeAtual] = useState(() => {
+    if (!pageSize || !chavePageSize) return pageSize;
+    try {
+      const guardado = Number(sessionStorage.getItem(chavePageSize));
+      return Number.isFinite(guardado) && guardado > 0 ? guardado : pageSize;
+    } catch {
+      return pageSize;
+    }
+  });
+  const pageSizeProp = useRef(pageSize);
+  useEffect(() => {
+    if (pageSizeProp.current === pageSize) return;
+    pageSizeProp.current = pageSize;
+    setPageSizeAtual(pageSize);
+  }, [pageSize]);
+  const escolherPageSize = (n) => {
+    setPageSizeAtual(n);
+    if (!chavePageSize) return;
+    try {
+      sessionStorage.setItem(chavePageSize, String(n));
+    } catch {
+    }
+  };
   useEffect(() => {
     setPage(1);
-  }, [columnFilters, rangeFilters, sort, groupByKeys, pageSizeAtual]);
-  const paginando = !!pageSizeAtual && !isGrouped;
+  }, [columnFilters, rangeFilters, sort, groupByKeys, pageSizeAtual, isClientMode]);
+  const paginando = !!pageSizeAtual && !isGrouped && (!allData || isClientMode);
   const totalPages = paginando ? Math.max(1, Math.ceil(sorted.length / pageSizeAtual)) : 1;
   const currentPage = Math.min(page, totalPages);
   const pageData = paginando ? sorted.slice((currentPage - 1) * pageSizeAtual, currentPage * pageSizeAtual) : sorted;
@@ -465,10 +615,11 @@ function DataTable({
     sorted.forEach((r, i) => m.set(r, i));
     return m;
   }, [sorted]);
+  const podeSelecionar = (row) => !isRowSelectable || isRowSelectable(row);
   const visibleKeys = useMemo(
-    () => pageData.map((row, i) => chaveDe(row, i)),
+    () => pageData.flatMap((row, i) => podeSelecionar(row) ? [chaveDe(row, i)] : []),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [pageData, rowKey]
+    [pageData, rowKey, isRowSelectable]
   );
   const alternarLinha = (key) => setSelectedKeys((prev) => {
     const next = new Set(prev);
@@ -502,11 +653,10 @@ function DataTable({
         groupBy: groupByKeys
       }),
       repor: (e) => {
-        setColumnFilters(Object.fromEntries(Object.entries(e?.columnFilters ?? {}).map(([k, v]) => [k, new Set(v)])));
+        setColumnFilters(lerFiltrosGuardados(columns, e?.columnFilters ?? {}));
         setRangeFilters(e?.rangeFilters ?? {});
         setSort(e?.sortKey ? { key: e.sortKey, dir: e.sortDir === "desc" ? -1 : 1 } : null);
-        setGroupByKeys(e?.groupBy ?? []);
-        setCollapsedGroups(/* @__PURE__ */ new Set());
+        mudarGrupos(e?.groupBy ?? []);
         const precisaTudo = !!e?.sortKey || !!e?.groupBy?.length || Object.keys(e?.columnFilters ?? {}).length > 0 || Object.keys(e?.rangeFilters ?? {}).length > 0;
         if (precisaTudo && !allData) onDataNeeded?.();
       }
@@ -517,7 +667,7 @@ function DataTable({
     setSort((s) => s?.key === key ? s.dir === 1 ? { key, dir: -1 } : null : { key, dir: 1 });
   };
   const selecaoDaColuna = (key) => new Set(columnFilters[key] ?? (modoExcel ? openFilterOptions : []));
-  const aplicarSelecao = (key, sel) => setColumnFilters((prev) => {
+  const aplicarSelecao = (key, sel) => mudarFiltrosCol((prev) => {
     const proximo = { ...prev };
     if (modoExcel && sel.size === openFilterOptions.length) delete proximo[key];
     else proximo[key] = sel;
@@ -553,7 +703,7 @@ function DataTable({
     });
   };
   const clearColumnFilter = (key) => {
-    setColumnFilters((prev) => {
+    mudarFiltrosCol((prev) => {
       const n = { ...prev };
       delete n[key];
       return n;
@@ -565,7 +715,7 @@ function DataTable({
     });
   };
   const clearAllFilters = () => {
-    setColumnFilters({});
+    mudarFiltrosCol(() => ({}));
     setRangeFilters({});
   };
   const temIntervalo = (key) => {
@@ -613,26 +763,41 @@ function DataTable({
     return void 0;
   };
   const nColunas = columns.length + (selectable ? 1 : 0);
-  const aEsperarDataset = !allData && !!isAllDataLoading && (hasActiveFilters || !!sort || isGrouped);
+  const totalResultados = totalCount != null && !isClientMode && !hasActiveFilters ? totalCount : sorted.length;
+  const aEsperarDataset = !allData && (!!isAllDataLoading || !!onDataNeeded) && (hasActiveFilters || !!sort || isGrouped);
   const linhasBase = allData ?? data;
   const semDados = useMemo(
-    () => new Set(columns.filter((c) => !linhasBase.some((r) => rawValue(r, c) !== null)).map((c) => c.key)),
+    () => new Set(columns.filter((c) => !linhasBase.some((r) => temValor(r, c))).map((c) => c.key)),
     [columns, linhasBase]
   );
   const filtravel = (c) => c.filterable ?? !semDados.has(c.key);
   const agrupavel = (c) => c.groupable ?? (!semDados.has(c.key) && !c.groupAggregate && (!c.sortType || c.sortType === "text"));
-  if (isLoading) {
-    return /* @__PURE__ */ jsx("div", { className: "py-16 text-center text-sm font-bold uppercase tracking-widest text-slate-400", children: L.loading });
-  }
+  const rolarComTeclado = (e) => {
+    if (e.target !== e.currentTarget) return;
+    const el = e.currentTarget;
+    const passo = Math.max(40, Math.round(el.clientWidth * 0.2));
+    if (e.key === "ArrowRight") el.scrollLeft += passo;
+    else if (e.key === "ArrowLeft") el.scrollLeft -= passo;
+    else if (e.key === "Home") el.scrollLeft = 0;
+    else if (e.key === "End") el.scrollLeft = el.scrollWidth;
+    else return;
+    e.preventDefault();
+  };
   if (isError) {
     return /* @__PURE__ */ jsx("div", { className: "py-16 text-center text-sm font-bold uppercase tracking-widest text-red-400", children: L.error });
   }
-  const renderPopup = (key, col, tituloExtra) => {
+  const renderPopup = (coluna, key, listas) => {
+    const col = key === coluna.key ? coluna : void 0;
     const { opts, total: totalOpcoes } = opcoesVisiveis;
     const sel = columnFilters[key];
     const isFiltered = temFiltro(key);
     const podeOrdenar = !!sortFromFilter && !!col && col.sortable !== false;
-    const temRange = !!col && (col.sortType === "number" || col.sortType === "date");
+    const eData = col?.sortType === "date";
+    const temRange = !!col && (col.sortType === "number" || eData);
+    const [rotuloAsc, rotuloDesc] = eData ? [L.sortOldest, L.sortNewest] : col?.sortType === "number" ? [L.sortSmallest, L.sortLargest] : [L.sortAsc, L.sortDesc];
+    const [rotuloMin, rotuloMax] = eData ? [L.from, L.to] : [L.min, L.max];
+    const intervalo = rangeFilters[key];
+    const valorCampo = (n, campo) => n == null ? "" : eData ? new Date(campo === "max" ? n - 86399999 : n).toISOString().slice(0, 10) : String(n);
     return createPortal(
       /* @__PURE__ */ jsxs(
         "div",
@@ -641,7 +806,28 @@ function DataTable({
           style: { position: "fixed", top: popupPos.top, left: popupPos.left },
           className: "z-[100] w-72 max-w-[80vw] bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 shadow-2xl rounded-xl overflow-hidden",
           children: [
-            tituloExtra && /* @__PURE__ */ jsx("div", { className: "px-3 pt-2.5 pb-2 border-b border-slate-100 dark:border-slate-800", children: /* @__PURE__ */ jsx("span", { className: "text-[9px] font-black uppercase tracking-widest text-proef-blue dark:text-proef-turquoise", children: tituloExtra }) }),
+            listas.length > 1 && // Seletor da lista a filtrar: a coluna e cada filtro extra partilham o mesmo funil.
+            /* @__PURE__ */ jsx("div", { className: "px-2 pt-2 pb-2 border-b border-slate-100 dark:border-slate-800", children: /* @__PURE__ */ jsx("div", { role: "group", "aria-label": coluna.label, className: "flex flex-wrap gap-0.5 p-0.5 rounded-lg bg-slate-100 dark:bg-slate-800", children: listas.map((l) => {
+              const ativa = l.key === key;
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  "aria-pressed": ativa,
+                  onClick: () => {
+                    if (ativa) return;
+                    setOpenFilter(l.key);
+                    setFilterSearch("");
+                  },
+                  className: `appearance-none border-0 cursor-pointer flex-1 min-w-0 inline-flex items-center justify-center gap-1 px-2 py-1 rounded-md text-[10px] font-black uppercase tracking-wider truncate transition-colors ${ativa ? "bg-white dark:bg-slate-900 text-proef-blue dark:text-proef-turquoise shadow-sm" : "bg-transparent text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"}`,
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "truncate", children: l.label }),
+                    temFiltro(l.key) && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "w-1.5 h-1.5 rounded-full bg-proef-turquoise shrink-0" })
+                  ]
+                },
+                l.key
+              );
+            }) }) }),
             !allData && isAllDataLoading && // As opções à vista ainda são só as de `data`. Dizê-lo é melhor do que deixar
             // escolher de uma lista incompleta.
             /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5 bg-amber-50 dark:bg-amber-500/10 border-b border-amber-100 dark:border-amber-500/20 text-[10px] text-amber-700 dark:text-amber-300", children: L.loadingOptions }),
@@ -656,7 +842,7 @@ function DataTable({
                   className: `appearance-none bg-transparent border-0 cursor-pointer w-full flex items-center gap-2 px-2.5 py-1.5 text-[11px] font-semibold text-left hover:bg-slate-50 dark:hover:bg-slate-800 ${sort?.key === key && sort.dir === 1 ? "text-proef-blue dark:text-proef-turquoise bg-slate-50 dark:bg-slate-800" : "text-slate-600 dark:text-slate-300"}`,
                   children: [
                     "▲ ",
-                    L.sortAsc
+                    rotuloAsc
                   ]
                 }
               ),
@@ -670,7 +856,7 @@ function DataTable({
                   className: `appearance-none bg-transparent border-0 cursor-pointer w-full flex items-center gap-2 px-2.5 py-1.5 text-[11px] font-semibold text-left hover:bg-slate-50 dark:hover:bg-slate-800 ${sort?.key === key && sort.dir === -1 ? "text-proef-blue dark:text-proef-turquoise bg-slate-50 dark:bg-slate-800" : "text-slate-600 dark:text-slate-300"}`,
                   children: [
                     "▼ ",
-                    L.sortDesc
+                    rotuloDesc
                   ]
                 }
               )
@@ -682,24 +868,28 @@ function DataTable({
                 /* @__PURE__ */ jsx(
                   "input",
                   {
-                    type: col.sortType === "date" ? "date" : "number",
-                    defaultValue: "",
+                    type: eData ? "date" : "number",
+                    defaultValue: valorCampo(intervalo?.min, "min"),
                     onChange: (e) => setRange(key, "min", e.target.value, col.sortType),
-                    placeholder: L.min,
-                    title: L.min,
+                    placeholder: rotuloMin,
+                    title: rotuloMin,
+                    "aria-label": rotuloMin,
                     className: "w-1/2 bg-slate-50 dark:bg-slate-800 dark:text-slate-100 dark:[color-scheme:dark] border border-slate-200 dark:border-slate-700 rounded-lg px-2 py-1.5 text-xs outline-none focus:border-proef-blue dark:focus:border-proef-turquoise"
-                  }
+                  },
+                  `${key}-min`
                 ),
                 /* @__PURE__ */ jsx(
                   "input",
                   {
-                    type: col.sortType === "date" ? "date" : "number",
-                    defaultValue: "",
+                    type: eData ? "date" : "number",
+                    defaultValue: valorCampo(intervalo?.max, "max"),
                     onChange: (e) => setRange(key, "max", e.target.value, col.sortType),
-                    placeholder: L.max,
-                    title: L.max,
+                    placeholder: rotuloMax,
+                    title: rotuloMax,
+                    "aria-label": rotuloMax,
                     className: "w-1/2 bg-slate-50 dark:bg-slate-800 dark:text-slate-100 dark:[color-scheme:dark] border border-slate-200 dark:border-slate-700 rounded-lg px-2 py-1.5 text-xs outline-none focus:border-proef-blue dark:focus:border-proef-turquoise"
-                  }
+                  },
+                  `${key}-max`
                 )
               ] }),
               /* @__PURE__ */ jsx(
@@ -753,7 +943,7 @@ function DataTable({
                             children: checked && /* @__PURE__ */ jsx("span", { className: "text-[9px] leading-none", children: "✓" })
                           }
                         ),
-                        /* @__PURE__ */ jsx("span", { className: "text-xs text-slate-700 dark:text-slate-200 font-normal break-words", children: v })
+                        /* @__PURE__ */ jsx("span", { className: "text-xs text-slate-700 dark:text-slate-200 font-normal break-words", children: rotuloVisivel(key, v) })
                       ]
                     },
                     v
@@ -776,16 +966,18 @@ function DataTable({
       document.body
     );
   };
-  const botaoFunil = (key, col, extra) => {
-    const isOpen = openFilter === key;
-    const isFiltered = temFiltro(key);
+  const botaoFunil = (c) => {
+    const listas = [...filtravel(c) ? [{ key: c.key, label: c.label }] : [], ...(c.extraFilters ?? []).map((f) => ({ key: f.key, label: f.label }))];
+    if (listas.length === 0) return null;
+    const isOpen = funilAberto === c.key;
+    const isFiltered = listas.some((l) => temFiltro(l.key));
     return /* @__PURE__ */ jsxs(
       "div",
       {
         className: "relative",
         ref: (el) => {
-          if (el) filterRefs.current.set(key, el);
-          else filterRefs.current.delete(key);
+          if (el) filterRefs.current.set(c.key, el);
+          else filterRefs.current.delete(c.key);
         },
         children: [
           /* @__PURE__ */ jsx(
@@ -793,23 +985,26 @@ function DataTable({
             {
               onClick: () => {
                 if (!isOpen && !allData) onDataNeeded?.();
-                setOpenFilter(isOpen ? null : key);
+                setOpenFilter(isOpen ? null : listas[0].key);
                 setFilterSearch("");
               },
-              className: `appearance-none border-0 bg-transparent cursor-pointer p-0.5 transition-colors ${extra ? isFiltered || isOpen ? "text-violet-600 dark:text-violet-300" : "text-slate-300 dark:text-slate-600 hover:text-slate-500 dark:hover:text-slate-300" : isFiltered || isOpen ? "text-proef-turquoise" : "text-slate-300 dark:text-slate-600 hover:text-slate-500 dark:hover:text-slate-300"}`,
-              title: extra?.label ?? col?.label,
-              children: /* @__PURE__ */ jsx(Funnel, { size: extra ? 10 : 11, className: isFiltered ? "fill-current" : "" })
+              className: `appearance-none border-0 bg-transparent cursor-pointer p-0.5 transition-colors ${isFiltered || isOpen ? "text-proef-turquoise" : "text-slate-300 dark:text-slate-600 hover:text-slate-500 dark:hover:text-slate-300"}`,
+              title: c.label,
+              "aria-label": c.label,
+              "aria-expanded": isOpen,
+              children: /* @__PURE__ */ jsx(Funnel, { size: 11, className: isFiltered ? "fill-current" : "" })
             }
           ),
-          isOpen && popupPos && renderPopup(key, col, extra?.label)
+          isOpen && popupPos && openFilter && renderPopup(c, openFilter, listas)
         ]
       },
-      key
+      c.key
     );
   };
   const renderLinha = (row, i) => {
     const k = chaveDe(row, i);
     const marcada = selectable && selectedKeys.has(k);
+    const selecionavel = !!selectable && podeSelecionar(row);
     return /* @__PURE__ */ jsxs(
       "tr",
       {
@@ -823,12 +1018,15 @@ function DataTable({
               className: "px-3 py-2.5 border-b border-slate-100 dark:border-slate-800 w-10",
               onClick: (e) => {
                 e.stopPropagation();
-                alternarLinha(k);
+                if (selecionavel) alternarLinha(k);
               },
               children: /* @__PURE__ */ jsx(
                 "span",
                 {
-                  className: `w-4 h-4 flex items-center justify-center border transition-colors 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 hover:border-slate-400 dark:hover:border-slate-500"}`,
+                  role: "checkbox",
+                  "aria-checked": !!marcada,
+                  "aria-disabled": !selecionavel || void 0,
+                  className: `w-4 h-4 flex items-center justify-center border transition-colors 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 hover:border-slate-400 dark:hover:border-slate-500"} ${selecionavel ? "" : "opacity-40 cursor-not-allowed bg-slate-100 dark:bg-slate-800"}`,
                   children: marcada && /* @__PURE__ */ jsx("span", { className: "text-[9px] leading-none", children: "✓" })
                 }
               )
@@ -844,7 +1042,8 @@ function DataTable({
                 const max = larguraMax(c);
                 if (!max) return conteudo;
                 const v = rawValue(row, c);
-                return /* @__PURE__ */ jsx("div", { className: "overflow-hidden text-ellipsis", style: { maxWidth: max, width: larguras[c.key] }, title: v !== null && v !== void 0 ? String(v) : void 0, children: conteudo });
+                const dica = typeof conteudo === "string" || typeof conteudo === "number" ? String(conteudo) : c.sortType !== "date" && v !== null && v !== void 0 ? String(v) : void 0;
+                return /* @__PURE__ */ jsx("div", { className: "overflow-hidden text-ellipsis", style: { maxWidth: max, width: larguras[c.key] }, title: dica, children: conteudo });
               })()
             },
             c.key
@@ -882,9 +1081,9 @@ function DataTable({
     ] }, no.path);
   });
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2.5", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-xs text-slate-500 dark:text-slate-400", children: L.results.replace("{count}", String(sorted.length)) }),
-      /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-2", 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: [
         extraToolbar,
         exportFileName && sorted.length > 0 && /* @__PURE__ */ jsxs(
           "button",
@@ -899,248 +1098,157 @@ function DataTable({
         )
       ] })
     ] }),
-    isGrouped && /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center gap-2 flex-wrap", children: [
-      groupByKeys.map((key) => {
-        const col = columns.find((c) => c.key === key);
-        return /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: "flex items-center gap-1.5 bg-violet-100 dark:bg-violet-500/20 text-violet-800 dark:text-violet-200 px-2.5 py-1 text-[10px] font-black uppercase tracking-wider",
-            children: [
-              /* @__PURE__ */ jsx(Layers, { size: 9 }),
-              /* @__PURE__ */ jsx("span", { children: col?.label ?? key }),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: () => removerGrupo(key),
-                  className: "appearance-none bg-transparent border-0 cursor-pointer ml-0.5 hover:text-violet-600",
-                  children: "✕"
-                }
-              )
-            ]
-          },
-          key
-        );
-      }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: limparGrupos,
-          className: "appearance-none bg-transparent border-0 cursor-pointer text-[10px] font-black uppercase tracking-wider text-slate-400 hover:text-red-500 transition-colors",
-          children: L.clearGroups
-        }
-      )
-    ] }),
-    (activeFilters.length > 0 || activeRanges.length > 0) && /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center gap-2 flex-wrap", children: [
-      activeRanges.map(([key, r]) => {
-        const col = columns.find((c) => c.key === key);
-        const fmt = (v) => v == null ? "" : col?.sortType === "date" ? new Date(v).toLocaleDateString() : String(v);
-        const txt = r.min != null && r.max != null ? `${fmt(r.min)} – ${fmt(r.max)}` : r.min != null ? `≥ ${fmt(r.min)}` : `≤ ${fmt(r.max)}`;
-        return /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: "flex items-center gap-1.5 bg-proef-turquoise/15 text-proef-navy dark:text-proef-turquoise px-2.5 py-1 text-[10px] font-black uppercase tracking-wider",
-            children: [
-              /* @__PURE__ */ jsxs("span", { children: [
-                col?.label ?? key,
-                ": ",
-                txt
-              ] }),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: () => clearColumnFilter(key),
-                  className: "appearance-none bg-transparent border-0 cursor-pointer ml-0.5 hover:text-proef-blue dark:hover:text-proef-turquoise",
-                  children: "✕"
-                }
-              )
-            ]
-          },
-          `r-${key}`
-        );
-      }),
-      activeFilters.flatMap(([key, sel]) => {
-        const col = columns.find((c) => c.key === key);
-        const extra = !col ? columns.flatMap((c) => c.extraFilters ?? []).find((f) => f.key === key) : void 0;
-        const chipLabel = col?.label ?? extra?.label ?? key;
-        const arr = Array.from(sel);
-        if (col?.valueChipColors) {
-          const cores = col.valueChipColors;
-          return arr.map((v) => /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: `flex items-center gap-1.5 px-2.5 py-1 text-[10px] font-black uppercase tracking-wider ${cores[v] ?? "bg-proef-turquoise/15 text-proef-navy dark:text-proef-turquoise"}`,
-              children: [
-                /* @__PURE__ */ jsxs("span", { children: [
-                  chipLabel,
-                  ": ",
-                  v
-                ] }),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    onClick: () => toggleFilterValue(key, v),
-                    className: "appearance-none bg-transparent border-0 cursor-pointer ml-0.5 hover:opacity-70",
-                    children: "✕"
-                  }
-                )
-              ]
-            },
-            `${key}:${v}`
-          ));
-        }
-        const txt = arr.length > 2 || arr.length === 0 ? L.selected.replace("{count}", String(arr.length)) : arr.join(", ");
-        return [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: "flex items-center gap-1.5 bg-proef-turquoise/15 text-proef-navy dark:text-proef-turquoise px-2.5 py-1 text-[10px] font-black uppercase tracking-wider",
-              children: [
-                /* @__PURE__ */ jsxs("span", { children: [
-                  chipLabel,
-                  ": ",
-                  txt
-                ] }),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    onClick: () => clearColumnFilter(key),
-                    className: "appearance-none bg-transparent border-0 cursor-pointer ml-0.5 hover:text-proef-blue dark:hover:text-proef-turquoise",
-                    children: "✕"
-                  }
-                )
-              ]
-            },
-            key
-          )
-        ];
-      }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: clearAllFilters,
-          className: "appearance-none bg-transparent border-0 cursor-pointer text-[10px] font-black uppercase tracking-wider text-slate-400 hover:text-red-500 transition-colors",
-          children: L.clearAll
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "overflow-auto rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900", style: { maxHeight }, 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) => {
-          temFiltro(c.key);
-          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",
-                  {
-                    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: () => 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 })
-                    }
-                  ),
-                  filtravel(c) && botaoFunil(c.key, c),
-                  c.extraFilters?.map((ef) => botaoFunil(ef.key, void 0, { label: ef.label }))
-                ] }),
-                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: 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 && !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))
-      ] }) })
-    ] }) }),
-    paginando && (totalPages > 1 || (pageSizeOptions?.length ?? 0) > 0) && /* @__PURE__ */ jsxs("div", { className: "mt-2.5 flex items-center justify-between gap-2", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-[10px] font-black uppercase tracking-widest text-slate-400", children: L.page.replace("{page}", String(currentPage)).replace("{pages}", String(totalPages)) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-        (pageSizeOptions?.length ?? 0) > 0 && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 mr-2 text-[10px] font-black uppercase tracking-widest text-slate-400", children: [
-          L.perPage,
-          /* @__PURE__ */ jsx(
-            Escolha,
-            {
-              rotulo: L.perPage,
-              valor: String(pageSizeAtual),
-              onMudar: (v) => setPageSizeAtual(Number(v)),
-              className: "w-20 normal-case tracking-normal font-normal",
-              opcoes: [.../* @__PURE__ */ new Set([...pageSizeOptions ?? [], pageSizeAtual])].sort((a, b) => a - b).map(String)
+    isGrouped && /* @__PURE__ */ jsx(
+      FilterChips,
+      {
+        className: "mb-2",
+        items: groupByKeys.map((key) => ({
+          key,
+          tone: "group",
+          icon: /* @__PURE__ */ jsx(Layers, { size: 9 }),
+          label: columns.find((c) => c.key === key)?.label ?? key,
+          onRemove: () => removerGrupo(key)
+        })),
+        onClearAll: limparGrupos,
+        clearAllLabel: L.clearGroups
+      }
+    ),
+    (activeFilters.length > 0 || activeRanges.length > 0) && /* @__PURE__ */ jsx(
+      FilterChips,
+      {
+        className: "mb-2",
+        items: [
+          ...activeRanges.map(([key, r]) => {
+            const col = columns.find((c) => c.key === key);
+            const fmt = (v) => v == null ? "" : col?.sortType === "date" ? new Date(v).toLocaleDateString() : String(v);
+            const txt = r.min != null && r.max != null ? `${fmt(r.min)} – ${fmt(r.max)}` : r.min != null ? `≥ ${fmt(r.min)}` : `≤ ${fmt(r.max)}`;
+            return { key: `r-${key}`, label: `${col?.label ?? key}: ${txt}`, onRemove: () => clearColumnFilter(key) };
+          }),
+          ...activeFilters.flatMap(([key, sel]) => {
+            const col = columns.find((c) => c.key === key);
+            const extra = !col ? columns.flatMap((c) => c.extraFilters ?? []).find((f) => f.key === key) : void 0;
+            const chipLabel = col?.label ?? extra?.label ?? key;
+            const arr = Array.from(sel);
+            if (col?.valueChipColors) {
+              const cores = col.valueChipColors;
+              return arr.map((v) => ({
+                key: `${key}:${v}`,
+                label: `${chipLabel}: ${rotuloVisivel(key, v)}`,
+                colorClassName: cores[v],
+                onRemove: () => toggleFilterValue(key, v)
+              }));
             }
-          )
-        ] }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            disabled: currentPage <= 1,
-            onClick: () => setPage((p) => Math.max(1, p - 1)),
-            className: "appearance-none cursor-pointer bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 text-[10px] font-black uppercase rounded-lg tracking-widest px-3 py-1.5 text-slate-500 dark:text-slate-400 hover:enabled:border-proef-navy dark:hover:enabled:border-proef-turquoise hover:enabled:text-proef-navy dark:hover:enabled:text-proef-turquoise disabled:opacity-30 disabled:cursor-not-allowed transition-colors",
-            children: L.prev
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            disabled: currentPage >= totalPages,
-            onClick: () => setPage((p) => Math.min(totalPages, p + 1)),
-            className: "appearance-none cursor-pointer bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 text-[10px] font-black uppercase rounded-lg tracking-widest px-3 py-1.5 text-slate-500 dark:text-slate-400 hover:enabled:border-proef-navy dark:hover:enabled:border-proef-turquoise hover:enabled:text-proef-navy dark:hover:enabled:text-proef-turquoise disabled:opacity-30 disabled:cursor-not-allowed transition-colors",
-            children: L.next
-          }
-        )
-      ] })
-    ] })
+            const txt = arr.length > 2 || arr.length === 0 ? L.selected.replace("{count}", String(arr.length)) : arr.map((v) => rotuloVisivel(key, v)).join(", ");
+            return [{ key, label: `${chipLabel}: ${txt}`, onRemove: () => clearColumnFilter(key) }];
+          })
+        ],
+        onClearAll: clearAllFilters,
+        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",
+                {
+                  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: () => 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,
+      {
+        className: "mt-2.5",
+        page: currentPage,
+        pages: totalPages,
+        onPageChange: (p) => setPage(Math.min(totalPages, Math.max(1, p))),
+        pageSize: pageSizeAtual,
+        pageSizeOptions,
+        onPageSizeChange: escolherPageSize,
+        labels: { page: L.page, perPage: L.perPage, prev: L.prev, next: L.next }
+      }
+    )
   ] });
 }
 export {