diff --git a/src/components/eli/EliTabela/celulas/EliCelulaTextoSimples.ts b/src/components/eli/EliTabela/celulas/EliCelulaTextoSimples.ts
deleted file mode 100644
index 32097a9..0000000
--- a/src/components/eli/EliTabela/celulas/EliCelulaTextoSimples.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { VNodeChild } from "vue";
-
-export type EliCelulaTextoSimples = { tipo: "texto-simples"; texto: string };
-
-export const renderEliCelulaTextoSimples = (
- celula: EliCelulaTextoSimples
-): VNodeChild => celula.texto;
diff --git a/src/components/eli/EliTabela/celulas/EliTabelaCelulaNumero.vue b/src/components/eli/EliTabela/celulas/EliTabelaCelulaNumero.vue
new file mode 100644
index 0000000..6cd0d94
--- /dev/null
+++ b/src/components/eli/EliTabela/celulas/EliTabelaCelulaNumero.vue
@@ -0,0 +1,30 @@
+
+{{ String(dados?.numero).replace('.', ',') }}
+
+
+
+
+
diff --git a/src/components/eli/EliTabela/celulas/EliTabelaCelulaTextoSimples.vue b/src/components/eli/EliTabela/celulas/EliTabelaCelulaTextoSimples.vue
new file mode 100644
index 0000000..8b2c75b
--- /dev/null
+++ b/src/components/eli/EliTabela/celulas/EliTabelaCelulaTextoSimples.vue
@@ -0,0 +1,30 @@
+
+{{ dados?.texto }}
+
+
+
+
+
diff --git a/src/components/eli/EliTabela/celulas/tiposTabelaCelulas.ts b/src/components/eli/EliTabela/celulas/tiposTabelaCelulas.ts
new file mode 100644
index 0000000..9db9fe4
--- /dev/null
+++ b/src/components/eli/EliTabela/celulas/tiposTabelaCelulas.ts
@@ -0,0 +1,15 @@
+/**
+ * Tipagem dos dados de entrada dos componentes de celulas
+ */
+
+export type tiposTabelaCelulas = {
+ "textoSimples": {
+ texto: string,
+ acao?: ()=>{}
+ }
+
+ "numero": {
+ numero: number,
+ acao?: ()=>{}
+ }
+}
\ No newline at end of file
diff --git a/src/components/eli/EliTabela/types-eli-tabela.ts b/src/components/eli/EliTabela/types-eli-tabela.ts
index 42b7dc6..600bc52 100644
--- a/src/components/eli/EliTabela/types-eli-tabela.ts
+++ b/src/components/eli/EliTabela/types-eli-tabela.ts
@@ -1,8 +1,26 @@
import type { tipoResposta } from "p-respostas";
import type { LucideIcon } from "lucide-vue-next";
-import type { VNodeChild } from "vue";
+import { tiposTabelaCelulas } from "./celulas/tiposTabelaCelulas";
+
+
+
+
+
+export type ComponenteCelulaBase =
+ readonly [T, tiposTabelaCelulas[T]]
+
+export type ComponenteCelula = {
+ [K in keyof tiposTabelaCelulas]: ComponenteCelulaBase
+}[keyof tiposTabelaCelulas]
+
+export const celulaTabela = (
+ tipo: T,
+ dados: tiposTabelaCelulas[T],
+): ComponenteCelulaBase => {
+ return [tipo, dados] as const
+}
+
-export type ComponenteCelula = VNodeChild;
export type EliAlinhamentoColuna = "esquerda" | "centro" | "direita";
diff --git a/src/playground/tabela.playground.vue b/src/playground/tabela.playground.vue
index 57c8ebb..21779d3 100644
--- a/src/playground/tabela.playground.vue
+++ b/src/playground/tabela.playground.vue
@@ -15,7 +15,7 @@
import { defineComponent, ref } from "vue";
import { codigosResposta } from "p-respostas";
import { Eye, Plus, Trash2 } from "lucide-vue-next";
-import { EliTabela } from "@/components/eli/EliTabela";
+import { celulaTabela, EliTabela } from "@/components/eli/EliTabela";
import type { EliTabelaConsulta } from "@/components/eli/EliTabela";
type Linha = {
@@ -286,23 +286,23 @@ export default defineComponent({
colunas: [
{
rotulo: "Empreendedor",
- celula: (l) => l.empreendedor,
+ celula: (l) => celulaTabela('textoSimples', { texto: l.empreendedor }),
coluna_ordem: "empreendedor",
},
{
rotulo: "Empreendimento",
- celula: (l) => l.empreendimento,
+ celula: (l) => celulaTabela('textoSimples', { texto: l.empreendimento }),
coluna_ordem: "empreendimento",
},
{
rotulo: "Documento",
- celula: (l) => l.documento,
+ celula: (l) => celulaTabela('textoSimples', { texto: l.documento }),
coluna_ordem: "documento",
alinhamento: "direita",
},
{
rotulo: "E-mail",
- celula: (l) => l.email,
+ celula: (l) => celulaTabela('textoSimples', { texto: l.email }),
coluna_ordem: "email",
truncar: true,
largura_maxima: 260,
@@ -313,7 +313,7 @@ export default defineComponent({
},
{
rotulo: "Telefone",
- celula: (l) => l.telefone,
+ celula: (l) => celulaTabela('textoSimples', { texto: l.telefone }),
coluna_ordem: "telefone",
alinhamento: "direita",
},