@proef/common-ui 0.0.0-stage → 2.2.0

package/dist/esm/v1/components/tables/Table/Table.js

@@ -0,0 +1,1410 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useMemo, useCallback, useLayoutEffect, Fragment as Fragment$1 } from "react";
+import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, LayersIcon, CloseIcon, ChevronUpIcon, ChevronsUpDownIcon, FilterIcon } from "../../../foundations/icons/icons.js";
+import { ColumnFilter } from "./ColumnFilter.js";
+import { OverlayScrollbar } from "./OverlayScrollbar.js";
+import { DEFAULT_TABLE_LABELS } from "./labels.js";
+const comparador = new Intl.Collator();
+const MOLA_RIGIDEZ = 1200;
+const MOLA_AMORTECIMENTO = 2 * Math.sqrt(MOLA_RIGIDEZ);
+const PERTO_DE_ASSENTAR = 6;
+let estiloArrasto = null;
+function cursorDeArrasto(ligado) {
+  if (ligado && !estiloArrasto) {
+    estiloArrasto = document.createElement("style");
+    estiloArrasto.textContent = "*{cursor:grabbing!important;user-select:none!important}";
+    document.head.appendChild(estiloArrasto);
+  } else if (!ligado && estiloArrasto) {
+    estiloArrasto.remove();
+    estiloArrasto = null;
+  }
+}
+const LIMIAR_ARRASTO = 4;
+const FOLGA_TROCA = 0.75;
+function TableBase({
+  paginacaoNoTopo,
+  columns: colunasBase,
+  data,
+  allData,
+  pageSize,
+  rowKey,
+  onRowClick,
+  onRowDoubleClick,
+  loading: isLoading,
+  allDataLoading: isAllDataLoading,
+  loadingLabel,
+  emptyLabel,
+  emptySubLabel,
+  storageKey,
+  selectable,
+  onSelectionChange,
+  clearSelectionTrigger,
+  onAllDataNeeded: onDataNeeded,
+  alwaysClient,
+  defaultSortColumn: defaultSortCol,
+  defaultSortDirection: defaultSortDir,
+  viewRef,
+  fillHeight: preencheAltura = false,
+  onVisibleChange: onVista,
+  frozenColumns: colunasFixas = 0,
+  onMoveColumn: onMoverColuna,
+  measureAllData: larguraPeloConjunto = false,
+  overlayScrollbars: barraSobreposta = false,
+  headerRowClassName: classeCabecalho = "bg-slate-50",
+  scrollbarOnEdge: barraNaBorda = true,
+  horizontalScrollbarBelow: barraHorizontalFora = false,
+  skeleton: esqueletoAoCarregar = false,
+  fadeRight: esbaterDireita = false,
+  rowClassName,
+  maxHeight,
+  labels
+}) {
+  const L = { ...DEFAULT_TABLE_LABELS, ...labels };
+  const vazio = emptyLabel ?? L.empty;
+  const columns = colunasBase;
+  const [arrastada, setArrastada] = useState(null);
+  const [realcada, setRealcada] = useState(null);
+  const alvoArrasto = useRef(void 0);
+  const recuoFim = (i) => barraSobreposta && i === columns.length - 1 ? "pr-6!" : "";
+  const realce = (chave, cabecalho2 = false) => realcada === chave ? fixaMedida(chave) ? "" : `${cabecalho2 ? "bg-proef-blue/15" : "bg-proef-blue/5"} shadow-[inset_1px_0_0_0_rgb(0_118_206/0.35),inset_-1px_0_0_0_rgb(0_118_206/0.35)]` : cabecalho2 && fundoNosTitulos ? "bg-slate-50" : "";
+  const bordasSeparadas = !!onMoverColuna;
+  const fundoNosTitulos = bordasSeparadas && !preencheAltura;
+  const classeTabela = bordasSeparadas ? "text-left border-separate border-spacing-0" : "text-left";
+  const transicaoRealce = onMoverColuna ? "transition-[background-color,box-shadow] duration-300" : "";
+  const [sortCol, setSortCol] = useState(defaultSortCol ?? null);
+  const [sortDir, setSortDir] = useState(defaultSortDir ?? "asc");
+  const [columnFilters, setColumnFilters] = useState(() => {
+    if (!storageKey) return {};
+    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)]));
+    } catch {
+      return {};
+    }
+  });
+  const [dateFilters, setDateFilters] = useState(() => {
+    if (!storageKey) return {};
+    try {
+      const raw = sessionStorage.getItem(`dt_datefilters_${storageKey}`);
+      return raw ? JSON.parse(raw) : {};
+    } catch {
+      return {};
+    }
+  });
+  const [numFilters, setNumFilters] = useState(() => {
+    if (!storageKey) return {};
+    try {
+      const raw = sessionStorage.getItem(`dt_numfilters_${storageKey}`);
+      return raw ? JSON.parse(raw) : {};
+    } catch {
+      return {};
+    }
+  });
+  const [groupByKeys, setGroupByKeys] = useState([]);
+  const [collapsedGroups, setCollapsedGroups] = useState(/* @__PURE__ */ new Set());
+  const [internalPage, setInternalPage] = useState(1);
+  const [openFilterCol, setOpenFilterCol] = useState(null);
+  const [ancoraFiltro, setAncoraFiltro] = useState(null);
+  const [selectedKeys, setSelectedKeys] = useState(/* @__PURE__ */ new Set());
+  const isGrouped = groupByKeys.length > 0;
+  useEffect(() => {
+    if (!storageKey) return;
+    const serializable = Object.fromEntries(Object.entries(columnFilters).map(([k, v]) => [k, Array.from(v)]));
+    sessionStorage.setItem(`dt_filters_${storageKey}`, JSON.stringify(serializable));
+    sessionStorage.setItem(`dt_datefilters_${storageKey}`, JSON.stringify(dateFilters));
+    sessionStorage.setItem(`dt_numfilters_${storageKey}`, JSON.stringify(numFilters));
+  }, [columnFilters, dateFilters, numFilters, storageKey]);
+  const resolveValueFn = (colKey) => {
+    const col = columns.find((c) => c.key === colKey);
+    if (col?.value) return col.value;
+    for (const c of columns) {
+      const ef = c.extraFilters?.find((f) => f.key === colKey);
+      if (ef) return ef.value;
+    }
+    return void 0;
+  };
+  const getUniqueValues = (colKey) => {
+    const valueFn = resolveValueFn(colKey);
+    if (!valueFn) return [];
+    let source = allData ?? data;
+    for (const [otherKey, selectedVals] of Object.entries(columnFilters)) {
+      if (otherKey === colKey || !selectedVals || selectedVals.size === 0) continue;
+      const otherFn = resolveValueFn(otherKey);
+      if (!otherFn) continue;
+      source = source.filter((row) => {
+        const v = otherFn(row);
+        return selectedVals.has(v == null || v === "" ? "—" : String(v));
+      });
+    }
+    for (const [otherKey, range] of Object.entries(dateFilters)) {
+      if (otherKey === colKey || !dateFilterActive(range)) continue;
+      const otherFn = resolveValueFn(otherKey);
+      if (!otherFn) continue;
+      source = source.filter((row) => {
+        const d = asDay(otherFn(row));
+        if (!d) return false;
+        if (range.from && d < range.from) return false;
+        if (range.to && d > range.to) return false;
+        return true;
+      });
+    }
+    const vals = /* @__PURE__ */ new Set();
+    source.forEach((row) => {
+      const v = valueFn(row);
+      vals.add(v == null || v === "" ? "—" : String(v));
+    });
+    return Array.from(vals).sort((a, b) => a === "—" ? 1 : b === "—" ? -1 : a.localeCompare(b));
+  };
+  const asDay = (v) => v == null ? "" : String(v).substring(0, 10);
+  const dateFilterActive = (r) => !!(r && (r.from || r.to));
+  const numFilterActive = (r) => !!(r && (r.min !== void 0 && r.min !== "" || r.max !== void 0 && r.max !== ""));
+  const asNum = (v) => {
+    if (v == null || v === "") return null;
+    const n = Number(v);
+    return Number.isFinite(n) ? n : null;
+  };
+  const hasActiveFilters = useMemo(
+    () => Object.values(columnFilters).some((s) => s?.size > 0) || Object.values(dateFilters).some(dateFilterActive) || Object.values(numFilters).some(numFilterActive),
+    [columnFilters, dateFilters, numFilters]
+  );
+  const isClientMode = !!allData && (alwaysClient || hasActiveFilters || !!sortCol || isGrouped);
+  const effectiveData = isClientMode ? allData : data;
+  useEffect(() => {
+    setInternalPage(1);
+  }, [sortCol, sortDir, columnFilters, dateFilters, numFilters, groupByKeys, pageSize]);
+  useEffect(() => {
+    if (clearSelectionTrigger === void 0) return;
+    setSelectedKeys(/* @__PURE__ */ new Set());
+  }, [clearSelectionTrigger]);
+  const chaveFiltrosCol = JSON.stringify(
+    Object.entries(columnFilters).map(([k, v]) => [k, [...v].sort()]).sort()
+  );
+  useEffect(() => {
+    setSelectedKeys(/* @__PURE__ */ new Set());
+    onSelectionChange?.(/* @__PURE__ */ new Set());
+  }, [chaveFiltrosCol]);
+  useEffect(() => {
+    if (!allData && (hasActiveFilters || sortCol || isGrouped)) onDataNeeded?.();
+  }, [allData, hasActiveFilters, sortCol, isGrouped]);
+  const sortColAtual = sortCol, sortDirAtual = sortDir;
+  const filtrosDeColuna = columnFilters, filtrosDeData = dateFilters, filtrosNumericos = numFilters;
+  const sortRows = (rows, sortCol2 = sortColAtual, sortDir2 = sortDirAtual) => {
+    if (!sortCol2) return rows;
+    const col = columns.find((c) => c.key === sortCol2);
+    if (!col?.value) return rows;
+    return [...rows].sort((a, b) => {
+      const av = col.value(a);
+      const bv = col.value(b);
+      if (av == null && bv == null) return 0;
+      if (av == null) return 1;
+      if (bv == null) return -1;
+      if (typeof av === "number" && typeof bv === "number") return sortDir2 === "asc" ? av - bv : bv - av;
+      const cmp = comparador.compare(String(av), String(bv));
+      return sortDir2 === "asc" ? cmp : -cmp;
+    });
+  };
+  const filterRows = (rows, columnFilters2 = filtrosDeColuna, dateFilters2 = filtrosDeData, numFilters2 = filtrosNumericos) => {
+    let result = rows;
+    for (const [colKey, selectedVals] of Object.entries(columnFilters2)) {
+      if (!selectedVals || selectedVals.size === 0) continue;
+      const valueFn = resolveValueFn(colKey);
+      if (!valueFn) continue;
+      result = result.filter((row) => {
+        const v = valueFn(row);
+        return selectedVals.has(v == null || v === "" ? "—" : String(v));
+      });
+    }
+    for (const [colKey, range] of Object.entries(dateFilters2)) {
+      if (!dateFilterActive(range)) continue;
+      const valueFn = resolveValueFn(colKey);
+      if (!valueFn) continue;
+      result = result.filter((row) => {
+        const d = asDay(valueFn(row));
+        if (!d) return false;
+        if (range.from && d < range.from) return false;
+        if (range.to && d > range.to) return false;
+        return true;
+      });
+    }
+    for (const [colKey, range] of Object.entries(numFilters2)) {
+      if (!numFilterActive(range)) continue;
+      const valueFn = resolveValueFn(colKey);
+      if (!valueFn) continue;
+      result = result.filter((row) => {
+        const n = asNum(valueFn(row));
+        if (n == null) return false;
+        if (range.min !== void 0 && range.min !== "" && n < Number(range.min)) return false;
+        if (range.max !== void 0 && range.max !== "" && n > Number(range.max)) return false;
+        return true;
+      });
+    }
+    return result;
+  };
+  const sortedData = useMemo(() => sortRows(effectiveData), [effectiveData, sortCol, sortDir, colunasBase]);
+  const filteredData = useMemo(() => filterRows(sortedData), [sortedData, columnFilters, dateFilters, numFilters]);
+  useEffect(() => {
+    if (!viewRef) return;
+    viewRef.current = {
+      apply: (rows) => filterRows(sortRows(rows)),
+      applyWith: (rows, e) => filterRows(
+        sortRows(rows, e.sortCol ?? null, e.sortDir ?? "asc"),
+        Object.fromEntries(Object.entries(e.columnFilters ?? {}).map(([k, v]) => [k, new Set(v)])),
+        e.dateFilters ?? {},
+        e.numFilters ?? {}
+      ),
+      rows: filteredData,
+      hasFilters: hasActiveFilters,
+      needsAllData: hasActiveFilters || !!sortCol || isGrouped,
+      getState: () => ({
+        columnFilters: Object.fromEntries(
+          Object.entries(columnFilters).filter(([, v]) => v?.size).map(([k, v]) => [k, [...v]])
+        ),
+        dateFilters: Object.fromEntries(Object.entries(dateFilters).filter(([, r]) => dateFilterActive(r))),
+        numFilters: Object.fromEntries(Object.entries(numFilters).filter(([, r]) => numFilterActive(r))),
+        sortCol,
+        sortDir,
+        groupBy: groupByKeys
+      }),
+      restore: (e) => {
+        setColumnFilters(Object.fromEntries(Object.entries(e?.columnFilters ?? {}).map(([k, v]) => [k, new Set(v)])));
+        setDateFilters(e?.dateFilters ?? {});
+        setNumFilters(e?.numFilters ?? {});
+        setSortCol(e?.sortCol ?? null);
+        setSortDir(e?.sortDir ?? "asc");
+        setGroupByKeys(e?.groupBy ?? []);
+        setCollapsedGroups(/* @__PURE__ */ new Set());
+        const precisaTudo = !!e?.sortCol || !!e?.groupBy?.length || Object.keys(e?.columnFilters ?? {}).length > 0 || Object.keys(e?.dateFilters ?? {}).length > 0;
+        if (precisaTudo && !allData) onDataNeeded?.();
+      }
+    };
+  });
+  const toggleGroup = (colKey) => {
+    if (!allData) onDataNeeded?.();
+    setGroupByKeys(
+      (prev) => prev.includes(colKey) ? prev.filter((k) => k !== colKey) : [...prev, colKey]
+    );
+    setCollapsedGroups(/* @__PURE__ */ new Set());
+  };
+  const removeGroup = (colKey) => {
+    setGroupByKeys((prev) => prev.filter((k) => k !== colKey));
+    setCollapsedGroups(/* @__PURE__ */ new Set());
+  };
+  const clearAllGroups = () => {
+    setGroupByKeys([]);
+    setCollapsedGroups(/* @__PURE__ */ new Set());
+  };
+  const toggleCollapse = (path) => setCollapsedGroups((prev) => {
+    const n = new Set(prev);
+    if (n.has(path)) n.delete(path);
+    else n.add(path);
+    return n;
+  });
+  const buildGroups = (items, keys, depth, parentPath) => {
+    if (depth >= keys.length) return [];
+    const valueFn = resolveValueFn(keys[depth]);
+    if (!valueFn) return [];
+    const map = /* @__PURE__ */ new Map();
+    items.forEach((item) => {
+      const v = valueFn(item);
+      const label = v == null || v === "" ? "—" : String(v);
+      if (!map.has(label)) map.set(label, []);
+      map.get(label).push(item);
+    });
+    return Array.from(map.entries()).sort(([a], [b]) => a === "—" ? 1 : b === "—" ? -1 : a.localeCompare(b)).map(([val, groupItems]) => {
+      const path = parentPath ? `${parentPath}\0${val}` : val;
+      return { val, path, items: groupItems, children: buildGroups(groupItems, keys, depth + 1, path) };
+    });
+  };
+  const groups = useMemo(
+    () => isGrouped ? buildGroups(filteredData, groupByKeys, 0, "") : [],
+    [filteredData, groupByKeys, isGrouped]
+  );
+  const colCount = columns.length + (selectable ? 1 : 0);
+  const nFixas = colunasFixas ? Math.min(colunasFixas + (selectable ? 1 : 0), colCount) : 0;
+  const cabecalhoRef = useRef(null);
+  const raizRef = useRef(null);
+  const posColunas = useRef(/* @__PURE__ */ new Map());
+  const aoAssentar = useRef(() => {
+  });
+  const emArrasto = useRef(false);
+  aoAssentar.current = () => {
+    if (!emArrasto.current) setRealcada(null);
+  };
+  const molas = useRef(/* @__PURE__ */ new Map());
+  const celulasArrasto = useRef(/* @__PURE__ */ new Map());
+  const frame = useRef(null);
+  const ultimoFrame = useRef(0);
+  const animarMolas = useCallback((t) => {
+    const dt = Math.min(0.032, (t - ultimoFrame.current) / 1e3);
+    ultimoFrame.current = t;
+    const passos = Math.max(1, Math.ceil(dt / 8e-3));
+    const h = dt / passos;
+    let aMexer = false;
+    let longe = false;
+    for (const [k, m] of molas.current) {
+      if (m.parada) continue;
+      for (let i = 0; i < passos; i++) {
+        m.v += (-MOLA_RIGIDEZ * (m.x - m.destino) - MOLA_AMORTECIMENTO * m.v) * h;
+        m.x += m.v * h;
+      }
+      if (Math.abs(m.x - m.destino) < 0.3 && Math.abs(m.v) < 5) {
+        m.x = m.destino;
+        m.v = 0;
+        m.parada = true;
+        if (!m.destino) {
+          for (const el of m.els) el.style.transform = "";
+          molas.current.delete(k);
+          continue;
+        }
+      } else {
+        aMexer = true;
+        if (Math.abs(m.x - m.destino) > PERTO_DE_ASSENTAR) longe = true;
+      }
+      const tr = `translateX(${m.x}px)`;
+      for (const el of m.els) el.style.transform = tr;
+    }
+    frame.current = aMexer ? requestAnimationFrame(animarMolas) : null;
+    if (!longe) aoAssentar.current();
+  }, []);
+  useEffect(() => () => {
+    if (frame.current !== null) cancelAnimationFrame(frame.current);
+  }, []);
+  const arrancarMolas = useCallback(() => {
+    if (frame.current !== null) return;
+    ultimoFrame.current = performance.now();
+    frame.current = requestAnimationFrame(animarMolas);
+  }, [animarMolas]);
+  const apontarMolas = (destinos) => {
+    for (const [k, els] of celulasArrasto.current) {
+      const destino = destinos.get(k) ?? 0;
+      const m = molas.current.get(k);
+      if (!m && !destino) continue;
+      const mola = m ?? { x: 0, v: 0, destino: 0, parada: true, els };
+      mola.destino = destino;
+      mola.parada = false;
+      mola.els = els;
+      molas.current.set(k, mola);
+    }
+    arrancarMolas();
+  };
+  const grelhaPrevista = (chave, alvo) => {
+    const ths = Array.from(cabecalhoRef.current?.children ?? []).filter((th) => th.dataset.col);
+    const ordem = ths.map((th) => th.dataset.col);
+    if (alvo !== void 0) {
+      const resto = ordem.filter((k) => k !== chave);
+      const onde = alvo === null ? resto.length : resto.indexOf(alvo);
+      resto.splice(onde < 0 ? resto.length : onde, 0, chave);
+      ordem.splice(0, ordem.length, ...resto);
+    }
+    const porChave = new Map(ths.map((th) => [th.dataset.col, th]));
+    const esquerda = /* @__PURE__ */ new Map();
+    let acc = ths[0]?.offsetLeft ?? 0;
+    for (const k of ordem) {
+      esquerda.set(k, acc);
+      acc += porChave.get(k)?.offsetWidth ?? 0;
+    }
+    return { ordem, esquerda, porChave };
+  };
+  const arrastarPorCima = (clientX) => {
+    if (!arrastada) return;
+    const tabela = cabecalhoRef.current?.closest("table");
+    if (!tabela) return;
+    const fixas = new Set(columns.slice(0, colunasFixas).map((c) => c.key));
+    const arrastadaFixa = fixas.has(arrastada);
+    const caixa = caixaCorpo ?? caixaSimples;
+    const x = clientX - tabela.getBoundingClientRect().left + (arrastadaFixa && caixa ? caixa.scrollLeft : 0);
+    const { ordem, esquerda, porChave } = grelhaPrevista(arrastada, alvoArrasto.current);
+    const larguraArrastada = porChave.get(arrastada)?.offsetWidth ?? 0;
+    let alvo = null;
+    let aEsquerda = true;
+    for (const k of ordem) {
+      if (k === arrastada) {
+        aEsquerda = false;
+        continue;
+      }
+      const largura = porChave.get(k)?.offsetWidth ?? 0;
+      const folga = Math.max(0, Math.min(largura * FOLGA_TROCA, larguraArrastada - 1));
+      const ponto = (esquerda.get(k) ?? 0) + (aEsquerda ? folga : largura - folga);
+      if (ponto > x) {
+        alvo = k;
+        break;
+      }
+    }
+    if (colunasFixas > 0) {
+      const primeiraSolta = ordem.find((k) => k !== arrastada && !fixas.has(k)) ?? null;
+      if (arrastadaFixa && (alvo === null || !fixas.has(alvo))) alvo = primeiraSolta;
+      else if (!arrastadaFixa && alvo !== null && fixas.has(alvo)) alvo = primeiraSolta;
+    }
+    if (alvo === alvoArrasto.current) return;
+    alvoArrasto.current = alvo;
+    const prevista = grelhaPrevista(arrastada, alvo);
+    apontarMolas(new Map([...prevista.porChave].map(([k, th]) => [k, (prevista.esquerda.get(k) ?? 0) - th.offsetLeft])));
+  };
+  const acabarArrasto = (gravar) => {
+    const chave = arrastada;
+    const alvo = alvoArrasto.current;
+    emArrasto.current = false;
+    setArrastada(null);
+    requestAnimationFrame(() => {
+      if (frame.current === null) aoAssentar.current();
+    });
+    setTimeout(() => aoAssentar.current(), 1e3);
+    alvoArrasto.current = void 0;
+    if (chave && gravar && alvo !== void 0 && alvo !== chave) {
+      onMoverColuna?.(chave, alvo);
+    } else {
+      apontarMolas(/* @__PURE__ */ new Map());
+    }
+  };
+  const comecarArrasto = (chave) => {
+    setArrastada(chave);
+    setRealcada(chave);
+    emArrasto.current = true;
+    alvoArrasto.current = void 0;
+    const ths = Array.from(cabecalhoRef.current?.children ?? []).filter((th) => th.dataset.col);
+    posColunas.current = new Map(ths.map((th) => [th.dataset.col, th.offsetLeft]));
+    const raiz = raizRef.current;
+    celulasArrasto.current = new Map(ths.map((th) => [
+      th.dataset.col,
+      raiz ? Array.from(raiz.querySelectorAll(`[data-col="${CSS.escape(th.dataset.col)}"]`)) : []
+    ]));
+  };
+  const aoComecar = useRef(comecarArrasto);
+  aoComecar.current = comecarArrasto;
+  const aoPassar = useRef(arrastarPorCima);
+  aoPassar.current = arrastarPorCima;
+  const aoAcabar = useRef(acabarArrasto);
+  aoAcabar.current = acabarArrasto;
+  const largarOuvintes = useRef(() => {
+  });
+  const acabarPendente = useRef(() => {
+  });
+  useEffect(() => () => {
+    largarOuvintes.current();
+    cursorDeArrasto(false);
+  }, []);
+  const premirTitulo = (e, chave) => {
+    if (e.button !== 0 || !e.isPrimary) return;
+    if (e.target.closest("input, textarea, select")) return;
+    acabarPendente.current();
+    largarOuvintes.current();
+    const x0 = e.clientX;
+    const y0 = e.clientY;
+    let comecou = false;
+    const mover = (ev) => {
+      if (!comecou) {
+        if (Math.hypot(ev.clientX - x0, ev.clientY - y0) < LIMIAR_ARRASTO) return;
+        comecou = true;
+        cursorDeArrasto(true);
+        aoComecar.current(chave);
+      }
+      aoPassar.current(ev.clientX);
+    };
+    const acabar = (gravar) => {
+      acabarPendente.current = () => {
+      };
+      largarOuvintes.current();
+      if (!comecou) return;
+      cursorDeArrasto(false);
+      aoAcabar.current(gravar);
+    };
+    const soltar = () => {
+      if (comecou) {
+        const engolir = (ev) => {
+          ev.stopPropagation();
+          ev.preventDefault();
+        };
+        document.addEventListener("click", engolir, { capture: true, once: true });
+        setTimeout(() => document.removeEventListener("click", engolir, { capture: true }), 0);
+      }
+      acabar(true);
+    };
+    const cancelar = () => acabar(false);
+    acabarPendente.current = () => acabar(true);
+    const tecla = (ev) => {
+      if (ev.key === "Escape") acabar(false);
+    };
+    document.addEventListener("pointermove", mover);
+    document.addEventListener("pointerup", soltar);
+    document.addEventListener("pointercancel", cancelar);
+    document.addEventListener("keydown", tecla);
+    largarOuvintes.current = () => {
+      document.removeEventListener("pointermove", mover);
+      document.removeEventListener("pointerup", soltar);
+      document.removeEventListener("pointercancel", cancelar);
+      document.removeEventListener("keydown", tecla);
+      largarOuvintes.current = () => {
+      };
+    };
+  };
+  useLayoutEffect(() => {
+    const ths = Array.from(cabecalhoRef.current?.children ?? []);
+    const agora = /* @__PURE__ */ new Map();
+    for (const th of ths) {
+      const k = th.dataset.col;
+      if (k) agora.set(k, th.offsetLeft);
+    }
+    const antes = posColunas.current;
+    posColunas.current = agora;
+    if (!onMoverColuna || !antes.size) return;
+    const raiz = raizRef.current;
+    if (!raiz) return;
+    let mexeu = false;
+    for (const [k, x] of agora) {
+      const delta = (antes.get(k) ?? x) - x;
+      const m = molas.current.get(k);
+      if (!delta && !m) continue;
+      const mola = m ?? { x: 0, v: 0, destino: 0, parada: false, els: [] };
+      mola.x += delta;
+      mola.destino = 0;
+      mola.parada = false;
+      mola.els = Array.from(raiz.querySelectorAll(`[data-col="${CSS.escape(k)}"]`));
+      const tr = `translateX(${mola.x}px)`;
+      for (const el of mola.els) el.style.transform = tr;
+      molas.current.set(k, mola);
+      mexeu = true;
+    }
+    if (mexeu) arrancarMolas();
+  }, [columns, onMoverColuna, arrancarMolas]);
+  const [esquerdas, setEsquerdas] = useState([]);
+  useLayoutEffect(() => {
+    if (!nFixas) {
+      setEsquerdas((e) => e.length ? [] : e);
+      return;
+    }
+    const medir = () => {
+      const ths = Array.from(cabecalhoRef.current?.children ?? []);
+      let acc = 0;
+      const out = [];
+      for (let i = 0; i < nFixas; i++) {
+        out.push(acc);
+        acc += ths[i]?.offsetWidth ?? 0;
+      }
+      setEsquerdas((prev) => prev.length === out.length && prev.every((v, i) => v === out[i]) ? prev : out);
+    };
+    medir();
+    const ro = new ResizeObserver(medir);
+    for (const th of Array.from(cabecalhoRef.current?.children ?? [])) ro.observe(th);
+    return () => ro.disconnect();
+  }, [nFixas, columns, data, esquerdas]);
+  const fundoLinha = (k) => `${selectable && selectedKeys.has(k) ? "bg-[#f2fdf9]" : "bg-white"} group-hover/linha:bg-slate-50`;
+  const cabecaFixa = (i) => {
+    const realcadaAqui = realcada !== null && realcada === chaveDoIndice(i);
+    const linhaDeBaixo = bordasSeparadas && !fundoNosTitulos;
+    const f = fixa(
+      i,
+      realcadaAqui ? "bg-[color-mix(in_srgb,var(--color-proef-blue)_15%,var(--color-slate-50))]" : "bg-slate-50",
+      realcadaAqui ? linhaDeBaixo ? "shadow-[inset_0_-2px_0_0_var(--color-slate-200),inset_1px_0_0_0_rgb(0_118_206/0.35),inset_-1px_0_0_0_rgb(0_118_206/0.35)]" : "shadow-[inset_1px_0_0_0_rgb(0_118_206/0.35),inset_-1px_0_0_0_rgb(0_118_206/0.35)]" : linhaDeBaixo ? "shadow-[inset_0_-2px_0_0_var(--color-slate-200)]" : ""
+    );
+    return { className: f.className, style: f.style ? { ...f.style, zIndex: 30 } : void 0 };
+  };
+  const filetesFixos = bordasSeparadas ? "[tr+tr>&]:shadow-[inset_0_1px_0_0_var(--color-slate-100)]" : "";
+  const fundoRealceFixa = "bg-[color-mix(in_srgb,var(--color-proef-blue)_5%,white)]";
+  const filetesRealceFixa = bordasSeparadas ? "shadow-[inset_1px_0_0_0_rgb(0_118_206/0.35),inset_-1px_0_0_0_rgb(0_118_206/0.35)] [tr+tr>&]:shadow-[inset_0_1px_0_0_var(--color-slate-100),inset_1px_0_0_0_rgb(0_118_206/0.35),inset_-1px_0_0_0_rgb(0_118_206/0.35)]" : "shadow-[inset_1px_0_0_0_rgb(0_118_206/0.35),inset_-1px_0_0_0_rgb(0_118_206/0.35)]";
+  const chaveDoIndice = (i) => columns[i - (selectable ? 1 : 0)]?.key;
+  const fixaMedida = (chave) => {
+    const i = columns.findIndex((c) => c.key === chave) + (selectable ? 1 : 0);
+    return i < nFixas && esquerdas.length === nFixas;
+  };
+  const fixa = (i, fundo, filete = filetesFixos) => {
+    if (filete === filetesFixos && realcada !== null && realcada === chaveDoIndice(i)) {
+      fundo = fundoRealceFixa;
+      filete = filetesRealceFixa;
+    }
+    return i < nFixas && esquerdas.length === nFixas ? {
+      style: { position: "sticky", left: esquerdas[i], zIndex: 10 },
+      // Opaca de propósito: por baixo passa o resto da tabela a rolar.
+      // A borda marca onde acaba o bloco congelado, e só aparece quando
+      // há mesmo colunas a passar por baixo (rolado para o lado): parada,
+      // era uma linha a mais sem razão à vista.
+      className: `${fundo} ${filete} ${i === nFixas - 1 && roladoLado ? "border-r border-slate-200" : ""}`
+    } : { style: void 0, className: "" };
+  };
+  const renderGroupNodes = (nodes, depth) => {
+    return nodes.map((node) => {
+      const isCollapsed = collapsedGroups.has(node.path);
+      const hasChildren = node.children.length > 0;
+      return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        /* @__PURE__ */ jsx("tr", { className: "bg-slate-50/80 cursor-pointer select-none", onClick: () => toggleCollapse(node.path), children: /* @__PURE__ */ jsx("td", { colSpan: colCount, className: "px-4 py-1.5 border-b border-t border-slate-100", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", style: { paddingLeft: depth * 16 }, children: [
+          /* @__PURE__ */ jsx(
+            ChevronRightIcon,
+            {
+              size: 11,
+              className: `text-proef-blue/60 transition-transform flex-shrink-0 ${isCollapsed ? "" : "rotate-90"}`
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-micro font-black uppercase tracking-[0.15em] text-proef-blue/70", children: node.val }),
+          /* @__PURE__ */ jsxs("span", { className: "text-micro text-slate-400 ml-1", children: [
+            "(",
+            node.items.length,
+            ")"
+          ] })
+        ] }) }) }),
+        !isCollapsed && (hasChildren ? renderGroupNodes(node.children, depth + 1) : node.items.map((row) => /* @__PURE__ */ jsxs(
+          "tr",
+          {
+            onClick: () => onRowClick?.(row),
+            onDoubleClick: () => onRowDoubleClick?.(row),
+            className: `group/linha hover:bg-slate-50 transition-colors ${onRowClick || onRowDoubleClick ? "cursor-pointer" : ""} ${selectable && selectedKeys.has(rowKey(row)) ? "bg-proef-turquoise/5" : ""} ${rowClassName?.(row) ?? ""}`,
+            children: [
+              selectable && /* @__PURE__ */ jsx("td", { style: fixa(0, fundoLinha(rowKey(row))).style, className: `px-4 py-3 ${fixa(0, fundoLinha(rowKey(row))).className}`, onClick: (e) => {
+                e.stopPropagation();
+                toggleRow(rowKey(row));
+              }, children: /* @__PURE__ */ jsx("div", { className: `w-4 h-4 flex items-center justify-center border transition-colors ${selectedKeys.has(rowKey(row)) ? "bg-primary border-primary" : "border-slate-300 hover:border-slate-400"}`, children: selectedKeys.has(rowKey(row)) && /* @__PURE__ */ jsx(CheckIcon, { size: 9, strokeWidth: 3, className: "text-white" }) }) }),
+              columns.map((col, i) => {
+                const f = fixa(i + (selectable ? 1 : 0), fundoLinha(rowKey(row)));
+                return /* @__PURE__ */ jsx("td", { style: f.style, className: `px-3 py-1.5 ${col.cellClassName ?? ""} ${f.className} ${recuoFim(i)} ${realce(col.key)} ${transicaoRealce}`, "data-col": col.key, children: col.render(row) }, col.key);
+              })
+            ]
+          },
+          rowKey(row)
+        )))
+      ] }, node.path);
+    });
+  };
+  const aCarregar = isLoading || (isAllDataLoading || !allData) && (hasActiveFilters || !!sortCol || isGrouped);
+  const internalTotalPages = pageSize && isClientMode && !isGrouped ? Math.max(1, Math.ceil(filteredData.length / pageSize)) : 1;
+  useEffect(() => {
+    setInternalPage((p) => Math.min(Math.max(1, p), internalTotalPages));
+  }, [internalTotalPages]);
+  const paginatedData = pageSize && isClientMode && !isGrouped ? filteredData.slice((internalPage - 1) * pageSize, internalPage * pageSize) : filteredData;
+  const onVistaRef = useRef(onVista);
+  onVistaRef.current = onVista;
+  useEffect(() => {
+    onVistaRef.current?.({
+      visible: filteredData.length,
+      filtered: isClientMode && hasActiveFilters,
+      selfPaginated: isClientMode
+    });
+  }, [filteredData.length, isClientMode, hasActiveFilters]);
+  const semLinhas = aCarregar || (isGrouped ? groups.length === 0 : paginatedData.length === 0);
+  const setDateFilter = (colKey, part, val) => {
+    if (!allData) onDataNeeded?.();
+    setDateFilters((prev) => {
+      const cur = { ...prev[colKey] ?? {} };
+      if (val) cur[part] = val;
+      else delete cur[part];
+      const next = { ...prev };
+      if (!cur.from && !cur.to) delete next[colKey];
+      else next[colKey] = cur;
+      return next;
+    });
+  };
+  const clearColumnFilter = (colKey) => {
+    setColumnFilters((prev) => {
+      const n = { ...prev };
+      delete n[colKey];
+      return n;
+    });
+    setDateFilters((prev) => {
+      const n = { ...prev };
+      delete n[colKey];
+      return n;
+    });
+    setNumFilters((prev) => {
+      const n = { ...prev };
+      delete n[colKey];
+      return n;
+    });
+  };
+  const clearAllFilters = () => {
+    setColumnFilters({});
+    setDateFilters({});
+    setNumFilters({});
+  };
+  const setNumFilter = (colKey, min, max) => {
+    if (!allData) onDataNeeded?.();
+    setColumnFilters((prev) => {
+      if (!(colKey in prev)) return prev;
+      const n = { ...prev };
+      delete n[colKey];
+      return n;
+    });
+    setNumFilters((prev) => {
+      const n = { ...prev };
+      if (min === "" && max === "") delete n[colKey];
+      else n[colKey] = { ...min !== "" ? { min } : {}, ...max !== "" ? { max } : {} };
+      return n;
+    });
+  };
+  const aplicarValores = (colKey, vals) => {
+    if (!allData) onDataNeeded?.();
+    setNumFilters((prev) => {
+      if (!(colKey in prev)) return prev;
+      const n = { ...prev };
+      delete n[colKey];
+      return n;
+    });
+    setColumnFilters((prev) => {
+      const n = { ...prev };
+      if (vals.size) n[colKey] = vals;
+      else delete n[colKey];
+      return n;
+    });
+  };
+  const hasActiveFilter = (colKey) => (columnFilters[colKey]?.size ?? 0) > 0 || dateFilterActive(dateFilters[colKey]) || numFilterActive(numFilters[colKey]);
+  const totalActiveFilters = Object.values(columnFilters).filter((s) => s?.size > 0).length + Object.values(dateFilters).filter(dateFilterActive).length + Object.values(numFilters).filter(numFilterActive).length;
+  const visibleKeys = useMemo(() => paginatedData.map((row) => rowKey(row)), [paginatedData, rowKey]);
+  const toggleRow = (key) => setSelectedKeys((prev) => {
+    const next = new Set(prev);
+    if (next.has(key)) next.delete(key);
+    else next.add(key);
+    onSelectionChange?.(next);
+    return next;
+  });
+  const toggleAll = () => setSelectedKeys((prev) => {
+    const allSelected = visibleKeys.every((k) => prev.has(k));
+    const next = new Set(prev);
+    if (allSelected) visibleKeys.forEach((k) => next.delete(k));
+    else visibleKeys.forEach((k) => next.add(k));
+    onSelectionChange?.(next);
+    return next;
+  });
+  const allVisibleSelected = visibleKeys.length > 0 && visibleKeys.every((k) => selectedKeys.has(k));
+  const someVisibleSelected = visibleKeys.some((k) => selectedKeys.has(k)) && !allVisibleSelected;
+  const fechaFiltro = () => {
+    setOpenFilterCol(null);
+    setAncoraFiltro(null);
+  };
+  const chaveColunas = `${columns.map((c) => c.key).sort().join("|")}|${selectable ? 1 : 0}`;
+  const SEL = "\0sel";
+  const chavesVista = [...selectable ? [SEL] : [], ...columns.map((c) => c.key)];
+  const [larguras, setLarguras] = useState(null);
+  const corpoRef = useRef(null);
+  const medidaRef = useRef(null);
+  const peloConjunto = preencheAltura && larguraPeloConjunto;
+  useLayoutEffect(() => {
+    setLarguras(null);
+  }, [chaveColunas, peloConjunto ? allData : null]);
+  const exemplares = useMemo(() => {
+    if (!peloConjunto || larguras || !allData?.length) return null;
+    const porColuna = columns.map((col) => {
+      const vistos = /* @__PURE__ */ new Map();
+      for (const row of allData) {
+        const k = String(col.value ? col.value(row) ?? "" : "");
+        if (!vistos.has(k)) vistos.set(k, row);
+      }
+      return [...vistos.values()];
+    });
+    const n = Math.max(...porColuna.map((l) => l.length));
+    return { porColuna, n };
+  }, [peloConjunto, larguras, allData, chaveColunas]);
+  useLayoutEffect(() => {
+    if (!preencheAltura || larguras || isGrouped) return;
+    if (aCarregar && esqueletoAoCarregar) return;
+    const ths = Array.from(cabecalhoRef.current?.children ?? []);
+    const fonte = peloConjunto ? medidaRef.current : corpoRef.current;
+    const tds = Array.from(fonte?.rows?.[0]?.cells ?? []);
+    if (!ths.length || !tds.length) return;
+    const novas = Object.fromEntries(ths.map((th, i) => [
+      chavesVista[i] ?? String(i),
+      Math.ceil(Math.max(th.getBoundingClientRect().width, tds[i]?.getBoundingClientRect().width ?? 0))
+    ]));
+    setLarguras(novas);
+    if (esqueletoAoCarregar && storageKey) {
+      try {
+        localStorage.setItem(`dt_larguras_${storageKey}`, JSON.stringify({ colunas: chaveColunas, larguras: novas }));
+      } catch {
+      }
+    }
+  }, [preencheAltura, larguras, isGrouped, chaveColunas, paginatedData, exemplares, aCarregar, esqueletoAoCarregar]);
+  const largurasGuardadas = useMemo(() => {
+    if (!esqueletoAoCarregar || !storageKey) return null;
+    try {
+      const g = JSON.parse(localStorage.getItem(`dt_larguras_${storageKey}`) ?? "null");
+      return g?.colunas === chaveColunas ? g.larguras : null;
+    } catch {
+      return null;
+    }
+  }, [esqueletoAoCarregar, storageKey, chaveColunas]);
+  const [largurasTitulos, setLargurasTitulos] = useState(null);
+  const esqueletoSemMedida = preencheAltura && !isGrouped && aCarregar && esqueletoAoCarregar && !larguras && !largurasGuardadas;
+  useLayoutEffect(() => {
+    if (!esqueletoSemMedida) {
+      setLargurasTitulos(null);
+      return;
+    }
+    const ths = Array.from(cabecalhoRef.current?.children ?? []);
+    if (!ths.length) return;
+    setLargurasTitulos(Object.fromEntries(ths.map((th, i) => [chavesVista[i] ?? String(i), Math.ceil(th.getBoundingClientRect().width)])));
+  }, [esqueletoSemMedida, chaveColunas]);
+  const largurasVista = larguras ?? (aCarregar && esqueletoAoCarregar ? largurasGuardadas ?? largurasTitulos : null);
+  const caixaCorpoRef = useRef(null);
+  const [caixaCorpo, setCaixaCorpo] = useState(null);
+  const refCaixaCorpo = useCallback((el) => {
+    caixaCorpoRef.current = el;
+    setCaixaCorpo(el);
+  }, []);
+  const caixaCabecalhoRef = useRef(null);
+  const [restaDireita, setRestaDireita] = useState(false);
+  const [roladoLado, setRoladoLado] = useState(false);
+  const [caixaSimples, setCaixaSimples] = useState(null);
+  useEffect(() => {
+    const c = caixaCorpo ?? caixaSimples;
+    if (!nFixas || !c) return;
+    const ver = () => {
+      const rolado = c.scrollLeft > 0;
+      setRoladoLado((prev) => prev === rolado ? prev : rolado);
+    };
+    ver();
+    c.addEventListener("scroll", ver, { passive: true });
+    return () => c.removeEventListener("scroll", ver);
+  }, [nFixas, caixaCorpo, caixaSimples]);
+  useEffect(() => {
+    const c = caixaCorpo;
+    if (!esbaterDireita || !c) return;
+    const ver = () => {
+      const resta = c.scrollLeft + c.clientWidth < c.scrollWidth - 1;
+      setRestaDireita((prev) => prev === resta ? prev : resta);
+    };
+    ver();
+    c.addEventListener("scroll", ver, { passive: true });
+    const ro = new ResizeObserver(ver);
+    ro.observe(c);
+    if (c.firstElementChild) ro.observe(c.firstElementChild);
+    return () => {
+      c.removeEventListener("scroll", ver);
+      ro.disconnect();
+    };
+  }, [esbaterDireita, caixaCorpo]);
+  const mascaraDireita = "linear-gradient(to right, #000 calc(100% - 48px), transparent)";
+  const [barra, setBarra] = useState(0);
+  useLayoutEffect(() => {
+    const medir = () => {
+      const c2 = caixaCorpoRef.current;
+      if (!c2) return;
+      const w = c2.offsetWidth - c2.clientWidth;
+      setBarra((prev) => prev === w ? prev : w);
+    };
+    medir();
+    const c = caixaCorpoRef.current;
+    if (!c) return;
+    const ro = new ResizeObserver(medir);
+    ro.observe(c);
+    return () => ro.disconnect();
+  }, [preencheAltura, paginatedData]);
+  const grupoColunas = largurasVista ? /* @__PURE__ */ jsx("colgroup", { children: chavesVista.map((k) => /* @__PURE__ */ jsx("col", { style: { width: largurasVista[k] } }, k)) }) : null;
+  const estiloTabela = largurasVista ? { tableLayout: "fixed", width: chavesVista.reduce((a, k) => a + (largurasVista[k] ?? 0), 0), minWidth: "100%" } : { width: "max-content" };
+  const cabecalho = (fixoNoTopo) => /* @__PURE__ */ jsx("thead", { className: fixoNoTopo ? "sticky top-0 z-20" : void 0, children: /* @__PURE__ */ jsxs("tr", { ref: cabecalhoRef, className: `text-micro font-black uppercase text-slate-400 tracking-[0.15em] ${!bordasSeparadas ? "border-b-2 border-slate-200 bg-slate-50" : fundoNosTitulos ? "[&>th]:border-b-2 [&>th]:border-slate-200" : "shadow-[inset_0_-2px_0_0_var(--color-slate-200)]"}`, children: [
+    selectable && /* @__PURE__ */ jsx("th", { style: cabecaFixa(0).style, className: `px-4 py-3 w-10 ${fundoNosTitulos ? "bg-slate-50" : ""} ${cabecaFixa(0).className}`, children: /* @__PURE__ */ jsx("button", { onClick: toggleAll, className: `w-4 h-4 flex items-center justify-center border transition-colors ${allVisibleSelected ? "bg-primary border-primary" : someVisibleSelected ? "bg-slate-300 border-slate-300" : "border-slate-300 hover:border-slate-400"}`, children: (allVisibleSelected || someVisibleSelected) && /* @__PURE__ */ jsx(CheckIcon, { size: 9, strokeWidth: 3, className: "text-white" }) }) }),
+    columns.map((col, i) => {
+      const canSort = col.sortable !== false && !!col.value;
+      const canFilter = col.filterable !== false && !!col.value;
+      const canGroup = col.groupable === true && !!col.value;
+      const isSortActive = sortCol === col.key;
+      const isFiltered = hasActiveFilter(col.key);
+      const isFilterOpen = openFilterCol === col.key;
+      const isColGrouped = groupByKeys.includes(col.key);
+      const arrastavel = !!onMoverColuna && !isFilterOpen;
+      return /* @__PURE__ */ jsxs(
+        "th",
+        {
+          style: cabecaFixa(i + (selectable ? 1 : 0)).style,
+          onPointerDown: arrastavel ? (e) => premirTitulo(e, col.key) : void 0,
+          className: `px-4 py-3 ${col.headerClassName ?? ""} ${cabecaFixa(i + (selectable ? 1 : 0)).className} ${arrastavel ? "cursor-grab" : ""} ${realce(col.key, true)} ${transicaoRealce}`,
+          "data-col": col.key,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 group/hdr whitespace-nowrap select-none", children: [
+              canSort ? /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => {
+                    if (!allData) onDataNeeded?.();
+                    if (sortCol === col.key) setSortDir((d) => d === "asc" ? "desc" : "asc");
+                    else {
+                      setSortCol(col.key);
+                      setSortDir("asc");
+                    }
+                  },
+                  className: `flex items-center gap-0.5 transition-colors hover:text-slate-700 ${isSortActive ? "text-proef-blue" : ""}`,
+                  children: [
+                    /* @__PURE__ */ jsx("span", { children: col.label }),
+                    isSortActive && sortDir === "asc" ? /* @__PURE__ */ jsx(ChevronUpIcon, { size: 11 }) : isSortActive && sortDir === "desc" ? /* @__PURE__ */ jsx(ChevronDownIcon, { size: 11 }) : /* @__PURE__ */ jsx(ChevronsUpDownIcon, { size: 11, className: "opacity-50 group-hover/hdr:opacity-100" })
+                  ]
+                }
+              ) : /* @__PURE__ */ jsx("span", { children: col.label }),
+              canGroup && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => toggleGroup(col.key),
+                  title: isColGrouped ? L.ungroupBy(col.label) : L.groupBy(col.label),
+                  "aria-label": isColGrouped ? L.ungroupBy(col.label) : L.groupBy(col.label),
+                  "aria-pressed": isColGrouped,
+                  className: `p-0.5 rounded transition-colors ${isColGrouped ? "text-violet-600 bg-violet-100 opacity-100" : "text-slate-400 opacity-50 group-hover/hdr:opacity-100 hover:text-slate-600"}`,
+                  children: /* @__PURE__ */ jsx(LayersIcon, { size: 10 })
+                }
+              ),
+              canFilter && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: (e) => {
+                      const r = e.currentTarget.getBoundingClientRect();
+                      if (isFilterOpen) {
+                        fechaFiltro();
+                      } else {
+                        if (!allData) onDataNeeded?.();
+                        setAncoraFiltro(r);
+                        setOpenFilterCol(col.key);
+                      }
+                    },
+                    title: L.filterBy(col.label),
+                    "aria-label": L.filterBy(col.label),
+                    "aria-expanded": isFilterOpen,
+                    className: `p-0.5 transition-colors ${isFiltered || isFilterOpen ? "text-proef-blue opacity-100" : "text-slate-400 opacity-50 group-hover/hdr:opacity-100 hover:text-slate-600"}`,
+                    children: /* @__PURE__ */ jsx(FilterIcon, { size: 10 })
+                  }
+                ),
+                isFilterOpen && ancoraFiltro && /* @__PURE__ */ jsx(
+                  ColumnFilter,
+                  {
+                    labels: L,
+                    canSort,
+                    ancora: ancoraFiltro,
+                    tipo: col.filterType === "date" ? "data" : col.filterType === "number" ? "numero" : "texto",
+                    valores: col.filterType === "date" ? [] : getUniqueValues(col.key),
+                    seleccionados: columnFilters[col.key] ?? /* @__PURE__ */ new Set(),
+                    intervalo: dateFilters[col.key] ?? {},
+                    numero: numFilters[col.key] ?? {},
+                    ordenadaPor: sortCol === col.key ? sortDir : null,
+                    aCarregar: !allData && !!isAllDataLoading,
+                    onOrdenar: (dir) => {
+                      setSortCol(col.key);
+                      setSortDir(dir);
+                    },
+                    onAplicar: (vals) => {
+                      aplicarValores(col.key, vals);
+                      fechaFiltro();
+                    },
+                    onAplicarDatas: (de, ate) => {
+                      setDateFilter(col.key, "from", de);
+                      setDateFilter(col.key, "to", ate);
+                      fechaFiltro();
+                    },
+                    onAplicarNumeros: (min, max) => {
+                      setNumFilter(col.key, min, max);
+                      fechaFiltro();
+                    },
+                    onLimpar: () => {
+                      clearColumnFilter(col.key);
+                      fechaFiltro();
+                    },
+                    onFechar: fechaFiltro
+                  }
+                )
+              ] }),
+              col.extraFilters?.map((sf) => {
+                const isEfFiltered = hasActiveFilter(sf.key);
+                const isEfOpen = openFilterCol === sf.key;
+                return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: (e) => {
+                        const r = e.currentTarget.getBoundingClientRect();
+                        if (isEfOpen) {
+                          fechaFiltro();
+                        } else {
+                          setAncoraFiltro(r);
+                          setOpenFilterCol(sf.key);
+                        }
+                      },
+                      title: L.filterBy(sf.label),
+                      "aria-label": L.filterBy(sf.label),
+                      "aria-expanded": isEfOpen,
+                      className: `p-0.5 transition-colors ${isEfFiltered || isEfOpen ? "text-violet-600 opacity-100" : "text-slate-300 opacity-40 group-hover/hdr:opacity-90 hover:text-slate-500"}`,
+                      children: /* @__PURE__ */ jsx(FilterIcon, { size: 9 })
+                    }
+                  ),
+                  isEfOpen && ancoraFiltro && /* @__PURE__ */ jsx(
+                    ColumnFilter,
+                    {
+                      labels: L,
+                      label: sf.label,
+                      ancora: ancoraFiltro,
+                      tipo: sf.filterType === "date" ? "data" : sf.filterType === "number" ? "numero" : "texto",
+                      valores: sf.filterType === "date" ? [] : getUniqueValues(sf.key),
+                      seleccionados: columnFilters[sf.key] ?? /* @__PURE__ */ new Set(),
+                      intervalo: dateFilters[sf.key] ?? {},
+                      numero: numFilters[sf.key] ?? {},
+                      ordenadaPor: null,
+                      aCarregar: !allData && !!isAllDataLoading,
+                      onAplicar: (vals) => {
+                        aplicarValores(sf.key, vals);
+                        fechaFiltro();
+                      },
+                      onAplicarDatas: (de, ate) => {
+                        setDateFilter(sf.key, "from", de);
+                        setDateFilter(sf.key, "to", ate);
+                        fechaFiltro();
+                      },
+                      onAplicarNumeros: (min, max) => {
+                        setNumFilter(sf.key, min, max);
+                        fechaFiltro();
+                      },
+                      onLimpar: () => {
+                        clearColumnFilter(sf.key);
+                        fechaFiltro();
+                      },
+                      onFechar: fechaFiltro
+                    }
+                  )
+                ] }, sf.key);
+              })
+            ] }),
+            col.headerExtra && /* @__PURE__ */ jsx("div", { className: "mt-0.5 normal-case font-normal tracking-normal", children: col.headerExtra(filteredData) })
+          ]
+        },
+        col.key
+      );
+    })
+  ] }) });
+  const LARGURAS_ESQUELETO = ["w-3/4", "w-1/2", "w-2/3", "w-5/6", "w-2/5"];
+  const linhasEsqueleto = Array.from({ length: 20 }, (_, r) => /* @__PURE__ */ jsxs("tr", { "aria-hidden": true, className: "animate-pulse motion-reduce:animate-none", children: [
+    selectable && /* @__PURE__ */ jsx("td", { style: fixa(0, "bg-white").style, className: `px-4 py-3 ${fixa(0, "bg-white").className}`, children: /* @__PURE__ */ jsx("div", { className: "w-4 h-4 border border-slate-200 bg-slate-50" }) }),
+    columns.map((col, i) => {
+      const f = fixa(i + (selectable ? 1 : 0), "bg-white");
+      return /* @__PURE__ */ jsx("td", { style: f.style, className: `px-3 py-2.5 ${f.className} ${recuoFim(i)}`, children: /* @__PURE__ */ jsx("div", { className: `h-2 bg-slate-200 ${LARGURAS_ESQUELETO[(r + i) % LARGURAS_ESQUELETO.length]} ${/text-right/.test(col.cellClassName ?? "") ? "ml-auto" : /text-center/.test(col.cellClassName ?? "") ? "mx-auto" : ""}` }) }, col.key);
+    })
+  ] }, `esqueleto-${r}`));
+  const corpo = /* @__PURE__ */ jsx("tbody", { className: bordasSeparadas ? "[&>tr+tr]:shadow-[inset_0_1px_0_0_var(--color-slate-100)]" : "divide-y divide-slate-100", children: aCarregar ? esqueletoAoCarregar ? linhasEsqueleto : null : isGrouped ? /* @__PURE__ */ jsx(Fragment, { children: renderGroupNodes(groups, 0) }) : paginatedData.map((row) => /* @__PURE__ */ jsxs(
+    "tr",
+    {
+      onClick: () => onRowClick?.(row),
+      onDoubleClick: () => onRowDoubleClick?.(row),
+      className: `group/linha hover:bg-slate-50 transition-colors ${onRowClick || onRowDoubleClick ? "cursor-pointer" : ""} ${selectable && selectedKeys.has(rowKey(row)) ? "bg-proef-turquoise/5" : ""} ${rowClassName?.(row) ?? ""}`,
+      children: [
+        selectable && /* @__PURE__ */ jsx("td", { style: fixa(0, fundoLinha(rowKey(row))).style, className: `px-4 py-3 ${fixa(0, fundoLinha(rowKey(row))).className}`, onClick: (e) => {
+          e.stopPropagation();
+          toggleRow(rowKey(row));
+        }, children: /* @__PURE__ */ jsx("div", { className: `w-4 h-4 flex items-center justify-center border transition-colors ${selectedKeys.has(rowKey(row)) ? "bg-primary border-primary" : "border-slate-300 hover:border-slate-400"}`, children: selectedKeys.has(rowKey(row)) && /* @__PURE__ */ jsx(CheckIcon, { size: 9, strokeWidth: 3, className: "text-white" }) }) }),
+        columns.map((col, i) => {
+          const f = fixa(i + (selectable ? 1 : 0), fundoLinha(rowKey(row)));
+          return /* @__PURE__ */ jsx("td", { style: f.style, className: `px-3 py-1.5 ${col.cellClassName ?? ""} ${f.className} ${recuoFim(i)} ${realce(col.key)} ${transicaoRealce}`, "data-col": col.key, children: col.render(row) }, col.key);
+        })
+      ]
+    },
+    rowKey(row)
+  )) });
+  const aviso = aCarregar && esqueletoAoCarregar ? (
+    // O esqueleto já diz que está a carregar; o texto fica para leitores de ecrã.
+    loadingLabel ? /* @__PURE__ */ jsx("span", { role: "status", className: "sr-only", children: loadingLabel }) : null
+  ) : semLinhas ? /* @__PURE__ */ jsx("div", { className: "sticky left-0 w-full flex-1 py-10 flex flex-col items-center justify-center gap-3 text-center", children: aCarregar ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "inline-block h-7 w-7 animate-spin rounded-full border-2 border-current border-t-transparent text-proef-turquoise" }),
+    loadingLabel && /* @__PURE__ */ jsx("span", { className: "text-xs font-bold uppercase tracking-widest text-slate-400", children: loadingLabel })
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("p", { className: "text-slate-600 font-bold text-sm", children: vazio }),
+    emptySubLabel && /* @__PURE__ */ jsx("p", { className: "text-slate-400 text-xs -mt-1", children: emptySubLabel })
+  ] }) }) : null;
+  const temRodape = !paginacaoNoTopo && isClientMode && !isGrouped && !!pageSize && internalTotalPages > 1;
+  const topo = paginacaoNoTopo;
+  const peloServidor = !!topo?.onPageChange && topo.page !== void 0 && !isClientMode;
+  const paginaTopo = peloServidor ? topo.page : internalPage;
+  const totalPaginasTopo = peloServidor ? Math.max(1, Math.ceil((topo.total ?? data.length) / (pageSize || data.length || 1))) : internalTotalPages;
+  const irParaPagina = (p) => peloServidor ? topo.onPageChange(p) : setInternalPage(p);
+  const totalTopo = topo?.total ?? (allData ?? data).length;
+  const filtradaTopo = isClientMode && hasActiveFilters;
+  const contagem = filtradaTopo ? filteredData.length : totalTopo;
+  const topoACarregar = !!isLoading && data.length === 0;
+  const numerosPagina = totalPaginasTopo <= 7 ? Array.from({ length: totalPaginasTopo }, (_, i) => i + 1) : paginaTopo <= 4 ? [1, 2, 3, 4, 5, "…", totalPaginasTopo] : paginaTopo >= totalPaginasTopo - 3 ? [1, "…", ...Array.from({ length: 5 }, (_, i) => totalPaginasTopo - 4 + i)] : [1, "…", paginaTopo - 1, paginaTopo, paginaTopo + 1, "…", totalPaginasTopo];
+  const esqueletoTopo = /* @__PURE__ */ jsx("span", { className: "inline-block h-2 w-8 rounded-sm bg-slate-200 animate-pulse motion-reduce:animate-none", "aria-hidden": true });
+  const nomeDoFiltro = (colKey) => columns.find((c) => c.key === colKey)?.label ?? columns.flatMap((c) => c.extraFilters ?? []).find((f) => f.key === colKey)?.label ?? colKey;
+  const itemChip = (chave, tipo, rotulo, valor, remover) => ({ chave, tipo, rotulo, valor, remover, texto: tipo === "grupo" ? `${rotulo} ${valor}` : `${rotulo}: ${valor}` });
+  const textoData = (r) => r.from && r.to ? `${r.from} → ${r.to}` : r.from ? `≥ ${r.from}` : `≤ ${r.to}`;
+  const textoNum = (r) => {
+    const temMin = r.min !== void 0 && r.min !== "";
+    const temMax = r.max !== void 0 && r.max !== "";
+    return temMin && temMax ? `${r.min} – ${r.max}` : temMin ? `≥ ${r.min}` : `≤ ${r.max}`;
+  };
+  const itensChips = [
+    ...groupByKeys.map((k) => itemChip(`g-${k}`, "grupo", L.groupedBy, columns.find((c) => c.key === k)?.label ?? k, () => removeGroup(k))),
+    ...Object.entries(columnFilters).filter(([, v]) => v && v.size > 0).map(([k, v]) => {
+      const arr = Array.from(v);
+      return itemChip(`v-${k}`, "filtro", nomeDoFiltro(k), arr.length > 2 ? L.selectedCount(arr.length) : arr.join(", "), () => clearColumnFilter(k));
+    }),
+    ...Object.entries(dateFilters).filter(([, r]) => dateFilterActive(r)).map(([k, r]) => itemChip(`d-${k}`, "filtro", nomeDoFiltro(k), textoData(r), () => clearColumnFilter(k))),
+    // Os intervalos Mín/Máx também levam chip: sem ele, um filtro de números
+    // escondia linhas sem nada à vista que o dissesse.
+    ...Object.entries(numFilters).filter(([, r]) => numFilterActive(r)).map(([k, r]) => itemChip(`n-${k}`, "filtro", nomeDoFiltro(k), textoNum(r), () => clearColumnFilter(k)))
+  ];
+  const chip = (it, focavel = true) => /* @__PURE__ */ jsxs("div", { className: "shrink-0 whitespace-nowrap h-7 flex items-center gap-1.5 pl-2.5 pr-1 rounded-md border border-slate-200 bg-white text-caption", children: [
+    it.tipo === "grupo" && /* @__PURE__ */ jsx(LayersIcon, { size: 12, className: "text-slate-400" }),
+    /* @__PURE__ */ jsx("span", { className: "text-slate-500", children: it.rotulo }),
+    /* @__PURE__ */ jsx("span", { className: "font-semibold text-slate-800", children: it.valor }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        tabIndex: focavel ? void 0 : -1,
+        "aria-label": L.removeChip(it.texto),
+        onClick: it.remover,
+        className: "h-5 w-5 flex items-center justify-center rounded text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-700",
+        children: /* @__PURE__ */ jsx(CloseIcon, { size: 10 })
+      }
+    )
+  ] }, it.chave);
+  const classeLimpar = "shrink-0 whitespace-nowrap text-caption font-medium text-slate-500 hover:text-red-600 transition-colors";
+  const chipsGrupo = isGrouped ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    itensChips.filter((i) => i.tipo === "grupo").map((i) => chip(i)),
+    /* @__PURE__ */ jsx("button", { type: "button", onClick: clearAllGroups, className: classeLimpar, children: L.clearGroups })
+  ] }) : null;
+  const chipsFiltro = totalActiveFilters > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    itensChips.filter((i) => i.tipo === "filtro").map((i) => chip(i)),
+    /* @__PURE__ */ jsx("button", { type: "button", onClick: clearAllFilters, className: classeLimpar, children: L.clearAll })
+  ] }) : null;
+  const classeMais = "shrink-0 whitespace-nowrap h-7 px-2 rounded-md border border-slate-200 bg-slate-50 text-caption font-semibold text-slate-600 hover:bg-slate-100 transition-colors";
+  const meioRef = useRef(null);
+  const medidaChipsRef = useRef(null);
+  const limparRef = useRef(null);
+  const maisRef = useRef(null);
+  const [chipsQueCabem, setChipsQueCabem] = useState(Number.POSITIVE_INFINITY);
+  const [maisAberto, setMaisAberto] = useState(false);
+  const chaveChips = itensChips.map((i) => `${i.chave}=${i.texto}`).join("|");
+  useLayoutEffect(() => {
+    const meio = meioRef.current;
+    const medida = medidaChipsRef.current;
+    if (!topo || !meio || !medida) return;
+    const calcular = () => {
+      const larguras2 = Array.from(medida.children, (c) => c.getBoundingClientRect().width);
+      const mais = larguras2.pop() ?? 0;
+      const ESPACO = 6;
+      const limpar = limparRef.current?.getBoundingClientRect().width ?? 0;
+      const disponivel = meio.clientWidth - (limpar ? limpar + ESPACO * 2 : 0);
+      let usado = 0;
+      let k = 0;
+      for (; k < larguras2.length; k++) {
+        const proximo = usado + (k ? ESPACO : 0) + larguras2[k];
+        const sobram = larguras2.length - k - 1;
+        if (proximo + (sobram > 0 ? ESPACO + mais : 0) > disponivel) break;
+        usado = proximo;
+      }
+      setChipsQueCabem((prev) => prev === k ? prev : k);
+    };
+    calcular();
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(calcular);
+    ro.observe(meio);
+    return () => ro.disconnect();
+  }, [topo, chaveChips]);
+  const chipsVisiveis = itensChips.slice(0, chipsQueCabem);
+  const chipsEscondidos = itensChips.slice(chipsQueCabem);
+  useEffect(() => {
+    if (!maisAberto) return;
+    const fora = (e) => {
+      if (!maisRef.current?.contains(e.target)) setMaisAberto(false);
+    };
+    const tecla = (e) => {
+      if (e.key === "Escape") setMaisAberto(false);
+    };
+    document.addEventListener("mousedown", fora);
+    document.addEventListener("keydown", tecla);
+    return () => {
+      document.removeEventListener("mousedown", fora);
+      document.removeEventListener("keydown", tecla);
+    };
+  }, [maisAberto]);
+  useEffect(() => {
+    if (!chipsEscondidos.length) setMaisAberto(false);
+  }, [chipsEscondidos.length]);
+  const barraTopo = topo ? /* @__PURE__ */ jsxs("div", { className: "px-4 py-2 bg-white border-b border-slate-200 flex items-center justify-between gap-3 text-caption text-slate-500 shrink-0", children: [
+    /* @__PURE__ */ jsxs("div", { className: "shrink-0 flex items-center gap-3", children: [
+      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+        topoACarregar ? esqueletoTopo : /* @__PURE__ */ jsx("span", { className: "font-semibold text-slate-800 tabular-nums", children: contagem }),
+        filtradaTopo && !topoACarregar && /* @__PURE__ */ jsxs(Fragment, { children: [
+          L.of,
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: totalTopo })
+        ] }),
+        L.rowsNoun(filtradaTopo ? totalTopo : contagem)
+      ] }),
+      topo.pageSizeOptions && topo.onPageSizeChange && /* @__PURE__ */ jsxs("span", { className: "relative inline-flex items-center", children: [
+        /* @__PURE__ */ jsx(
+          "select",
+          {
+            value: pageSize,
+            onChange: (e) => topo.onPageSizeChange(Number(e.target.value)),
+            "aria-label": L.pageSize,
+            className: "h-7 appearance-none rounded-md border border-slate-200 bg-white pl-2.5 pr-7 text-caption font-medium text-slate-600 cursor-pointer transition-colors hover:border-slate-300 focus:outline-none focus-visible:border-proef-blue focus-visible:ring-2 focus-visible:ring-proef-blue/15",
+            children: topo.pageSizeOptions.map((n) => /* @__PURE__ */ jsx("option", { value: n, children: L.perPage(n) }, n))
+          }
+        ),
+        /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12, className: "pointer-events-none absolute right-2 text-slate-400" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { ref: meioRef, className: "relative flex-1 min-w-0 flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 overflow-hidden pointer-events-none", "aria-hidden": true, children: /* @__PURE__ */ jsxs("div", { ref: medidaChipsRef, className: "invisible flex w-max gap-1.5", children: [
+        itensChips.map((i) => chip(i, false)),
+        /* @__PURE__ */ jsx("span", { className: `flex items-center ${classeMais}`, children: "+99" })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "min-w-0 flex items-center gap-1.5 overflow-hidden", children: chipsVisiveis.map((i) => chip(i)) }),
+      chipsEscondidos.length > 0 && /* @__PURE__ */ jsxs("div", { ref: maisRef, className: "relative shrink-0", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            "aria-expanded": maisAberto,
+            "aria-label": L.moreChips(chipsEscondidos.length),
+            onClick: () => setMaisAberto((a) => !a),
+            className: classeMais,
+            children: [
+              "+",
+              chipsEscondidos.length
+            ]
+          }
+        ),
+        maisAberto && /* @__PURE__ */ jsx("div", { className: "absolute left-0 top-full mt-1.5 z-40 w-max max-w-[22rem] p-2 flex flex-wrap gap-1.5 bg-white border border-slate-200 shadow-popover", children: chipsEscondidos.map((i) => chip(i)) })
+      ] }),
+      itensChips.length > 0 && /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref: limparRef,
+          type: "button",
+          onClick: () => {
+            clearAllFilters();
+            clearAllGroups();
+          },
+          className: `ml-auto ${classeLimpar}`,
+          children: L.clearAll
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "shrink-0 min-w-[220px] flex justify-end", children: topoACarregar ? /* @__PURE__ */ jsx("div", { className: "shrink-0 flex items-center gap-1", "aria-hidden": true, children: Array.from({ length: 7 }, (_, i) => /* @__PURE__ */ jsx("span", { className: "h-7 min-w-7 flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "h-2 w-3 rounded-sm bg-slate-200 animate-pulse motion-reduce:animate-none" }) }, i)) }) : totalPaginasTopo > 1 && !isGrouped && /* @__PURE__ */ jsxs("nav", { "aria-label": L.pagination, className: "shrink-0 flex items-center gap-1", children: [
+      /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+        L.page,
+        " ",
+        paginaTopo,
+        " / ",
+        totalPaginasTopo
+      ] }),
+      numerosPagina.map((p, i) => p === "…" ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "h-7 min-w-5 flex items-center justify-center text-slate-300", children: "…" }, `r${i}`) : /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => irParaPagina(p),
+          "aria-current": p === paginaTopo ? "page" : void 0,
+          className: `h-7 min-w-7 px-1.5 rounded-md text-caption font-semibold tabular-nums transition-colors ${p === paginaTopo ? "bg-primary text-white cursor-default" : "text-slate-500 hover:bg-slate-100 hover:text-slate-800"}`,
+          children: p
+        },
+        p
+      ))
+    ] }) })
+  ] }) : null;
+  return (
+    /* A coluna só existe a preencher: as barras de chips e o rodapé são irmãos
+       da caixa de scroll, e é a coluna que lhes dá topo e fundo fixos com o
+       scroll pelo meio. */
+    /* @__PURE__ */ jsxs("div", { ref: raizRef, className: `v1-reset text-control text-slate-800 ${preencheAltura ? "h-full min-h-0 flex flex-col" : ""}`, children: [
+      barraTopo,
+      !topo && isGrouped && /* @__PURE__ */ jsx("div", { className: "px-4 py-2 bg-slate-50 border-b border-slate-200 flex items-center gap-1.5 flex-wrap", children: chipsGrupo }),
+      !topo && totalActiveFilters > 0 && /* @__PURE__ */ jsx("div", { className: "px-4 py-2 bg-slate-50 border-b border-slate-200 flex items-center gap-1.5 flex-wrap", children: chipsFiltro }),
+      preencheAltura ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        !barraSobreposta && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: caixaCabecalhoRef,
+            className: `overflow-x-hidden shrink-0 ${bordasSeparadas ? classeCabecalho : ""}`,
+            style: { paddingRight: barra },
+            children: /* @__PURE__ */ jsxs("table", { className: classeTabela, style: estiloTabela, children: [
+              grupoColunas,
+              cabecalho(false)
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: `relative flex-1 min-h-0 flex flex-col ${barraSobreposta && barraHorizontalFora ? "pb-3" : ""}`, children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: refCaixaCorpo,
+              onScroll: (e) => {
+                const cab = caixaCabecalhoRef.current;
+                if (cab) cab.scrollLeft = e.currentTarget.scrollLeft;
+              },
+              className: `overflow-auto flex-1 min-h-0 ${barraSobreposta ? "scrollbar-none" : ""}`,
+              style: esbaterDireita && restaDireita ? { maskImage: mascaraDireita, WebkitMaskImage: mascaraDireita } : void 0,
+              children: /* @__PURE__ */ jsxs("div", { className: semLinhas ? "min-h-full flex flex-col" : void 0, children: [
+                barraSobreposta && /* @__PURE__ */ jsx("div", { "data-barra-cabecalho": true, className: `sticky top-0 z-20 w-max min-w-full ${bordasSeparadas ? classeCabecalho : ""}`, children: /* @__PURE__ */ jsxs("table", { className: classeTabela, style: estiloTabela, children: [
+                  grupoColunas,
+                  cabecalho(false)
+                ] }) }),
+                /* @__PURE__ */ jsxs("table", { ref: corpoRef, className: classeTabela, style: estiloTabela, children: [
+                  grupoColunas,
+                  corpo
+                ] }),
+                aviso
+              ] })
+            }
+          ),
+          barraSobreposta && /* @__PURE__ */ jsx(OverlayScrollbar, { alvo: caixaCorpo, borda: 0, canto: !barraHorizontalFora }),
+          barraSobreposta && /* @__PURE__ */ jsx(OverlayScrollbar, { alvo: caixaCorpo, eixo: "horizontal", borda: 0, canto: !barraHorizontalFora, naBorda: !barraHorizontalFora && barraNaBorda && temRodape })
+        ] }),
+        exemplares && /* @__PURE__ */ jsx(
+          "table",
+          {
+            ref: medidaRef,
+            "aria-hidden": true,
+            className: classeTabela,
+            style: { position: "fixed", left: -1e5, top: 0, visibility: "hidden", width: "max-content" },
+            children: /* @__PURE__ */ jsx("tbody", { children: Array.from({ length: exemplares.n }, (_, r) => /* @__PURE__ */ jsxs("tr", { children: [
+              selectable && /* @__PURE__ */ jsx("td", { className: "px-4 py-3 w-10", children: /* @__PURE__ */ jsx("div", { className: "w-4 h-4" }) }),
+              columns.map((col, i) => {
+                const row = exemplares.porColuna[i][r];
+                return /* @__PURE__ */ jsx("td", { className: `px-3 py-1.5 ${col.cellClassName ?? ""} ${recuoFim(i)}`, children: row !== void 0 ? col.render(row) : null }, col.key);
+              })
+            ] }, r)) })
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx("div", { ref: setCaixaSimples, className: "overflow-auto", style: { maxHeight }, children: /* @__PURE__ */ jsxs("div", { className: semLinhas ? "min-h-full flex flex-col" : void 0, children: [
+        /* @__PURE__ */ jsxs("table", { className: "w-full text-left", children: [
+          cabecalho(true),
+          corpo
+        ] }),
+        aviso
+      ] }) }),
+      temRodape && /* @__PURE__ */ jsxs("div", { className: "px-4 py-3 bg-slate-50 border-t border-slate-100 flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-micro font-black uppercase text-slate-400 tracking-wider", children: [
+          L.page,
+          " ",
+          internalPage,
+          " / ",
+          internalTotalPages
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              disabled: internalPage <= 1,
+              onClick: () => setInternalPage((p) => p - 1),
+              className: "flex items-center gap-1 px-3 py-1.5 text-micro font-black uppercase tracking-widest bg-white border border-slate-200 disabled:opacity-30 hover:enabled:border-proef-blue hover:enabled:text-proef-blue transition-colors",
+              children: [
+                /* @__PURE__ */ jsx(ChevronLeftIcon, { size: 12 }),
+                L.prev
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              disabled: internalPage >= internalTotalPages,
+              onClick: () => setInternalPage((p) => p + 1),
+              className: "flex items-center gap-1 px-3 py-1.5 text-micro font-black uppercase tracking-widest bg-white border border-slate-200 disabled:opacity-30 hover:enabled:border-proef-blue hover:enabled:text-proef-blue transition-colors",
+              children: [
+                L.next,
+                /* @__PURE__ */ jsx(ChevronRightIcon, { size: 12 })
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] })
+  );
+}
+function Table(props) {
+  return /* @__PURE__ */ jsx(TableBase, { ...props });
+}
+export {
+  TableBase,
+  Table as default
+};
+//# sourceMappingURL=Table.js.map