Filtragem de grade React

    A Filtragem Ignite UI for React em React Grid é um recurso que permite exibir ou ocultar dados seletivamente com base em critérios ou condições específicas. Há um contêiner de dados vinculado por meio do qual o IgrGrid componente fornece API de filtragem avançada e todos os recursos de filtragem. Os tipos de filtragem disponíveis aqui são três:

    React Grid Filtering Example

    The sample below demonstrates IgrGrid's Quick Filter user experience.

    Setup

    Para especificar se a filtragem está habilitada e qual modo de filtragem deve ser usado, o IgrGrid expõe as seguintes propriedades -allowFiltering, allowAdvancedFiltering, filterMode e filterable.

    A propriedade allowFiltering permite que você especifique as seguintes opções:

    • false- a filtragem para a grade correspondente será desabilitada. Este é o valor padrão.
    • verdadeiro- a filtragem para a grade correspondente será habilitada.

    A propriedade allowAdvancedFiltering permite que você especifique as seguintes opções:

    • false- a filtragem avançada para a grade correspondente será desabilitada. Este é o valor padrão.
    • verdadeiro- a filtragem avançada para a grade correspondente será habilitada.

    A propriedade filterMode permite que você especifique as seguintes opções:

    • QuickFilter- uma UI de filtragem simplista. Este é o valor padrão.
    • ExcelStyleFilter- uma interface de filtragem semelhante ao Excel.

    A propriedade filterable permite que você especifique as seguintes opções:

    • true- a filtragem para a coluna correspondente será habilitada. Este é o valor padrão.
    • falso- a filtragem para a coluna correspondente será desabilitada.
    <IgrGrid data={nwindData} autoGenerate={false} ref={gridRef} allowFiltering={true}>
    <IgrColumn field="ProductName" dataType="string"></IgrColumn>
    <IgrColumn field="UnitPrice" dataType="number" filterable={false}></IgrColumn>
</IgrGrid>

    No entanto, para habilitar a filtragem avançada, você precisa definir a allowAdvancedFiltering propriedade input como true

    <IgrGrid data={nwindData} autoGenerate={false} ref={gridRef} allowAdvancedFiltering={true}>
</IgrGrid>

    [!Note] You can enable both the QuickFilter or ExcelStyleFilter and the advanced filtering user interfaces in the IgrGrid. Both filtering user interfaces will work independently of one another. The final filtered result in the IgrGrid is the intersection between the results of the two filters.

    Interaction

    Para abrir a linha de filtro para uma coluna específica, o chip 'Filtro' abaixo do cabeçalho deve ser clicado. Para adicionar condições, você deve escolher o operando do filtro usando o menu suspenso à esquerda da entrada e inserir o valor. Para colunas de número e data, 'Igual a' é selecionado por padrão, para string- 'Contém' e para booleano- 'Todos'. Pressionar 'Enter' confirma a condição e agora você pode adicionar outra. Há um menu suspenso, entre os chips 'condição', que determina o operador lógico entre eles, 'E' é selecionado por padrão. Para remover uma condição, você pode clicar no botão 'X' do chip e, para editá-lo, você deve selecionar o chip e a entrada será preenchida com os dados do chip. Enquanto a linha do filtro estiver aberta, você pode clicar em qualquer cabeçalho de coluna filtrável para selecioná-lo e poder adicionar condições de filtro para ele.

    Embora algumas condições de filtragem tenham sido aplicadas a uma coluna e a linha de filtro esteja fechada, você pode remover as condições clicando no botão fechar do chip ou pode abrir a linha de filtro selecionando qualquer um dos chips. Quando não há espaço suficiente para mostrar todas as condições, um ícone de filtro é mostrado com um emblema que indica quantas condições a mais existem. Ele também pode ser clicado para abrir a linha de filtro.

    Usage

    Há uma estratégia de filtragem padrão fornecida pronta para uso, bem como todas as condições de filtragem padrão, que o desenvolvedor pode substituir por sua própria implementação. Além disso, fornecemos uma maneira de conectar facilmente suas próprias condições de filtragem personalizadas. Atualmente, o IgrGrid fornece não apenas uma interface de filtragem simplista, mas também opções de filtragem mais complexas. Dependendo do conjunto dataType da coluna, o conjunto correto de operações de filtragem é carregado dentro da lista suspensa da interface do usuário do filtro. Além disso, você pode definir as IgnoreCase propriedades e as propriedades iniciais Condition.

    O recurso de filtragem é ativado para o IgrGrid componente definindo a allowFiltering entrada como true. O padrão filterMode é QuickFilter e não pode ser alterado o tempo de execução. Para desativar esse recurso para uma determinada coluna – defina a filterable entrada como false.

    <IgrGrid autoGenerate={false} allowFiltering={true}>
    <IgrColumn field="ProductName" dataType="string"></IgrColumn>
    <IgrColumn field="Price" dataType="number"></IgrColumn>
    <IgrColumn field="Discontinued" dataType="boolean" filterable={false}></IgrColumn>
</IgrGrid>

    [!Note] If values of type string are used by a column of data type date, the IgrGrid won't parse them to date objects and using filtering conditions won't be possible. If you want to use string objects, additional logic should be implemented on the application level, in order to parse the values to date objects.

    Initial filtered state

    Para definir o estado de filtragem inicial do, defina o IgrGrid​ ​IgrGrid filteringExpressionsTree a uma matriz de filteringExpressionsTree para cada coluna a ser filtrada.

    const filteringExpressions: IgrFilteringExpressionsTree = {
  operator: FilteringLogic.And,
  filteringOperands: [
    {
      fieldName: "ProductName",
      conditionName: "contains",
      ignoreCase: true,
      searchVal: "Chai"
    },
    {
      fieldName: "QuantityPerUnit",
      conditionName: "contains",
      ignoreCase: true,
      searchVal: "1"
    },
  ],
};

return (
    <IgrGrid
        filteringExpressionsTree={filteringExpressions}
        аllowFiltering={true}
        filterMode="quickFilter">
    </IgrGrid>
);

    Filtering logic

    A filteringLogic propriedade dos controles como a IgrGrid filtragem de várias colunas será resolvida no IgrGrid. Você pode alterá-lo a qualquer momento por meio da IgrGrid API ou da IgrGrid propriedade input.

    import { FilteringLogic } from "igniteui-react-grids";

<IgrGrid filteringLogic={FilteringLogic.Or}></IgrGrid>

    O valor padrão de AND retorna apenas as linhas que correspondem a todas as expressões de filtragem aplicadas no momento. Seguindo o exemplo acima, uma linha será retornada quando o valor da célula 'ProductName' contiver 'myproduct' e o valor da célula 'Price' for maior que 55.

    Quando definido como OR, uma linha será retornada quando o valor da célula 'ProductName' contiver 'myproduct' ou o valor da célula 'Price' for maior que 55.

    Styling

    Além dos temas predefinidos, a grade pode ser ainda mais personalizada ao definir algumas das propriedades CSS disponíveis. Caso você queira alterar algumas das cores, precisa definir uma classe para a grade primeiro:

    <IgrGrid className="grid"></IgrGrid>

    Em seguida, defina as propriedades CSS relacionadas para essa classe:

    .grid {
    --ig-grid-filtering-row-text-color: #292826;
    --ig-grid-filtering-row-background: #ffcd0f;
    --ig-grid-filtering-header-text-color: #292826;
    --ig-grid-filtering-header-background: #ffcd0f;
}

    Demo

    Known Limitations

    [!Note] Some browsers such as Firefox fail to parse regional specific decimal separators by considering them grouping separators, thus resulting in them being invalid. When inputting such values for a numeric column filter value, only the valid part of the number will be applied to the filtering expression. For further information, refer to the Firefox issue.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.