React Grid Summaries

O recurso Ignite UI for React Resumos em React Grid funciona em nível por coluna como rodapé de grupo. React resumos do IgrGrid é um recurso poderoso que permite ao usuário ver informações de coluna em um contêiner separado com um conjunto pré-definido de itens de resumo padrão, dependendo do tipo de dados dentro da coluna ou implementando um modelo personalizado na.IgrGrid

React Grid Summaries Overview Example

[!Note] The summary of the column is a function of all column values, unless filtering is applied, then the summary of the column will be function of the filtered result values

IgrGridResumos também podem ser ativados em nível por coluna em Ignite UI for React, o que significa que você só pode ativar para colunas que precisar.IgrGrid Resumos te dão um conjunto pré-definido de resumos padrão, dependendo do tipo de dado na coluna, para que você possa economizar tempo:

Parastring eboolean dataType, a seguinte função está disponível:

Contar

Paranumber ecurrencypercent tipos de dados, as seguintes funções estão disponíveis:

Contar
Mínimo
Máx.
Média
Soma

Para odate tipo de dado, as seguintes funções estão disponíveis:

Contar
Mais antigo
Mais recente

Todos os tipos de dados de coluna disponíveis podem ser encontrados no tópico oficial Tipos de coluna.

IgrGridResumos são ativados por coluna ao definirhasSummary a propriedade como True. Também é importante lembrar que os resumos de cada coluna são resolvidos de acordo com o tipo de dado da coluna. NaIgrGrid coluna padrão, o tipo de dado éstring, então se você quisernumber resumosdate específicos, deve especificar adataType propriedade comonumber ou.date Note que os valores resumidos serão exibidos localizados, de acordo com a gradelocale e a colunapipeArgs.

<IgrGrid autoGenerate={false} height="800px" width="800px">
    <IgrColumn field="ProductID" header="Product ID" width="200px"  sortable={true}>
    </IgrColumn>
    <IgrColumn field="ProductName" header="Product Name" width="200px" sortable={true} hasSummary={true}>
    </IgrColumn>
    <IgrColumn field="ReorderLevel" width="200px" editable={true} dataType="number" hasSummary={true}>
    </IgrColumn>
</IgrGrid>

Outra forma de ativar/desativar resumos para uma coluna específica ou uma lista de colunas é usar o métodoenableSummaries público/disableSummaries of.IgrGrid

const enableSummary = () => {
    gridRef.current.enableSummaries([
        {fieldName: 'ReorderLevel'},
        {fieldName: 'ProductID'}
    ]);
}
const disableSummary = () => {
    gridRef.current.disableSummaries(['ProductID']);
}

<IgrGrid ref={gridRef} autoGenerate={false} height="800px" width="800px">
    <IgrColumn field="ProductID" header="Product ID" width="200px" sortable={true}>
    </IgrColumn>
    <IgrColumn field="ProductName" header="Product Name" width="200px" sortable={true} hasSummary={true}>
    </IgrColumn>
    <IgrColumn field="ReorderLevel" width="200px" editable={true} dataType="number" hasSummary={true}>
    </IgrColumn>
</IgrGrid>
<button onClick={enableSummary}>Enable Summary</button>
<button onClick={disableSummary}>Disable Summary </button>

Summary Template

summaryTemplateMira o resumo da coluna, fornecendo como contexto os resultados do resumo da coluna.

const summaryTemplate = (ctx: IgrSummaryTemplateContext) => {
  return (
    <>
      <span>My custom summary template</span>
      <span>{ctx.implicit[0].label} - {ctx.implicit[0].summaryResult}</span>
    </>
  );
}

<IgrColumn hasSummary={true} summaryTemplate={summaryTemplate}></IgrColumn>

Quando um resumo padrão é definido, a altura da área do resumo é calculada por design dependendo da coluna com o maior número de resumos e da--ig-size grade. Use asummaryRowHeight propriedade de entrada para sobrescrever o valor padrão. Como argumento, ele espera um valor numérico, e definir um valor falso aciona o comportamento padrão de dimensionamento do rodapé da grade.

Disabled Summaries

AdisabledSummaries propriedade oferece controle preciso por coluna sobre o recurso resumo React Grade. Essa propriedade permite que os usuários personalizem os resumos exibidos para cada coluna do IgrGrid, garantindo que apenas os dados mais relevantes e significativos sejam mostrados. Por exemplo, você pode excluir tipos específicos de resumo, como ['contagem', 'mínimo', 'máximo'] especificando suas chaves de resumo em um array.

Essa propriedade também pode ser modificada dinamicamente em tempo de execução por meio de código, fornecendo flexibilidade para adaptar os resumos do IgrGrid à alteração dos estados do aplicativo ou das ações do usuário.

Os exemplos a seguir ilustram como usar adisabledSummaries propriedade para gerenciar resumos de diferentes colunas e excluir tipos específicos de resumo padrão e personalizados na Grade React:

<!-- Disable default summaries -->
<IgrColumn
    field="UnitPrice"
    header="Unit Price"
    dataType="number"
    hasSummary={true}
    disabledSummaries={['count', 'sum', 'average']}
/>

<!-- Disable custom summaries -->
<IgrColumn
    field="UnitsInStock"
    header="Units In Stock"
    dataType="number"
    hasSummary={true}
    summaries={discontinuedSummary}
    disabledSummaries={['discontinued', 'totalDiscontinued']}
/>

PoisUnitPrice, resumos padrão comocount,sum, eaverage estão desativados, deixando outros comomin emax ativos.

ParaUnitsInStock resumos personalizados comodiscontinued etotalDiscontinued são excluídos usando adisabledSummaries propriedade.

Em tempo de execução, resumos também podem ser desativados dinamicamente usando adisabledSummaries propriedade. Por exemplo, você pode definir ou atualizar a propriedade em colunas específicas programaticamente para adaptar os resumos exibidos com base em ações do usuário ou mudanças no estado da aplicação.

Formatting summaries

Por padrão, os resultados resumidos, produzidos pelos operandos de resumo embutidos, são localizados e formatados de acordo com a gradelocale e a colunapipeArgs. Ao usar operandos personalizados, oslocale epipeArgs não são aplicados. Se você quiser alterar a aparência padrão dos resultados resumidos, pode formatá-los usando asummaryFormatter propriedade.

const summaryFormatter = (summary: IgrSummaryResult, summaryOperand: IgrSummaryOperand): string => {
    const result = summary.summaryResult;
    if (summary.key !== "count" && result !== null && result !== undefined) {
      const format = new Intl.DateTimeFormat("en", { year: "numeric" });
      return format.format(new Date(result));
    }
    return result;
  }

<IgrColumn hasSummary={true} summaryFormatter={summaryFormatter}></IgrColumn>

Summaries with Group By

Quando você agrupou por colunas, permiteIgrGrid mudar a posição de resumo e o modo de cálculo usando assummaryCalculationMode propriedades esummaryPosition. Junto com essas duas propriedades, osIgrGrid exposes eshowSummaryOnCollapse a propriedade que permite determinar se a linha resumida permanece visível quando a linha do grupo à qual se refere é colapsada.

Os valores disponíveis dosummaryCalculationMode imóvel são:

RootLevelOnly- Os resumos são calculados apenas para o nível raiz.
ChildLevelsOnly- Os resumos são calculados apenas para os níveis filhos.
RootAndChildLevels- Resumos são calculados tanto para níveis raiz quanto para filhos. Esse é o valor padrão.

Os valores disponíveis dosummaryPosition imóvel são:

Top- A linha resumida aparece antes do grupo por filhos da linha.
Bottom- A linha de resumo aparece após o grupo por filhos da linha. Esse é o valor padrão.

AshowSummaryOnCollapse propriedade é booleana. Seu valor padrão é definido como falso, o que significa que a linha de resumo ficaria oculta quando a linha do grupo for colapsada. Se a propriedade for definida como verdadeira, a linha resumida permanece visível quando a linha do grupo é colapsada.

[!Note] The summaryPosition property applies only for the child level summaries. The root level summaries appear always fixed at the bottom of the IgrGrid.

Demo

As linhas de resumo podem ser navegadas com as seguintes interações de teclado:

PARA CIMA- navega uma célula para cima.
PARA BAIXO- navega uma célula para baixo.
ESQUERDA- navega uma célula para a esquerda.
DIREITA- navega uma célula para a direita.
CTRL + ESQUERDA ou HOME- navega para a célula mais à esquerda.
CTRL + DIREITA ou END- navega para a célula mais à direita.

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-summary-background-color:#e0f3ff;
    --ig-grid-summary-focus-background-color: rgba( #94d1f7, .3 );
    --ig-grid-summary-label-color: rgb(228, 27, 117);
    --ig-grid-summary-result-color: black;
}

Demo

API References

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

React Grid Summaries