adicionado detalhes

dist/types/components/eli/EliTabela/EliTabela.vue.d.ts

@@ -4,6 +4,7 @@
  */
 /** Dependências do Vue (Composition API) */
 import { PropType } from "vue";
+import type { EliColuna } from "./types-eli-tabela";
 /** Tipos da configuração/contrato da tabela */
 import type { EliTabelaConsulta } from "./types-eli-tabela";
 import { type EliTabelaColunasConfig } from "./colunasStorage";
@@ -45,9 +46,13 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         visiveis: string[];
         invisiveis: string[];
     }>;
+    temColunasInvisiveis: import("vue").ComputedRef<boolean>;
+    colunasInvisiveisEfetivas: import("vue").ComputedRef<EliColuna<any>[]>;
+    linhasExpandidas: import("vue").Ref<Record<number, boolean>, Record<number, boolean>>;
     abrirModalColunas: () => void;
     fecharModalColunas: () => void;
     salvarModalColunas: (cfg: EliTabelaColunasConfig) => void;
+    alternarLinhaExpandida: (indice: number) => void;
     alternarOrdenacao: (chave?: string) => void;
     atualizarBusca: (texto: string) => void;
     irParaPagina: (pagina: number) => void;
@@ -262,13 +267,17 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     EliTabelaHead: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         colunas: {
-            type: PropType<Array<import("./types-eli-tabela").EliColuna<any>>>;
+            type: PropType<Array<EliColuna<any>>>;
             required: true;
         };
         temAcoes: {
             type: BooleanConstructor;
             required: true;
         };
+        temColunasInvisiveis: {
+            type: BooleanConstructor;
+            required: true;
+        };
         colunaOrdenacao: {
             type: PropType<string | null>;
             required: true;
@@ -287,13 +296,17 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         alternarOrdenacao(chave: string): boolean;
     }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         colunas: {
-            type: PropType<Array<import("./types-eli-tabela").EliColuna<any>>>;
+            type: PropType<Array<EliColuna<any>>>;
             required: true;
         };
         temAcoes: {
             type: BooleanConstructor;
             required: true;
         };
+        temColunasInvisiveis: {
+            type: BooleanConstructor;
+            required: true;
+        };
         colunaOrdenacao: {
             type: PropType<string | null>;
             required: true;
@@ -310,7 +323,19 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     EliTabelaBody: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         colunas: {
-            type: PropType<Array<import("./types-eli-tabela").EliColuna<any>>>;
+            type: PropType<Array<EliColuna<any>>>;
+            required: true;
+        };
+        colunasInvisiveis: {
+            type: PropType<Array<EliColuna<any>>>;
+            required: true;
+        };
+        temColunasInvisiveis: {
+            type: BooleanConstructor;
+            required: true;
+        };
+        linhasExpandidas: {
+            type: PropType<Record<number, boolean>>;
             required: true;
         };
         linhas: {
@@ -333,13 +358,31 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
             type: PropType<(indice: number, evento: MouseEvent) => void>;
             required: true;
         };
+        alternarLinhaExpandida: {
+            type: PropType<(indice: number) => void>;
+            required: true;
+        };
     }>, {
+        ChevronRight: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
+        ChevronDown: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
         obterClasseAlinhamento: (alinhamento?: string) => "eli-tabela__celula--direita" | "eli-tabela__celula--centro" | "eli-tabela__celula--esquerda";
         obterMaxWidth: (largura?: number | string) => string | undefined;
         obterTooltipCelula: (celula: unknown) => any;
     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         colunas: {
-            type: PropType<Array<import("./types-eli-tabela").EliColuna<any>>>;
+            type: PropType<Array<EliColuna<any>>>;
+            required: true;
+        };
+        colunasInvisiveis: {
+            type: PropType<Array<EliColuna<any>>>;
+            required: true;
+        };
+        temColunasInvisiveis: {
+            type: BooleanConstructor;
+            required: true;
+        };
+        linhasExpandidas: {
+            type: PropType<Record<number, boolean>>;
             required: true;
         };
         linhas: {
@@ -362,6 +405,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
             type: PropType<(indice: number, evento: MouseEvent) => void>;
             required: true;
         };
+        alternarLinhaExpandida: {
+            type: PropType<(indice: number) => void>;
+            required: true;
+        };
     }>> & Readonly<{}>, {}, {}, {
         EliTabelaCelula: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
             celula: {
@@ -383,7 +430,49 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
                 required: true;
             };
         }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+        EliTabelaDetalhesLinha: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+            linha: {
+                type: PropType<unknown>;
+                required: true;
+            };
+            colunasInvisiveis: {
+                type: PropType<Array<EliColuna<any>>>;
+                required: true;
+            };
+        }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+            linha: {
+                type: PropType<unknown>;
+                required: true;
+            };
+            colunasInvisiveis: {
+                type: PropType<Array<EliColuna<any>>>;
+                required: true;
+            };
+        }>> & Readonly<{}>, {}, {}, {
+            EliTabelaCelula: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+                celula: {
+                    type: PropType<import("./types-eli-tabela").ComponenteCelula>;
+                    required: true;
+                };
+            }>, {
+                Componente: import("vue").ComputedRef<import("vue").Component>;
+                dadosParaComponente: import("vue").ComputedRef<{
+                    texto: string;
+                    acao?: () => void;
+                } | {
+                    numero: number;
+                    acao?: () => void;
+                }>;
+            }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+                celula: {
+                    type: PropType<import("./types-eli-tabela").ComponenteCelula>;
+                    required: true;
+                };
+            }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+        }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
         MoreVertical: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
+        ChevronRight: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
+        ChevronDown: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
     }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     EliTabelaMenuAcoes: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         menuAberto: {

dist/types/components/eli/EliTabela/EliTabelaBody.vue.d.ts

@@ -5,6 +5,18 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: PropType<Array<EliColuna<any>>>;
         required: true;
     };
+    colunasInvisiveis: {
+        type: PropType<Array<EliColuna<any>>>;
+        required: true;
+    };
+    temColunasInvisiveis: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    linhasExpandidas: {
+        type: PropType<Record<number, boolean>>;
+        required: true;
+    };
     linhas: {
         type: PropType<Array<unknown>>;
         required: true;
@@ -25,7 +37,13 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: PropType<(indice: number, evento: MouseEvent) => void>;
         required: true;
     };
+    alternarLinhaExpandida: {
+        type: PropType<(indice: number) => void>;
+        required: true;
+    };
 }>, {
+    ChevronRight: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
+    ChevronDown: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
     obterClasseAlinhamento: (alinhamento?: string) => "eli-tabela__celula--direita" | "eli-tabela__celula--centro" | "eli-tabela__celula--esquerda";
     obterMaxWidth: (largura?: number | string) => string | undefined;
     obterTooltipCelula: (celula: unknown) => any;
@@ -34,6 +52,18 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: PropType<Array<EliColuna<any>>>;
         required: true;
     };
+    colunasInvisiveis: {
+        type: PropType<Array<EliColuna<any>>>;
+        required: true;
+    };
+    temColunasInvisiveis: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    linhasExpandidas: {
+        type: PropType<Record<number, boolean>>;
+        required: true;
+    };
     linhas: {
         type: PropType<Array<unknown>>;
         required: true;
@@ -54,6 +84,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: PropType<(indice: number, evento: MouseEvent) => void>;
         required: true;
     };
+    alternarLinhaExpandida: {
+        type: PropType<(indice: number) => void>;
+        required: true;
+    };
 }>> & Readonly<{}>, {}, {}, {
     EliTabelaCelula: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         celula: {
@@ -75,7 +109,49 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
             required: true;
         };
     }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    EliTabelaDetalhesLinha: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        linha: {
+            type: PropType<unknown>;
+            required: true;
+        };
+        colunasInvisiveis: {
+            type: PropType<Array<EliColuna<any>>>;
+            required: true;
+        };
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        linha: {
+            type: PropType<unknown>;
+            required: true;
+        };
+        colunasInvisiveis: {
+            type: PropType<Array<EliColuna<any>>>;
+            required: true;
+        };
+    }>> & Readonly<{}>, {}, {}, {
+        EliTabelaCelula: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+            celula: {
+                type: PropType<import("./types-eli-tabela").ComponenteCelula>;
+                required: true;
+            };
+        }>, {
+            Componente: import("vue").ComputedRef<import("vue").Component>;
+            dadosParaComponente: import("vue").ComputedRef<{
+                texto: string;
+                acao?: () => void;
+            } | {
+                numero: number;
+                acao?: () => void;
+            }>;
+        }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+            celula: {
+                type: PropType<import("./types-eli-tabela").ComponenteCelula>;
+                required: true;
+            };
+        }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     MoreVertical: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
+    ChevronRight: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
+    ChevronDown: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
 }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

dist/types/components/eli/EliTabela/EliTabelaDetalhesLinha.vue.d.ts

@@ -0,0 +1,44 @@
+import { PropType } from "vue";
+import type { EliColuna } from "./types-eli-tabela";
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    linha: {
+        type: PropType<unknown>;
+        required: true;
+    };
+    colunasInvisiveis: {
+        type: PropType<Array<EliColuna<any>>>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    linha: {
+        type: PropType<unknown>;
+        required: true;
+    };
+    colunasInvisiveis: {
+        type: PropType<Array<EliColuna<any>>>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {
+    EliTabelaCelula: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        celula: {
+            type: PropType<import("./types-eli-tabela").ComponenteCelula>;
+            required: true;
+        };
+    }>, {
+        Componente: import("vue").ComputedRef<import("vue").Component>;
+        dadosParaComponente: import("vue").ComputedRef<{
+            texto: string;
+            acao?: () => void;
+        } | {
+            numero: number;
+            acao?: () => void;
+        }>;
+    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        celula: {
+            type: PropType<import("./types-eli-tabela").ComponenteCelula>;
+            required: true;
+        };
+    }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

dist/types/components/eli/EliTabela/EliTabelaHead.vue.d.ts

@@ -9,6 +9,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: BooleanConstructor;
         required: true;
     };
+    temColunasInvisiveis: {
+        type: BooleanConstructor;
+        required: true;
+    };
     colunaOrdenacao: {
         type: PropType<string | null>;
         required: true;
@@ -34,6 +38,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: BooleanConstructor;
         required: true;
     };
+    temColunasInvisiveis: {
+        type: BooleanConstructor;
+        required: true;
+    };
     colunaOrdenacao: {
         type: PropType<string | null>;
         required: true;

src/components/eli/EliTabela/EliTabela.css

@@ -311,3 +311,81 @@
   flex: 1;
   text-align: left;
 }
+
+/* =========================
+ * Expander (colunas invisíveis)
+ * ========================= */
+
+.eli-tabela__th--expander,
+.eli-tabela__td--expander {
+  width: 42px;
+  padding: 6px 8px;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.eli-tabela__expander-botao {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 9999px;
+  border: none;
+  background: transparent;
+  color: rgba(15, 23, 42, 0.72);
+  cursor: pointer;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.eli-tabela__expander-botao:hover,
+.eli-tabela__expander-botao:focus-visible {
+  background-color: rgba(15, 23, 42, 0.08);
+  color: rgba(15, 23, 42, 0.95);
+}
+
+.eli-tabela__expander-botao:focus-visible {
+  outline: 2px solid rgba(37, 99, 235, 0.45);
+  outline-offset: 2px;
+}
+
+.eli-tabela__expander-botao--ativo {
+  background-color: rgba(15, 23, 42, 0.06);
+  color: rgba(15, 23, 42, 0.95);
+}
+
+.eli-tabela__td--detalhes {
+  padding: 12px;
+}
+
+.eli-tabela__tr--detalhes .eli-tabela__td {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+.eli-tabela__detalhes {
+  display: grid;
+  gap: 10px;
+  padding-left: 4px;
+}
+
+.eli-tabela__detalhe {
+  display: grid;
+  grid-template-columns: 180px 1fr;
+  gap: 10px;
+  align-items: start;
+}
+
+.eli-tabela__detalhe-rotulo {
+  font-weight: 600;
+  color: rgba(15, 23, 42, 0.85);
+}
+
+.eli-tabela__detalhe-valor {
+  min-width: 0;
+}
+
+@media (max-width: 720px) {
+  .eli-tabela__detalhe {
+    grid-template-columns: 1fr;
+  }
+}

src/components/eli/EliTabela/EliTabela.vue

@@ -31,6 +31,7 @@
         <EliTabelaHead
           :colunas="colunasEfetivas"
           :temAcoes="temAcoes"
+          :temColunasInvisiveis="temColunasInvisiveis"
           :colunaOrdenacao="colunaOrdenacao"
           :direcaoOrdenacao="direcaoOrdenacao"
           @alternar-ordenacao="alternarOrdenacao"
@@ -38,11 +39,15 @@
 
         <EliTabelaBody
           :colunas="colunasEfetivas"
+          :colunasInvisiveis="colunasInvisiveisEfetivas"
+          :temColunasInvisiveis="temColunasInvisiveis"
+          :linhasExpandidas="linhasExpandidas"
           :linhas="linhas"
           :temAcoes="temAcoes"
           :menuAberto="menuAberto"
           :possuiAcoes="possuiAcoes"
           :toggleMenu="toggleMenu"
+          :alternarLinhaExpandida="alternarLinhaExpandida"
         />
       </table>
 
@@ -93,6 +98,7 @@ import EliTabelaBody from "./EliTabelaBody.vue";
 import EliTabelaMenuAcoes from "./EliTabelaMenuAcoes.vue";
 import EliTabelaPaginacao from "./EliTabelaPaginacao.vue";
 import EliTabelaModalColunas from "./EliTabelaModalColunas.vue";
+import type { EliColuna } from "./types-eli-tabela";
 /** Tipos da configuração/contrato da tabela */
 import type { EliTabelaConsulta } from "./types-eli-tabela";
 import {
@@ -158,8 +164,37 @@ export default defineComponent({
       carregarConfigColunas(props.tabela.nome)
     );
 
+    /** Linhas expandidas (para exibir colunas invisíveis) */
+    const linhasExpandidas = ref<Record<number, boolean>>({});
+
     const rotulosColunas = computed(() => props.tabela.colunas.map((c) => c.rotulo));
 
+    const colunasInvisiveisEfetivas = computed(() => {
+      const colunas = props.tabela.colunas as Array<EliColuna<any>>;
+      const invisiveisSet = new Set(configColunas.value.invisiveis ?? []);
+      const base = colunas.filter((c) => invisiveisSet.has(c.rotulo));
+
+      // ordenação: usa a lista salva de invisíveis (se existir), senão segue ordem original
+      const ordemSalva = configColunas.value.invisiveis ?? [];
+      const mapa = new Map<string, EliColuna<any>>();
+      for (const c of base) {
+        if (!mapa.has(c.rotulo)) mapa.set(c.rotulo, c);
+      }
+
+      const ordenadas: Array<EliColuna<any>> = [];
+      for (const r of ordemSalva) {
+        const c = mapa.get(r);
+        if (c) ordenadas.push(c);
+      }
+      for (const c of base) {
+        if (!ordenadas.includes(c)) ordenadas.push(c);
+      }
+
+      return ordenadas;
+    });
+
+    const temColunasInvisiveis = computed(() => colunasInvisiveisEfetivas.value.length > 0);
+
     const colunasEfetivas = computed(() => {
       const colunas = props.tabela.colunas;
       const todosRotulos = rotulosColunas.value;
@@ -202,6 +237,17 @@ export default defineComponent({
       configColunas.value = cfg;
       salvarConfigColunas(props.tabela.nome, cfg);
       modalColunasAberto.value = false;
+
+      // ao mudar colunas, fecha detalhes expandidos
+      linhasExpandidas.value = {};
+    }
+
+    function alternarLinhaExpandida(indice: number) {
+      const atual = Boolean(linhasExpandidas.value[indice]);
+      linhasExpandidas.value = {
+        ...linhasExpandidas.value,
+        [indice]: !atual,
+      };
     }
 
     /** Registros por consulta (normaliza para inteiro positivo) */
@@ -383,6 +429,7 @@ export default defineComponent({
       erro.value = null;
       acoesVisiveis.value = [];
       menuAberto.value = null;
+      linhasExpandidas.value = {};
 
       const limite = Math.max(1, registrosPorConsulta.value);
       const offset = (paginaAtual.value - 1) * limite;
@@ -523,6 +570,7 @@ export default defineComponent({
         valorBusca.value = "";
         modalColunasAberto.value = false;
         configColunas.value = carregarConfigColunas(props.tabela.nome);
+        linhasExpandidas.value = {};
         if (paginaAtual.value !== 1) {
           paginaAtual.value = 1;
         } else {
@@ -546,6 +594,7 @@ export default defineComponent({
     /** Watch: mudança nas linhas fecha o menu aberto */
     watch(linhas, () => {
       menuAberto.value = null;
+      linhasExpandidas.value = {};
     });
 
     /** Exposição para o template (state, computed, helpers e actions) */
@@ -574,10 +623,16 @@ export default defineComponent({
       modalColunasAberto,
       configColunas,
 
+      temColunasInvisiveis,
+      colunasInvisiveisEfetivas,
+      linhasExpandidas,
+
       abrirModalColunas,
       fecharModalColunas,
       salvarModalColunas,
 
+      alternarLinhaExpandida,
+
       // actions
       alternarOrdenacao,
       atualizarBusca,

src/components/eli/EliTabela/EliTabelaBody.vue

@@ -1,75 +1,124 @@
 <template>
   <tbody class="eli-tabela__tbody">
-    <tr
+    <template v-for="(linha, i) in linhas" :key="`grp-${i}`">
-      v-for="(linha, i) in linhas"
+      <tr
-      :key="`tr-${i}`"
+        class="eli-tabela__tr"
-      class="eli-tabela__tr"
+        :class="[i % 2 === 1 ? 'eli-tabela__tr--zebra' : undefined]"
-      :class="[i % 2 === 1 ? 'eli-tabela__tr--zebra' : undefined]"
-    >
-      <td
-        v-for="(coluna, j) in colunas"
-        :key="`td-${i}-${j}`"
-        class="eli-tabela__td"
-        :class="[
-          coluna.acao ? 'eli-tabela__td--clicavel' : undefined,
-          obterClasseAlinhamento(coluna.alinhamento),
-        ]"
-        @click="coluna.acao ? () => coluna.acao?.() : undefined"
       >
-        <span
+        <td v-if="temColunasInvisiveis" class="eli-tabela__td eli-tabela__td--expander" :key="`td-${i}-exp`">
-          v-if="Boolean(coluna.truncar)"
-          class="eli-tabela__celula-conteudo"
-          :style="coluna.largura_maxima ? { maxWidth: obterMaxWidth(coluna.largura_maxima) } : undefined"
-          :title="obterTooltipCelula(coluna.celula(linha as never))"
-        >
-          <EliTabelaCelula :celula="(coluna.celula(linha as never) as never)" />
-        </span>
-
-        <EliTabelaCelula v-else :celula="(coluna.celula(linha as never) as never)" />
-      </td>
-
-      <td v-if="temAcoes" class="eli-tabela__td eli-tabela__td--acoes" :key="`td-${i}-acoes`">
-        <div
-          class="eli-tabela__acoes-container"
-          :class="[menuAberto === i ? 'eli-tabela__acoes-container--aberto' : undefined]"
-        >
           <button
-            class="eli-tabela__acoes-toggle"
             type="button"
-            :id="`eli-tabela-acoes-toggle-${i}`"
+            class="eli-tabela__expander-botao"
-            :disabled="!possuiAcoes(i)"
+            :class="[linhasExpandidas?.[i] ? 'eli-tabela__expander-botao--ativo' : undefined]"
-            :aria-haspopup="'menu'"
+            :aria-expanded="linhasExpandidas?.[i] ? 'true' : 'false'"
-            :aria-expanded="menuAberto === i ? 'true' : 'false'"
+            :aria-label="linhasExpandidas?.[i] ? 'Ocultar colunas ocultas' : 'Mostrar colunas ocultas'"
-            :aria-controls="possuiAcoes(i) ? `eli-tabela-acoes-menu-${i}` : undefined"
+            :title="linhasExpandidas?.[i] ? 'Ocultar detalhes' : 'Mostrar detalhes'"
-            :aria-label="possuiAcoes(i) ? 'Ações da linha' : 'Nenhuma ação disponível'"
+            @click.stop="alternarLinhaExpandida(i)"
-            :title="possuiAcoes(i) ? 'Ações' : 'Nenhuma ação disponível'"
-            @click.stop="toggleMenu(i, $event)"
           >
-            <MoreVertical class="eli-tabela__acoes-toggle-icone" :size="18" :stroke-width="2" />
+            <component
+              :is="linhasExpandidas?.[i] ? ChevronDown : ChevronRight"
+              class="eli-tabela__expander-icone"
+              :size="16"
+              :stroke-width="2"
+              aria-hidden="true"
+            />
           </button>
-        </div>
+        </td>
-      </td>
+
-    </tr>
+        <td
+          v-for="(coluna, j) in colunas"
+          :key="`td-${i}-${j}`"
+          class="eli-tabela__td"
+          :class="[
+            coluna.acao ? 'eli-tabela__td--clicavel' : undefined,
+            obterClasseAlinhamento(coluna.alinhamento),
+          ]"
+          @click="coluna.acao ? () => coluna.acao?.() : undefined"
+        >
+          <span
+            v-if="Boolean(coluna.truncar)"
+            class="eli-tabela__celula-conteudo"
+            :style="coluna.largura_maxima ? { maxWidth: obterMaxWidth(coluna.largura_maxima) } : undefined"
+            :title="obterTooltipCelula(coluna.celula(linha as never))"
+          >
+            <EliTabelaCelula :celula="(coluna.celula(linha as never) as never)" />
+          </span>
+
+          <EliTabelaCelula v-else :celula="(coluna.celula(linha as never) as never)" />
+        </td>
+
+        <td v-if="temAcoes" class="eli-tabela__td eli-tabela__td--acoes" :key="`td-${i}-acoes`">
+          <div
+            class="eli-tabela__acoes-container"
+            :class="[menuAberto === i ? 'eli-tabela__acoes-container--aberto' : undefined]"
+          >
+            <button
+              class="eli-tabela__acoes-toggle"
+              type="button"
+              :id="`eli-tabela-acoes-toggle-${i}`"
+              :disabled="!possuiAcoes(i)"
+              :aria-haspopup="'menu'"
+              :aria-expanded="menuAberto === i ? 'true' : 'false'"
+              :aria-controls="possuiAcoes(i) ? `eli-tabela-acoes-menu-${i}` : undefined"
+              :aria-label="possuiAcoes(i) ? 'Ações da linha' : 'Nenhuma ação disponível'"
+              :title="possuiAcoes(i) ? 'Ações' : 'Nenhuma ação disponível'"
+              @click.stop="toggleMenu(i, $event)"
+            >
+              <MoreVertical class="eli-tabela__acoes-toggle-icone" :size="18" :stroke-width="2" />
+            </button>
+          </div>
+        </td>
+      </tr>
+
+      <tr
+        v-if="temColunasInvisiveis && Boolean(linhasExpandidas?.[i])"
+        class="eli-tabela__tr eli-tabela__tr--detalhes"
+        :class="[i % 2 === 1 ? 'eli-tabela__tr--zebra' : undefined]"
+      >
+        <td
+          class="eli-tabela__td eli-tabela__td--detalhes"
+          :colspan="(temColunasInvisiveis ? 1 : 0) + colunas.length + (temAcoes ? 1 : 0)"
+        >
+          <EliTabelaDetalhesLinha :linha="linha" :colunasInvisiveis="colunasInvisiveis" />
+        </td>
+      </tr>
+    </template>
   </tbody>
 </template>
 
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
-import { MoreVertical } from "lucide-vue-next";
+import { ChevronDown, ChevronRight, MoreVertical } from "lucide-vue-next";
 import EliTabelaCelula from "./celulas/EliTabelaCelula.vue";
+import EliTabelaDetalhesLinha from "./EliTabelaDetalhesLinha.vue";
 import type { EliColuna } from "./types-eli-tabela";
 
 export default defineComponent({
   name: "EliTabelaBody",
   components: {
     EliTabelaCelula,
+    EliTabelaDetalhesLinha,
     MoreVertical,
+    ChevronRight,
+    ChevronDown,
   },
   props: {
     colunas: {
       type: Array as PropType<Array<EliColuna<any>>>,
       required: true,
     },
+    colunasInvisiveis: {
+      type: Array as PropType<Array<EliColuna<any>>>,
+      required: true,
+    },
+    temColunasInvisiveis: {
+      type: Boolean,
+      required: true,
+    },
+    linhasExpandidas: {
+      type: Object as PropType<Record<number, boolean>>,
+      required: true,
+    },
     linhas: {
       type: Array as PropType<Array<unknown>>,
       required: true,
@@ -90,6 +139,10 @@ export default defineComponent({
       type: Function as PropType<(indice: number, evento: MouseEvent) => void>,
       required: true,
     },
+    alternarLinhaExpandida: {
+      type: Function as PropType<(indice: number) => void>,
+      required: true,
+    },
   },
   setup() {
     function obterClasseAlinhamento(alinhamento?: string) {
@@ -121,6 +174,8 @@ export default defineComponent({
     }
 
     return {
+      ChevronRight,
+      ChevronDown,
       obterClasseAlinhamento,
       obterMaxWidth,
       obterTooltipCelula,

src/components/eli/EliTabela/EliTabelaDetalhesLinha.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="eli-tabela__detalhes">
+    <div v-for="(coluna, idx) in colunasInvisiveis" :key="`det-${idx}-${coluna.rotulo}`" class="eli-tabela__detalhe">
+      <div class="eli-tabela__detalhe-rotulo">{{ coluna.rotulo }}</div>
+      <div class="eli-tabela__detalhe-valor">
+        <EliTabelaCelula :celula="(coluna.celula(linha as never) as never)" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue";
+import EliTabelaCelula from "./celulas/EliTabelaCelula.vue";
+import type { EliColuna } from "./types-eli-tabela";
+
+export default defineComponent({
+  name: "EliTabelaDetalhesLinha",
+  components: { EliTabelaCelula },
+  props: {
+    linha: {
+      type: null as unknown as PropType<unknown>,
+      required: true,
+    },
+    colunasInvisiveis: {
+      type: Array as PropType<Array<EliColuna<any>>>,
+      required: true,
+    },
+  },
+});
+</script>
+
+<style scoped>
+/* estilos base ficam no EliTabela.css (global do componente) */
+</style>

src/components/eli/EliTabela/EliTabelaHead.vue

@@ -1,6 +1,8 @@
 <template>
   <thead class="eli-tabela__thead">
     <tr class="eli-tabela__tr eli-tabela__tr--header">
+      <th v-if="temColunasInvisiveis" class="eli-tabela__th eli-tabela__th--expander" scope="col"></th>
+
       <th
         v-for="(coluna, idx) in colunas"
         :key="`th-${idx}`"
@@ -66,6 +68,10 @@ export default defineComponent({
       type: Boolean,
       required: true,
     },
+    temColunasInvisiveis: {
+      type: Boolean,
+      required: true,
+    },
     colunaOrdenacao: {
       type: String as PropType<string | null>,
       required: true,