Descripción general del selector de columnas React Grid

    La Ignite UI for React Data Grid admite la capacidad de mostrar y ocultar columnas con la interfaz de usuario a través del componente IgrDataGridToolbar o mediante el componente columnChooser que proporciona flexibilidad para colocarlas en cualquier lugar de la página. La propiedad IsHidden en las columnas también se puede usar para ocultar o mostrar rápidamente una sola columna mediante programación para la generación manual de columnas, y el valor de IsHidden se reflejará en el componente columnChooser. Cada enfoque se puede utilizar indistintamente para cambiar el estado visible de las columnas.

    React Grid Column Chooser Example

    Toolbar's Column Chooser UI

    Se puede acceder a la interfaz de usuario del Selector de columnas desde el componente IgrDataGridToolbar separado de la cuadrícula. Para ello, todo lo que tenemos que hacer es establecer la propiedad columnChooser de la barra de herramientas en verdadero. La barra de herramientas mostrará un IgrButton y, al hacer clic en él, se mostrará la interfaz de usuario del selector de columnas. Este botón también muestra el total de columnas ocultas. Si no se crea la barra de herramientas, habilitar la propiedad IgrColumnChooser no tendrá ningún efecto y ocultará el botón.

    ​IgrDataGridToolbar proporciona propiedades adicionales, como agregar un título a la barra de herramientas mediante la propiedad toolbarTitle, colocar texto en IgrButton configurando la propiedad ColumnChooserText y agregar un encabezado de título a la interfaz de usuario del selector de columnas configurando ColumnChooserTitle.

    El Selector de columnas se puede configurar con animaciones configurando las propiedades columnHidingAnimationMode y columnShowingAnimationMode de la cuadrícula.

    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-grids';
import { IgrDataGridToolbar } from 'igniteui-react-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 mostrar manualmente la interfaz de usuario IgrColumnChooser sin la barra de herramientas y colocarla en cualquier lugar que 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-grids';
import { IgrColumnChooser } from 'igniteui-react-grids';
import { ColumnMovingAnimationMode } from 'igniteui-react-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