Descripción general de los grupos de columnas colapsables React Tree Grid
La función Grupos de columnas colapsables Ignite UI for React en React Tree Grid le permite organizar y administrar múltiples niveles de columnas anidadas y grupos de columnas en IgrTreeGrid
agrupándolos y brindando la opción de colapsar o expandir estos grupos para mejorar la visualización y navegación de datos.
Ejemplo de grupos de columnas colapsables en cuadrícula de árbol React
export class EmployeesFlatDetailsItem {
public constructor (init: Partial<EmployeesFlatDetailsItem> ) {
Object .assign(this , init);
}
public Address: string ;
public Age: number ;
public City: string ;
public Country: string ;
public Fax: string ;
public HireDate: string ;
public ID: number ;
public Name: string ;
public ParentID: number ;
public Phone: string ;
public PostalCode: number ;
public Title: string ;
public LastName: string ;
public FullAddress: string ;
}
export class EmployeesFlatDetails extends Array <EmployeesFlatDetailsItem > {
public constructor (items: Array <EmployeesFlatDetailsItem> | number = -1 ) {
if (Array .isArray(items)) {
super (...items);
} else {
const newItems = [
new EmployeesFlatDetailsItem(
{
Address : `Obere Str. 57` ,
Age : 55 ,
City : `Berlin` ,
Country : `Germany` ,
Fax : `030-0076545` ,
HireDate : `2008-03-20` ,
ID : 1 ,
Name : `Johnathan Winchester` ,
ParentID : -1 ,
Phone : `030-0074321` ,
PostalCode : 12209 ,
Title : `Development Manager` ,
LastName : `Winchester` ,
FullAddress : `Obere Str. 57, Berlin, Germany`
}),
new EmployeesFlatDetailsItem(
{
Address : `Avda. de la Constitución 2222` ,
Age : 42 ,
City : `México D.F.` ,
Country : `Mexico` ,
Fax : `(51) 555-3745` ,
HireDate : `2014-01-22` ,
ID : 4 ,
Name : `Ana Sanders` ,
ParentID : -1 ,
Phone : `(5) 555-4729` ,
PostalCode : 5021 ,
Title : `CEO` ,
LastName : `Sanders` ,
FullAddress : `Avda. de la Constitución 2222, México D.F., Mexico`
}),
new EmployeesFlatDetailsItem(
{
Address : `Mataderos 2312` ,
Age : 49 ,
City : `México D.F.` ,
Country : `Mexico` ,
Fax : `(5) 555-3995` ,
HireDate : `2014-01-22` ,
ID : 18 ,
Name : `Victoria Lincoln` ,
ParentID : -1 ,
Phone : `(5) 555-3932` ,
PostalCode : 5023 ,
Title : `Accounting Manager` ,
LastName : `Lincoln` ,
FullAddress : `Mataderos 2312, México D.F., Mexico`
}),
new EmployeesFlatDetailsItem(
{
Address : `120 Hanover Sq.` ,
Age : 61 ,
City : `London` ,
Country : `UK` ,
Fax : `(171) 555-6750` ,
HireDate : `2010-01-01` ,
ID : 10 ,
Name : `Yang Wang` ,
ParentID : -1 ,
Phone : `(171) 555-7788` ,
PostalCode : 39000 ,
Title : `Localization Manager` ,
LastName : `Wang` ,
FullAddress : `120 Hanover Sq., London, UK`
}),
new EmployeesFlatDetailsItem(
{
Address : `Berguvsvägen 8` ,
Age : 43 ,
City : `Luleå` ,
Country : `Sweden` ,
Fax : `0921-12 34 67` ,
HireDate : `2011-06-03` ,
ID : 3 ,
Name : `Michael Burke` ,
ParentID : 1 ,
Phone : `0921-12 34 65` ,
PostalCode : 29000 ,
Title : `Senior Software Developer` ,
LastName : `Burke` ,
FullAddress : `Berguvsvägen 8, Luleå, Sweden`
}),
new EmployeesFlatDetailsItem(
{
Address : `Forsterstr. 57` ,
Age : 29 ,
City : `Mannheim` ,
Country : `Germany` ,
Fax : `0621-08924` ,
HireDate : `2009-06-19` ,
ID : 2 ,
Name : `Thomas Anderson` ,
ParentID : 1 ,
Phone : `0621-08460` ,
PostalCode : 68306 ,
Title : `Senior Software Developer` ,
LastName : `Anderson` ,
FullAddress : `Forsterstr. 57, Mannheim, Germany`
}),
new EmployeesFlatDetailsItem(
{
Address : `24, place Kléber` ,
Age : 31 ,
City : `Strasbourg` ,
Country : `France` ,
Fax : `88.60.15.32` ,
HireDate : `2014-08-18` ,
ID : 11 ,
Name : `Monica Reyes` ,
ParentID : 1 ,
Phone : `88.60.15.31` ,
PostalCode : 67000 ,
Title : `Software Development Team Lead` ,
LastName : `Reyes` ,
FullAddress : `24, place Kléber, Strasbourg, France`
}),
new EmployeesFlatDetailsItem(
{
Address : `C/ Araquil, 67` ,
Age : 35 ,
City : `Madrid` ,
Country : `Spain` ,
Fax : `(911) 555 91 99` ,
HireDate : `2015-09-17` ,
ID : 6 ,
Name : `Roland Mendel` ,
ParentID : 11 ,
Phone : `(91) 555 22 82` ,
PostalCode : 28023 ,
Title : `Senior Software Developer` ,
LastName : `Mendel` ,
FullAddress : `C/ Araquil, 67, Madrid, Spain`
}),
new EmployeesFlatDetailsItem(
{
Address : `12, rue des Bouchers` ,
Age : 44 ,
City : `Marseille` ,
Country : `France` ,
Fax : `91.24.45.41` ,
HireDate : `2009-10-11` ,
ID : 12 ,
Name : `Sven Cooper` ,
ParentID : 11 ,
Phone : `91.24.45.40` ,
PostalCode : 13008 ,
Title : `Senior Software Developer` ,
LastName : `Cooper` ,
FullAddress : `12, rue des Bouchers, Marseille, France`
}),
new EmployeesFlatDetailsItem(
{
Address : `23 Tsawassen Blvd.` ,
Age : 44 ,
City : `Tsawassen` ,
Country : `Canada` ,
Fax : `(604) 555-3745` ,
HireDate : `2014-04-04` ,
ID : 14 ,
Name : `Laurence Johnson` ,
ParentID : 4 ,
Phone : `(604) 555-4729` ,
PostalCode : 19000 ,
Title : `Director` ,
LastName : `Johnson` ,
FullAddress : `23 Tsawassen Blvd., Tsawassen, Canada`
}),
new EmployeesFlatDetailsItem(
{
Address : `Fauntleroy Circus` ,
Age : 25 ,
City : `London` ,
Country : `UK` ,
Fax : `(125) 555-3798` ,
HireDate : `2017-11-9` ,
ID : 5 ,
Name : `Elizabeth Richards` ,
ParentID : 4 ,
Phone : `(171) 555-1212` ,
PostalCode : 30000 ,
Title : `Vice President` ,
LastName : `Richards` ,
FullAddress : `Fauntleroy Circus, London, UK`
}),
new EmployeesFlatDetailsItem(
{
Address : `Cerrito 333` ,
Age : 39 ,
City : `Buenos Aires` ,
Country : `Argentina` ,
Fax : `(121) 135-4892` ,
HireDate : `2010-03-22` ,
ID : 13 ,
Name : `Trevor Ashworth` ,
ParentID : 5 ,
Phone : `(1) 135-5555` ,
PostalCode : 1010 ,
Title : `Director` ,
LastName : `Ashworth` ,
FullAddress : `Cerrito 333, Buenos Aires, Argentina`
}),
new EmployeesFlatDetailsItem(
{
Address : `Sierras de Granada 9993` ,
Age : 44 ,
City : `México D.F.` ,
Country : `Mexico` ,
Fax : `(153) 555-7293` ,
HireDate : `2014-04-04` ,
ID : 17 ,
Name : `Antonio Moreno` ,
ParentID : 18 ,
Phone : `(5) 555-3392` ,
PostalCode : 5022 ,
Title : `Senior Accountant` ,
LastName : `Moreno` ,
FullAddress : `Sierras de Granada 9993, México D.F., Mexico`
}),
new EmployeesFlatDetailsItem(
{
Address : `Hauptstr. 29` ,
Age : 50 ,
City : `Sao Paulo` ,
Country : `Brazil` ,
Fax : `(531) 555-6691` ,
HireDate : `2007-11-18` ,
ID : 7 ,
Name : `Pedro Rodriguez` ,
ParentID : 10 ,
Phone : `0452-076545` ,
PostalCode : 3012 ,
Title : `Senior Localization Developer` ,
LastName : `Rodriguez` ,
FullAddress : `Hauptstr. 29, Sao Paulo, Brazil`
}),
new EmployeesFlatDetailsItem(
{
Address : `Av. dos Lusíadas, 23` ,
Age : 27 ,
City : `Bern` ,
Country : `Switzerland` ,
Fax : `(271) 335-357` ,
HireDate : `2016-02-19` ,
ID : 8 ,
Name : `Casey Harper` ,
ParentID : 10 ,
Phone : `(11) 555-7647` ,
PostalCode : 40000 ,
Title : `Senior Localization` ,
LastName : `Harper` ,
FullAddress : `Av. dos Lusíadas, 23, Bern, Switzerland`
}),
new EmployeesFlatDetailsItem(
{
Address : `Berkeley Gardens 12` ,
Age : 25 ,
City : `London` ,
Country : `UK` ,
Fax : `(171) 555-9199` ,
HireDate : `2017-11-09` ,
ID : 15 ,
Name : `Patricia Simpson` ,
ParentID : 7 ,
Phone : `(171) 555-2282` ,
PostalCode : 26000 ,
Title : `Localization Intern` ,
LastName : `Simpson` ,
FullAddress : `Berkeley Gardens 12, London, UK`
}),
new EmployeesFlatDetailsItem(
{
Address : `Walserweg 21` ,
Age : 39 ,
City : `Aachen` ,
Country : `Germany` ,
Fax : `0241-059428` ,
HireDate : `2010-03-22` ,
ID : 9 ,
Name : `Francisco Chang` ,
ParentID : 7 ,
Phone : `0241-039123` ,
PostalCode : 52066 ,
Title : `Localization Intern` ,
LastName : `Chang` ,
FullAddress : `Walserweg 21, Aachen, Germany`
}),
new EmployeesFlatDetailsItem(
{
Address : `35 King George` ,
Age : 25 ,
City : `London` ,
Country : `UK` ,
Fax : `(171) 555-3373` ,
HireDate : `2018-03-18` ,
ID : 16 ,
Name : `Peter Lewis` ,
ParentID : 7 ,
Phone : `(171) 555-0297` ,
PostalCode : 48000 ,
Title : `Localization Intern` ,
LastName : `Lewis` ,
FullAddress : `35 King George, London, UK`
}),
];
super (...newItems.slice(0 ));
}
}
}
ts コピー import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrTreeGridModule } from "@infragistics/igniteui-react-grids" ;
import { IgrTreeGrid, IgrColumnGroup, IgrColumn } from "@infragistics/igniteui-react-grids" ;
import { ComponentRenderer, WebTreeGridDescriptionModule } from "@infragistics/igniteui-react-core" ;
import { EmployeesFlatDetailsItem, EmployeesFlatDetails } from './EmployeesFlatDetails' ;
import "@infragistics/igniteui-react-grids/grids/combined" ;
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css" ;
const mods : any [] = [
IgrTreeGridModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component <any, any> {
private treeGrid: IgrTreeGrid
private treeGridRef(r: IgrTreeGrid) {
this .treeGrid = r;
this .setState({});
}
constructor (props: any ) {
super (props);
this .treeGridRef = this .treeGridRef.bind(this );
}
public render (): JSX .Element {
return (
<div className ="container sample ig-typography" >
<div className ="container fill" >
<IgrTreeGrid
autoGenerate ="false"
ref ={this.treeGridRef}
id ="treeGrid"
data ={this.employeesFlatDetails}
primaryKey ="ID"
foreignKey ="ParentID"
moving ="true"
rowSelection ="None" >
<IgrColumnGroup
header ="General Information"
collapsible ="true"
expanded ="false"
pinned ="false" >
<IgrColumn
field ="Name"
header ="Full Name"
dataType ="String"
sortable ="true"
resizable ="true"
width ="200"
visibleWhenCollapsed ="false" >
</IgrColumn >
<IgrColumn
field ="LastName"
header ="Last Name"
dataType ="String"
sortable ="true"
resizable ="true"
width ="200"
visibleWhenCollapsed ="true" >
</IgrColumn >
<IgrColumn
field ="Title"
width ="250"
dataType ="String"
sortable ="true"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="ID"
dataType ="Number"
resizable ="true"
filterable ="false"
visibleWhenCollapsed ="false" >
</IgrColumn >
<IgrColumn
field ="HireDate"
dataType ="Date"
sortable ="true"
resizable ="true"
visibleWhenCollapsed ="false" >
</IgrColumn >
<IgrColumn
field ="Age"
dataType ="Number"
sortable ="true"
resizable ="true"
visibleWhenCollapsed ="false" >
</IgrColumn >
</IgrColumnGroup >
<IgrColumnGroup
header ="Address Information" >
<IgrColumnGroup
header ="Location"
collapsible ="true" >
<IgrColumn
field ="FullAddress"
width ="300"
dataType ="String"
sortable ="true"
resizable ="true"
visibleWhenCollapsed ="true" >
</IgrColumn >
<IgrColumn
field ="Country"
dataType ="String"
sortable ="true"
resizable ="true"
visibleWhenCollapsed ="false" >
</IgrColumn >
<IgrColumn
field ="City"
dataType ="String"
sortable ="true"
resizable ="true"
visibleWhenCollapsed ="false" >
</IgrColumn >
<IgrColumn
field ="Address"
dataType ="String"
sortable ="true"
resizable ="true"
visibleWhenCollapsed ="false" >
</IgrColumn >
</IgrColumnGroup >
<IgrColumnGroup
header ="Contact Information" >
<IgrColumn
field ="Phone"
dataType ="String"
sortable ="true"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="Fax"
dataType ="String"
sortable ="true"
resizable ="true" >
</IgrColumn >
<IgrColumn
field ="PostalCode"
dataType ="String"
sortable ="true"
resizable ="true" >
</IgrColumn >
</IgrColumnGroup >
</IgrColumnGroup >
</IgrTreeGrid >
</div >
</div >
);
}
private _employeesFlatDetails: EmployeesFlatDetails = null ;
public get employeesFlatDetails(): EmployeesFlatDetails {
if (this ._employeesFlatDetails == null )
{
this ._employeesFlatDetails = new EmployeesFlatDetails();
}
return this ._employeesFlatDetails;
}
private _componentRenderer: ComponentRenderer = null ;
public get renderer(): ComponentRenderer {
if (this ._componentRenderer == null ) {
this ._componentRenderer = new ComponentRenderer();
var context = this ._componentRenderer.context;
WebTreeGridDescriptionModule.register(context);
}
return this ._componentRenderer;
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<Sample /> );
tsx コピー
#treeGrid {
--ig-size: var (--ig-size-small);
}
css コピー
¿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
Para comenzar a utilizar IgrTreeGrid
y la función de encabezados multicolumna colapsables , primero debe instalar Ignite UI for React escribiendo el siguiente comando:
npm install igniteui-react-grids
cmd
Para obtener una introducción completa al Ignite UI for React, lea el tema de introducción .
Además, le recomendamos encarecidamente que eche un vistazo breve al tema de encabezados de varias columnas para ver información más detallada sobre cómo configurar los grupos de columnas en su cuadrícula.
Uso
Los grupos de columnas plegables son parte de la función de encabezados de varias columnas que proporciona una manera de contraer/expandir un grupo de columnas a un conjunto más pequeño de datos. Cuando se contrae un grupo de columnas, se mostrará un subconjunto de columnas al usuario final y las otras columnas secundarias del grupo se ocultarán. Cada columna contraída/expandida se puede vincular a la fuente de datos de la cuadrícula, o puede no vincularse y, por lo tanto, calcularse.
Para definir un grupo de columnas como contraíble, debe establecer la Collapsible
propiedad en columnGroup
true .
Debe definir la propiedad visibleWhenCollapsed
en al menos dos columnas secundarias. Al menos una columna debe estar visible cuando el grupo está contraído (visibleWhenCollapsed
establecido en verdadero ) y al menos una columna debe estar oculta cuando el grupo está expandido (visibleWhenCollapsed
establecido en false
); de lo contrario, la funcionalidad contraíble se deshabilitará . Si no se especifica visibleWhenCollapsed
para algunas de las columnas secundarias, esta columna siempre estará visible independientemente de si el estado principal está expandido o contraído.
Veamos el marcado a continuación:
<IgrColumnGroup collapsible ="true" header ="Customer Information" >
<IgrColumn field ="CustomerName" header ="Customer Name" visibleWhenCollapsed ="true" >
</IgrColumn >
<IgrColumn field ="CustomerID" header ="Customer ID" visibleWhenCollapsed ="false" >
</IgrColumn >
<IgrColumn field ="CustomerFirstName" header ="First Name" visibleWhenCollapsed ="false" >
</IgrColumn >
<IgrColumn field ="CustomerLastName" header ="Last Name" visibleWhenCollapsed ="false" >
</IgrColumn >
<IgrColumnGroup header ="Customer Address" >
<IgrColumn field ="CustomerAddress" header ="Full Address" width ="250px" visibleWhenCollapsed ="true" >
</IgrColumn >
<IgrColumn field ="Address" visibleWhenCollapsed ="false" >
</IgrColumn >
<IgrColumn field ="City" visibleWhenCollapsed ="false" >
</IgrColumn >
<IgrColumn field ="Country" visibleWhenCollapsed ="false" >
</IgrColumn >
<IgrColumn field ="PostalCode" header ="Postal Code" visibleWhenCollapsed ="false" >
</IgrColumn >
</IgrColumnGroup >
</IgrColumnGroup >
tsx
En resumen, cada columna secundaria tiene tres estados:
Puede estar siempre visible, sin importar el estado expandido de su padre.
Puede ser visible cuando su padre está contraído.
Se puede ocultar cuando su padre está colapsado.
El estado inicial del grupo de columnas que se especifica como contraíble es Expanded
establecido en verdadero , pero puede cambiar fácilmente este comportamiento configurándolo en falso .
Plantilla de indicador de expandir/contraer
El indicador de expansión predeterminado para el IgrTreeGrid
es el siguiente:
El indicador de colapso predeterminado para el IgrTreeGrid
es el siguiente:
Además, si necesita cambiar el indicador predeterminado de expandir/contraer, proporcionamos opciones de plantillas para lograrlo.
<IgrColumnGroup id ="info" header ="Customer Information" collapsible ="true" collapsibleIndicatorTemplate ={this.collapsibleIndicatorTemplate} >
<IgrColumn field ="CustomerName" header ="Fullname" dataType ="String" visibleWhenCollapsed ="true" > </IgrColumn >
<IgrColumn field ="CustomerID" header ="Customer ID" dataType ="String" visibleWhenCollapsed ="false" > </IgrColumn >
<IgrColumnGroup id ="address" header ="Customer Address" collapsible ="true" >
<IgrColumn field ="Country" header ="Country" dataType ="String" sortable ="true" visibleWhenCollapsed ="true" > </IgrColumn >
<IgrColumn field ="City" header ="City" dataType ="String" sortable ="true" visibleWhenCollapsed ="false" > </IgrColumn >
</IgrColumnGroup >
</IgrColumnGroup >
function collapsibleIndicatorTemplate(e: { dataContext: IgrColumnTemplateContext }) {
return (
<div >
<IgrIcon iconName ={e.dataContext.column.expanded ? 'remove ' : 'add '}> </IgrIcon >
</div > )
}
tsx
Nota Tenga en cuenta que inicialmente la opción de contraer grupo tiene prioridad sobre la columna oculta. Si declaró que su columna estaba oculta usando la propiedad oculta y tiene un grupo definido donde se debe mostrar la misma columna, se mostrará la columna.
Referencias de API
Recursos adicionales
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.