Visão geral da filtragem React Grid

    A Ignite UI for React inclui filtragem de colunas com uma linha de filtro e uma API que oferece a capacidade de executar condições de classificação expressivas com base no tipo de dados da coluna que está sendo filtrada.

    React Grid Filtering Example

    Conforme visto acima, definir a propriedade filterUIType como FilterRow habilitará a filtragem de registros para a interface do usuário, onde o usuário pode especificar critérios de filtro para filtrar registros. Registros que não correspondem aos critérios de filtro especificados serão ocultados.

    A filtragem também é exposta na UI de opções de coluna ao passar o mouse sobre um campo e clicar nas reticências verticais. Isso é obtido ao definir o filterUIType como ColumnOptions. Consulte o exemplo abaixo.

    Filter Expressions

    No exemplo abaixo, a coleção FilterExpressions da grade de dados é atualizada para incorporar filterExpressions personalizadas.

    Filter Operators

    As colunas podem receber um IgrFilterOperand personalizado que aparecerá no menu suspenso do operando filter-row. Os principais requisitos são garantir que o operando receba um displayName e utilizar o evento FilterRequested no operando para que você possa aplicar um filterFactory, que é responsável por atribuir o operador e o valor que você deseja para filtrar a coluna, por exemplo, StartsWith com valor "A".

    Além disso, a propriedade filterLogicalOperator da grade é responsável por indicar como os filtros entre campos são combinados:

    • And operador lógico. Para que haja uma correspondência bem-sucedida, todas as condições precisam passar.
    • Or operador lógico. Para que haja uma correspondência bem-sucedida, pelo menos uma das condições precisa passar.

    API References