Criando Tabelas Responsivas com Bootstrap e Laravel

Construir tabelas que se adaptam a diferentes tamanhos de tela é essencial para garantir uma excelente experiência do usuário em dispositivos móveis e desktops. O Bootstrap, um framework front-end poderoso, juntamente com o Laravel, um framework PHP robusto, tornam esse processo mais simples e eficiente.

Neste guia, vamos explorar como criar tabelas responsivas em projetos Laravel usando as classes e componentes do Bootstrap. Você aprenderá a integrar o Bootstrap ao Laravel, construir tabelas dinâmicas e aplicar estilos que garantem responsividade em vários dispositivos.

Índice

1. Introdução ao Bootstrap e Laravel
2. Configurando o Ambiente

• Instalando o Laravel
• Configurando o Bootstrap

1. Criando um Modelo e Migração
2. Construindo a Tabela no Blade

• Usando Classes do Bootstrap
• Aplicando Responsividade

1. Personalizando a Tabela

• Adicionando Estilos Condicionais
• Ícones e Botões de Ação

1. Melhorando a Responsividade com Breakpoints
2. Utilizando Componentes do Bootstrap Vue (Opcional)
3. Conclusão
4. Recursos Adicionais

Introdução ao Bootstrap e Laravel

O Laravel é um framework PHP que oferece uma base sólida para desenvolvimento web, enquanto o Bootstrap é um conjunto de ferramentas de código aberto para design de interfaces web responsivas. Combinando os dois, você pode criar aplicações web poderosas com interfaces modernas e adaptáveis.

Configurando o Ambiente

Instalando o Laravel

Certifique-se de ter o Composer instalado em sua máquina. Em seguida, crie um novo projeto Laravel:

composer create-project --prefer-dist laravel/laravel tabela-responsiva

Navegue até o diretório do projeto:

cd tabela-responsiva

Configurando o Bootstrap

O Laravel vem com o Laravel Mix, que facilita a compilação de assets. Vamos instalar o Bootstrap via NPM.

Passo 1: Instalar Dependências

Instale o Bootstrap e o resolve-url-loader:

npm install bootstrap@5.3.2 resolve-url-loader --save-dev

Passo 2: Configurar o Laravel Mix

Em webpack.mix.js, certifique-se de que o código está assim:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css', {}, [
       require('postcss-import'),
       require('autoprefixer'),
   ])
   .sourceMaps();

Passo 3: Importar o Bootstrap

Crie o arquivo resources/sass/app.scss e importe o Bootstrap:

// resources/sass/app.scss

@import "~bootstrap/scss/bootstrap";

Em resources/js/app.js, importe o Bootstrap JS:

// resources/js/app.js

import 'bootstrap';

Passo 4: Compilar os Assets

Execute o comando para compilar:

npm install
npm run dev

Criando um Modelo e Migração

Para exemplificar, vamos criar uma tabela de Produtos.

php artisan make:model Product -m

No arquivo de migração database/migrations/xxxx_xx_xx_create_products_table.php, defina as colunas:

public function up()
{
    Schema::create('products', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->decimal('price', 8, 2);
        $table->integer('quantity');
        $table->timestamps();
    });
}

Migre o banco de dados:

php artisan migrate

Opcionalmente, crie uma factory e seed para popular a tabela com dados fictícios.

Construindo a Tabela no Blade

Usando Classes do Bootstrap

Crie uma rota e um controller para listar os produtos.

Rota em routes/web.php:

Route::get('/products', [ProductController::class, 'index'])->name('products.index');

Controller em app/Http/Controllers/ProductController.php:

<?php

namespace App\Http\Controllers;

use App\Models\Product;

class ProductController extends Controller
{
    public function index()
    {
        $products = Product::all();
        return view('products.index', compact('products'));
    }
}

View em resources/views/products/index.blade.php:

@extends('layouts.app')

@section('content')
<div class="container">
    <h1>Lista de Produtos</h1>
    <table class="table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Nome</th>
                <th>Preço</th>
                <th>Quantidade</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($products as $product)
            <tr>
                <td>{{ $product->id }}</td>
                <td>{{ $product->name }}</td>
                <td>R$ {{ number_format($product->price, 2, ',', '.') }}</td>
                <td>{{ $product->quantity }}</td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>
@endsection

Aplicando Responsividade

Para tornar a tabela responsiva, utilize a classe .table-responsive do Bootstrap.

<div class="table-responsive">
    <table class="table">
        <!-- ... -->
    </table>
</div>

Isso permite que a tabela seja rolável horizontalmente em telas pequenas.

Personalizando a Tabela

Adicionando Estilos Condicionais

Você pode aplicar estilos às linhas ou células com base em condições.

Exemplo: Destacar produtos com baixa quantidade:

<tr class="{{ $product->quantity < 10 ? 'table-warning' : '' }}">
    <!-- ... -->
</tr>

Ícones e Botões de Ação

Adicione ícones e botões para ações como editar ou excluir.

<td>
    <a href="{{ route('products.edit', $product) }}" class="btn btn-sm btn-primary">
        <i class="bi bi-pencil"></i> Editar
    </a>
    <form action="{{ route('products.destroy', $product) }}" method="POST" style="display:inline;">
        @csrf
        @method('DELETE')
        <button class="btn btn-sm btn-danger" onclick="return confirm('Tem certeza?')">
            <i class="bi bi-trash"></i> Excluir
        </button>
    </form>
</td>

Nota: Certifique-se de ter os ícones Bootstrap instalados ou use fontes de ícones como Font Awesome.

Melhorando a Responsividade com Breakpoints

O Bootstrap permite controlar a responsividade em diferentes tamanhos de tela usando breakpoints.

Exemplo:

<div class="table-responsive-sm">
    <!-- Tabela visível a partir de 'sm' (576px) -->
</div>

<div class="table-responsive-md">
    <!-- Tabela visível a partir de 'md' (768px) -->
</div>

Você pode ocultar ou mostrar colunas específicas em determinados tamanhos de tela.

Exemplo: Ocultar a coluna ‘Quantidade’ em telas pequenas:

<th class="d-none d-md-table-cell">Quantidade</th>

<!-- No corpo da tabela -->
<td class="d-none d-md-table-cell">{{ $product->quantity }}</td>

Utilizando Componentes do Bootstrap Vue (Opcional)

Se você estiver usando Vue.js com Laravel, pode aproveitar componentes como b-table do Bootstrap Vue para funcionalidades avançadas.

Instalação:

npm install bootstrap-vue

Uso em um componente Vue:

<template>
  <b-table striped hover :items="products"></b-table>
</template>

<script>
export default {
  data() {
    return {
      products: [],
    };
  },
  mounted() {
    axios.get('/api/products').then(response => {
      this.products = response.data;
    });
  },
};
</script>

Nota: Certifique-se de configurar a API e as rotas adequadamente.

Conclusão

Criar tabelas responsivas com Bootstrap e Laravel é um processo direto que melhora significativamente a experiência do usuário em diferentes dispositivos. Ao utilizar as classes do Bootstrap e aplicar boas práticas de desenvolvimento, você pode construir interfaces elegantes e funcionais.

Dicas Finais:

• Teste em Vários Dispositivos: Certifique-se de que a tabela funciona bem em smartphones, tablets e desktops.
• Acessibilidade: Use elementos semânticos e atributos ARIA quando necessário.
• Performance: Para tabelas com muitos dados, considere a paginação ou carregamento assíncrono.

Recursos Adicionais

• Documentação do Bootstrap 5: getbootstrap.com/docs/5.3
• Documentação do Laravel: laravel.com/docs
• Bootstrap Icons: icons.getbootstrap.com
• Bootstrap Vue: bootstrap-vue.org