Como utilizar o Bootstrap-vue Table
Tags: vue, bootstrap, frontend
Published: 2020-09-05 13:23:10

<h2>Introdução</h2>

<!-- wp:paragraph -->
<p>O Bootstrap-vue Table é a tabela padrão do framework e contém recursos incríveis que com certeza irão aumentar sua produtividade.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>A Table do Bootstrap-vue é otimizada para que os dados que venham por meio de uma API ou até um processamento dentro do sistema, consiga renderizar a tabela.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Outro ponto importante é que a tabela tem diversas variações e customizações, abrindo um leque gigante de oportunidades. Com certeza alguma das variações irá se adaptar ao que precisa.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Exibindo os Dados na Tabela</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>o Bootstrap-vue Table, basicamente espera somente um array de objetos para que consiga exibir os dados. Isso é interessante, visto que normalmente os retornos de APIs, vem nesse formato. Segue um exemplo de como renderizar uma tabela:</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code {"language":"xml"} -->
<pre class="wp-block-syntaxhighlighter-code">&lt;template>
  &lt;div>
    &lt;b-table :items="items">&lt;/b-table>
  &lt;/div>
&lt;/template></pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:syntaxhighlighter/code {"language":"jscript"} -->
<pre class="wp-block-syntaxhighlighter-code">&lt;script>
  export default {
    data() {
      return {
        items: [
          { age: 40, first_name: 'João', last_name: 'Pedro' },
          { age: 21, first_name: 'Maria', last_name: 'Joaquina' },
          { age: 89, first_name: 'José', last_name: 'Silva' }
        ]
      }
    }
  }
&lt;/script></pre>
<!-- /wp:syntaxhighlighter/code -->

E o resultado fica da seguinte forma:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hh74kvk30b7i0c8vnekk.jpg)

<!-- wp:heading -->
<h2>Definindo os campos a serem exibidos</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Na tabela, pode ser configurado, quais campos você deseja que apareça para o seu usuário. Por exemplo, o retorno da sua API retorna 4 campos, porém você deseja que só apareça 3. Para isso você pode configurar a prop fields, que ela irá exibir somente as colunas desejadas. No exemplo abaixo, o sistema recebe 4 informações (nome, sobrenome, idade, ativo), porém só irá exibir 3 (nome, sobrenome, idade):</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code {"language":"xml"} -->
<pre class="wp-block-syntaxhighlighter-code">&lt;template>
  &lt;div>
    &lt;b-table :items="items" :fields="fields">&lt;/b-table>
  &lt;/div>
&lt;/template></pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:syntaxhighlighter/code {"language":"jscript"} -->
<pre class="wp-block-syntaxhighlighter-code">&lt;script>
  export default {
    data() {
      return {
        fields: ['first_name', 'last_name', 'age'],
        items: [
          { age: 40, first_name: 'João', last_name: 'Pedro', isActive: true },
          { age: 21, first_name: 'Maria', last_name: 'Joaquina', isActive: true },
          { age: 89, first_name: 'José', last_name: 'Silva', isActive: true }
        ]
      }
    }
  }
&lt;/script></pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:heading -->
<h2>Ordenação dos dados</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Os dados que estão dentro das colunas podem ser ordenados facilmente. Essa configuração também fica dentro da prop fields. Anteriormente, configuramos a prop em um array, porém ela também pode ser um objeto que recebe alguns valores, e um deles é o <code>sortable</code></p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code {"language":"xml"} -->
<pre class="wp-block-syntaxhighlighter-code">&lt;template>
  &lt;div>
    &lt;b-table striped hover :items="items" :fields="fields">&lt;/b-table>
  &lt;/div>
&lt;/template></pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:syntaxhighlighter/code {"language":"jscript"} -->
<pre class="wp-block-syntaxhighlighter-code">&lt;script>
  export default {
    data() {
      return {
        fields: [
          {
            key: 'last_name',
            sortable: true
          },
          {
            key: 'first_name',
            sortable: false
          },
          {
            key: 'age',
            label: 'Idade',
            sortable: true
          }
        ],
        items: [
          { age: 40, first_name: 'João', last_name: 'Pedro', isActive: true },
          { age: 21, first_name: 'Maria', last_name: 'Joaquina', isActive: true },
          { age: 89, first_name: 'José', last_name: 'Silva', isActive: true }
        ]
      }
    }
  }
&lt;/script></pre>
<!-- /wp:syntaxhighlighter/code -->

O resultado disso, vai ser no topo da tabela ter a opção onde você pode clicar e ordenar os dados de forma crescente ou decrescente de maneira bem fácil:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5t1xy1qoytklrfmhbqe3.jpg)

<!-- wp:heading -->
<h2>Coluna personalizada</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Na maioria dos casos, precisamos personalizar colunas para colocar algumas informações. Por exemplo, nas tabelas, é comum precisarmos ter um botão editar e excluir um registro. Vamos implementar isso agora por meio do slot:</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code {"language":"xml"} -->
<pre class="wp-block-syntaxhighlighter-code">&lt;template>
  &lt;div>
    &lt;b-table :fields="fields" :items="items">
		&lt;template v-slot:cell(actions)="data">
			&lt;b-button size="sm" class="mr-2" variant="info" @click="editar(data.id)">Editar&lt;/b-button>
			&lt;b-button size="sm" variant="danger" @click="excluir(data.id)">Excluir&lt;/b-button>
		&lt;/template>
		&lt;/b-table>
  &lt;/div>
&lt;/template></pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:syntaxhighlighter/code {"language":"jscript"} -->
<pre class="wp-block-syntaxhighlighter-code">&lt;script>
export default {
  data() {
      return {
        items: [
          { id: 1, age: 40, first_name: 'João', last_name: 'Pedro', isActive: true },
          { id: 2, age: 21, first_name: 'Maria', last_name: 'Joaquina', isActive: true },
          { id: 3, age: 89, first_name: 'José', last_name: 'Silva', isActive: true }
        ],
        fields: [
          {
            key: 'last_name',
            sortable: true
          },
          {
            key: 'first_name',
            sortable: false
          },
          {
            key: 'age',
            label: 'Idade',
            sortable: true
          },
          {
            key: 'actions',
            label: 'Ações',
          }
        ],
      }
    }
}
&lt;/script></pre>
<!-- /wp:syntaxhighlighter/code -->

Para essa tabela, adicionei em cada item, um ID, que será utilizado somente para ter um campo único para cada usuário, simulando um banco de dados. Foi adicionado uma coluna personalizada com o v-slot:cell(actions)="data". No caso esse actions é o nome do key que está dentro do fields. O data contém os dados do items que foi passado para o b-table, então o data.id vai conter o id de cada cliente da tabela. Essa tabela fica assim:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/y9xkaz1hhftkufyidvfc.jpg)

<!-- wp:heading -->
<h2>Cabeçalho Fixo</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Em grandes tabelas, é necessário que o cabeçalho fique fixo, para que o seu usuário consiga saber qual a coluna independente da posição que ele está no momento. Para configurar esse cabeçalho fixo é feito de maneira bem simples, somente passar a prop <code>sticky-header</code>:</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code {"language":"xml"} -->
<pre class="wp-block-syntaxhighlighter-code">&lt;template>
  &lt;div>
    &lt;b-table sticky-header :items="items" head-variant="dark">&lt;/b-table>
  &lt;/div>
&lt;/template></pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:syntaxhighlighter/code {"language":"jscript"} -->
<pre class="wp-block-syntaxhighlighter-code">&lt;script>
export default {
  data() {
      return {
        items: [
          { id: 1, age: 40, first_name: 'João', last_name: 'Pedro', isActive: true },
          { id: 2, age: 21, first_name: 'Maria', last_name: 'Joaquina', isActive: true },
          { id: 3, age: 89, first_name: 'José', last_name: 'Silva', isActive: true },
          { id: 3, age: 89, first_name: 'José', last_name: 'Silva', isActive: true },
          { id: 3, age: 89, first_name: 'José', last_name: 'Silva', isActive: true },
          { id: 3, age: 89, first_name: 'José', last_name: 'Silva', isActive: true },
          { id: 3, age: 89, first_name: 'José', last_name: 'Silva', isActive: true },
          { id: 3, age: 89, first_name: 'José', last_name: 'Silva', isActive: true },
          { id: 3, age: 89, first_name: 'José', last_name: 'Silva', isActive: true },
          { id: 3, age: 89, first_name: 'José', last_name: 'Silva', isActive: true },
          { id: 3, age: 89, first_name: 'José', last_name: 'Silva', isActive: true },
          { id: 3, age: 89, first_name: 'José', last_name: 'Silva', isActive: true },
          { id: 3, age: 89, first_name: 'José', last_name: 'Silva', isActive: true },
        ],
      }
    }
}
&lt;/script></pre>
<!-- /wp:syntaxhighlighter/code -->

Repare que mesmo que tenha muitos dados, o topo da tabela não se move:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6179s4kv1wbsote72r7z.jpg)

<!-- wp:heading -->
<h2>Para saber mais</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Caso você queira ver um vídeo com mais informações sobre o assunto, eu gravei um e publiquei no meu canal no youtube:</p>
<!-- /wp:paragraph -->

<!-- wp:core-embed/youtube {"url":"https://youtu.be/e1XoO6Owolw","type":"video","providerNameSlug":"youtube","className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://youtu.be/e1XoO6Owolw
</div></figure>
<!-- /wp:core-embed/youtube -->

<!-- wp:heading -->
<h2>Conclusão</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>O Bootstrap-vue Table é um assunto que é muito extenso, porque tem diversas variações e configurações que podem ser feitas. Provavelmente no seu dia-a-dia você irá precisar configurar algumas dessas coisas, porque elas dão muito mais produtividade pra você e pro usuário do seu sistema. Muito obrigado por ter lido até aqui, qualquer sugestão de conteúdo, pode deixar nos comentários, valeu :)</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong><span style="text-decoration: underline;"><a href="http://programandosolucoes.dev.br/assinar-a-newsletter/" class="rank-math-link">Newsletter</a></span></strong></p>
<!-- /wp:paragraph -->