@vector-business-services/cristal-ds-web 0.18.0 → 0.19.0

package/dist/index.d.cts

@@ -908,6 +908,14 @@ interface TableProps<T extends DataTableValue> extends PrimeTableProps<T> {
      * Padrão: true.
      */
     columnMenu?: boolean;
+    /**
+     * Cabeçalho das colunas fixo na página: enquanto a página (ou o contêiner que rola em volta)
+     * passa pela Table, o cabeçalho fica no topo da tela, até a última linha. Soma com o
+     * `scrollHeight` do Prime, que fixa o cabeçalho dentro da Table. Padrão: false.
+     */
+    stickyHeader?: boolean;
+    /** Distância do topo da tela em que o cabeçalho para, em px (uma barra fixa da página). Padrão: 0. */
+    stickyHeaderOffset?: number;
 }
 /** A ref da Table é a do DataTable do Prime: `getElement()`, `exportCSV()`, `reset()`... */
 type TableHandle<T extends DataTableValue = DataTableValue> = DataTable<T[]>;

package/dist/index.d.ts

@@ -908,6 +908,14 @@ interface TableProps<T extends DataTableValue> extends PrimeTableProps<T> {
      * Padrão: true.
      */
     columnMenu?: boolean;
+    /**
+     * Cabeçalho das colunas fixo na página: enquanto a página (ou o contêiner que rola em volta)
+     * passa pela Table, o cabeçalho fica no topo da tela, até a última linha. Soma com o
+     * `scrollHeight` do Prime, que fixa o cabeçalho dentro da Table. Padrão: false.
+     */
+    stickyHeader?: boolean;
+    /** Distância do topo da tela em que o cabeçalho para, em px (uma barra fixa da página). Padrão: 0. */
+    stickyHeaderOffset?: number;
 }
 /** A ref da Table é a do DataTable do Prime: `getElement()`, `exportCSV()`, `reset()`... */
 type TableHandle<T extends DataTableValue = DataTableValue> = DataTable<T[]>;

package/dist/index.js

@@ -2531,6 +2531,31 @@ var Tabs = forwardRef(function Tabs2({ activeIndex, onTabChange, children, id, c
 function Column(_props) {
   return null;
 }
+function useCabecalhoNaPagina(raiz, ligado, offset) {
+  useEffect(() => {
+    const wrapper = raiz.current?.querySelector(".cr-table__wrapper");
+    if (!ligado || !wrapper) return;
+    const posicionar = () => {
+      const thead = wrapper.querySelector(".cr-table__thead");
+      if (!thead) return;
+      const limite = Math.max(0, wrapper.clientHeight - thead.offsetHeight);
+      const desce = Math.min(limite, Math.max(0, offset - wrapper.getBoundingClientRect().top));
+      thead.style.transform = desce ? `translateY(${desce}px)` : "";
+    };
+    posicionar();
+    const observador = new ResizeObserver(posicionar);
+    observador.observe(wrapper);
+    document.addEventListener("scroll", posicionar, { capture: true, passive: true });
+    window.addEventListener("resize", posicionar, { passive: true });
+    return () => {
+      observador.disconnect();
+      document.removeEventListener("scroll", posicionar, { capture: true });
+      window.removeEventListener("resize", posicionar);
+      const thead = wrapper.querySelector(".cr-table__thead");
+      if (thead) thead.style.transform = "";
+    };
+  }, [raiz, ligado, offset]);
+}
 var caixa = (label) => ({
   root: (options) => ({
     className: `cr-checkbox cr-checkbox__control${options?.props.checked ? " cr-checkbox__control--checked" : ""}`,
@@ -2627,12 +2652,16 @@ function TableBase({
   emptyMessage = "N\xE3o h\xE1 registros para mostrar.",
   loading,
   columnMenu = true,
+  stickyHeader = false,
+  stickyHeaderOffset = 0,
   ...props
 }, ref) {
   const elementos = Children.toArray(children).filter(isValidElement);
   const colunaDeSelecao = elementos.some((element) => element.props.selectionMode === "multiple");
   const template = paginatorTemplate(rowsPerPageLabel);
   const carregando = Boolean(loading);
+  const raiz = useRef(null);
+  useCabecalhoNaPagina(raiz, stickyHeader, stickyHeaderOffset);
   const paginaPropria = !props.onPage;
   const ordemPropria = !props.onSort;
   const [pagina, setPagina] = useState({
@@ -2740,7 +2769,7 @@ function TableBase({
   };
   return (
     // Contêiner da consulta de largura: a variante de 360px também muda a caixa do DataTable.
-    /* @__PURE__ */ jsxs("div", { className: "cr-table", children: [
+    /* @__PURE__ */ jsxs("div", { ref: raiz, className: "cr-table", children: [
       /* @__PURE__ */ jsx(
         DataTable,
         {