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,11 +1,30 @@
 <template>
   <tbody class="eli-tabela__tbody">
+    <template v-for="(linha, i) in linhas" :key="`grp-${i}`">
       <tr
-      v-for="(linha, i) in linhas"
-      :key="`tr-${i}`"
         class="eli-tabela__tr"
         :class="[i % 2 === 1 ? 'eli-tabela__tr--zebra' : undefined]"
       >
+        <td v-if="temColunasInvisiveis" class="eli-tabela__td eli-tabela__td--expander" :key="`td-${i}-exp`">
+          <button
+            type="button"
+            class="eli-tabela__expander-botao"
+            :class="[linhasExpandidas?.[i] ? 'eli-tabela__expander-botao--ativo' : undefined]"
+            :aria-expanded="linhasExpandidas?.[i] ? 'true' : 'false'"
+            :aria-label="linhasExpandidas?.[i] ? 'Ocultar colunas ocultas' : 'Mostrar colunas ocultas'"
+            :title="linhasExpandidas?.[i] ? 'Ocultar detalhes' : 'Mostrar detalhes'"
+            @click.stop="alternarLinhaExpandida(i)"
+          >
+            <component
+              :is="linhasExpandidas?.[i] ? ChevronDown : ChevronRight"
+              class="eli-tabela__expander-icone"
+              :size="16"
+              :stroke-width="2"
+              aria-hidden="true"
+            />
+          </button>
+        </td>
+
         <td
           v-for="(coluna, j) in colunas"
           :key="`td-${i}-${j}`"
@@ -50,26 +69,56 @@
           </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,