React 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 de 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 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
export class CustomersDataItem {
public constructor(init: Partial<CustomersDataItem>) {
Object.assign(this, init);
}
public ID: string;
public Company: string;
public ContactName: string;
public ContactTitle: string;
public Address: string;
public City: string;
public Region: string;
public PostalCode: number;
public Country: string;
public Phone: string;
public Fax: string;
}
export class CustomersData extends Array<CustomersDataItem> {
public constructor(items: Array<CustomersDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CustomersDataItem(
{
ID: `ALFKI`,
Company: `Alfreds Futterkiste`,
ContactName: `Maria Anders`,
ContactTitle: `Sales Representative`,
Address: `Obere Str. 57`,
City: `Berlin`,
Region: `East`,
PostalCode: 12209,
Country: `Germany`,
Phone: `030-0074321`,
Fax: `030-0076545`
}),
new CustomersDataItem(
{
ID: `ANATR`,
Company: `Ana Trujillo Emparedados y helados`,
ContactName: `Ana Trujillo`,
ContactTitle: `Owner`,
Address: `Avda. de la Constitución 2222`,
City: `México D.F.`,
Region: `South`,
PostalCode: 5021,
Country: `Mexico`,
Phone: `(5) 555-4729`,
Fax: `(5) 555-3745`
}),
new CustomersDataItem(
{
ID: `ANTON`,
Company: `Antonio Moreno Taquería`,
ContactName: `Antonio Moreno`,
ContactTitle: `Owner`,
Address: `Mataderos 2312`,
City: `México D.F.`,
Region: `South`,
PostalCode: 5023,
Country: `Mexico`,
Phone: `(5) 555-3932`,
Fax: `(5) 555-3745`
}),
new CustomersDataItem(
{
ID: `AROUT`,
Company: `Around the Horn`,
ContactName: `Thomas Hardy`,
ContactTitle: `Sales Representative`,
Address: `120 Hanover Sq.`,
City: `London`,
Region: `East`,
PostalCode: 22000,
Country: `UK`,
Phone: `(171) 555-7788`,
Fax: `(171) 555-6750`
}),
new CustomersDataItem(
{
ID: `BERGS`,
Company: `Berglunds snabbköp`,
ContactName: `Christina Berglund`,
ContactTitle: `Order Administrator`,
Address: `Berguvsvägen 8`,
City: `Luleå`,
Region: `South`,
PostalCode: 17000,
Country: `Sweden`,
Phone: `0921-12 34 65`,
Fax: `0921-12 34 67`
}),
new CustomersDataItem(
{
ID: `BLAUS`,
Company: `Blauer See Delikatessen`,
ContactName: `Hanna Moos`,
ContactTitle: `Sales Representative`,
Address: `Forsterstr. 57`,
City: `Mannheim`,
Region: `East`,
PostalCode: 68306,
Country: `Germany`,
Phone: `0621-08460`,
Fax: `0621-08924`
}),
new CustomersDataItem(
{
ID: `BLONP`,
Company: `Blondesddsl père et fils`,
ContactName: `Frédérique Citeaux`,
ContactTitle: `Marketing Manager`,
Address: `24, place Kléber`,
City: `Strasbourg`,
Region: `East`,
PostalCode: 67000,
Country: `France`,
Phone: `88.60.15.31`,
Fax: `88.60.15.32`
}),
new CustomersDataItem(
{
ID: `BOLID`,
Company: `Bólido Comidas preparadas`,
ContactName: `Martín Sommer`,
ContactTitle: `Owner`,
Address: `C/ Araquil, 67`,
City: `Madrid`,
Region: `East`,
PostalCode: 28023,
Country: `Spain`,
Phone: `(91) 555 22 82`,
Fax: `(91) 555 91 99`
}),
new CustomersDataItem(
{
ID: `BONAP`,
Company: `Bon app'`,
ContactName: `Laurence Lebihan`,
ContactTitle: `Owner`,
Address: `12, rue des Bouchers`,
City: `Marseille`,
Region: `West`,
PostalCode: 13008,
Country: `France`,
Phone: `91.24.45.40`,
Fax: `91.24.45.41`
}),
new CustomersDataItem(
{
ID: `BOTTM`,
Company: `Bottom-Dollar Markets`,
ContactName: `Elizabeth Lincoln`,
ContactTitle: `Accounting Manager`,
Address: `23 Tsawassen Blvd.`,
City: `Tsawassen`,
Region: `BC`,
PostalCode: 28000,
Country: `Canada`,
Phone: `(604) 555-4729`,
Fax: `(604) 555-3745`
}),
new CustomersDataItem(
{
ID: `BSBEV`,
Company: `B's Beverages`,
ContactName: `Victoria Ashworth`,
ContactTitle: `Sales Representative`,
Address: `Fauntleroy Circus`,
City: `London`,
Region: `South`,
PostalCode: 10000,
Country: `UK`,
Phone: `(171) 555-1212`,
Fax: `(5) 555-3745`
}),
new CustomersDataItem(
{
ID: `CACTU`,
Company: `Cactus Comidas para llevar`,
ContactName: `Patricio Simpson`,
ContactTitle: `Sales Agent`,
Address: `Cerrito 333`,
City: `Buenos Aires`,
Region: `East`,
PostalCode: 1010,
Country: `Argentina`,
Phone: `(1) 135-5555`,
Fax: `(1) 135-4892`
}),
new CustomersDataItem(
{
ID: `CENTC`,
Company: `Centro comercial Moctezuma`,
ContactName: `Francisco Chang`,
ContactTitle: `Marketing Manager`,
Address: `Sierras de Granada 9993`,
City: `México D.F.`,
Region: `South`,
PostalCode: 5022,
Country: `Mexico`,
Phone: `(5) 555-3392`,
Fax: `(5) 555-7293`
}),
new CustomersDataItem(
{
ID: `CHOPS`,
Company: `Chop-suey Chinese`,
ContactName: `Yang Wang`,
ContactTitle: `Owner`,
Address: `Hauptstr. 29`,
City: `Bern`,
Region: `East`,
PostalCode: 3012,
Country: `Switzerland`,
Phone: `0452-076545`,
Fax: `(5) 555-3745`
}),
new CustomersDataItem(
{
ID: `COMMI`,
Company: `Comércio Mineiro`,
ContactName: `Pedro Afonso`,
ContactTitle: `Sales Associate`,
Address: `Av. dos Lusíadas, 23`,
City: `Sao Paulo`,
Region: `SP`,
PostalCode: 34000,
Country: `Brazil`,
Phone: `(11) 555-7647`,
Fax: `(5) 555-3745`
}),
new CustomersDataItem(
{
ID: `CONSH`,
Company: `Consolidated Holdings`,
ContactName: `Elizabeth Brown`,
ContactTitle: `Sales Representative`,
Address: `Berkeley Gardens 12 Brewery`,
City: `London`,
Region: `South`,
PostalCode: 27000,
Country: `UK`,
Phone: `(171) 555-2282`,
Fax: `(171) 555-9199`
}),
new CustomersDataItem(
{
ID: `DRACD`,
Company: `Drachenblut Delikatessen`,
ContactName: `Sven Ottlieb`,
ContactTitle: `Order Administrator`,
Address: `Walserweg 21`,
City: `Aachen`,
Region: `South`,
PostalCode: 52066,
Country: `Germany`,
Phone: `0241-039123`,
Fax: `0241-059428`
}),
new CustomersDataItem(
{
ID: `DUMON`,
Company: `Du monde entier`,
ContactName: `Janine Labrune`,
ContactTitle: `Owner`,
Address: `67, rue des Cinquante Otages`,
City: `Nantes`,
Region: `East`,
PostalCode: 44000,
Country: `France`,
Phone: `40.67.88.88`,
Fax: `40.67.89.89`
}),
new CustomersDataItem(
{
ID: `EASTC`,
Company: `Eastern Connection`,
ContactName: `Ann Devon`,
ContactTitle: `Sales Agent`,
Address: `35 King George`,
City: `London`,
Region: `East`,
PostalCode: 41000,
Country: `UK`,
Phone: `(171) 555-0297`,
Fax: `(171) 555-3373`
}),
new CustomersDataItem(
{
ID: `ERNSH`,
Company: `Ernst Handel`,
ContactName: `Roland Mendel`,
ContactTitle: `Sales Manager`,
Address: `Kirchgasse 6`,
City: `Graz`,
Region: `South`,
PostalCode: 8010,
Country: `Austria`,
Phone: `7675-3425`,
Fax: `7675-3426`
}),
new CustomersDataItem(
{
ID: `FAMIA`,
Company: `Familia Arquibaldo`,
ContactName: `Aria Cruz`,
ContactTitle: `Marketing Assistant`,
Address: `Rua Orós, 92`,
City: `Sao Paulo`,
Region: `SP`,
PostalCode: 27000,
Country: `Brazil`,
Phone: `(11) 555-9857`,
Fax: `(5) 555-3745`
}),
new CustomersDataItem(
{
ID: `FISSA`,
Company: `FISSA Fabrica Inter. Salchichas S.A.`,
ContactName: `Diego Roel`,
ContactTitle: `Accounting Manager`,
Address: `C/ Moralzarzal, 86`,
City: `Madrid`,
Region: `East`,
PostalCode: 28034,
Country: `Spain`,
Phone: `(91) 555 94 44`,
Fax: `(91) 555 55 93`
}),
new CustomersDataItem(
{
ID: `FOLIG`,
Company: `Folies gourmandes`,
ContactName: `Martine Rancé`,
ContactTitle: `Assistant Sales Agent`,
Address: `184, chaussée de Tournai`,
City: `Lille`,
Region: `South`,
PostalCode: 59000,
Country: `France`,
Phone: `20.16.10.16`,
Fax: `20.16.10.17`
}),
new CustomersDataItem(
{
ID: `FOLKO`,
Company: `Folk och fä HB`,
ContactName: `Maria Larsson`,
ContactTitle: `Owner`,
Address: `Åkergatan 24`,
City: `Bräcke`,
Region: `East`,
PostalCode: 36000,
Country: `Sweden`,
Phone: `0695-34 67 21`,
Fax: `0695 33-4455`
}),
new CustomersDataItem(
{
ID: `FRANK`,
Company: `Frankenversand`,
ContactName: `Peter Franken`,
ContactTitle: `Marketing Manager`,
Address: `Berliner Platz 43`,
City: `München`,
Region: `East`,
PostalCode: 80805,
Country: `Germany`,
Phone: `089-0877310`,
Fax: `089-0877451`
}),
new CustomersDataItem(
{
ID: `FRANR`,
Company: `France restauration`,
ContactName: `Carine Schmitt`,
ContactTitle: `Marketing Manager`,
Address: `54, rue Royale`,
City: `Nantes`,
Region: `South`,
PostalCode: 44000,
Country: `France`,
Phone: `40.32.21.21`,
Fax: `40.32.21.20`
}),
new CustomersDataItem(
{
ID: `FRANS`,
Company: `Franchi S.p.A.`,
ContactName: `Paolo Accorti`,
ContactTitle: `Sales Representative`,
Address: `Via Monte Bianco 34`,
City: `Torino`,
Region: `East`,
PostalCode: 10100,
Country: `Italy`,
Phone: `011-4988260`,
Fax: `011-4988261`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrGridModule } from "@infragistics/igniteui-react-grids";
import { IgrGrid, IgrGridToolbar, IgrGridToolbarTitle, IgrGridToolbarActions, IgrGridToolbarHiding, IgrColumn } from "@infragistics/igniteui-react-grids";
import { ComponentRenderer, WebGridDescriptionModule } from "@infragistics/igniteui-react-core";
import { CustomersDataItem, CustomersData } from './CustomersData';
import "@infragistics/igniteui-react-grids/grids/combined";
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css";
const mods: any[] = [
IgrGridModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component<any, any> {
private grid: IgrGrid
private gridRef(r: IgrGrid) {
this.grid = r;
this.setState({});
}
private iD: IgrColumn
private contactName: IgrColumn
private contactTitle: IgrColumn
private city: IgrColumn
private company: IgrColumn
private fax: IgrColumn
private address: IgrColumn
private postalCode: IgrColumn
private country: IgrColumn
private phone: IgrColumn
constructor(props: any) {
super(props);
this.gridRef = this.gridRef.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample ig-typography">
<div className="container fill">
<IgrGrid
autoGenerate="false"
ref={this.gridRef}
id="grid"
data={this.customersData}
columnWidth="200px"
allowFiltering="true"
columnSelection="Single">
<IgrGridToolbar
>
<IgrGridToolbarTitle
>
</IgrGridToolbarTitle>
<IgrGridToolbarActions
>
<IgrGridToolbarHiding
>
</IgrGridToolbarHiding>
</IgrGridToolbarActions>
</IgrGridToolbar>
<IgrColumn
name="ID"
field="ID"
header="ID"
dataType="String"
sortable="true">
</IgrColumn>
<IgrColumn
name="ContactName"
field="ContactName"
header="Name"
dataType="String"
sortable="true">
</IgrColumn>
<IgrColumn
name="ContactTitle"
field="ContactTitle"
header="Title"
dataType="String"
sortable="true">
</IgrColumn>
<IgrColumn
name="City"
field="City"
header="City"
dataType="String"
sortable="true">
</IgrColumn>
<IgrColumn
name="Company"
field="Company"
header="Company"
dataType="String"
sortable="true">
</IgrColumn>
<IgrColumn
name="Fax"
field="Fax"
header="Fax"
dataType="String"
sortable="true">
</IgrColumn>
<IgrColumn
name="Address"
field="Address"
header="Address"
dataType="String"
sortable="true">
</IgrColumn>
<IgrColumn
name="PostalCode"
field="PostalCode"
header="Postal Code"
dataType="String"
sortable="true">
</IgrColumn>
<IgrColumn
name="Country"
field="Country"
header="Country"
dataType="String"
sortable="true">
</IgrColumn>
<IgrColumn
name="Phone"
field="Phone"
header="Phone"
dataType="String"
sortable="true">
</IgrColumn>
</IgrGrid>
</div>
</div>
);
}
private _customersData: CustomersData = null;
public get customersData(): CustomersData {
if (this._customersData == null)
{
this._customersData = new CustomersData();
}
return this._customersData;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
WebGridDescriptionModule.register(context);
}
return this._componentRenderer;
}
}
// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsx/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
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 de cuadrícula
Comencemos creando nuestro IgrGrid
y vinculándolo a nuestros datos. También habilitaremos el filtrado y la clasificación de las columnas.
<IgrGrid autoGenerate="false" width="100%" height="560px" allowFiltering="true">
<IgrColumn field="ID" dataType="string" sortable="true" hidden="true"></IgrColumn>
<IgrColumn field="ContactName" dataType="String" sortable="true" hidden="true"></IgrColumn>
<IgrColumn field="ContactTitle" dataType="string" sortable="true"></IgrColumn>
<IgrColumn field="City" dataType="string" sortable="true"></IgrColumn>
<IgrColumn field="CompanyName" dataType="string" sortable="true"></IgrColumn>
<IgrColumn field="Fax" dataType="string" sortable="true"></IgrColumn>
<IgrColumn field="Address" dataType="string" sortable="true"></IgrColumn>
<IgrColumn field="PostalCode" dataType="string" sortable="true"></IgrColumn>
<IgrColumn field="Country" dataType="string" sortable="true"></IgrColumn>
<IgrColumn field="Phone" dataType="string" sortable="true"></IgrColumn>
</IgrGrid>
tsx
IU para ocultar columnas de la barra de herramientas
La interfaz de usuario integrada para ocultar columnas se coloca dentro de un DropDown
en la barra de herramientas de IgrGrid
. Podemos mostrar/ocultar la interfaz de usuario de ocultación de columnas usando este menú desplegable exacto.
Para este propósito, todo lo que tenemos que hacer es configurar tanto IgrGridToolbarActions
como IgrGridToolbarHiding
dentro de IgrGrid
. También agregaremos un título a nuestra barra de herramientas usando IgrGridToolbarTitle
y un estilo personalizado para el contenedor de nuestra Grid.
<IgrGrid>
<IgrGridToolbar key="toolbar">
<IgrGridToolbarActions key="toolbarActions">
<IgrGridToolbarHiding key="toolbarHiding"></IgrGridToolbarHiding>
</IgrGridToolbarActions>
</IgrGridToolbar>
</IgrGrid>
tsx
IgrGrid
nos proporciona algunas propiedades útiles cuando se trata de usar la interfaz de usuario para ocultar 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.
<IgrGrid>
<IgrGridToolbar key="toolbar">
<IgrGridToolbarActions key="toolbarActions">
<IgrGridToolbarHiding key="toolbarHiding" title="Column Hiding"></IgrGridToolbarHiding>
</IgrGridToolbarActions>
</IgrGridToolbar>
</IgrGrid>
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.
<IgrGrid>
<IgrColumn field="ContactName" dataType="string" sortable="true" disableHiding="true"></IgrColumn>
<IgrColumn field="ContactTitle" dataType="string" sortable="true" disableHiding="true"></IgrColumn>
</IgrGrid>
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:
<IgrGrid className="grid"></IgrGrid>
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:
.grid igx-column-actions {
/* Main Column Actions styles */
--ig-column-actions-background-color: #292826;
--ig-column-actions-title-color: #ffcd0f;
/* Checkbox styles */
--ig-checkbox-tick-color: #292826;
--ig-checkbox-label-color: #ffcd0f;
--ig-checkbox-empty-color: #ffcd0f;
--ig-checkbox-fill-color: #ffcd0f;
/* Input styles */
--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;
/* Buttons styles */
--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
export class CustomersDataItem {
public constructor(init: Partial<CustomersDataItem>) {
Object.assign(this, init);
}
public ID: string;
public Company: string;
public ContactName: string;
public ContactTitle: string;
public Address: string;
public City: string;
public Region: string;
public PostalCode: number;
public Country: string;
public Phone: string;
public Fax: string;
}
export class CustomersData extends Array<CustomersDataItem> {
public constructor(items: Array<CustomersDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CustomersDataItem(
{
ID: `ALFKI`,
Company: `Alfreds Futterkiste`,
ContactName: `Maria Anders`,
ContactTitle: `Sales Representative`,
Address: `Obere Str. 57`,
City: `Berlin`,
Region: `East`,
PostalCode: 12209,
Country: `Germany`,
Phone: `030-0074321`,
Fax: `030-0076545`
}),
new CustomersDataItem(
{
ID: `ANATR`,
Company: `Ana Trujillo Emparedados y helados`,
ContactName: `Ana Trujillo`,
ContactTitle: `Owner`,
Address: `Avda. de la Constitución 2222`,
City: `México D.F.`,
Region: `South`,
PostalCode: 5021,
Country: `Mexico`,
Phone: `(5) 555-4729`,
Fax: `(5) 555-3745`
}),
new CustomersDataItem(
{
ID: `ANTON`,
Company: `Antonio Moreno Taquería`,
ContactName: `Antonio Moreno`,
ContactTitle: `Owner`,
Address: `Mataderos 2312`,
City: `México D.F.`,
Region: `South`,
PostalCode: 5023,
Country: `Mexico`,
Phone: `(5) 555-3932`,
Fax: `(5) 555-3745`
}),
new CustomersDataItem(
{
ID: `AROUT`,
Company: `Around the Horn`,
ContactName: `Thomas Hardy`,
ContactTitle: `Sales Representative`,
Address: `120 Hanover Sq.`,
City: `London`,
Region: `East`,
PostalCode: 22000,
Country: `UK`,
Phone: `(171) 555-7788`,
Fax: `(171) 555-6750`
}),
new CustomersDataItem(
{
ID: `BERGS`,
Company: `Berglunds snabbköp`,
ContactName: `Christina Berglund`,
ContactTitle: `Order Administrator`,
Address: `Berguvsvägen 8`,
City: `Luleå`,
Region: `South`,
PostalCode: 17000,
Country: `Sweden`,
Phone: `0921-12 34 65`,
Fax: `0921-12 34 67`
}),
new CustomersDataItem(
{
ID: `BLAUS`,
Company: `Blauer See Delikatessen`,
ContactName: `Hanna Moos`,
ContactTitle: `Sales Representative`,
Address: `Forsterstr. 57`,
City: `Mannheim`,
Region: `East`,
PostalCode: 68306,
Country: `Germany`,
Phone: `0621-08460`,
Fax: `0621-08924`
}),
new CustomersDataItem(
{
ID: `BLONP`,
Company: `Blondesddsl père et fils`,
ContactName: `Frédérique Citeaux`,
ContactTitle: `Marketing Manager`,
Address: `24, place Kléber`,
City: `Strasbourg`,
Region: `East`,
PostalCode: 67000,
Country: `France`,
Phone: `88.60.15.31`,
Fax: `88.60.15.32`
}),
new CustomersDataItem(
{
ID: `BOLID`,
Company: `Bólido Comidas preparadas`,
ContactName: `Martín Sommer`,
ContactTitle: `Owner`,
Address: `C/ Araquil, 67`,
City: `Madrid`,
Region: `East`,
PostalCode: 28023,
Country: `Spain`,
Phone: `(91) 555 22 82`,
Fax: `(91) 555 91 99`
}),
new CustomersDataItem(
{
ID: `BONAP`,
Company: `Bon app'`,
ContactName: `Laurence Lebihan`,
ContactTitle: `Owner`,
Address: `12, rue des Bouchers`,
City: `Marseille`,
Region: `West`,
PostalCode: 13008,
Country: `France`,
Phone: `91.24.45.40`,
Fax: `91.24.45.41`
}),
new CustomersDataItem(
{
ID: `BOTTM`,
Company: `Bottom-Dollar Markets`,
ContactName: `Elizabeth Lincoln`,
ContactTitle: `Accounting Manager`,
Address: `23 Tsawassen Blvd.`,
City: `Tsawassen`,
Region: `BC`,
PostalCode: 28000,
Country: `Canada`,
Phone: `(604) 555-4729`,
Fax: `(604) 555-3745`
}),
new CustomersDataItem(
{
ID: `BSBEV`,
Company: `B's Beverages`,
ContactName: `Victoria Ashworth`,
ContactTitle: `Sales Representative`,
Address: `Fauntleroy Circus`,
City: `London`,
Region: `South`,
PostalCode: 10000,
Country: `UK`,
Phone: `(171) 555-1212`,
Fax: `(5) 555-3745`
}),
new CustomersDataItem(
{
ID: `CACTU`,
Company: `Cactus Comidas para llevar`,
ContactName: `Patricio Simpson`,
ContactTitle: `Sales Agent`,
Address: `Cerrito 333`,
City: `Buenos Aires`,
Region: `East`,
PostalCode: 1010,
Country: `Argentina`,
Phone: `(1) 135-5555`,
Fax: `(1) 135-4892`
}),
new CustomersDataItem(
{
ID: `CENTC`,
Company: `Centro comercial Moctezuma`,
ContactName: `Francisco Chang`,
ContactTitle: `Marketing Manager`,
Address: `Sierras de Granada 9993`,
City: `México D.F.`,
Region: `South`,
PostalCode: 5022,
Country: `Mexico`,
Phone: `(5) 555-3392`,
Fax: `(5) 555-7293`
}),
new CustomersDataItem(
{
ID: `CHOPS`,
Company: `Chop-suey Chinese`,
ContactName: `Yang Wang`,
ContactTitle: `Owner`,
Address: `Hauptstr. 29`,
City: `Bern`,
Region: `East`,
PostalCode: 3012,
Country: `Switzerland`,
Phone: `0452-076545`,
Fax: `(5) 555-3745`
}),
new CustomersDataItem(
{
ID: `COMMI`,
Company: `Comércio Mineiro`,
ContactName: `Pedro Afonso`,
ContactTitle: `Sales Associate`,
Address: `Av. dos Lusíadas, 23`,
City: `Sao Paulo`,
Region: `SP`,
PostalCode: 34000,
Country: `Brazil`,
Phone: `(11) 555-7647`,
Fax: `(5) 555-3745`
}),
new CustomersDataItem(
{
ID: `CONSH`,
Company: `Consolidated Holdings`,
ContactName: `Elizabeth Brown`,
ContactTitle: `Sales Representative`,
Address: `Berkeley Gardens 12 Brewery`,
City: `London`,
Region: `South`,
PostalCode: 27000,
Country: `UK`,
Phone: `(171) 555-2282`,
Fax: `(171) 555-9199`
}),
new CustomersDataItem(
{
ID: `DRACD`,
Company: `Drachenblut Delikatessen`,
ContactName: `Sven Ottlieb`,
ContactTitle: `Order Administrator`,
Address: `Walserweg 21`,
City: `Aachen`,
Region: `South`,
PostalCode: 52066,
Country: `Germany`,
Phone: `0241-039123`,
Fax: `0241-059428`
}),
new CustomersDataItem(
{
ID: `DUMON`,
Company: `Du monde entier`,
ContactName: `Janine Labrune`,
ContactTitle: `Owner`,
Address: `67, rue des Cinquante Otages`,
City: `Nantes`,
Region: `East`,
PostalCode: 44000,
Country: `France`,
Phone: `40.67.88.88`,
Fax: `40.67.89.89`
}),
new CustomersDataItem(
{
ID: `EASTC`,
Company: `Eastern Connection`,
ContactName: `Ann Devon`,
ContactTitle: `Sales Agent`,
Address: `35 King George`,
City: `London`,
Region: `East`,
PostalCode: 41000,
Country: `UK`,
Phone: `(171) 555-0297`,
Fax: `(171) 555-3373`
}),
new CustomersDataItem(
{
ID: `ERNSH`,
Company: `Ernst Handel`,
ContactName: `Roland Mendel`,
ContactTitle: `Sales Manager`,
Address: `Kirchgasse 6`,
City: `Graz`,
Region: `South`,
PostalCode: 8010,
Country: `Austria`,
Phone: `7675-3425`,
Fax: `7675-3426`
}),
new CustomersDataItem(
{
ID: `FAMIA`,
Company: `Familia Arquibaldo`,
ContactName: `Aria Cruz`,
ContactTitle: `Marketing Assistant`,
Address: `Rua Orós, 92`,
City: `Sao Paulo`,
Region: `SP`,
PostalCode: 27000,
Country: `Brazil`,
Phone: `(11) 555-9857`,
Fax: `(5) 555-3745`
}),
new CustomersDataItem(
{
ID: `FISSA`,
Company: `FISSA Fabrica Inter. Salchichas S.A.`,
ContactName: `Diego Roel`,
ContactTitle: `Accounting Manager`,
Address: `C/ Moralzarzal, 86`,
City: `Madrid`,
Region: `East`,
PostalCode: 28034,
Country: `Spain`,
Phone: `(91) 555 94 44`,
Fax: `(91) 555 55 93`
}),
new CustomersDataItem(
{
ID: `FOLIG`,
Company: `Folies gourmandes`,
ContactName: `Martine Rancé`,
ContactTitle: `Assistant Sales Agent`,
Address: `184, chaussée de Tournai`,
City: `Lille`,
Region: `South`,
PostalCode: 59000,
Country: `France`,
Phone: `20.16.10.16`,
Fax: `20.16.10.17`
}),
new CustomersDataItem(
{
ID: `FOLKO`,
Company: `Folk och fä HB`,
ContactName: `Maria Larsson`,
ContactTitle: `Owner`,
Address: `Åkergatan 24`,
City: `Bräcke`,
Region: `East`,
PostalCode: 36000,
Country: `Sweden`,
Phone: `0695-34 67 21`,
Fax: `0695 33-4455`
}),
new CustomersDataItem(
{
ID: `FRANK`,
Company: `Frankenversand`,
ContactName: `Peter Franken`,
ContactTitle: `Marketing Manager`,
Address: `Berliner Platz 43`,
City: `München`,
Region: `East`,
PostalCode: 80805,
Country: `Germany`,
Phone: `089-0877310`,
Fax: `089-0877451`
}),
new CustomersDataItem(
{
ID: `FRANR`,
Company: `France restauration`,
ContactName: `Carine Schmitt`,
ContactTitle: `Marketing Manager`,
Address: `54, rue Royale`,
City: `Nantes`,
Region: `South`,
PostalCode: 44000,
Country: `France`,
Phone: `40.32.21.21`,
Fax: `40.32.21.20`
}),
new CustomersDataItem(
{
ID: `FRANS`,
Company: `Franchi S.p.A.`,
ContactName: `Paolo Accorti`,
ContactTitle: `Sales Representative`,
Address: `Via Monte Bianco 34`,
City: `Torino`,
Region: `East`,
PostalCode: 10100,
Country: `Italy`,
Phone: `011-4988260`,
Fax: `011-4988261`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrGridModule } from "@infragistics/igniteui-react-grids";
import { IgrGrid, IgrGridToolbar, IgrGridToolbarTitle, IgrGridToolbarActions, IgrGridToolbarHiding, IgrColumn } from "@infragistics/igniteui-react-grids";
import { ComponentRenderer, WebGridDescriptionModule } from "@infragistics/igniteui-react-core";
import { CustomersDataItem, CustomersData } from './CustomersData';
import "@infragistics/igniteui-react-grids/grids/combined";
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css";
const mods: any[] = [
IgrGridModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component<any, any> {
private grid: IgrGrid
private gridRef(r: IgrGrid) {
this.grid = r;
this.setState({});
}
private iD: IgrColumn
private contactName: IgrColumn
private contactTitle: IgrColumn
private city: IgrColumn
private company: IgrColumn
private fax: IgrColumn
private address: IgrColumn
private postalCode: IgrColumn
private country: IgrColumn
private phone: IgrColumn
constructor(props: any) {
super(props);
this.gridRef = this.gridRef.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample ig-typography">
<div className="container fill">
<IgrGrid
autoGenerate="false"
ref={this.gridRef}
id="grid"
data={this.customersData}
columnWidth="200px"
allowFiltering="true"
columnSelection="Single">
<IgrGridToolbar
>
<IgrGridToolbarTitle
>
</IgrGridToolbarTitle>
<IgrGridToolbarActions
>
<IgrGridToolbarHiding
>
</IgrGridToolbarHiding>
</IgrGridToolbarActions>
</IgrGridToolbar>
<IgrColumn
name="ID"
field="ID"
header="ID"
dataType="String"
sortable="true">
</IgrColumn>
<IgrColumn
name="ContactName"
field="ContactName"
header="Name"
dataType="String"
sortable="true">
</IgrColumn>
<IgrColumn
name="ContactTitle"
field="ContactTitle"
header="Title"
dataType="String"
sortable="true">
</IgrColumn>
<IgrColumn
name="City"
field="City"
header="City"
dataType="String"
sortable="true">
</IgrColumn>
<IgrColumn
name="Company"
field="Company"
header="Company"
dataType="String"
sortable="true">
</IgrColumn>
<IgrColumn
name="Fax"
field="Fax"
header="Fax"
dataType="String"
sortable="true">
</IgrColumn>
<IgrColumn
name="Address"
field="Address"
header="Address"
dataType="String"
sortable="true">
</IgrColumn>
<IgrColumn
name="PostalCode"
field="PostalCode"
header="Postal Code"
dataType="String"
sortable="true">
</IgrColumn>
<IgrColumn
name="Country"
field="Country"
header="Country"
dataType="String"
sortable="true">
</IgrColumn>
<IgrColumn
name="Phone"
field="Phone"
header="Phone"
dataType="String"
sortable="true">
</IgrColumn>
</IgrGrid>
</div>
</div>
);
}
private _customersData: CustomersData = null;
public get customersData(): CustomersData {
if (this._customersData == null)
{
this._customersData = new CustomersData();
}
return this._customersData;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
WebGridDescriptionModule.register(context);
}
return this._componentRenderer;
}
}
// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsx/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
.grid igc-grid-toolbar-actions, igx-column-actions {
--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;
--igx-button-foreground: #292826;
--igx-button-background: #ffcd0f;
--igx-button-hover-background: #404040;
--igx-button-hover-foreground: #ffcd0f;
--igx-button-focus-background: #ffcd0f;
--igx-button-focus-foreground: black;
--igx-button-focus-visible-background: #ffcd0f;
--igx-button-focus-visible-foreground: black;
--igx-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 IgrGrid
barra de herramientas. La columna que oculta la interfaz de usuario tiene algunas API más para explorar, que se enumeran a continuación.
ColumnActionsComponent
Componentes adicionales con API relativas que se utilizaron:
IgrColumn
properties:
IgrGridToolbar
properties:
showProgress
IgrGridToolbar
methods:
IgrGrid
events:
ColumnVisibilityChanged
Recursos adicionales
- Virtualización y rendimiento
- Filtración
- Paginación
- Clasificación
- resúmenes
- Fijación de columnas
- Cambio de tamaño de columna
- Selección
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.