Descripción general del selector de columnas de React Grid

    La Ignite UI for React Data Grid permite mostrar y ocultar columnas con la interfaz de usuario a través delIgrDataGridToolbar componente o junto alcolumnChooser componente, lo que permite colocarla en cualquier lugar de la página. LaisHidden propiedad de las columnas también puede usarse para ocultar o mostrar rápidamente una columna única programáticamente para la generación manual de columnas, y el valor deisHidden se reflejará en elcolumnChooser componente. Cada enfoque puede usarse indistintamente para cambiar el estado visible de las columnas.

    React Grid Column Chooser Example

    Toolbar's Column Chooser UI

    La interfaz Column Chooser es accesible dentro delIgrDataGridToolbar componente separado de la cuadrícula. Para este propósito, solo tenemos que poner la propiedad decolumnChooser la barra de herramientas en true. La barra de herramientas mostrará entonces,IgrButton al hacer clic, la interfaz selectora de columnas. Este botón también muestra el total de columnas ocultas. Si no se crea la barra de herramientas, activar lacolumnChooser propiedad no tendrá efecto y ocultará el botón.

    ProporcionaIgrDataGridToolbar propiedades adicionales como añadir un título a la barra de herramientas usando latoolbarTitle propiedad, colocar texto enIgrButton la al establecer lacolumnChooserText propiedad y añadir un encabezado de título a la interfaz selectora de columnas mediante la configuracióncolumnChooserTitle.

    El Selector de Columnas puede configurarse con animaciones configurando las cuadrículascolumnHidingAnimationMode ycolumnShowingAnimationMode propiedades.

    Code Snippet

    A continuación se muestra cómo implementar la interfaz de usuario de la barra de herramientas del selector de columnas para 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

    Supongamos que queremos mostrar manualmente lacolumnChooser interfaz sin la barra de herramientas y colocarla donde queramos en nuestra página. Esto se puede hacer fácilmente simplemente creando una instancia del componente en nuestro marcado.

    Demo

    Code Snippet

    A continuación se muestra cómo implementar la interfaz de usuario del selector de columnas para Data Grid:

    <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