React Grade de árvore para Ignite UI for React para

The Ignite UI for React Toolbar in is a container for UI operations in the React Tree Grid. The React toolbar is located at the top of the React component, i.e., the IgrTreeGrid and it matches its horizontal size. The toolbar container can host any custom content or set of predefined UI controls. The default set for the React Tree Grid includes:

Ocultação de coluna
Fixação de coluna
Exportação do Excel
Filtragem avançada

A barra de ferramentas e os componentes de interface do usuário predefinidos dão suporte a eventos React e expõem a API para desenvolvedores.

The predefined IgrGridToolbarActions and IgrGridToolbarTitle UI components are added inside the IgrGridToolbar and this is all needed to have a toolbar providing default interactions with the corresponding Grid features:

<IgrTreeGrid data={data} primaryKey="ID" foreignKey="ParentID" autoGenerate={true}>
    <IgrGridToolbar>
        <IgrGridToolbarTitle>
            Tree Grid Toolbar
        </IgrGridToolbarTitle>
        <IgrGridToolbarActions>
            <IgrGridToolbarAdvancedFiltering></IgrGridToolbarAdvancedFiltering>
            <IgrGridToolbarPinning></IgrGridToolbarPinning>
            <IgrGridToolbarHiding></IgrGridToolbarHiding>
            <IgrGridToolbarExporter></IgrGridToolbarExporter>
        </IgrGridToolbarActions>
    </IgrGridToolbar>
</IgrTreeGrid>

[!Note] As seen in the code snippet above, the predefined Actions UI components are wrapped in the IgrGridToolbarActions container. This way, the toolbar title is aligned to the left of the toolbar and the actions are aligned to the right of the toolbar.

Obviamente, cada uma dessas interfaces do usuário pode ser adicionada independentemente uma da outra ou pode não ser adicionada. Dessa forma, o contêiner da barra de ferramentas será renderizado vazio:

<IgrTreeGrid data={data} primaryKey="ID" foreignKey="ParentID" autoGenerate={true}>
    <IgrGridToolbar>
    </IgrGridToolbar>
</IgrTreeGrid>

Para obter uma visão abrangente de cada um dos componentes padrão da interface do usuário, continue lendo a seção Recursos abaixo.

Características

A barra de ferramentas é ótima para separar lógica / interações que afetam a grade como um todo.

Conforme mostrado acima, ele pode ser configurado para fornecer componentes padrão para controle, ocultação de coluna, fixação de coluna, filtragem avançada e exportação de dados da grade.

Esses recursos podem ser ativados independentemente uns dos outros, seguindo um padrão semelhante ao componente de cartão do pacote Ignite UI for React.

Abaixo estão listados os principais recursos da barra de ferramentas com código de exemplo para cada um deles.

Title

Setting a title for the toolbar in your grid is achieved by using the IgrGridToolbarTitle.

Os usuários podem fornecer qualquer coisa, desde texto simples até modelos mais complexos.

<IgrGridToolbar>
    <IgrGridToolbarTitle>
        Grid toolbar title
    </IgrGridToolbarTitle>
</IgrGridToolbar>

Actions

The IgrGridToolbarActions is where users can place actions/interactions in relation to the parent grid. As with the title portion of the toolbar, users can provide anything inside that template part, including the default toolbar interaction components.

<IgrGridToolbar>
    <IgrGridToolbarActions>

    </IgrGridToolbarActions>
</IgrGridToolbar>

Fixação de coluna

The IgrGridToolbarPinning component provides the default UI for interacting with column pinning in the grid.

O componente é configurado para funcionar imediatamente com a grade pai contendo a barra de ferramentas, bem como várias propriedades de entrada para personalizar a interface do usuário, como o título do componente, o espaço reservado para a entrada do componente e a altura da própria lista suspensa.

<IgrGridToolbar>
    <IgrGridToolbarActions>
        <IgrGridToolbarPinning title="Grid pinned columns" prompt="Filter column collection" columnListHeight="400px"></IgrGridToolbarPinning>
    </IgrGridToolbarActions>
</IgrGridToolbar>

Ocultação de coluna

The IgrGridToolbarHiding provides the default UI for interacting with column hiding. Exposes the same input properties for customizing the UI, such as the component title, the placeholder for the component input and the height of the dropdown itself.

<IgrGridToolbar>
    <IgrGridToolbarActions>
        <IgrGridToolbarHiding title="Grid column hiding" prompt="Filter column collection" columnListHeight="400px"></IgrGridToolbarHiding>
    </IgrGridToolbarActions>
</IgrGridToolbar>

Filtragem avançada

O componente Filtragem Avançada da Barra de Ferramentas fornece a interface do usuário padrão para o recurso Filtragem Avançada. O componente expõe uma maneira de alterar o texto padrão do botão.

<IgrGridToolbar>
    <IgrGridToolbarActions>
        <IgrGridToolbarAdvancedFiltering></IgrGridToolbarAdvancedFiltering>
    </IgrGridToolbarActions>
</IgrGridToolbar>

Data Exporting

As with the rest of the toolbar actions, exporting is provided through a IgrGridToolbarExporter out of the box.

O componente exportador da barra de ferramentas expõe várias propriedades de entrada para personalizar a interface do usuário e a experiência de exportação.

These range from changing the display text, to enabling/disabling options in the dropdown to customizing the name of the generated file. For full reference, consult the API documentation for the ToolbarExporter.

Aqui está um trecho mostrando algumas das opções que podem ser personalizadas por meio do modelo React:

<IgrGridToolbar>
    <IgrGridToolbarActions>
        <IgrGridToolbarExporter exportCSV={true} exportExcel={true} filename="exported_data"></IgrGridToolbarExporter>
    </IgrGridToolbarActions>
</IgrGridToolbar>

In addition to changing the exported filename, the user can further configure the exporter options by waiting for the ToolbarExporting event and customizing the options entry in the event properties.

[!Note] By default when exporting to CSV the exporter exports using a comma separator and uses a '.csv' extension for the output file. You can customize these exporting parameters by subscribing to events of the exporter or changing the values of the exporter options fields. You can also cancel the export process by setting the cancel field of the event args to true.

O snippet de código a seguir demonstra a assinatura do evento de exportação da barra de ferramentas e a configuração das opções do exportador:

const configureExport = (evt: IgrGridToolbarExportEventArgs) => {
    const args = evt.detail;
    const options: IgrExporterOptionsBase = args.options;

    options.fileName = `Report_${new Date().toDateString()}`;
    (args.exporter as any).columnExporting.subscribe((columnArgs: any) => {
        columnArgs.cancel = columnArgs.header === 'Name';
    });
}

<IgrTreeGrid onToolbarExporting={configureExport}>
</IgrTreeGrid>

O exemplo a seguir demonstra como personalizar os arquivos exportados:

Exporting Indicator

Ao usar o componente exportador da barra de ferramentas padrão, sempre que uma operação de exportação ocorrer, a barra de ferramentas mostrará um indicador de progresso enquanto a operação estiver em andamento.

Moreover, users can set the toolbar showProgress property and use for their own long running operations or just as another way to signify an action taking place in the grid.

O exemplo abaixo usa uma quantidade significativa de dados, a fim de aumentar o tempo necessário para a exportação de dados para que a barra de progresso possa ser vista. Além disso, possui outro botão que simula uma operação de longa duração na grade:

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:

<IgrTreeGrid className="grid"></IgrTreeGrid>

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

.grid {
    --ig-grid-toolbar-background-color: #2a2b2f;
    --ig-grid-toolbar-title-text-color: #ffcd0f;
    --ig-grid-toolbar-dropdown-background: #2a2b2f;
}

Demo

API References

O serviço Grid Toolbar tem mais algumas APIs para explorar, listadas abaixo.

IgrTreeGrid Events:

ToolbarExporting

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

React Tree Grid Toolbar

React Toolbar Grid Example