DEV Community

Cover image for Filtrando collunas que contém objetos no AG Grid
Luciano Braga
Luciano Braga

Posted on

Filtrando collunas que contém objetos no AG Grid

Quando usamos o AG Grid em uma aplicação React, é comum querer exibir dados complexos, como objetos aninhados, diretamente nas células da tabela. Muitas vezes, também queremos renderizar essas informações com componentes personalizados e, ao mesmo tempo, manter a funcionalidade de filtros da tabela. Mas como fazer isso quando a célula recebe um objeto?

Neste artigo, vamos mostrar como aplicar filtros mesmo quando a célula contém um objeto complexo, utilizando valueGetter para extrair o valor a ser filtrado, sem abrir mão de componentes personalizados com cellRenderer.

Estrutura dos dados

Imagine que você tem um dataset assim:

{
  "volume": {
    "foo": 123,
    "bar": 321
  },
  "outro": {``
    "foo": 344,
    "bar": 76
  }
}
Enter fullscreen mode Exit fullscreen mode

E deseja exibir volume.foo em uma célula com um componente React, mantendo a capacidade de filtrar por esse valor.

valueGetter + cellRenderer

A chave está em separar a lógica de exibição da lógica de filtro. O valueGetter serve para informar ao AG Grid qual valor deve ser usado internamente — inclusive nos filtros — enquanto o cellRenderer trata apenas da exibição visual.

Exemplo:

const columnDefs = [
  {
    headerName: 'Volume Foo',
    field: 'volume',
    valueGetter: (params) => params.data.volume?.foo,
    cellRenderer: VolumeFooRenderer,
    filter: 'agNumberColumnFilter'
  }
];
Enter fullscreen mode Exit fullscreen mode

Nesse exemplo:

valueGetter: extrai volume.foo do objeto

cellRenderer: renderiza um componente React personalizado

filter: aplica um filtro numérico sobre o valor retornado

Exemplo de componente cellRenderer 

const VolumeFooRenderer = (props) => {
  const value = props.value; // Recebe o volume.foo já extraído
  return <span style={{ color: 'blue' }}>{value}</span>;
};
Enter fullscreen mode Exit fullscreen mode

Simples e funcional!

Filtrando múltiplos campos

Se você quiser que o filtro considere mais de um campo (por exemplo, volume.foo e volume.bar), pode retornar uma string concatenada:

valueGetter: (params) => {
  const { foo, bar } = params.data.volume || {};
  return `${foo ?? ''} ${bar ?? ''}`;
},
filter: 'agTextColumnFilter'
Enter fullscreen mode Exit fullscreen mode

Dessa forma, qualquer termo digitado que corresponda a foo ou bar será encontrado pelo filtro.

🚀 Conclusão

Mesmo com colunas que recebem objetos ou renderizam componentes personalizados, é totalmente possível manter a funcionalidade de filtros no AG Grid. Com o uso de valueGetter, podemos extrair os dados relevantes para o filtro sem afetar a experiência visual da tabela

Top comments (0)