Visão geral do seletor de colunas do React Grid

    A Grade de Dados do Ignite UI for React dá suporte à capacidade de mostrar e ocultar colunas com a interface do usuário por meio do IgrDataGridToolbar componente ou pelo columnChooser componente que fornece flexibilidade para colocá-la em qualquer lugar da página. A isHidden propriedade nas colunas também pode ser usada para ocultar ou mostrar rapidamente uma única coluna programaticamente para geração manual de colunas, e o valor de será refletido columnChooser​ ​isHidden no componente. Cada abordagem pode ser usada de forma intercambiável para alterar o estado visível das colunas.

    React Grid Column Chooser Example

    Toolbar's Column Chooser UI

    A interface do usuário do Seletor de Colunas pode ser acessada dentro do IgrDataGridToolbar componente separado da grade. Para isso, tudo o que precisamos fazer é definir a propriedade da columnChooser barra de ferramentas como true. A barra de ferramentas exibirá um IgrButton, quando clicado, exibirá a interface do usuário do seletor de colunas. Este botão também exibe o total de colunas ocultas. Se a barra de ferramentas não for criada, habilitar a columnChooser propriedade não terá efeito e ocultará o botão.

    O IgrDataGridToolbar fornece propriedades adicionais, como adicionar um título à barra de ferramentas usando a toolbarTitle propriedade, colocar texto IgrButton na configuração columnChooserText da propriedade e adicionar um cabeçalho de título à interface do usuário do seletor de colunas por configuração columnChooserTitle.

    O Column Chooser pode ser configurado com animações definindo as propriedades columnHidingAnimationMode e columnShowingAnimationMode da grade.

    Code Snippet

    A seguir, demonstramos como implementar a interface do usuário da barra de ferramentas do seletor de colunas para o React Data Grid:

    <IgrDataGridToolbar ref={this.onToolbarRef}
    toolbarTitle="Grid Title"
    columnChooser="true"
    columnChooserText="Columns"
    columnChooserTitle="Column Chooser">
</IgrDataGridToolbar>
<IgrDataGrid
    ref={this.onGridRef}
    height="calc(100% - 40px)"
    dataSource={this.data}
    autoGenerateColumns="true"
    columnHidingAnimationMode="SlideOver">
</IgrDataGrid>

    import { IgrDataGrid } from 'igniteui-react-data-grids';
import { IgrDataGridToolbar } from 'igniteui-react-data-grids';

public grid : IgrDataGrid;
public toolbar: IgrDataGridToolbar;

this.onGridRef = this.onGridRef.bind(this);
this.onToolbarRef = this.onToolbarRef.bind(this);


public onGridRef(grid: IgrDataGrid) {
    this.grid = grid;
    if (this.toolbar != null) {
        this.toolbar.targetGrid = this.grid;
        this.grid.columnMovingAnimationMode = ColumnMovingAnimationMode.SlideOver;

        let productNameColumn = document.getElementById("productname") as IgrTextColumnComponent;
        productNameColumn.isHidden = true;
    }
}

public onToolbarRef(toolbar: IgrDataGridToolbar) {
    this.toolbar = toolbar;
    if (this.grid != null) {
    this.toolbar.targetGrid = this.grid;
    this.toolbar.columnChooser = "true";
    this.toolbar.toolbarTitle = "Grid Title";
    this.toolbar.columnChooserText = "Column Chooser";
    this.toolbar.columnChooserTitle = "Column Chooser";
    }
}

    Simple Column Chooser

    Digamos que queremos exibir manualmente a interface do columnChooser usuário sem a barra de ferramentas e colocá-la em qualquer lugar que quisermos em nossa página. Isso pode ser feito facilmente simplesmente criando uma instância do componente em nossa marcação.

    Demo

    Code Snippet

    A seguir, demonstramos como implementar a interface do usuário do seletor de colunas para a grade de dados:

    <IgrColumnChooser
    ref={this.onColumnChooserRef}
    height="100%"
    width="250px"
    title="Column Chooser"
    showAllText="Show All"
    hideAllText="Hide All">
</IgrColumnChooser>
<IgrDataGrid
    ref={this.onGridRef}
    height="100%"
    width="100%"
    dataSource={this.data}
    autoGenerateColumns="false"
    columnHidingAnimationMode="SlideOver">
    <IgrTextColumn isHidden="true" field="ProductPrice" headerText="Product Price"/>
</IgrDataGrid>

    import { IgrDataGrid } from 'igniteui-react-data-grids';
import { IgrColumnChooser } from 'igniteui-react-data-grids';
import { ColumnMovingAnimationMode } from 'igniteui-react-data-grids';

public grid : IgrDataGrid;
public columnChooser: IgrColumnChooser;

public onGridRef(grid: IgrDataGrid) {
    this.grid = grid;
    if (this.columnChooser) {
        this.columnChooser.targetGrid = this.grid;
        this.grid.columnMovingAnimationMode = ColumnMovingAnimationMode.SlideOver;
    }
}

public onColumnChooserRef(columnChooser: IgrColumnChooser) {
    this.columnChooser = columnChooser;
    if (this.grid) {
        this.columnChooser.targetGrid = this.grid;
        this.columnChooser.showAllText = "Show All";
        this.columnChooser.hideAllText = "Hide All";
    }
}

    API References