# Células da EliTabela

Este diretório contém os componentes de **célula** usados pela `EliTabela`.

## Como funcionam as células

A `EliTabela` não renderiza o conteúdo direto: cada coluna retorna uma tupla tipada via helper:

```ts
import { celulaTabela } from "@/componentes/EliTabela";

celula: (linha) => celulaTabela("textoSimples", { texto: linha.nome })
```

O `tipo` seleciona qual componente de célula será usado (via registry) e o `dados` define o payload tipado.

---

## Tipos disponíveis

### 1) `textoSimples`

```ts
{ texto: string; acao?: () => void }
```

### 2) `textoTruncado`

```ts
{ texto: string; acao?: () => void }
```

### 3) `numero`

```ts
{ numero: number; prefixo?: string; sufixo?: string; acao?: () => void }
```

Exemplos:

```ts
// moeda
celula: (l) => celulaTabela("numero", { numero: l.total, prefixo: "R$" })

// unidade de medida
celula: (l) => celulaTabela("numero", { numero: l.peso, sufixo: "kg" })
```

### 4) `tags`

```ts
{
  opcoes: {
    rotulo: string;
    cor?: string;
    icone?: import("lucide-vue-next").LucideIcon;
    acao?: () => void;
  }[]
}
```

### 5) `data`

```ts
{ valor: string; formato: "data" | "data_hora" | "relativo"; acao?: () => void }
```

Exemplos:

```ts
celula: (l) => celulaTabela("data", { valor: l.criado_em, formato: "data" })
celula: (l) => celulaTabela("data", { valor: l.criado_em, formato: "data_hora" })
celula: (l) => celulaTabela("data", { valor: l.atualizado_em, formato: "relativo" })
```

---

## Onde ficam os tipos e o registry

- Tipos: `src/componentes/EliTabela/celulas/tiposTabelaCelulas.ts`
- Registry: `src/componentes/EliTabela/celulas/registryTabelaCelulas.ts`
