Hook publico

"use client";

import { CmButton, useTablePreference } from "cosmemilton-ui/client";
import { CmBadge, CmRow, CmStack, CmText } from "cosmemilton-ui/server";

const columns = ["cliente", "status", "total"];

export default function Example() {
  const { hiddenColumns, setHiddenColumns, resetToDefaults, loaded } = useTablePreference(
    "docs-table-preference",
    ["total"],
  );

  const toggleColumn = (column: string) => {
    setHiddenColumns((current) => {
      const next = new Set(current);
      if (next.has(column)) next.delete(column);
      else next.add(column);
      return next;
    });
  };

  return (
    <CmStack gap="sm">
      <CmText tone="muted">Loaded: {loaded ? "sim" : "nao"}</CmText>
      <CmRow gap="sm" wrap>
        {columns.map((column) => (
          <CmButton key={column} size="sm" variant={hiddenColumns.has(column) ? "outline" : "solid"} onClick={() => toggleColumn(column)}>
            {column}
          </CmButton>
        ))}
        <CmButton size="sm" variant="ghost" onClick={resetToDefaults}>Resetar</CmButton>
      </CmRow>
      <CmRow gap="sm" wrap>
        {[...hiddenColumns].map((column) => (
          <CmBadge key={column} tone="warning">{column} oculto</CmBadge>
        ))}
      </CmRow>
    </CmStack>
  );
}