Como criar uma tabela com slot e colunas escondidas ?

[fcarvalhodev]

Fala pessoal, tudo bem ?

Estou desenvolvimento uma grid para um projeto pessoal meu em VueJS. Eu já usava alguns componentes mais por causa de algumas limitações eu comecei a criar minha a própria. Hoje ela funciona normalmente, mas eu gostaria de incluir duas funcionalidades nela e não faço ideia.

As funcionalidades são as seguintes:
1 - Passar via props quais colunas eu quero esconder mas ainda conseguir obter os valores delas.
2 - Criar uma coluna dinâmica no final da tabela que aceita a inclusão de botões.

Alguém sabe como posso fazer ? Algum tutorial ou guia para eu começar ? :(

Segue abaixo o estado atual da minha grid.

fiddle: https://jsfiddle.net/6bq3pdk7/50/

<template>
  <el-col class="flex gaps grid-12">
    <el-col class="col-12">
      <h2>{{title}}</h2>
      <div class="table-wrapper">
        <table class="fl-table">
          <thead>
            <tr>
              <th v-for="col in columns" :key="col.id" v-on:click="sortTable(col)">{{col}}</th>
            </tr>
          </thead>
          <tbody v-if="rows.length > 0">
            <tr v-for="row in rows" :key="row.id">
              <td v-for="col in columns" :key="col.id">{{row[col]}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </el-col>
  </el-col>
</template>
<script>
export default {
  name: 'vue-grid',
  props: ['rows', 'title'],
  computed: {
    columns: function columns() {
      if (this.rows.length == 0) {
        return []
      }
      return Object.keys(this.rows[0])
    }
  },
  sortTable(col) {
    this.rows.sort(function(a, b) {
      if (a[col] > b[col]) {
        return 1
      } else if (a[col] < b[col]) {
        return -1
      }
      return 0
    })
  },
  methods: {
    formatter(row, column) {
      return row.address
    },
    filterTag(value, row) {
      return row.tag === value
    },
    filterHandler(value, row, column) {
      const property = column['property']
      return row[property] === value
    }
  }
}
</script>

[simaodev]

Olha pra vc fazer oq pede basta fazer um for e verificar com alguma flag se tem q aparecer ou não, a questão de valores vc consegue sempre ter o conteúdo dela a qualquer momento, eu utilizo o bootstrap-vue já vai te ajudar no que precisa e não tem a necessidade de ficar recriando coisas.
componente table

[fcarvalhodev]

Olha pra vc fazer oq pede basta fazer um for e verificar com alguma flag se tem q aparecer ou não, a questão de valores vc consegue sempre ter o conteúdo dela a qualquer momento, eu utilizo o bootstrap-vue já vai te ajudar no que precisa e não tem a necessidade de ficar recriando coisas.
componente table

Pois é, acredite em mim quando eu falo que não queria reinventar a roda. Mas foi uma necessidade que surgiu aqui por causa do site que eu comecei com um template do element.io (6 meses atrás).

Ficou fora de mão usar o bootstrap por questão de UX mesmo. :/ Aí eu fiz uma grid com o el-table que tem lá no template deles, mas a deles não ficou bacana quando converti a interface pra mobile.

Aí por enquanto eu estou usando a do element mesmo para quebrar o galho, mas pouco a pouco vou ir incrementando essa até essas funcionalidades ficarem corretas. Hehe
Vou dar uma olhada na sua dica de esconder com a flag, continuo aceitando mais sugestões também, obrigado. =)

[marcelcunha]

@fcarvalllho Uso essa table que o @simaodev (Bootstrap-vue) falou e ela tem recursos semelhantes aos que você citou. Passo um objeto vindo do banco com todos os dados e outro especificando quais dados quero exibir, filtrar, ordenar etc, além de ter um slot onde adicionei uma coluna com botões de ação (visualizar, editar, apagar). Dá uma olhada no fonte talvez te dê a ideia de que precisa já que não dá pra usar o componente.

[simaodev]

Olha pra vc fazer oq pede basta fazer um for e verificar com alguma flag se tem q aparecer ou não, a questão de valores vc consegue sempre ter o conteúdo dela a qualquer momento, eu utilizo o bootstrap-vue já vai te ajudar no que precisa e não tem a necessidade de ficar recriando coisas.
componente table

Pois é, acredite em mim quando eu falo que não queria reinventar a roda. Mas foi uma necessidade que surgiu aqui por causa do site que eu comecei com um template do element.io (6 meses atrás).

Ficou fora de mão usar o bootstrap por questão de UX mesmo. :/ Aí eu fiz uma grid com o el-table que tem lá no template deles, mas a deles não ficou bacana quando converti a interface pra mobile.

Aí por enquanto eu estou usando a do element mesmo para quebrar o galho, mas pouco a pouco vou ir incrementando essa até essas funcionalidades ficarem corretas. Hehe
Vou dar uma olhada na sua dica de esconder com a flag, continuo aceitando mais sugestões também, obrigado. =)

Amanhã de manhã vou dar uma olhada no código que vc add para ver oq esta acontecendo, abraço!

[fcarvalhodev]

@marcelcunha @simaodev Fala pessoal, tudo bem ? Desculpa a demora do retorno mas consegui resolver tudo. Consegui finalmente entender o slot que é mais simples do que eu pensava ! Muito obrigado a todos. Assim que possível vou atualizar o post e fiddle.