A mais recente versão do AG Grid, uma poderosa solução JavaScript para exibição de dados em formato de grade, foi lançada. Esta atualização introduz uma maneira mais versátil de agrupar dados, otimiza a interação com conjuntos de dados massivos e oferece uma experiência de usuário aprimorada com uma nova interface e feedback mais intuitivo.

Principais Novidades do AG Grid 34.2

Agrupamento por Data e Hora

Agora é possível agrupar dados hierarquicamente por componentes de data e hora, como dia, semana, mês, trimestre e ano. Utilizando as propriedades rowGroupingHierarchy ou groupHierarchyConfig, os desenvolvedores podem implementar esquemas de agrupamento integrados ou personalizados, atendendo a uma gama mais ampla de necessidades de análise de dados.

const [columnDefs, setColumnDefs] = useState([
    {
        field: 'eventDate',
        rowGroup: true,
        rowGroupingHierarchy: ['year', 'quarter', 'month'] // Agrupamento pré-definido
    },
    // ... outras definições de coluna
]);

// Definição de Hierarquia Personalizada
const customHierarchy = useMemo(() => {
  return {
    week: {
      headerValueGetter: (params) => { /* Lógica para valor do cabeçalho */ },
      valueGetter: (params) => { /* Lógica para valor do grupo */ }
    }
  }
}, []);

<AgGridReact
  columnDefs={columnDefs}
  groupHierarchyConfig={customHierarchy}
/>

Painel de Ferramentas Externo

Na versão 34.2, o painel de ferramentas (usado para gerenciar colunas) não precisa mais residir na barra lateral padrão. Ele pode ser renderizado em um contêiner externo ao grid, como uma janela modal ou uma área de UI separada. Essa flexibilidade é especialmente útil em layouts compactos ou telas menores, permitindo uma melhor organização da interface.

const toolPanelConfig = useMemo(() => {
  return {
    parent: document.getElementById('toolPanelContainer'), // Define o contêiner do painel
    // ... outras configurações do painel de ferramentas
  };
}, []);

return (
  <div>
    {/* Contêiner para o Painel de Ferramentas */}
    <div id="toolPanelContainer"></div>

    {/* O Grid */}
    <AgGridReact
      toolPanel={toolPanelConfig}
      popupParent={document.body} // Garante que modais flutuantes funcionem corretamente
      ...
    />
  </div>
);

Expansão/Recolhimento de Grupos no SSRM

Ao utilizar o Server-Side Row Model (SSRM), agora é possível expandir ou recolher todos os grupos de forma global, mesmo que os dados correspondentes ainda não tenham sido carregados no cliente. As APIs expandAll(), collapseAll() e a configuração ssrmExpandAllAffectsAllRows proporcionam uma navegação mais fluida por grandes volumes de dados agrupados.

Melhorias na Funcionalidade de Copiar e Colar

O AG Grid 34.2 aprimora a experiência de copiar e colar dados:

• Suporte para colar um intervalo de células em uma área de destino de tamanho diferente, comportando-se de maneira mais semelhante ao Excel.
• Opção de colar através do menu de contexto (clique com o botão direito).
• Otimizações de desempenho significativas ao copiar grandes intervalos de células, especialmente em cenários com SSRM.

Aprimoramnetos na Arrastar e Soltar Linhas (Row Dragging)

A introdução do callback isRowValidDropPosition permite validar se uma linha pode ser solta em uma posição específica durante operações personalizadas de arrastar e soltar. Em posições inválidas, um ícone de "proibido" é exibido automaticamente. A API de Tematização (Theming API) também permite customizar a aparência desses ícones, fornecendo feedback visual imediato e claro para o usuário.

Recomandações de Atualização

A versão AG Grid 34.2 é uma atualização não destrutiva. Usuários que utilizam a versão 33.x podem atualizar diretamente sem a necessidade de modificar o código existente.

Em resumo, o AG Grid 34.2 oferece:

• Agrupamento flexível por datas e horas.
• Opção de renderizar o painel de ferramentas externamente.
• Controle global de expansão/recolhimento de grupos com SSRM.
• Funcionalidade de copiar/colar aprimorada, similar ao Excel.
• Feedback visual mais claro durante o arrastra e soltar de linhas.

Essas funcionalidades aumentam significativamente a flexibilidade no manuseio de dados e a experiência do usuário, capacitando os desenvolvedores a criar aplicações mais eficientes e robustas.