adicionado gestão de colunas

src/components/eli/EliTabela/EliTabelaCabecalho.vue

@@ -1,7 +1,17 @@
 <template>
   <div class="eli-tabela__cabecalho">
-    <!-- Caixa de busca: emite @buscar com o termo digitado -->
-    <EliTabelaCaixaDeBusca v-if="exibirBusca" :modelo="valorBusca" @buscar="emitBuscar" />
+    <!-- Grupo de busca: botão de colunas (à esquerda) + input de busca -->
+    <div v-if="exibirBusca" class="eli-tabela__busca-grupo">
+      <button
+        v-if="exibirBotaoColunas"
+        type="button"
+        class="eli-tabela__acoes-cabecalho-botao eli-tabela__acoes-cabecalho-botao--colunas"
+        @click="emitColunas"
+      >
+        Colunas
+      </button>
+      <EliTabelaCaixaDeBusca :modelo="valorBusca" @buscar="emitBuscar" />
+    </div>
 
     <!-- Ações do cabeçalho: ações globais da tabela -->
     <div v-if="temAcoesCabecalho" class="eli-tabela__acoes-cabecalho">
@@ -38,6 +48,11 @@ export default defineComponent({
       type: Boolean,
       required: true,
     },
+    exibirBotaoColunas: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     valorBusca: {
       type: String,
       required: true,
@@ -58,6 +73,9 @@ export default defineComponent({
     buscar(valor: string) {
       return typeof valor === "string";
     },
+    colunas() {
+      return true;
+    },
   },
   setup(props, { emit }) {
     const temAcoesCabecalho = computed(() => props.acoesCabecalho.length > 0);
@@ -66,7 +84,20 @@ export default defineComponent({
       emit("buscar", texto);
     }
 
-    return { temAcoesCabecalho, emitBuscar };
+    function emitColunas() {
+      emit("colunas");
+    }
+
+    return { temAcoesCabecalho, emitBuscar, emitColunas };
   },
 });
 </script>
+
+<style scoped>
+.eli-tabela__busca-grupo {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+</style>