React Hierarchical Grid Column Hiding
El Ignite UI for React tiene una interfaz de usuario de ocultación de columnas integrada, que se puede usar a través de la barra de herramientas de cuadrícula jerárquica React para cambiar el estado visible de las columnas. Los desarrolladores tienen la flexibilidad de definir la interfaz de usuario de ocultación de columnas en cualquier lugar de la página según sea necesario. La función de ocultación de columnas de cuadrícula jerárquica React es especialmente útil cuando se desea disminuir el tamaño de la cuadrícula y eliminar la necesidad de tabular a través de campos redundantes.
React Ejemplo de ocultación de columnas de cuadrícula jerárquica
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrGridToolbarModule, IgrHierarchicalGridModule } from "@infragistics/igniteui-react-grids" ;
import { IgrHierarchicalGrid, IgrGridToolbar, IgrGridToolbarActions, IgrGridToolbarHiding, IgrColumn, IgrRowIsland } from "@infragistics/igniteui-react-grids" ;
import SingersData from './SingersData.json' ;
import "@infragistics/igniteui-react-grids/grids/combined" ;
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css" ;
const mods : any [] = [
IgrGridToolbarModule,
IgrHierarchicalGridModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component <any, any> {
private hierarchicalGrid1: IgrHierarchicalGrid
private hierarchicalGrid1Ref(r: IgrHierarchicalGrid) {
this .hierarchicalGrid1 = r;
this .setState({});
}
constructor (props: any ) {
super (props);
this .hierarchicalGrid1Ref = this .hierarchicalGrid1Ref.bind(this );
}
public render (): JSX .Element {
return (
<div className ="container sample ig-typography" >
<div className ="container fill" >
<IgrHierarchicalGrid
autoGenerate ="false"
data ={this.singersData}
primaryKey ="ID"
allowFiltering ="true"
ref ={this.hierarchicalGrid1Ref} >
<IgrGridToolbar
>
<IgrGridToolbarActions
>
<IgrGridToolbarHiding
title ="Column Hiding" >
</IgrGridToolbarHiding >
</IgrGridToolbarActions >
</IgrGridToolbar >
<IgrColumn
field ="Artist"
header ="Artist"
dataType ="String"
sortable ="true" >
</IgrColumn >
<IgrColumn
field ="Photo"
header ="Photo"
dataType ="Image" >
</IgrColumn >
<IgrColumn
field ="Debut"
header ="Debut"
dataType ="Number"
hidden ="true" >
</IgrColumn >
<IgrColumn
field ="GrammyNominations"
header ="Grammy Nominations"
dataType ="Number"
sortable ="true"
hidden ="true" >
</IgrColumn >
<IgrColumn
field ="GrammyAwards"
header ="Grammy Awards"
dataType ="Number"
sortable ="true" >
</IgrColumn >
<IgrRowIsland
childDataKey ="Albums"
autoGenerate ="false" >
<IgrColumn
field ="Album"
header ="Album"
dataType ="String"
sortable ="true" >
</IgrColumn >
<IgrColumn
field ="LaunchDate"
header ="Launch Date"
dataType ="Date"
sortable ="true" >
</IgrColumn >
<IgrColumn
field ="BillboardReview"
header ="Billboard Review"
dataType ="String"
sortable ="true" >
</IgrColumn >
<IgrColumn
field ="USBillboard200"
header ="US Billboard 200"
dataType ="String"
sortable ="true" >
</IgrColumn >
<IgrRowIsland
childDataKey ="Songs"
autoGenerate ="false" >
<IgrColumn
field ="Number"
header ="No."
dataType ="String" >
</IgrColumn >
<IgrColumn
field ="Title"
header ="Title"
dataType ="String" >
</IgrColumn >
<IgrColumn
field ="Released"
header ="Released"
dataType ="Date" >
</IgrColumn >
<IgrColumn
field ="Genre"
header ="Genre"
dataType ="String" >
</IgrColumn >
</IgrRowIsland >
</IgrRowIsland >
<IgrRowIsland
childDataKey ="Tours"
autoGenerate ="false" >
<IgrColumn
field ="Tour"
header ="Tour"
dataType ="String" >
</IgrColumn >
<IgrColumn
field ="StartedOn"
header ="Started on"
dataType ="String" >
</IgrColumn >
<IgrColumn
field ="Location"
header ="Location"
dataType ="String" >
</IgrColumn >
<IgrColumn
field ="Headliner"
header ="Headliner"
dataType ="String" >
</IgrColumn >
</IgrRowIsland >
</IgrHierarchicalGrid >
</div >
</div >
);
}
private _singersData: any [] = SingersData;
public get singersData(): any [] {
return this ._singersData;
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<Sample /> );
tsx コピー
¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.
Configuración de cuadrícula jerárquica
Comencemos por crear nuestro IgrHierarchicalGrid
y vincularlo a nuestros datos. También habilitaremos tanto el filtrado como la clasificación de las columnas.
<IgrHierarchicalGrid autoGenerate ="false" data ={this.singersData} primaryKey ="ID" allowFiltering ="true" ref ={this.hierarchicalGrid1Ref} >
<IgrColumn field ="Artist" header ="Artist" dataType ="String" sortable ="true" > </IgrColumn >
<IgrColumn field ="Photo" header ="Photo" dataType ="Image" > </IgrColumn >
<IgrColumn field ="Debut" header ="Debut" dataType ="Number" hidden ="true" > </IgrColumn >
<IgrColumn field ="GrammyNominations" header ="Grammy Nominations" dataType ="Number" sortable ="true" hidden ="true" > </IgrColumn >
<IgrColumn field ="GrammyAwards" header ="Grammy Awards" dataType ="Number" sortable ="true" > </IgrColumn >
</IgrHierarchicalGrid >
tsx
La interfaz de usuario de ocultación de columnas incorporada se coloca dentro de una DropDown
barra IgrHierarchicalGrid
de herramientas. Podemos mostrar/ocultar la interfaz de usuario de ocultación de columnas utilizando este menú desplegable exacto.
Para este propósito, todo lo que tenemos que hacer es establecer tanto el IgrGridToolbarActions
como el IgrGridToolbarHiding
interior de el IgrHierarchicalGrid
. También agregaremos un título a nuestra barra de herramientas utilizando el y un estilo personalizado para el IgrGridToolbarTitle
envoltorio de nuestra cuadrícula jerárquica.
<IgrHierarchicalGrid data ={this.singersData} >
<IgrGridToolbar >
<IgrGridToolbarActions >
<IgrGridToolbarHiding > </IgrGridToolbarHiding >
</IgrGridToolbarActions >
</IgrGridToolbar >
</IgrHierarchicalGrid >
tsx
Esto IgrHierarchicalGrid
nos proporciona algunas propiedades útiles cuando se trata de usar la interfaz de usuario de ocultación de columnas de la barra de herramientas.
Al usar la propiedad title
, configuraremos el título que se muestra dentro del botón desplegable en la barra de herramientas.
<IgrHierarchicalGrid >
<IgrGridToolbar key ="toolbar" >
<IgrGridToolbarActions key ="toolbarActions" >
<IgrGridToolbarHiding key ="toolbarHiding" title ="Column Hiding" > </IgrGridToolbarHiding >
</IgrGridToolbarActions >
</IgrGridToolbar >
</IgrHierarchicalGrid >
tsx
Puede ver el resultado del código de arriba al principio de este artículo en la sección Ejemplo de ocultación de columna React.
Deshabilitar la ocultación de una columna
Podemos evitar fácilmente que el usuario pueda ocultar columnas a través de la interfaz de usuario que oculta columnas simplemente configurando su propiedad disableHiding
en verdadero.
<IgrHierarchicalGrid >
<IgrColumn field ="Artist" dataType ="string" sortable ="true" disableHiding ="true" > </IgrColumn >
<IgrColumn field ="GrammyAwards" dataType ="string" sortable ="true" disableHiding ="true" > </IgrColumn >
<IgrRowIsland >
<IgrColumn field ="Album" dataType ="string" sortable ="true" disableHiding ="true" > </IgrColumn >
</IgrRowIsland >
</IgrHierarchicalGrid >
tsx
Estilo
La cuadrícula se puede personalizar aún más configurando algunas de las variables CSS disponibles. Para lograrlo usaremos una clase que primero asignaremos al grid:
<IgrHierarchicalGrid className ="hierarchical-grid" > </IgrHierarchicalGrid >
tsx
Luego configure las variables CSS relacionadas para los componentes relacionados. Aplicaremos los estilos también solo en igx-column-actions
, por lo que el resto de la cuadrícula no se ve afectado:
#hierarchicalGrid {
--ig-column-actions-background-color : #292826 ;
--ig-column-actions-title-color : #ffcd0f ;
--ig-checkbox-tick-color : #292826 ;
--ig-checkbox-label -color : #ffcd0f ;
--ig-checkbox-empty-color : #ffcd0f ;
--ig-checkbox-fill-color : #ffcd0f ;
--ig-input -group-idle-text-color : white;
--ig-input -group-filled-text-color : #ffcd0f ;
--ig-input -group-focused-text-color : #ffcd0f ;
--ig-input -group-focused-border-color : #ffcd0f ;
--ig-input -group-focused-secondary-color : #ffcd0f ;
--ig-button -foreground: #292826 ;
--ig-button -background : #ffcd0f ;
--ig-button -hover-background : #404040 ;
--ig-button -hover-foreground: #ffcd0f ;
--ig-button -focus-background : #ffcd0f ;
--ig-button -focus-foreground: black;
--ig-button -focus-visible-background : #ffcd0f ;
--ig-button -focus-visible-foreground: black;
--ig-button -disabled-foreground: #ffcd0f ;
}
css
Manifestación
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrGridToolbarModule, IgrHierarchicalGridModule } from "@infragistics/igniteui-react-grids" ;
import { IgrHierarchicalGrid, IgrGridToolbar, IgrGridToolbarActions, IgrGridToolbarHiding, IgrColumn, IgrRowIsland } from "@infragistics/igniteui-react-grids" ;
import SingersData from './SingersData.json' ;
import "@infragistics/igniteui-react-grids/grids/combined" ;
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css" ;
const mods : any [] = [
IgrGridToolbarModule,
IgrHierarchicalGridModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component <any, any> {
private hierarchicalGrid: IgrHierarchicalGrid
private hierarchicalGridRef(r: IgrHierarchicalGrid) {
this .hierarchicalGrid = r;
this .setState({});
}
constructor (props: any ) {
super (props);
this .hierarchicalGridRef = this .hierarchicalGridRef.bind(this );
}
public render (): JSX .Element {
return (
<div className ="container sample ig-typography" >
<div className ="container fill" >
<IgrHierarchicalGrid
autoGenerate ="false"
data ={this.singersData}
id ="hierarchicalGrid"
ref ={this.hierarchicalGridRef}
primaryKey ="ID"
allowFiltering ="true" >
<IgrGridToolbar
>
<IgrGridToolbarActions
>
<IgrGridToolbarHiding
title ="Column Hiding" >
</IgrGridToolbarHiding >
</IgrGridToolbarActions >
</IgrGridToolbar >
<IgrColumn
field ="Artist"
header ="Artist"
dataType ="String"
sortable ="true" >
</IgrColumn >
<IgrColumn
field ="Photo"
header ="Photo"
dataType ="Image" >
</IgrColumn >
<IgrColumn
field ="Debut"
header ="Debut"
dataType ="Number"
sortable ="true" >
</IgrColumn >
<IgrColumn
field ="GrammyNominations"
header ="Grammy Nominations"
dataType ="Number"
sortable ="true" >
</IgrColumn >
<IgrColumn
field ="GrammyAwards"
header ="Grammy Awards"
dataType ="Number"
sortable ="true" >
</IgrColumn >
<IgrRowIsland
childDataKey ="Albums"
autoGenerate ="false" >
<IgrColumn
field ="Album"
header ="Album"
dataType ="String"
sortable ="true" >
</IgrColumn >
<IgrColumn
field ="LaunchDate"
header ="Launch Date"
dataType ="Date"
sortable ="true" >
</IgrColumn >
<IgrColumn
field ="BillboardReview"
header ="Billboard Review"
dataType ="String"
sortable ="true" >
</IgrColumn >
<IgrColumn
field ="USBillboard200"
header ="US Billboard 200"
dataType ="String"
sortable ="true" >
</IgrColumn >
<IgrRowIsland
childDataKey ="Songs"
autoGenerate ="false" >
<IgrColumn
field ="Number"
header ="No."
dataType ="String" >
</IgrColumn >
<IgrColumn
field ="Title"
header ="Title"
dataType ="String" >
</IgrColumn >
<IgrColumn
field ="Released"
header ="Released"
dataType ="Date" >
</IgrColumn >
<IgrColumn
field ="Genre"
header ="Genre"
dataType ="String" >
</IgrColumn >
</IgrRowIsland >
</IgrRowIsland >
<IgrRowIsland
childDataKey ="Tours"
autoGenerate ="false" >
<IgrColumn
field ="Tour"
header ="Tour"
dataType ="String" >
</IgrColumn >
<IgrColumn
field ="StartedOn"
header ="Started on"
dataType ="String" >
</IgrColumn >
<IgrColumn
field ="Location"
header ="Location"
dataType ="String" >
</IgrColumn >
<IgrColumn
field ="Headliner"
header ="Headliner"
dataType ="String" >
</IgrColumn >
</IgrRowIsland >
</IgrHierarchicalGrid >
</div >
</div >
);
}
private _singersData: any [] = SingersData;
public get singersData(): any [] {
return this ._singersData;
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<Sample /> );
tsx コピー
#hierarchicalGrid {
--ig-column-actions-background-color : #292826 ;
--ig-column-actions-title-color : #ffcd0f ;
--ig-checkbox-tick-color : #292826 ;
--ig-checkbox-label -color : #ffcd0f ;
--ig-checkbox-empty-color : #ffcd0f ;
--ig-checkbox-fill-color : #ffcd0f ;
--ig-input -group-idle-text-color : white;
--ig-input -group-filled-text-color : #ffcd0f ;
--ig-input -group-focused-text-color : #ffcd0f ;
--ig-input -group-focused-border-color : #ffcd0f ;
--ig-input -group-focused-secondary-color : #ffcd0f ;
--ig-button -foreground: #292826 ;
--ig-button -background : #ffcd0f ;
--ig-button -hover-background : #404040 ;
--ig-button -hover-foreground: #ffcd0f ;
--ig-button -focus-background : #ffcd0f ;
--ig-button -focus-foreground: black;
--ig-button -focus-visible-background : #ffcd0f ;
--ig-button -focus-visible-foreground: black;
--ig-button -disabled-foreground: #ffcd0f ;
}
css コピー
Referencias de API
En este artículo, aprendimos a usar la interfaz de usuario de ocultación de columnas incorporada en la IgrHierarchicalGrid
barra de herramientas. La columna que oculta la interfaz de usuario tiene algunas API más para explorar, que se enumeran a continuación.
Componentes adicionales con API relativas que se utilizaron:
IgrColumn
properties:
IgrGridToolbar
properties:
IgrGridToolbar
methods:
IgrHierarchicalGrid
events:
Recursos adicionales
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.