Usando AG Grid com React

AG Grid é uma das bibliotecas mais completas e eficientes para criação de tabelas com alto desempenho em aplicações React. Ele oferece recursos avançados como paginação, ordenação, filtros, seleção múltipla, virtualização e personalização de células, tudo isso com excelente performance, mesmo com grandes volumes de dados.

Neste artigo, você verá como integrar o ag-grid-react com TypeScript de forma prática e modular, desde a instalação até um exemplo funcional com personalizações básicas.

Instalação

Utilize o gerenciador de pacotes de sua preferência:

npm install ag-grid-community ag-grid-react

Para aplicar estilos, importe um dos temas globais disponíveis:

import 'ag-grid-community/styles/ag-grid.css'
import 'ag-grid-community/styles/ag-theme-alpine.css'

Criando o componente da tabela

Crie um componente React que encapsula a lógica da tabela:

// components/Tabela.tsx
import React, { useState } from 'react'
import { AgGridReact } from 'ag-grid-react'
import { ColDef } from 'ag-grid-community'
import 'ag-grid-community/styles/ag-grid.css'
import 'ag-grid-community/styles/ag-theme-alpine.css'

interface Pessoa {
  nome: string
  idade: number
  cidade: string
}

export default function Tabela() {
  const [rowData] = useState<Pessoa[]>([
    { nome: 'João', idade: 28, cidade: 'São Paulo' },
    { nome: 'Maria', idade: 35, cidade: 'Rio de Janeiro' },
    { nome: 'Carlos', idade: 42, cidade: 'Belo Horizonte' },
  ])

  const [columnDefs] = useState<ColDef<Pessoa>[]>([
    { field: 'nome', headerName: 'Nome' },
    { field: 'idade', headerName: 'Idade' },
    { field: 'cidade', headerName: 'Cidade' },
  ])

  const defaultColDef: ColDef = {
    sortable: true,
    filter: true,
    resizable: true,
  }

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: '100%' }}>
      <AgGridReact<Pessoa>
        rowData={rowData}
        columnDefs={columnDefs}
        defaultColDef={defaultColDef}
        pagination={true}
        paginationPageSize={5}
        animateRows={true}
      />
    </div>
  )
}

Usando no projeto

// pages/Home.tsx
import React from 'react'
import Tabela from '../components/Tabela'

export default function Home() {
  return (
    <main>
      <h1 style={{ marginBottom: 16 }}>Lista de Pessoas</h1>
      <Tabela />
    </main>
  )
}

Personalizando células com cellRenderer

Se você quiser exibir dados com formatações específicas (como adicionar prefixos, emojis, ou aplicar lógica condicional), o AG Grid permite personalizar células usando a propriedade cellRenderer.

{
  field: 'idade',
  headerName: 'Idade',
  cellRenderer: (params) => `${params.value} anos`
}

Exemplo com condição:

{
  field: 'idade',
  headerName: 'Status',
  cellRenderer: (params) =>
    params.value >= 18 ? '🟢 Adulto' : '🟡 Menor de idade'
}

Paginação simples e eficiente

A paginação é ativada com apenas uma propriedade, e você pode controlar o tamanho de cada página:

<AgGridReact
  rowData={rowData}
  columnDefs={columnDefs}
  pagination={true}
  paginationPageSize={10}
/>

Ativando filtros nas colunas

Filtros são fundamentais em listas dinâmicas. Com defaultColDef, você ativa filtros em todas as colunas:

const defaultColDef: ColDef = {
  filter: true,
  sortable: true,
  resizable: true,
}

Ou aplique em colunas específicas:

{
  field: 'cidade',
  headerName: 'Cidade',
  filter: 'agTextColumnFilter'
}

A integração do AG Grid com TypeScript e React permite criar tabelas robustas, tipadas e extremamente performáticas. Seja para um painel administrativo, dashboard de dados ou visualização complexa, o AG Grid entrega uma base sólida para qualquer cenário.

Para explorar funcionalidades avançadas como edição inline, grouping, scroll infinito ou filtros personalizados, confira a documentação oficial.