> ## Documentation Index
> Fetch the complete documentation index at: https://docs.growtify.me/llms.txt
> Use this file to discover all available pages before exploring further.

# Tabelas

> Tabelas estáticas, customizadas e todos os exemplos DataTables do pacote.

export const Exemplo = ({src, demo, titulo}) => {
  const [height, setHeight] = useState(520);
  const [theme, setTheme] = useState("dark");
  const [revision, setRevision] = useState(0);
  useEffect(() => {
    const receive = event => {
      if (event.origin !== "https://skin.growtify.me" || event.data?.type !== "growtify:example-size" || event.data?.demo !== demo) return;
      const value = Number(event.data.height);
      if (Number.isFinite(value) && value > 0 && value < 100000) setHeight(value);
    };
    window.addEventListener("message", receive);
    return () => window.removeEventListener("message", receive);
  }, [demo]);
  return <div style={{
    margin: "16px 0 40px"
  }}>
    <div style={{
    display: "flex",
    gap: 16,
    justifyContent: "flex-end",
    marginBottom: 8
  }}>
      <button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>{theme === "dark" ? "Ver Light" : "Ver Dark"}</button>
      <button onClick={() => setRevision(revision + 1)}>Repetir animação</button>
    </div>
    <iframe key={theme + revision} title={titulo} src={src + "&single=1&theme=" + theme} width="100%" height={height} style={{
    border: 0,
    display: "block",
    borderRadius: 12
  }} scrolling="no" loading="lazy" />
  </div>;
};

Os 16 exemplos desta categoria aparecem abaixo, um após o outro. Use o índice da página para ir direto ao modelo desejado.

## tables / custom

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=tables&demo=tables%2Fcustom" demo="tables/custom" titulo="tables / custom" />

## tables / datatables / ajax

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=tables&demo=tables%2Fdatatables%2Fajax" demo="tables/datatables/ajax" titulo="tables / datatables / ajax" />

## tables / datatables / basic

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=tables&demo=tables%2Fdatatables%2Fbasic" demo="tables/datatables/basic" titulo="tables / datatables / basic" />

## tables / datatables / checkbox select

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=tables&demo=tables%2Fdatatables%2Fcheckbox-select" demo="tables/datatables/checkbox-select" titulo="tables / datatables / checkbox select" />

## tables / datatables / child rows

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=tables&demo=tables%2Fdatatables%2Fchild-rows" demo="tables/datatables/child-rows" titulo="tables / datatables / child rows" />

## tables / datatables / column searching

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=tables&demo=tables%2Fdatatables%2Fcolumn-searching" demo="tables/datatables/column-searching" titulo="tables / datatables / column searching" />

## tables / datatables / columns

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=tables&demo=tables%2Fdatatables%2Fcolumns" demo="tables/datatables/columns" titulo="tables / datatables / columns" />

## tables / datatables / export data

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=tables&demo=tables%2Fdatatables%2Fexport-data" demo="tables/datatables/export-data" titulo="tables / datatables / export data" />

## tables / datatables / fixed columns

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=tables&demo=tables%2Fdatatables%2Ffixed-columns" demo="tables/datatables/fixed-columns" titulo="tables / datatables / fixed columns" />

## tables / datatables / fixed header

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=tables&demo=tables%2Fdatatables%2Ffixed-header" demo="tables/datatables/fixed-header" titulo="tables / datatables / fixed header" />

## tables / datatables / javascript

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=tables&demo=tables%2Fdatatables%2Fjavascript" demo="tables/datatables/javascript" titulo="tables / datatables / javascript" />

## tables / datatables / rendering

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=tables&demo=tables%2Fdatatables%2Frendering" demo="tables/datatables/rendering" titulo="tables / datatables / rendering" />

## tables / datatables / rows add

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=tables&demo=tables%2Fdatatables%2Frows-add" demo="tables/datatables/rows-add" titulo="tables / datatables / rows add" />

## tables / datatables / scroll

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=tables&demo=tables%2Fdatatables%2Fscroll" demo="tables/datatables/scroll" titulo="tables / datatables / scroll" />

## tables / datatables / select

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=tables&demo=tables%2Fdatatables%2Fselect" demo="tables/datatables/select" titulo="tables / datatables / select" />

## tables / static

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=tables&demo=tables%2Fstatic" demo="tables/static" titulo="tables / static" />

<Note>
  Dados demonstrativos. Exemplos de estados vazios ou de carregamento têm controles próprios para alternar o estado. As páginas originais UBold preservam seus componentes; não representam telas já implementadas no GHL.
</Note>