Forem: Miquéias Telles

Construindo uma Tabela com Shadcn, Tanstack Table e Virtualização e Infinite Scroll.

Miquéias Telles — Sat, 17 Jan 2026 19:26:42 +0000

Por que essa combinação é poderosa?

A integração de Shadcn UI, Tanstack Table e Tanstack Virtual (com o useWindowVirtualizer) oferece uma abordagem robusta e eficiente para o desenvolvimento de tabelas em aplicações web:

Shadcn UI: Fornece componentes de UI de alta qualidade que podem ser facilmente personalizados e integrados ao seu projeto, acelerando o desenvolvimento e assegurando uma experiência visual coesa e acessível.
Tanstack Table: Como uma biblioteca headless, foca na lógica da tabela (ordenação, filtragem, paginação), sem impor estilos visuais. Isso te dá total flexibilidade para controlar a apresentação da sua tabela.
Tanstack Virtual (com useWindowVirtualizer): Implementa a virtualização de linhas para otimizar o desempenho em listas extensas. O useWindowVirtualizer foca na rolagem da janela do navegador, renderizando apenas os elementos visíveis, resultando em uma rolagem fluida e uso otimizado de recursos.

Diferença entre `useVirtualizer` e `useWindowVirtualizer`

Compreender a diferença entre esses dois hooks é fundamental para escolher a ferramenta certa para seu caso de uso:

useVirtualizer: É utilizado quando a rolagem da lista ocorre dentro de um elemento HTML específico (como um div com overflow-auto e uma altura definida). Ele monitora a rolagem desse contêiner isolado.
useWindowVirtualizer: Monitora a rolagem da janela do navegador (window) inteira. É ideal para layouts onde a tabela ocupa a maior parte da tela e o usuário rola a página para baixo, não um contêiner interno da tabela.

Neste artigo, focaremos no useWindowVirtualizer para demonstrar uma tabela que rola com a página.

Pré-requisitos

Para seguir este tutorial, você precisa de um projeto React (Next.js, Vite, etc.) configurado. Certifique-se também de que o Shadcn UI já está inicializado em seu projeto. Caso contrário, siga as instruções no site oficial do Shadcn UI.

Instalação das dependências

Primeiro, instale as bibliotecas necessárias:

npm install @tanstack/react-table @tanstack/react-virtual
npx shadcn-ui add table

Estrutura dos Dados e Simulação de API

Vamos simular uma API que retorna dados paginados. Para este exemplo, teremos um array de objetos com id, firstName, lastName e email. O scroll infinito será gerenciado buscando mais dados à medida que o usuário rola a página.

// types.ts ou defina diretamente no seu arquivo de componente
export type Person = {
  id: number;
  firstName: string;
  lastName: string;
  email: string;
};

// Função para simular a busca de dados de uma API
export const fetchData = async (page: number, pageSize: number): Promise<{ data: Person[]; total: number }> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      const allData: Person[] = Array.from({ length: 5000 }, (_, i) => ({
        id: i + 1,
        firstName: `Nome${i + 1}`,
        lastName: `Sobrenome${i + 1}`,
        email: `email${i + 1}@example.com`,
      }));

      const start = page * pageSize;
      const end = start + pageSize;
      const data = allData.slice(start, end);

      resolve({ data, total: allData.length });
    }, 500); // Simula um atraso de rede
  });
};

Criando a Tabela com Scroll Infinito

Agora, vamos criar o componente da tabela. Abaixo está o código completo.

// components/InfiniteScrollTableWindow.tsx
import React, { useState, useEffect, useMemo, useRef, useCallback } from 'react';
import {
  ColumnDef,
  flexRender,
  getCoreRowModel,
  useReactTable,
} from '@tanstack/react-table';
import { useWindowVirtualizer } from '@tanstack/react-virtual';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';

import { fetchData, Person } from '@/types';

interface InfiniteScrollTableProps {
  pageSize?: number;
}

const InfiniteScrollTableWindow: React.FC<InfiniteScrollTableProps> = ({ pageSize = 50 }) => {
  const [data, setData] = useState<Person[]>([]);
  const [totalRows, setTotalRows] = useState(0);
  const [page, setPage] = useState(0);
  const [isLoading, setIsLoading] = useState(false);

  const tableContainerRef = useRef<HTMLTableElement>(null);

  const fetchMoreData = useCallback(async () => {
    if (isLoading || (data.length >= totalRows && totalRows !== 0)) return;

    setIsLoading(true);
    try {
      const result = await fetchData(page, pageSize);
      setData((prevData) => [...prevData, ...result.data]);
      setTotalRows(result.total);
      setPage((prevPage) => prevPage + 1);
    } catch (error) {
      console.error('Erro ao buscar dados:', error);
    } finally {
      setIsLoading(false);
    }
  }, [page, pageSize, isLoading, data.length, totalRows]);

  useEffect(() => {
    fetchMoreData();
  }, []);

  const columns = useMemo<ColumnDef<Person>[]>(
    () => [
      {
        accessorKey: 'id',
        header: 'ID',
        size: 50,
      },
      {
        accessorKey: 'firstName',
        header: 'Primeiro Nome',
        size: 150,
      },
      {
        accessorKey: 'lastName',
        header: 'Sobrenome',
        size: 150,
      },
      {
        accessorKey: 'email',
        header: 'Email',
        size: 250,
      },
    ],
    []
  );

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  const { rows } = table.getRowModel();

  const rowVirtualizer = useWindowVirtualizer({
    count: rows.length,
    estimateSize: () => 35,
    overscan: 5,
  });

  useEffect(() => {
    const [lastItem] = [...rowVirtualizer.getVirtualItems()].reverse();
    if (!lastItem) {
      return;
    }

    if (
      lastItem.index >= rows.length - 1 &&
      !isLoading &&
      data.length < totalRows
    ) {
      fetchMoreData();
    }
  }, [rowVirtualizer.getVirtualItems(), rows.length, isLoading, data.length, totalRows, fetchMoreData]);


  return (
    <div className="flex flex-col items-center">
      <h1 className="text-2xl font-bold mb-4 mt-8">Tabela de Rolagem Infinita</h1>
      <Table ref={tableContainerRef} style={{ width: '80%', minWidth: '700px' }} className="border rounded-md shadow-lg">
        <TableHeader className="sticky top-0 z-10 bg-white">
          {table.getHeaderGroups().map((headerGroup) => (
            <TableRow key={headerGroup.id}>
              {headerGroup.headers.map((header) => (
                <TableHead key={header.id} style={{ width: header.getSize() }}>
                  {header.isPlaceholder
                    ? null
                    : flexRender(header.column.columnDef.header, header.getContext())}
                </TableHead>
              ))}
            </TableRow>
          ))}
        </TableHeader>
        <TableBody style={{ height: `${rowVirtualizer.getTotalSize()}px`, position: 'relative' }}>
          {rowVirtualizer.getVirtualItems().map((virtualRow) => {
            const row = rows[virtualRow.index];
            return (
              <TableRow
                data-index={virtualRow.index}
                ref={(node) => rowVirtualizer.measureElement(node)}
                key={row.id}
                style={{
                  position: 'absolute',
                  top: 0,
                  left: 0,
                  width: '100%',
                  height: `${virtualRow.size}px`,
                  transform: `translateY(${virtualRow.start}px)`,
                }}
              >
                {row.getVisibleCells().map((cell) => (
                  <TableCell key={cell.id}>
                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
                  </TableCell>
                ))}
              </TableRow>
            );
          })}
        </TableBody>
      </Table>
      {isLoading && (
        <div className="p-4 text-center text-gray-600">
          Carregando mais dados...
        </div>
      )}
      {!isLoading && data.length >= totalRows && totalRows !== 0 && (
        <div className="p-4 text-center text-gray-600">
          Fim dos resultados.
        </div>
      )}
    </div>
  );
};

export default InfiniteScrollTableWindow;

Explicação das Partes Chave

1. Gerenciamento de Estado e Carregamento de Dados

data: Armazena as linhas da tabela.
totalRows: O número total de linhas disponíveis, provenientes da "API".
page: A página atual que está sendo buscada.
isLoading: Um boolean para controlar o estado de carregamento e evitar buscas duplicadas.
fetchMoreData: Uma função useCallback que simula a busca de dados, adicionando-os ao estado data e atualizando a página. Esta função é a base do nosso scroll infinito, sendo chamada sempre que o usuário se aproxima do final da lista carregada.

2. Definição das Colunas (`columns`)

Utilizamos useMemo para definir as colunas da tabela. Cada coluna é um objeto ColumnDef do Tanstack Table, com accessorKey (a chave do dado) e header (o título da coluna). Uma propriedade size opcional foi adicionada para estimativa de largura.

3. Inicialização do Tanstack Table (`useReactTable`)

useReactTable é inicializado com data e columns.
getCoreRowModel: getCoreRowModel(): Essencial para que o Tanstack Table gerencie as linhas e células internamente.

4. Virtualização com Tanstack Virtual (`useWindowVirtualizer`)

count: O número total de itens a serem virtualizados (o número de linhas rows.length).
estimateSize: Uma altura estimada para cada linha, crucial para o useWindowVirtualizer calcular o posicionamento e o tamanho total.
overscan: Renderiza um número de linhas extras (acima e abaixo da viewport) para uma rolagem mais fluida.

5. Detecção de Rolagem para Carregamento Infinito

Um useEffect monitora os itens virtualizados. Quando o último item visível está próximo do final dos dados carregados e ainda há dados para buscar, a função fetchMoreData é acionada. Isso garante que novos dados sejam carregados dinamicamente à medida que o usuário rola, implementando o scroll infinito.

6. Renderização da Tabela

Contêiner da Tabela: Um div pai encapsula a tabela, com estilos para largura e centralização. O Table em si tem um ref e estilos para sua aparência.
Shadcn Table Components: Componentes como Table, TableHeader, TableBody, TableCell, TableHead, e TableRow do Shadcn UI são usados para estruturar a tabela.
Cabeçalho Fixo: O TableHeader possui a classe sticky top-0 z-10 bg-white para fixá-lo no topo da janela durante a rolagem.
Corpo Virtualizado: O TableBody tem uma altura dinâmica definida por ${rowVirtualizer.getTotalSize()}px e position: 'relative'.
- Iteramos sobre rowVirtualizer.getVirtualItems() para renderizar apenas as linhas visíveis.
- Cada TableRow recebe estilos de position: 'absolute', height, width e transform: translateY(...) para posicioná-la virtualmente.
- ref={(node) => rowVirtualizer.measureElement(node)}: Permite que o useWindowVirtualizer meça a altura real de cada linha, melhorando a precisão da virtualização.

7. Indicadores de Estado

Mensagens de "Carregando mais dados..." ou "Fim dos resultados." são exibidas na parte inferior da tabela para feedback ao usuário.

Como Usar

Para integrar este componente em sua aplicação React, importe-o e utilize-o como qualquer outro componente:

// pages/index.tsx ou algum outro componente que você queira usar
import InfiniteScrollTableWindow from '@/components/InfiniteScrollTableWindow';

export default function HomePage() {
  return (
    <div className="p-4">
      <div style={{ height: '500px', backgroundColor: '#f0f0f0', marginBottom: '20px', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '2em' }}>
        Conteúdo antes da tabela!
      </div>
      <InfiniteScrollTableWindow />
      <div style={{ height: '700px', backgroundColor: '#e0e0e0', marginTop: '20px', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '2em' }}>
        Conteúdo depois da tabela! Role para ver a mágica!
      </div>
    </div>
  );
}

Ao executar sua aplicação, você observará uma rolagem fluida, mesmo com um grande volume de dados, demonstrando a eficácia da virtualização e do scroll infinito.

Próximos Passos

Esta implementação serve como uma base sólida. Você pode expandir as funcionalidades da sua tabela adicionando:

Ordenação: Implemente a lógica de ordenação do Tanstack Table.
Filtragem: Adicione campos de busca para filtrar dados por coluna ou globalmente.
Redimensionamento de Colunas: Permita que os usuários ajustem a largura das colunas.
Seleção de Linhas: Inclua checkboxes para a seleção de linhas.

Essa combinação de bibliotecas oferece flexibilidade e desempenho para construir tabelas complexas com facilidade.

Turbine seu Copilot no VS Code com MCP (Model Context Protocol)

Miquéias Telles — Sun, 08 Jun 2025 20:26:49 +0000

Turbine seu Copilot no VS Code com MCP (Model Context Protocol)

O GitHub Copilot já transformou a maneira como escrevemos código, mas e se ele pudesse ir além? E se, em vez de apenas sugerir código, ele pudesse interagir diretamente com suas ferramentas, bibliotecas e documentações preferidas? É exatamente essa a promessa do Model Context Protocol (MCP), uma tecnologia de fronteira que está sendo integrada ao Copilot e que você já pode começar a testar.

Neste artigo, vamos desmistificar o que é o MCP e mostrar passo a passo como configurá-lo no seu VS Code, transformando seu assistente de IA em um parceiro de desenvolvimento ainda mais poderoso e ciente do contexto do seu projeto.

O que é o Model Context Protocol (MCP)?

Pense no MCP como uma "ponte" universal. Ele é um padrão de comunicação que permite que modelos de IA, como o Copilot, conversem de forma estruturada com ferramentas e fontes de dados externas.

Sem MCP: O Copilot sabe sobre código, pois foi treinado em bilhões de linhas. No entanto, ele não sabe como usar a CLI do seu framework preferido ou qual o último componente lançado na sua biblioteca de UI.
Com MCP: Você pode "ensinar" o Copilot a usar essas ferramentas. Ele pode invocar um servidor MCP local que executa um comando (npx, por exemplo) ou se conectar a um serviço na web para buscar informações atualizadas.

Em resumo, o MCP dá ao Copilot ferramentas e contexto em tempo real, permitindo que ele execute tarefas complexas em seu nome, como adicionar componentes, refatorar código seguindo uma lógica específica ou buscar documentação externa.

Como Configurar o MCP no VS Code

A configuração é feita diretamente no seu arquivo settings.json. Você pode abri-lo no VS Code pressionando Ctrl + Shift + P e digitando Preferences: Open User Settings (JSON).

A seguir, vamos analisar o bloco de configuração que você forneceu, explicando cada parte.

1. Habilitando os Recursos MCP e o Agente do Copilot

Primeiro, precisamos ativar os recursos experimentais no settings.json.

{
    "chat.mcp.enabled": true,
    "chat.mcp.discovery.enabled": true,
    "chat.agent.enabled": true,
    "github.copilot.chat.agent.runTasks": true,
    "github.copilot.chat.agent.autoFix": true
}

"chat.mcp.enabled": true: Ativa o suporte ao Model Context Protocol no chat do VS Code.
"chat.mcp.discovery.enabled": true: Permite que o VS Code descubra automaticamente alguns servidores MCP.
"chat.agent.enabled": true: Habilita o "agente" do Copilot, uma versão mais proativa capaz de executar tarefas.
"github.copilot.chat.agent.runTasks": true e "autoFix": true: Concedem permissão ao agente para executar comandos e propor correções automáticas no seu código.

2. Configurando os Servidores MCP

Esta é a parte principal, onde definimos quais ferramentas o Copilot poderá usar. O bloco mcp.servers define um apelido para cada ferramenta e como o Copilot deve executá-la.

{
    "mcp": {
        "servers": {
            "shadcn": {
                "command": "npx",
                "args": [
                    "-y",
                    "shadcn@canary",
                    "registry:mcp"
                ],
                "env": {
                    "REGISTRY_URL": "https://alpine-registry.vercel.app//r/registry.json"
                }
            },
            "sequentialthinking": {
                "command": "npx",
                "args": [
                    "-y",
                    "@modelcontextprotocol/server-sequential-thinking"
                ]
            },
            "context7": {
                "type": "http",
                "url": "https://mcp.context7.com/mcp"
            }
        }
    }
}

Vamos detalhar os servidores que você configurou:

shadcn:
- O que faz? Conecta o Copilot à CLI do shadcn/ui, uma biblioteca de componentes de UI extremamente popular para React.
- Como? Quando você invocar @shadcn, o Copilot executará o comando npx shadcn@canary registry:mcp. Isso permite que o Copilot interaja com o registro de componentes do shadcn/ui.
- Exemplo de uso: Você poderá pedir no chat: @shadcn adicione um componente Button ao meu projeto.
sequentialthinking:
- O que faz? Carrega um servidor que ajuda o Copilot a "pensar em voz alta", dividindo um problema complexo em uma sequência de passos lógicos antes de apresentar a solução.
- Como? Executa o pacote npx @modelcontextprotocol/server-sequential-thinking.
- Exemplo de uso: @sequentialthinking me ajude a criar um plano para refatorar minha API do Express para usar rotas modulares.
context7:
- O que faz? Este é um exemplo de servidor remoto. Ele conecta o Copilot a uma fonte de dados externa (context7.com), que pode ser um serviço de busca de documentação ou uma base de conhecimento.
- Como? Diferente dos outros, ele não executa um comando local (npx). Em vez disso, ele se conecta a uma url via HTTP.
- Exemplo de uso: @context7 quais as principais mudanças na última versão do React?

Colocando em Prática: Como Usar no Chat do Copilot

Depois de salvar seu settings.json (pode ser necessário reiniciar o VS Code), usar seus novos superpoderes é muito simples.

Abra a visualização de Chat do GitHub Copilot (Ctrl + Alt + I).
Comece seu prompt usando @ para invocar a ferramenta desejada.
Descreva a tarefa que você quer realizar.

Exemplos de Prompts:

@shadcn preciso de um formulário de login. Adicione os componentes de Card, Label, Input e Button.

@sequentialthinking me explique passo a passo como conectar meu aplicativo Node.js a um banco de dados PostgreSQL usando o Prisma.

@context7 me dê um resumo sobre a API de Intersection Observer.

O Copilot irá identificar a ferramenta, executar a tarefa em segundo plano e retornar o resultado, seja um bloco de código, um plano de ação ou uma informação.

Forem: Miquéias Telles

Construindo uma Tabela com Shadcn, Tanstack Table e Virtualização e Infinite Scroll.

Por que essa combinação é poderosa?

Diferença entre useVirtualizer e useWindowVirtualizer

Pré-requisitos

Instalação das dependências

Estrutura dos Dados e Simulação de API

Criando a Tabela com Scroll Infinito

Explicação das Partes Chave

1. Gerenciamento de Estado e Carregamento de Dados

2. Definição das Colunas (columns)

3. Inicialização do Tanstack Table (useReactTable)

4. Virtualização com Tanstack Virtual (useWindowVirtualizer)

5. Detecção de Rolagem para Carregamento Infinito

6. Renderização da Tabela

7. Indicadores de Estado

Como Usar

Próximos Passos

Turbine seu Copilot no VS Code com MCP (Model Context Protocol)

Turbine seu Copilot no VS Code com MCP (Model Context Protocol)

O que é o Model Context Protocol (MCP)?

Como Configurar o MCP no VS Code

1. Habilitando os Recursos MCP e o Agente do Copilot

2. Configurando os Servidores MCP

Colocando em Prática: Como Usar no Chat do Copilot

Diferença entre `useVirtualizer` e `useWindowVirtualizer`

2. Definição das Colunas (`columns`)

3. Inicialização do Tanstack Table (`useReactTable`)

4. Virtualização com Tanstack Virtual (`useWindowVirtualizer`)